2主体结构元素
主体结构元素，为了语义可以结构化，也就是为了更好的SEO，即让浏览器抓取数据更方便，包含了article、section、nav、aside
（1）article
从语言上看，可以理解为文章，文档，页面，通常用于一篇文章、一个页面、或者一个独立完整的内容。标签强调的是内容的独立性，一般会嵌套header标签
<article> <header> 百度 </header> <p> <a href="https://www.baidu.com/index.php?tn=78040160_40_pg">百度</a> 一下，你就知道 </p> </article>
（2）section
从语言上看，理解为段落、章节，通常用于文章中的一段，这一段注重说明，强调分段分块
<article> <h1>三国演义</h1> <p>中国古典四大名著之一</p> <section> <h3>赤壁之战，三分天下</h3> </section> <section> <h3>巧取汉中，痛失荆州</h3> </section> </article>
（3）nav
导航 navigation的缩写，通常用在导航条，页面导航、翻页操作
<header> <div class="logo"></div> <nav> <ul> <li>h5发展史</li> <li>CSS3发展史</li> <li>EMScript发展史</li> </ul> </nav> </header>
（4）aside
aside元素语义：旁边，侧边，通常放在article元素里面，作为附属信息部分
放在article元素外面，作为整个页面的附属信息，如侧边栏、友情链接
<article> <h1>马化腾</h1> <p>马化腾，男，1971年10月29日生于广东省汕头市潮南区。腾讯公司主要创办人之一，现担任腾讯公司控股董事会主席兼首席执行官；全国青联副主席。</p> <aside> <h1>参考资料</h1> <p>百度百科</p> </aside> </article> <aside> <nav> <ul> <li>马云</li> <li>李彦宏</li> <li>王健林</li> </ul> </nav> </aside>
（5）time--压根就不用
时间标签，通常用法：表示24小时的某个时刻，或日期
注：所有浏览器都不支持该标签
3非主体结构元素
（1）header标签
一般用来放置整个页面的标题
如新闻页面，一般放新闻的标题
（2）footer标签
一般用来放置脚注，主要包含作者信息、copyright
（3）address标签
一般用来呈现联系信息，主要包括网站联系方式、电子邮箱等
<header> <div class="logo">logo</div> <nav> <ul> <li><a href="">首页</a></li> <li><a href="">教程</a></li> </ul> </nav> </header> <article> <h2>html5教程</h2> <p>详细内容请访问华点<a href="http//www.huadianedu.com">点击</a></p> </article> <footer> <p>Copyright 2016</p> <address> <p>地址：南湖科技城</p> <p>电话：0573-123465452</p> </address> </footer>
4表单相关新增元素和属性
4.1表单元素新增和废弃的属性
新增属性有两类
提交类：提交给服务器设置的相关属性formacation、formethod、formtype
控制类：required、autofocus、labels
form属性
在H5之前，表单内所有的从属标签（下级标签），必须写在form标签内
H5允许标签写在任何地方，但是需要给form设置id，给元素设置form属性
值为form的id名
<form action="XXX.api" id="testForm"> 请输入日期:<input name="date" type="text"/> <input type="submit" value="提交"/> </form> 请输入密码:<input form="testForm" name="psd" type="password"/>
formaction
H5之前，所有的sunimt，只能统一提交到一个地址，指定的action
H5可以为每一个submit设置不同的action，是通过设置function属性来实现的
<form action="XXX.api" id="testForm"> 请输入日期:<input name="date" type="text"/> 请输入密码:<input form="testForm" name="psd" type="password"/> <input type="submit" value="提交0" formaction = "XX0.api"/> <input type="submit" value="提交1" formaction = "XX1.api"/> </form>
formmethod
<form action="XXX.api" id="testForm" method="get"> 请输入日期:<input name="date" type="text"/> 请输入密码:<input form="testForm" name="psd" type="password"/> <input type="submit" value="提交0" formaction = "XX0.api" formmethod="get"/> <input type="submit" value="提交1" formaction = "XX1.api" formmethod="post"/> </form>
formtype
<form action="XXX.api" id="testForm"> 请输入日期:<input name="date" type="text"/> 请输入密码:<input form="testForm" name="psd" type="password"/> <input type="submit" value="提交0" formenctype="text/plain"> <input type="submit" value="提交1" formenctype="text/plain"> </form>
formtarget
<form action="XXX.api" id="testForm"> 请输入日期:<input name="date" type="text"/> 请输入密码:<input form="testForm" name="psd" type="password"/> <input type="submit" value="提交0" formtarget = "_self"> <input type="submit" value="提交1" formtarget = "_blank"> </form>
autofocus
为输入框或按钮添加autofocus，当页面打开时，元素自动获取光标焦点
<form action="XXX.api" id="testForm"> 请输入日期:<input name="date" type="text" > 请输入密码:<input form="testForm" name="psd" type="password"/> <input type="submit" value="提交0" formtarget = "_self" autofocus> <input type="submit" value="提交1" formtarget = "_blank"> </form>
required：如果输入框添加该属性，没有内容时，会提示
<form action="XXX.api" id="testForm"> 请输入日期:<input name="date" type="text" required> 请输入密码:<input form="testForm" name="psd" type="password"/> <input type="submit" value="提交0" > <input type="submit" value="提交1" formtarget = "_blank"> </form>
4.2 HTML5改良的input元素的种类
1.color
当输入框中type属性为color时，可以直接调用系统提供的调色盘，缺少透明度，且有兼容性问题，iphone无法使用
2.url
type值为url时，会检查输入内容，不为网址或网址有误时，不会提交，移动端会自动切换到输入网址的方案
3.email
type值为email时，与url相似，不为邮箱或格式有误，不会提交，移动端会自动切换到输入邮箱的方案
4.tel
type为tel，专门用于输入电话号码，但不提供检查功能，需手动添加pattern属性，来完成检验
5.search
专门输入搜索关键词的文本框，与text相似，提供了清除功能（右边有个×）
6.number
数字输入框，可以输入数字，用min和max属性来设置接收上限和下限
7.date
时间控件，以日历形式出现，可以调整得到想要的日期，但目前只有谷歌能兼容
了解即可，有兼容性问题
8.time
同样时间控件，显示的24小时时间，同样可以调整，只有谷歌能兼容
9.datetime
和前两个不同，直接出现文本框，让用户输入
10.datetime-local
综合了7和8的功能，同样只有谷歌能够兼容
11.week
在input中主要是提示日期第几周，只显示年份和几周
12.month
和week相似，只提示第几个月，不会显示日期和时间
13.range
当输入框属性设置为range的时候，可以设置一段范围内数值的文本框，它的类型显示为一个滑块，同样可以对它设置min和max控制范围，默认范围是0-100，当设置了step属性的时候，可以指定每次拖动的步幅。
对于设置了type和input，如果input输入框没有写东西（空的）提交的时候不做检验，但是如果写了内容，填写的内容格式不对的话，提交的时候就会提示“xxx不对”，同时鼠标光标focus到该输入框。
14.output元素
Firefox、Opera、Chrome 和 Safari 浏览器都支持 <output> 标签。 注意:Internet Explorer 浏览器不支持 <output> 标签。
15.labels
<body> <form action="#"> <div> <label for="date">请输入日期:</label> <input type="text" id="date" name="date" value=""/> <br/> <label for="psd">请输入密码:</label> <input type="password" id="psd" name="password" value=""/><label for="psd"></label> <br/> </div> <input type="button" οnclick="validate()" value="提交"> </form> </body> <script> function validate(){ var psd = document.getElementById("psd"); psd.labels[1].innerHTML = "密码"; psd.labels[1].setAttribute("style","font-size:9px;color:red") } </script>
15.placeholder
占位符：输入框没有内容的时候显示placeholder的值
输入框有内容的时候，placeholder隐藏
16.datalist
是html5新增的元素，设置了list属性，拥有搜索功能，但仅限于datalist中已经有的选项
<input id="select" name="select" list="list" type="text" placeholder="请选择编程语言"/> <datalist id="list"> <option>JS</option> <option>JAVA</option> <option>C#</option> <option>Object-C</option> </datalist>
17.pattern
input标签可以配合pattern属性进行校验，正则表达式
18.image
一般情况下input标签设置width和height是无效的，type的值为image时，可以设置width和height
