[Original] Web Front-end development practices-Reading Notes HTML section

Book note

Writing high-quality code-the way to Web Front-end development and practice, it took a day to get a little excited. I haven't read a book like this for a long time. Although it is fast, it has gained a lot. Especially when I saw the HTML and CSS sections, I found that HTML was originally to be written in this way, and CSS could have been written in this way. Due to the high expectation for the JS part, the whole book also looks at this part. I feel that it is not as good as the first two parts, and the content is basically familiar, and some of them are still relatively old in writing, for example, typeof is still used in the type book, and currently basically all objects are used. prototype. toString (), but there are also a lot of gains, especially how to better coordinate development in the team, are all experience stories worth learning.

The whole book feels that the structure is clear and the knowledge points are full and not boring. It is worth reading by any front-end developers.

Abstract important and interesting knowledge points for review.

Significance of HTML-semantic tagging semantic tags

• Establish good communication with search engines to help crawlers capture more effective information, such as h1 ~ H6 and strong are used for titles with different weights, text hiding, etc.
• Improve the user experience, such as title and alt, for interpreting nouns or interpreting image information, such as label labels;
• Code readable, easy to maintain, improved development efficiency, and quickly reached consensus,
• The expansion of semantic tags by industrial organizations and the technical support of browser vendors have gradually increased. For example, html5, which has just been promoted by the web Standardization Organization, has added many semantic tags, such as header, aside, nav, section, and so on, are well supported in Chrome, opera, safari, firefox and other browsers.

Select a proper tag

• <Hx>

<H1>,

• <P>

When you understand p as a paragraph, you will not use <br/> to wrap the paragraph, and you do not need to <br/> distinguish between the paragraph and paragraph. The text in p will automatically wrap, and the effect of line feed is better than <br/>. CSS can also be used to control the gaps between paragraphs. It is easy and clear to distinguish between paragraphs and paragraphs.

• <Ul>, <ol>, <li>

<Ul> unordered list, which is widely used. <ol> ordered list is also quite common. In the web standardization process, <ul> is also used for navigation bars. Originally, navigation bars are a list. This is completely correct, in addition, when your browser does not support CSS, the navigation link is still very good, but the appearance is a little worse.

• <Dl>, <dt>, <dd>

Dl is the "definition list ". For example, this list can be used to explain and define words in a dictionary.

• <Em>, <strong>

<Em> it is used for emphasis, and strong is used for emphasis.

• <Table>, <td>, <th>, <caption>, and summary

Tables in XHTML are no longer used for layout. To mark the data in the list, you should use the table. <Th> is the table title, and the attribute summar is the abstract (to improve the search ranking, this should never be less). <caption> the label is the first description, the <thead> label is the table header, the <tbody> label is the table master body content, and the <tfoot> label is the end of the table.

• <Ins>, <del>

If you know del, do not use <s> to delete the line. del is obviously more semantic. In addition, del also has cite and datetime to indicate the reason for deletion and the deletion time. Ins indicates insertion.

• <Abbr>, <acronym>

<Abbr> A tag is short for a web page, and <acronym> is the abbreviation.

• Alt and title attributes

The title attribute is used to provide additional information for the element, but is not required.

If the alt attribute is a user agent (UA) that cannot display images, forms, or applets, replace the text. The language used to replace text is specified by the lang attribute.

How to determine if it is appropriate

When the style is removed or lost, the page is displayed with a clear structure: HTML itself is not shown, for example,

CSS nude day

Series knowledge links

[Original] Web Front-end development practices-CSS part of Reading Notes

[Original] Web Front-end development practices-JavaScript part of Reading Notes

[Original] JavaScript Knowledge series