Deep understanding of html5 series-text labels,

Source: Internet
Author: User

Deep understanding of html5 series-text labels,
Introduction to the article: I believe that html5 is familiar to everyone, but what is its true significance in specific development? What new definition and concept does html have? Why do some experts believe that after html5 is fully completed, all work can be achieved in the real cloud mode? Have you understood this series of questions? This series of articles will answer all the things you don't know about html5 and html. They will include new ideas and ideas such as html5, the intention of the new html5 tag and the application in specific development scenarios, the emotional experience of html5 and css3 (usage matching ), including some small privacy of html5 father html (something you may not know during development); Hello, and I have met you again, what do you probably don't know about what I will talk about today? Next let's take a look at 1) What is the significance of the element title attribute to semantics? 2) What are the new tags in html5 that affect the startup of text writing? 3) What are the correct usage and precautions of the <address>, <figure>, and <time> labels in html5? 4) What about <em> <strong> and <B> <I> past and present? The first question element: What is the significance of the title attribute to semantics? Will the title tag come to mind at the first glance of the title attribute? But don't get them together. They are totally different things. I feel that this attribute is rarely used during our development. First, let's talk about what it is, in fact, it is a property with a prompting function. For screen readers, they can read text for users. Correct Use can improve page access, such as the effect and code in browsers; the code implementation effect shows whether you have found this feeling of familiarity. Right, the feeling of alt attribute when you used the label. This is what you need to pay attention, img labels before IE7 use alt to display text, but in IE7 and later versions, if both the alt and title attributes appear, the text in the title attribute is displayed instead of the alt attribute. If the running result is: second, question: what are the new tags in html5 that affect the startup of text writing? The editor wants to explain the understanding and usage of these labels before writing the answer to this question (at least the editor understands this and the Self-feeling effect is acceptable); 1, it is clear that the core idea of html5 is the semantic meaning. Therefore, whatever the tag is, it depends on the meaning of the expression, rather than the display effect. 2, labels related to text can be considered as punctuation marks in Chinese, so that you can easily remember and use them (or you can use other methods) now, let's understand the semantics and usage of these new labels; the <address>, <figure>, and <time> tags are not mentioned here for details in the next question; <strong> <em> these two tags are already available in HTML4.0, but here we will talk about them because they are rarely used in the past because few people pay attention to their meanings; <strong> indicates important texts (highlighted in bold by default). The emphasis is on semantic expressions rather than presentation effects. Remember this; <em> indicates the highlighted text (italic by default) <mark> new elements in tag HTML5 are used to highlight Text, the effect is like marking the key statement with a highlighter; <span> the tag is already available in HTML, previous articles have also been mentioned, but there is no detailed description. The following is a detailed description: 1. span has no semantics, so the correct method of use is to use it without any other appropriate labels; 2. it is a phrase-level label, so no new line will appear, 3. in the same way as div, you can add span labels to increase semantics using microformats. 4. in general, css is needed to control its display style because it does not have a style display style. <wbr> A new tag similar to <br>; the difference is that it does not force line breaks; <ruby> <rp> <rt> these labels are like the phonetic symbols in Chinese; <meter> you can use it to display the measurement results and the voting results (The problem is that the browser does not support it well) <progress> displays the same progress bar, it can be used for better interaction with users. The problem is that browser compatibility is not good now. The third problem is ht. What are the correct usage and precautions of the <address>, <figure>, and <time> labels in ml5? <Address> This label is new, so few people use it. Of course, few people study it in the correct usage. Let's simply summarize it: 1. address is used to define the contact information of the author, related personnel, or organization related to an HTML page or part of the page, usually located at the bottom of the page or the relevant part; 2. most of the time, the contact information is the author's email or a link to the contact information page. This is correct and cannot be marked as "Contact Us". This is an incorrect usage. the provided information must be accurate, not to mention the correctness of the email address, but to the person who provides the information. If there are many people on the page, therefore, when providing information, make sure that the information is accurate. the address label cannot contain h1 ~ H6 \ article \ address \ aside \ footer \ header \ hgroup \ nav \ section and other labels; <figure> This element is used to introduce charts, graphics, photos, etc, the corresponding scenario is like a picture in a magazine. Before html5, there was no special tag to do this. If this function was previously implemented, the div tag with no semantics was used. usage tips: 1. the figure element can contain multiple Content blocks, but can only have one figcaption (which can be understood as adding a title to the chart) label 2. you can use H1 ~ H6 to add a title to figure; 3. figcaption cannot appear separately and must contain related content. <time> you can use this label to mark a specific time or date. The application scenario is usually the posting time of an article; for example: 1. it is recommended that the time in datetime be the same as the date of the text element in the time Label, and the format can be different; 2. if this time indicates the time of the entire article or page, you need to add the pubdate attribute; 3. do not use inaccurate time in the time Label, for example, "noon today" or "last weekend. if you use the pubdate attribute, note that the same parent label should not contain Zhang guanli Dai; 5. the times tag cannot be nested with another time tag; 6. the time format in datatime needs to be the possible time of the standard machine, for example, YYYY-MM-DDThh: mm: ss. In fact, there are still many usage methods as a new tag, I just mentioned some of the most basic things here, but I think the time element will be used. It can be said that this is the fourth entry question about the past and present of <em> <strong> and <B> <I>? All HTML users know that <em>, <I>, <strong>, and <B> are displayed in the same format. One is italic, and the other is bold, so how do they get along in html5? Next we will focus on the past and present of <B> <I>: A long time ago, when nothing called CSS appeared on the Internet, <B> <I> to distinguish the key and special characters in the text, this pair of siblings emerged. With their help, the interaction between text on the page and users has been improved. However, with the rapid development of the Internet, a thing called css quickly emerged. Its responsibility is to control the form of page display, of course, it also includes the <B> <I> format. Therefore, some developers in html4.0 and xhtml1 suggested to discard the <B> <I>, the plane is replaced by <strong> <em> + css, because they have the semantics to better interact with users. But the problem has not ended yet, during development, <strong> <em> cannot represent semantics very well. Therefore, in html5, <B> <I> showed us the modified image, so we re-enabled <B> <I> In html5; so when does HTML5 use it? Label B indicates a piece of text that reminds readers of attention for practical purposes. It does not convey any additional importance or other semantics or tone. It is used for keywords, product names, operation instructions, and so on; the I tag indicates a text that is different from other texts and has different voices or tone. It is used for classification names, technical terms, and common words in foreign languages;
Well, let's talk about it today. I don't know if you can help me read this article? I believe you have learned a lot about HTML5 text labels through these articles? In the next article, I will talk about some HTML5 image-related things. I believe there will be something you don't know. Thank you for your reading. We are looking forward to seeing you next time;

As an IT technician, it is essential to hone his own technology. coder_online, the programmer InterAction alliance, can discuss topics of interest with Daniel online at any time, let yourself learn the most things with the least time, scan the QR code below or search for coder_online to follow.

 
  • Previous Article II OpenGL Learning Series of Chromium for cainiao
Top
0
Step on

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.