Shulou(Shulou.com)06/03 Report--

Editor to share with you a sample analysis of the basis of Web web pages, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. The composition of a web page

The web page can be divided into three parts, HTML, CSS, JavaScript, we compare the web page to a person, HTML is equivalent to skeleton, JavaScript is equivalent to muscle, CSS is equivalent to skin, the three can be combined to form a perfect web page, let's introduce the functions of the three parts respectively.

HTML

HTML is a language used to describe web pages, its full name is Hyper Text Markup Language, that is, hypertext markup language. Web pages include text, buttons, pictures, videos and other complex elements, and its infrastructure is HTML. Different types of text are represented by different types of tags, such as pictures with img tags, videos with video tags, paragraphs with p tags, and the layout between them is often formed by the nesting combination of layout tags div, and various tags form the frame of the web page through different arrangement and nesting.

We open Baidu in the Chrome browser, right-click the review element or press F12 to open the developer mode, and switch to the Elements tab to see the source code of the web page, as shown in figure 2-10:

Figure 2-10 source code

This is HTML, the whole web page is made up of different tags. The node elements defined by these different tags are nested and combined to form a complex hierarchical relationship, which forms the structure of the web page.

CSS

HTML defines the structure of the web page, but only the layout of the HTML page will not be beautiful, and it may just be a simple arrangement of node elements, so in order to make the web page look better, use CSS here.

CSS, whose full name is Cascading Style Sheets, is cascading stylesheets. "cascading" means that when several style files are referenced in HTML and the styles conflict, the browser can process them according to the cascading order. "style" refers to the format of text size, color, element spacing, arrangement and so on.

CSS is currently the only web page typesetting style standard, with its help, the page will become more beautiful.

On the right side of the above figure is CSS, for example:

# head_wrapper.s-ps-islite .s-p-top {position: absolute; bottom: 40px; width: 100%; height: 181px;} Python Resource sharing qun 784758214, with installation packages, PDF, learning videos, here is a gathering place for Python learners, zero basic, advanced, welcome

This is a CSS style, and before the curly braces is a CSS selector, which means to select an element whose id is head_wrapper and class is s-ps-islite 's internal class is s-p-top. What is written inside the curly braces are style rules. For example, position specifies that the layout of this element is absolute, bottom specifies that the bottom margin of the element is 40 pixels, width specifies that the width is 100% of the parent element, and height specifies the height of the element. In other words, we uniformly write some style configurations such as position, width, height, etc., in large brackets, and then add a CSS selector at the beginning, which means that this style takes effect on the element selected by the CSS selector, so that the element will be displayed according to this style.

So in the page, generally will uniformly define the style rules of the entire page, written to the CSS file, its suffix is css, in HTML only need to use link tags to introduce the written CSS file, so the whole page will become beautiful and elegant.

JavaScript

JavaScript, referred to as JS for short, is a scripting language, HTML and CSS are used together to provide users with only a kind of static information, lack of interaction. We may see some interactive and animated effects on the web page, such as download progress bars, prompt boxes, broadcast pictures, etc., which is usually the credit of JavaScript. The emergence of it makes the relationship between users and information not only a relationship of browsing and display, but also a real-time, dynamic and interactive page function.

JavaScript is also usually loaded as a separate file with the suffix js, which can be introduced in HTML through the script tag.

For example:

So to sum up, HTML defines the content and structure of web pages, CSS describes the layout of web pages, and JavaScript defines the behavior of web pages.

These are the three basic components of a web page.

two。 The structure of the web page

Let's first use an example to feel the basic structure of HTML. Create a new text file with a name of your own and a suffix of html, with the following contents:

This is a Demo Hello World Hello, this is a paragraph.

Python resource sharing qun 784758214, with installation packages, PDF, learning videos, here is a gathering place for Python learners, zero basics, advanced, welcome

This is the simplest HTML instance, starting with DOCTYPE defining the document type, followed by the outermost html tag, and finally the corresponding ending represents the tag closure, the interior is the head tag and the body tag, representing the page header and the web page body, respectively, they also need the tail tag to indicate closure. Some page configurations and references are defined in the head tag, such as:

It specifies that the encoding of the web page is UTF-8.

The title tag defines the title of the page, which is displayed in the tab of the page, not in the body of the page. Body tag is the content displayed in the body of the page, div tag defines the block in the page, its id is container, this is a very commonly used attribute, and the content of id is unique in the page, we can get this block through id. Then there is a div tag inside this block, whose class is wrapper, which is also a very common attribute that is often used with CSS to set styles. Then there is an h3 tag inside the block, which represents a secondary title, and a p tag, which represents a paragraph, both of which can be re-rendered on the page by writing the corresponding content directly inside, and they also have their own class attributes.

After we save the code and open the file in the browser, we can see the following, as shown in figure 2-11:

Figure 2-11 running result

You can see that the word This is a Demo is displayed on the tab, which is the text we defined in the title in head, which is displayed in the web tab. The body of the web page is generated by the elements defined within the body tag, and you can see that the secondary headings and paragraphs are displayed in the page.

As the example above is the general structure of a web page, the standard form of a web page is the nesting of head and body tags within html tags, the configuration and reference of web pages are defined in head, and the body of web pages is defined in body.

3. Node and node relationship

In HTML, the content defined by all tags is nodes, and they form a HTML DOM tree.

Let's first take a look at what DOM,DOM is the W3C (World wide Web Consortium) standard.

DOM, English full name Document Object Model, namely document object model. It defines the criteria for accessing HTML and XML documents:

The W3C document object Model (DOM) is a platform-and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

The W3C DOM standard is divided into three different parts:

Core DOM-a standard model for any structured document

XML DOM-A standard model for XML documents

HTML DOM-A standard model for HTML documents

According to the W3C HTML DOM standard, everything in an HTML document is a node:

The entire document is a document node

Each HTML element is an element node

The text within the HTML element is a text node

Each HTML attribute is an attribute node comment is

Comment Node HTML

DOM treats HTML documents as tree structures, which are called node trees, as shown in figure 2-12:

Figure 2-12 node tree

With HTML DOM, all nodes in the tree can be accessed through JavaScript, and all HTML node elements can be modified, created or deleted.

The nodes in the node tree have hierarchical relationships with each other. We often use terms such as parent, child, and sibling to describe these relationships. The parent node has child nodes, and sibling child nodes are called sibling nodes.

In the node tree, the top node is called root, and each node has a parent node except the root node, and can have any number of child or sibling nodes.

Figure 2-13 shows the node tree and the relationship between nodes:

Figure 2-13 Node Tree and Node relationship

4. Selector

We know that a web page is made up of nodes, and the CSS selector sets different style rules according to different nodes, so how do we define which nodes?

In CSS, the CSS selector is used to locate the node. For example, if the id of a div node in the above example is container, then we can use the CSS selector to start with # container,# to represent the selection id, followed by the name of the id. In addition, if we want to choose a node whose class is wrapper, we can use .wrapper,. The beginning represents selecting class, followed by the name of class. Another choice is to filter according to the tag name. For example, if we want to select a secondary title, we can choose it directly with h3. As above are the three most commonly used alternative representations, which are filtered based on id, class, and tag names, please keep in mind how they are written.

In addition, CSS selectors also support nested selections, which can be represented by spaces separated between selectors. For example, # container .wrapper p means that the class inside container is selected as the p node inside wrapper. In addition, if no space is added, it represents a juxtaposition relationship. For example, div#container .wrapper p.text represents the class inside the div node that chooses id as container, and the class inside the wrapper node as the p node of text. This is the CSS selector, and its filtering function is still very powerful.

In addition, the CSS selector has some other syntax rules, which are sorted out here as follows:

The selector example describes how. Class. Intro selects all nodes of the class= "intro". # id#firstname Select all nodes of id= "firstname". * * Select all nodes. Elementp selects all p nodes. Element,elementdiv,p selects all div nodes and all p nodes. Element elementdiv p selects all p nodes inside the div node. Element > elementdiv > p Select all p nodes whose parent is the div node. Element+elementdiv+p selects all p nodes immediately after the div node. [attribute] [target] Select all nodes with the target attribute. [attribute=value] [target=blank] Select all nodes of the target= "blank". [attribute~=value] [title~=flower] Select all nodes where the title attribute contains the word "flower". Linka:link selects all links that have not been accessed : visiteda:visited selects all links that have been visited. : activea:active selects the active link. Hovera:hover selects the link over which the mouse pointer is positioned Focusinput:focus selects the input node that gets the focus : first-letterp:first-letter selects the initials of each p node. : first-linep:first-line selects the first line of each p node. First-childp:first-child selects each p node that belongs to the first child node of the parent node : beforep:before inserts content before the content of each p node. : afterp:after inserts content after the content of each p node. : lang (language) p:lang selects each p node with the value of the lang attribute starting with "it". Element1~element2p~ul selects each ul node preceded by a p node. [attribute ^ = value] a [src ^ = "https"] Select each a node whose src attribute value begins with "https". [attribute$=value] a [src$= ".pdf"] Select all a nodes whose src attribute ends with ".pdf". [attribute*=value] a [src*= "abc"] Select each a node whose src attribute contains the "abc" substring. First-of-typep:first-of-type selects each p node that belongs to the first p node of its parent node Last-of-typep:last-of-type selects each p node that belongs to the last p node of its parent node. Only-of-typep:only-of-type selects each p node that belongs to a p node that is unique to its parent. Only-childp:only-child selects each p node that belongs to the only child node of its parent node Nth-child (n) p:nth-child selects each p node that belongs to the second child node of its parent node. : nth-last-child (n) p:nth-last-child as above, counting from the last child node. Nth-of-type (n) p:nth-of-type selects each p node that belongs to the second p node of its parent node. : nth-last-of-type (n) p:nth-last-of-type is the same as above, but counts from the last child node. Last-childp:last-child selects each p node that belongs to the last child of its parent node. : root:root selects the root node of the document. : emptyp:empty selects each p node (including text nodes) that has no child nodes. : target#news:target selects the currently active # news node. : enabledinput:enabled selects each enabled input node. Disabledinput:disabled selects each disabled input node: checkedinput:checked selects each selected input node. : not (selector) p:not selects each node that is not a p node. :: selection::selection selects the part of the node selected by the user.

Another more commonly used selector is XPath, which will be described in detail later.

The above is all the contents of this article "sample Analysis of the basis of Web Web pages". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.