HTML5 Semantic Tags

In the HTML5 is the most basic is also a good understanding of the semantic tag,, as the name implies that semantics is directly read the label ~, so that we in the project development process not only their own 5 flower 8-door tag name and headache, and colleagues docking project will save a lot of time ~ ~ Who doesn't want to be simple and easy ...

There are 2 kinds of semantic tags, one is purely semantic, no function, two are semantic and functional.

One : no function, semantic tags

1.1-

SM: That's our head tag, typically used for website header content

1.2 <footer></footer>

SM: There must be the bottom of the head, generally used for the bottom of the site (bright good nonsense ~ ~).

1.3 <nav></nav>

SM: Navigation label, this is also relatively good understanding, usually we use the UL label to write navigation, UL must be included in the LI tag tag, this will have certain limitations,<nav></nav> label is not confined inside the room tag, can be a group of a tag, Can also be a, a p, you like it good!

?

123456

<nav>　　<a href="">导航1</a>　　<a href="">导航2</a>　　<a href="">导航3</a>　　<a href="">导航4</a></nav>

1.4

SM: Title combination, usually the main title of the page plus description

1.5 <section></section>
SM: a plate or an area of content that divides a page in different areas
1.6 <article></article>
SM: Used to represent a complete and independent piece of content in a page
1.6.1 <aslde></aside>
SM: Subject information (widely used, mainly a subsidiary content), if article is an article, then the author of the article and information content is the content of this article is attached
1.7 <figure></figure>
SM: Media Elements, such as some videos, pictures, etc.
?
 
 
 
  
  
 
   
 
    
1234
 
    
<figure>　　<img/> //图片　　<figcaption>我是图片的说明描述</figcaption> //图片说明</figure>
 
   
 
  
 
 
 
1.8 <time></time>
SM: Specifically for the time out of the label, in the past we have a lot of time tags, such as span,i,b, and so on, there is a property datetime= ""//no actual function, easy to find
Two : Functional, semantic tags
2.1 <datalist></datalist>
SM: A list of options, used in conjunction with the INPUT element, to define the possible values of input
?
 
 

  
  
 
   
 
    
123456
 
    
<input type="text" list="valList">  //要在input标签中添加一个新的list属性，属性值为datalist的ID~　　<datalist id="valList">　　<option value="javascript">javascript</option>　　<option value="html">html</option>　　<option value="css">css</option></datalist>
 
   
 
  
 
 
　
When I enter a J in the input box, the relevant JavaScript in it will show up ~ ~
2.2 <details></details>
SM: The details used to describe a part of a document or document ~ Default property is open~
PS: Use with summary
?
 
 
 
  
  
 
   
 
    
1234
 
    
<details>　　<summary>芝麻开门</summary>　　<p>BOOM!!!!!!!!!!!!</p></details>
 
   
 
  
 
 
 
No page display when clicked
Post-click Content display
2.3 <progress></progress>
SM: Used to make the progress bar, there are 2 properties, 1:max overall progress 2:value the current progress
?
 
 
 
  
  
 
   
 
    
123
 
    
<progressmax="200" value="100">  // max:总共为200，当前为100，就是说进度条只到的50%　　<span>20</span>%  //用于兼容不支持此属性的浏览器</progress>
 
   
 
  
 
 
 
　
　Three: About compatibility
There is no doubt that the H5 tag is a compatibility problem, the low version of IE is not aware of these semantic tags, there are generally 2 ways to solve this problem
The
Write your own JavaScript code, because IE does not know these tags, so we just need to create these tags in JS just fine
?
 
 
 
  
  
 
   
 
    
123
 
    
<script type="text/javascript">    document.createElement(‘header‘);  //创建一个header元素</script>
 
   
 
  
 
 
 
So we created a header element, and now we can write this tag in HTML and style.
PS: Since the created tag does not have any default properties, we will create a CSS property Display:block for the created tag ;
No.2
Directly outside the introduction of a JS file, the introduction of methods and we usually introduce plug-ins the same way (here is no longer elaborated) ....
From 
HTML5 Semantic Tags