HTML5（一）语义化标签、新增表单控件

1、新的页面结构以及宽松的语法规范
<!doctype html>
<meta charset="utf-8"/>
2、语义化标签
（1）<header></header> 页眉：主要用于页面的头部的信息介绍，也可以用于版块头部
（2）<hgroup></hgroup> 页面上的一个标题组合，一个标题和一个子标题，或者标语的组合，例如
<hgroup>
<h1>妙味课堂</h1>
<h2>带您进入富有人情味的IT培训</h2>
</hgroup>
（3）<nav></nav> 导航（包含链接的一个列表），例如
<nav><a href=“#”>链接</a><a href=“#”>链接</a></nav>
<nav>
<p><a href=“#”>妙味课堂</a></p>
<p><a href=“#”>妙味课堂</a></p>
</nav>
<nav>
<h2>妙味精品课程</h2>
<ul>
<li><a href=“#”>javascript</a></li>
<li><a href=“#”>html+css</a></li>
</ul>
</nav>
（3）<footer></footer> 页脚：页面的底部或者版块底部
（4）<section></section> 页面上的版块，用于划分页面上的不同区域，或者划分文章里的不同章节
（5）<article></article> 用来在页面中表示一套结构完整且独立的内容部分。
可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。
（6）<aside></aside> 元素标签，可以包含于当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别于主要内容的部分。
aside 的内容应该与 article 的内容相关。
被包含在<article>中作为主要内容的附属信息部分，其中的内容以是与当前文章有关的引用、词汇列表等
在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
（7）<figure></figure> 用于对元素进行组合，一般用于图片或视频。
（8）<figcation></figcation> figure的子元素，用于对figure的内容进行说明
<figure>
<img src=“miaov.png”/>(注意没有alt)
<figcaption> 妙味课堂 photo &copy 妙味趣学</figcaption>
</figure>
（9）<time></time> 用来表示时间或日期，例如
<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>参数
<p> 我在 <time datetime="2008-02-14">情人节</time> 有个约会。 </p>
（10）<datalist></datalist> 选项列表：与input元素配合使用，来定义input可能的值，例如：
<input type="text" list="valList" />
<datalist id="valList">
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
（11）<details></details> 用于描述文档或文档某个部分的细节，
该元素用于摘录引用等应该与页面的主要内容区分开的其他内容
Open 属性默认展开
（12）<summary></summary> details元素的标题，例如
<details>
<summary>妙味课堂</summary>
<p>国内将知名的IT培训机构</p>
</details>
（13）<dialog></dialog> 定义一段对话
<dialog>
<dt>老师</dt>
<dd>2+2 等于？</dd>
<dt>学生</dt>
<dd>4</dd>
<dt>老师</dt>
<dd>答对了！</dd>
</dialog>
（14）<address></address> 定义文章或页面作者的详细联系信息
（15）<mark></mark> 需要标记的词或句子
（16）<keygen> 给表单添加一个公钥，例如
<form action="http://www.baidu.com" method="get">
用户: <input type="text" name="usr_name" />
公钥: <keygen name="security" />
<input type="submit" />
</form>
（17）<progress></progress> 定义进度条，例如：
<progress max="100" value="76">
<span>76</span>%
</progress>
3、新增标签低版本浏览器的兼容
针对IE6-8这些不支持HTML5语义化标签的浏览器，我们可以使用javascript来解决，如下，在页面的头部加上
<script>
document.createElement(“header”);
document.createElement(“nav”);
document.createElement(“footer”);
...
</script>
HTML5语义化标签在IE6-8下，我们用js创建出来以后，它不会有任何默认样式，甚至没有display，所以在样式表里要对这些标签定义一下默认的display
4、新增的表单控件
（1）新的输入型控件
email：电子邮箱文本框，跟普通的没什么区别
——当输入不是邮箱的时候，验证通不过
——移动端的键盘会有变化
tel：电话号码
url：网页的URL
search：搜索引擎
——chrome下输入文字后，会多出一个关闭的X
range：特定范围内的数字选择器
——min、max、step（步数）
number：只能包含数字的输入框
color：颜色选择器
datetime：显示完整日期
datetime-local：显示温度日期
time：显示时间、不含时区
date：显示日期
week：显示周
month：显示月
（2）新的表单特性和函数
placeholder：输入框提示信息
autcomplete：是否保存用户输入值
——默认为on，关闭提示选择off
list和datalist：为输入框构造一个选择列表
——list值为datalist标签的id
required：此项必填，不能为空
pattern：正则验证
formaction：在submit里定义提交地址
（3）表单验证
validity对象，通过下面的valid可以查看验证是否通过，例如：8种验证都返回true，一种验证失败返回false
<form>
<input type="text" required id="text"/>
<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
alert(this.validity.valueMissing);
ev.preventDefault();
}
——valueMissing：输入值为空时
——typeMismatch：控件值与预期类型不匹配
——patternMismatch：输入值不满足pattern正则
——tooLong：超过maxLength最大限制
——rangeUnderflow：验证的range最小值
——fangeOverflow：验证的range最大值
——stepMismatch：验证range的当前值是否符合min、max及step的规则
——customError：不符合自定义验证》setCustomValidity()
Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false)
阻止默认验证：ev.preventDefault()
formnovalidate属性 : 关闭验证

HTML5（一）语义化标签、新增表单控件

猜你喜欢