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本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
