The basic components of the document
The appearance of web pages is diverse, but in addition to full-screen videos or games, or artwork pages, or just improperly structured pages, they tend to use similar standard components:
Header
There is usually a headline and/or a logo across the top of the page. This is the main general information of the website, which usually exists on all pages.
Navigation Bar
Hyperlinks to the main sections of the website. It is usually represented by menu buttons, links, or tabs. Similar to the title bar, the navigation bar should generally be consistent across all web pages, otherwise it will make users feel confused and even confused. Many web designers think that the navigation bar is part of the title bar, rather than a separate component, but this is not absolute; others believe that the two independent can provide better accessibility features , because screen readers can distinguish more clearly both.
Main content
Most areas of the center are most of the unique content of the current webpage, such as videos, articles, maps, news, etc. These contents are part of the website and will vary from page to page.
Sidebar
Some peripheral information, links, references, advertisements, etc. Usually related to the main content (for example, on a news page, the sidebar may contain author information or links to related articles), and there may also be other repetitive elements, such as auxiliary navigation systems.
Footer
A long narrow area across the bottom of the page. Like the title, the footer is for public information (such as copyright notice or contact information), usually in smaller fonts, and usually secondary content. You can also perform SEO by providing quick access links .
HTML used to build content
In order to achieve semantic markup, HTML provides special tags to clarify these sections, for example:
<header>: Header.<nav>:Navigation Bar.<main>: Main content. There can also be various sub-content sections in the main content, which can be represented by elements such as<article>,<section>and<div>.<aside>: Sidebar, often nested in<main>.<footer>: Footer.
HTML layout element details
It is very helpful to understand the specific meaning of all HTML section elements, which will become more and more obvious with the gradual enrichment of personal web development experience. For more details, please refer to the HTML element reference . Now, you only need to understand the meaning of the following main elements:
<main>Store the unique content of each page. It can only be used once on each page<main>, and it is located directly in the<body>middle. It is best not to nest it into other elements.<article>The enclosed content is an article and has nothing to do with other parts of the page (such as a blog post).<section>And<article>similar, but<section>more so that it applies to your organization by function page (such as the mini-map, a set of articles title and abstract) block. The general best usage is: start with the title ; you can also divide an article<article>into several parts and put them in different parts<section>, or divide a section<section>into several parts and put them in different parts<article>, depending on the context.<aside>Contains some indirect information (term entries, author profiles, related links, etc.).<header>It is the content in the form of an introduction. If it is<body>a child element, then it is the global header of the website. If it is a child element of<article>or<section>, then it is a header specific to these sections (this is<header>not the title ).<nav>Contains the page main navigation function. It should not contain content such as secondary links.<footer>Contains the footer part of the page.
No semantic element
Sometimes you will find that for some items to be organized or content to be packaged, none of the existing semantic elements correspond well. Sometimes you may just want to decorate a group of elements as a single entity to respond to a single CSS or JavaScript . In order to deal with this situation, HTML provides <div> and <span> elements. class Some tags should be provided in conjunction with attributes so that these elements can be easily queried.
Line break and horizontal dividing line
Sometimes two elements are used <br> and <hr>need to be introduced.
<br> It can be wrapped in paragraphs; it <br> is the only element that can generate multiple short-line structures (such as mailing addresses or poems). such as:
<p>从前有个人叫小高<br>
他说写 HTML 感觉最好<br>
但他写的代码结构语义一团糟<br>
他写的标签谁也懂不了。</p>
Without <br> elements, this paragraph will be displayed directly in a long line (as mentioned earlier, HTML will ignore most of the spaces ); using <br> elements makes the poem look like a poem:
There used to be a person named Xiao Gao
who said that HTML feels the best,
but the code structure and semantics of the code
he wrote are messed up . No one can understand the tags he wrote.
<hr> The element generates a horizontal dividing line in the document, indicating the change of the theme in the text (for example, the change of the topic or the scene). It is generally a horizontal straight line. E.g:
<p>It turns out that this Tang monk is a merciful holy monk. When he saw the walker bemoaning, he changed his mind and said: "If you say so, and forgive you this time. Don't be rude again. If you still do evil, recite the spell twenty times upside down!" You, it's just that I won't beat people anymore." However, he served Monk Tang and mounted his horse, and offered the picked peaches. Tang Seng also ate a few immediately, and was able to satisfy his hunger. </p> <hr> <p>But said that the fairy had escaped from his life. It turned out that Xingzhe never killed the goblin with that stick, and the goblin was in a trance. He was in the cloud, gritted his teeth, and hated the walker: "I have only heard about his methods for a few years, and today it is true that the words are true. That Tang monk does not recognize me, and is about to eat. If I bow my head and smell it, I will I caught it, but it was not my person. He came over unexpectedly, broke my business, and was almost beaten by him. If this monk is spared, it is indeed a hard work and no work. I still have it. Go down to play him."</p>
Will be rendered as:
It turns out that this Tang monk is a merciful holy monk. When he saw the walker bemoaning, he changed his mind and said: "If you say so, and forgive you this time. Don't be rude again. If you still do evil, recite the spell twenty times upside down!" You, it's just that I won't beat people anymore." However, he served Monk Tang and mounted his horse, and offered the picked peaches. Tang Seng also ate a few immediately, and was able to satisfy his hunger.
But said that the goblin had escaped from his life and lifted into the air. It turned out that Xingzhe never killed the goblin with that stick, and the goblin was in a trance. He was in the cloud, gritted his teeth, and hated the walker: "I have only heard about his methods for a few years, and today it is true that the words are true. That Tang monk does not recognize me, and is about to eat. If I bow my head and smell it, I will I caught it, but it was not my person. He came over unexpectedly, broke my business, and was almost beaten by him. If this monk is spared, it is indeed a hard work and no work. I still have it. Go down to play him."