3非主体结构元素
(1) header(页眉)标签
一般来防治整个页面的标题。比如说一个新闻页面,header一般放新闻的标题。如果是一个官网地址,一般header用来放logo和网站导航。
(2) footer(页脚) 标签
一般用来放置脚注,主要包含:作者信息、copyright。
(3) address(地址)标签
一般用来呈现联系信息主要包括:网站的联系方式、电子邮箱、联系地址、电话号码等等。
<header>
<div class="logo">这是放logo的区域</div>
<nav>
<ul>
<li><a>首页</a></li>
<li><a>教程</a></li>
</ul>
</nav>
</header>
<article>
<h2>html5 的教程</h2>
<p>详细教程,请访问华点网站 <a href="http://www.huadianedu.com">点击跳转</a></p>
</article>
<footer>
<p>copyright 2017 华电软件学院</p>
<address>
<p>啦啦啦德玛西亚!</p>
<p>啦啦啦德玛西亚!</p>
<p>啦啦啦德玛西亚!</p>
</address>
</footer>
4表单相关新增元素和属性
4.1表单元素新增和废弃的属性
表单新增的属性可以分成两类:
提交类:提交给服务器设置的属性,formtion、formmethod、formtype
控制类:required、autoofocus、labels。
4.1.1 form属性
在H5之前,表单内所有的从属标签(下级标签),必须书写在form标签内部。
H5:允许标签写在任何地方需要做两部操作:1、给form设置一个id;给元素设置form属性,form属性的值就是form Id属性的值
<form action="XXX.api" id="testForm">
请输入账号:<input type="text" name="date"><br>
<input type="submit" value="提交">
</form>
请输入密码:<input form="testForm" type="password" name="psd"><br>
4.1.2formaction
在H5之前,表单内所有的submit,只能提交到一个统一的地址,也就是指定的Action。
H5:可以为每个submit指定一个action,是通过formaction属性来实现的
<form id="testForm">
请输入账号:<input type="text" name="date"><br>
请输入密码:<input form="testForm" name="psd" type="password"><br>
<input type="submit" value="提交0"formaction="XX0.api">
<input type="submit" value="提交1"formaction="XX0.api">
</form>
4.13formmethod
<form id="testForm" method="post">
请输入账号:<input type="text" name="date"><br>
请输入密码:<input form="testForm" name="psd" type="password"><br>
<input type="submit" value="提交0"formmethod="post" >
<input type="submit" value="提交1"formmethod="get">
</form>
在H5之前只能写在form里,现在可以写在按表单里(在此我两种都写了)
隐藏显示提交的数据
4.14formenctype:编码方式
<form id="testForm" enctype="text/plain">
请输入账号:<input type="text" name="date"><br>
请输入密码:<input form="testForm" name="psd" type="password"><br>
<input type="submit" value="提交0"formenctype="text/plain">
<input type="submit" value="提交1"formenctype="text/plain">
</form>
在H5之前只能写在form里,现在可以写在按表单里(在此我两种都写了)
隐藏显示提交的数据
4.15formtarget
<form id="testForm" target="">
请输入账号:<input type="text" name="date"><br>
请输入密码:<input form="testForm" name="psd" type="password"><br>
<input type="submit" value="提交0"formtarget="_self">
<input type="submit" value="提交1"formtarget="_blank" >
</form>
在H5之前只能写在form里,现在可以写在按表单里(在此我两种都写了)
隐藏显示提交的数据
控制类
4.16autofocus
<form id="testForm">
请输入账号:<input type="text" name="date"><br>
请输入密码:<input form="testForm" name="psd" type="password" autofocus><br>
<input type="submit" value="提交0"formtarget="_self">
<input type="submit" value="提交1"formtarget="_blank" >
</form>
为输入框,按钮什么的,添加autofocus属性,当页面打开时,该元素将自动获取焦点。
注意:如果对多个元素同时设置了该属性,那么只有第一个有效。
4.17 required
<form id="testForm">
请输入账号:<input type="text" name="date"required><br>
请输入密码:<input form="testForm"name="psd" type="password"><br>
<input type="submit" value="提交0" formtarget="_self">
<input type="submit" value="提交1"formtarget="_blank" >
</form>
如果输入框输入了该属性,提交时,该框若为空,则弹出提示框