HTML5+CSS3 Study Notes (iii)

Open a Web page, look at the source code, you will find that most of the HTML content is still text, not to mention HTML itself is called Hypertext Markup Language, so most of the label, for the text. These tags are very much, and some, I feel that the semantic boundaries are rather vague, let's look at one by one.

2. Add a paragraph

   Since HTML automatically ignores the spaces and line breaks you write in the text editor, you need to use the <p> tag to mark new paragraphs, put each paragraph in a <p></p> tag instead of a <br> tag, Of course, both can achieve the same arrangement style, but it is not recommended to use <BR>, which brings the presentation style into the html,<p> label more semantically, and the frequency of use is quite high.

4. Specific rules

   The small tag is used here,"usually including disclaimers, precautions, legal restrictions, copyright information, etc." Sometimes we can also use it to indicate attribution, or to meet licensing requirements. " The default display style of the browser is small, but do not use this label to display small font size, be sure to conform to the semantics, and small tags are usually labeled phrases, not too long

6. Mark Important and stressed text

   The strong element represents the importance of the content, while the EM element represents the focus of the content, typically the browser displays the strong as bold, and Em is italicized. What is to be mentioned here is the B and I tags, respectively, the text into bold and italic, the performance is the same as the strong and EM tags, only in the strong and EM semantics will be used in the two elements, otherwise it is appropriate to use strong and EM tags. HTML5 the re-definition of the B and I elements as:

   The B element represents a piece of text that is intended to alert the reader for practical purposes, does not convey any additional importance, and does not represent other voice and tone, such as keywords in a document digest, product names in comments, text-based interactive software, and article lead;

   The element I represents a piece of text different from other words, having a different tone and voice, or something different from the conventional one, used for the classification name, technical terminology, idiomatic expressions in foreign languages, translated prose, names of ships in western writings, etc.

8. Create diagram

   The figure tag is a newly added tag in HTML5, which is designed to handle tables, photos, graphics, illustrations, code snippets, and other similar independent content. The figcaption tag is an optional element that represents the title of the figure and can only be used once. Default display style is indented in the browser

10. Specify references and references

    Use the cite element to indicate a reference or reference to a content source, such as the title of a play, script, or book, the name of a song, movie, photo or sculpture, a concert or concert, a specification, a newspaper, or a legal document. Cite you can add the lang attribute to indicate the language in which the content is referenced. In the browser by default in italics, cite is only used to refer to the source itself, generally relatively short, as to the quoted content, see below

12. Quoted text

    Two tags, blockquote represents a separate quote, usually longer, while Q is used to compare short quotes, like quotes in a sentence. You can place the cite attribute in the tag, indicating the URL of the address from which the reference came from. The default display of the Blockquote browser is indented, and p is displayed as quotation marks, and is replaced by the corresponding language's reference format, depending on the lang attribute.

14. Specified time

    The time tag is used here, it is not possible to embed other tags in the tag, it is best to use the datetime attribute when writing this tag, the format of the property value is fixed, such as: Yyyy-mm-ddthh:mm:ss, Hour part of the 24-hour system, if you want to represent the time period, is: NH nm NS

16. Explain abbreviations

    Abbreviations in English are more common, such as the person, there are some abbreviations of the proper nouns, such as the HTML with the abbr tag of the text, using the title attribute to provide the full name of the abbreviation, considering that some mobile users may not see the contents of the title, So it's best to write this tag and add "(the full name of the abbreviation)."

18. Defining terminology

    On a printed matter, the first definition of a term usually adds a format that distinguishes it from other text (English is often italic, Chinese is bold or italic), and DFN tags are used to define terms in HTML. It is important to note that DFN only needs to surround the defined terms, without having to define the package

20. Create superscript and subscript

    Letters or numbers that are slightly higher or lower than the main text are referred to as superscript and subscript, the common superscript elements are trademark symbols, index and footnote codes, and so on, common subscript includes chemical symbols and so on, the HTML uses SUP to create superscript, and sub to create subscript.

22. Add Author Contact information

    An address element is a contact information that defines an author, related person, or organization that is associated with an HTML page or part of a page (such as a report or a new article), usually at the bottom of the page (placed in a footer element) or in a related section. The address tag is usually nested with a tag as a link, a link to an email, a phone, or a website, etc.

24. Callout editing and text that is no longer accurate

    Sometimes it may be necessary to annotate the edits of the page content after the previous version, or to mark text that is no longer accurate and irrelevant, and HTML provides the INS element that represents the add content and the Del element that marks the deleted content, and the S element is used to label content that is no longer accurate or irrelevant. Ins and Del elements have cite and datetime two properties, cite points to the interface that explains the reason for editing, DateTime provides editing time

26. Tag Code

    The code element is commonly used for text that contains code samples and filenames , and if it needs to display "<" and ">", it should be marked with &LT and &RT, with some computer-related elements, but rarely used. Mention here: KBD----Tag user input, Samp-----Indicate sample output of program or system; var-----represents the value of a variable or a modifier

28. Using pre-formatted text

    HTML is ignored spaces and carriage returns, but the content in the pre element is not: The browser executes the output in the format you entered, often in conjunction with the code element

30. Highlight text

    The mark element is used here, like the feeling of a highlighter marker, which is semantically different from EM and strong.

32. Create line breaks

    As mentioned above, HTML ignores spaces and line breaks, forcing a newline to use a BR tag, which can be used for line breaks in poetry, street addresses, etc., and is not recommended for general purposes.

34. Create span

    Like a div, a SPAN element has no semantics, is less granular than a div, surrounds a word or phrase, is not specifically semantic or does not find a suitable tag, or wants to improve the precision of a particular style, and often adds the ID and class attributes to it.

36. Other elements (rarely used, browser support varies)

    U element: "Add obvious non-textual annotations to a piece of text, such as to mark the text as a proper noun in Chinese, or to indicate that the text is spelled incorrectly", with the default form underlined

    WBR element: Close to BR, "a newline", indicating that the browser can perform line breaks when necessary

    Ruby, RP, RT elements: Use less, "side note marks, Chinese and Japanese commonly used, such as marking the pronunciation, usually appear above the mark". RT is the marker of the Apostille, and the RP is optional, because some browsers do not support RT, so it is necessary for the RP element to add a parenthesis outside the tag, which is usually used:

<ruby> Text <rp> (</rp><rt> annotations </rt><rp>) </rp> </ruby>

BDI and BDO elements: Some languages are written from left to right, while others are written from right to left, unless you add Dir=rtl to the

Meter element: Indicates "task completion", property has value (required), min (default = 0), max (default = 1), low, high, optimum, many browsers directly generate a bar shape based on value, Different colors are given depending on the degree of low and high, but it is recommended that if the meter element reflects the text of the measured value, some browsers do not support meter

Progress elements: Some like the meter element, indicating the completion progress of a task, which can be used to represent a progress bar of things, with three properties: Max (total task amount), value (completed), form (the value is usually the ID of the associated form element)

Summary: A lot of tags, HTML5 these tags are very thin, can almost deal with any kind of semantics, timely can not be a very appropriate representation, there are a few common tags? Divided so fine, the semantics of the text is more clear, there will be no ambiguity, control is more fine. But sometimes, the semantics of the text itself is vague, it is necessary to savor the differences between the different tags, choose the most appropriate expression, so that writing an HTML document is not difficult, but to write well, write clearly, not so easy

Reference: http://www.w3school.com.cn/tags/html_ref_byfunc.asp (all HTML tags)

https://www.w3.org/standards/webdesign/( website, see the latest news)

HTML5+CSS3 Study Notes (iii)