HTML5之新增标签用途及应用场景
把自己的学习笔记整理一下，今天是HTML5第一篇，明天是css3选择器，给自己提个醒！哈哈
新的页面结构以及宽松的语法规范，标签可以不用闭合，可以省略head，body等标签
<!DOCTYPE HTML> <meta charset="utf-8"> <title>无标题文档</title> <h1>标题</h1>
语义化标签
<header></header> 页眉 主要用于页面的头部的信息介绍，也可用于板块头部
<hgroup></hgroup> 页面上的一个标题组合一个标题和一个子标题，或者标语的组合
<hgroup> <h1>主标题</h1> <h2>副标题</h2> </hgroup>
<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>
<footer></footer>页脚 页面的底部 或者 版块底部
<section> <section> 页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节
<article></ article > 用来在页面中表示一套结构完整且独立的内容部分
可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。
<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分
aside 的内容应该与 article 的内容相关。
被包含在<article>中作为主要内容的附属信息部分，其中的内容 以是与当前文章有关的引用、词汇列表等
在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
<figure> < figure > 用于对元素进行组合。一般用于图片或视频
<figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明
<figure> <img src=“miaov.png”/>(注意没有alt，已经废弃) <figcaption> 图片描述</figcaption> </figure>
<time></time>用来表现时间或日期
<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p> <!--参数--> <p> 我在 <time datetime="2008-02-14">情人节</time> 有个约会。 </p>
<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>
<details></details>用于描述文档或文档某个部分的细节 该元素用于摘录引用等
应该与页面的主要内容区分开的其他内容 Open 属性默认展开
< summary></summary> details 元素的标题
<details open> <summary>标题标题</summary> <p>附属信息或描述</p> </details>
<dialog></dialog>定义一段对话
<dialog> <dt>老师</dt> <dd>2+2 等于？</dd> <dt>学生</dt> <dd>4</dd> <dt>老师</dt> <dd>答对了！</dd> </dialog>
<mark></mark> 需要标记的词或句子（高亮显示）
<keygen>给表单添加一个公钥
<form action="http://www.baidu.com" method="get"> 用户: <input type="text" name="usr_name" /> 公钥: <keygen name="security" /> <input type="submit" /> </form>
<progress><progress>定义进度条
<progress max="10" value="7"> <span>76</span>% </progress>
IE下的兼容
HTML5语义化标签在IE6-8下，我们用js创建出来之后，他是不会有任何默认样式的甚至是 display，所以在样式表里 要对这些标签定义一下 它默认的display
Html5shiv也是根据这个原理实现的
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> document.createElement("header"); document.createElement("section"); document.createElement("aside"); document.createElement("article"); document.createElement("footer"); document.createElement("leo"); </script> <style> header,section,aside,article,footer{ display:block;} body{margin:0;} header{height:100px;background:#9F0;} section{ height:300px;} aside{width:20%;height:300px;float:left;background:#CF0;} article{width:80%;height:300px;float:left;background:#CC3;} footer{height:100px;background:#F90;} leo{height:100px;background:red;color:#fff; text-align:center; font-size:50px; } </style> </head> <body> <header>头部</header> <section> <aside>左侧</aside> <article>主体</article> </section> <footer>底部</footer> </body> </html>
Forms
新的输入型控件
email : 电子邮箱文本框，跟普通的没什么区别
当输入不是邮箱的时候，验证通不过
移动端的键盘会有变化 tel : 电话号码
url : 网页的URL
search : 搜索引擎 chrome下输入文字后，会多出一个关闭的X
range : 特定范围内的数值选择器
min、max、step( 步数 )
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期
datetime-local : 显示完整日期，不含时区
time : 显示时间，不含时区
date : 显示日期
week : 显示周
month : 显示月
新的表单特性和函数
placeholder : 输入框提示信息，占位符，对于密码类型的input，体验更好
<input type="password" required placeholder="请输入6-18位字符" />
autocomplete : 是否保存用户输入值 默认为on，关闭提示选择off
<input type="text" name="user" autocomplete="off"/>
autofocus : 指定表单获取输入焦点
<input type="text" name="user" autocomplete="off" autofocus />
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id
<input type="text" list="valList" /> <!--类似自动完成功能--> <datalist id="valList"> <option value="javascript">javascript</option> <option value="html">html</option> <option value="css">css</option> </datalist>
required : 此项必填，不能为空
<input type="password" required placeholder="请输入6-18位字符" />
Pattern : 正则验证 pattern="\d{1,5}“
<form action="http://www.baidu.com" method="get"> <input type="text" pattern="\d{1,5}"/> <input type="submit" /> </form>
Formaction 在submit里定义提交地址
<form method="get"> <input type="text" name="row1"/> <input type="text" name="row2"/> <input type="text" name="row3"/> <input type="submit" formaction="http://www.qq.com" value="保存草稿" /> <input type="submit" formaction="http://www.sina.com.cn" value="发送"/> </form>
表单验证
validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
oText.addEventListener("invalid",fn1,false); 验证反馈
ev.preventDefault()
oText.validity.valueMissing : 输入值为空时
oText.validity.typeMismatch : 控件值与预期类型不匹配
oText.validity.patternMismatch : 输入值不满足pattern正则
oText.validity.tooLong : 超过maxLength最大限制(MOZ ,-WEBKIT 未实现)
oText.validity.rangeUnderflow : 验证的range最小值
oText.validity.rangeOverflow：验证的range最大值
oText.validity.stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
oText.validity.customError 不符合自定义验证
this.setCustomValidity(); 自定义验证
formnovalidate属性 : 关闭验证
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> window.onload=function() { var oText=document.getElementById("text"); oText.addEventListener("invalid",fn1,false); function fn1(ev) { alert(oText.validity.valueMissing);// 当输入值为空的时候 返回true ev.preventDefault() } } </script> </head> <body> <form method="get" id="form"> <input type="text" name="row1" required id="text"/> <input type="submit" formaction="http://www.sina.com.cn" value="提交"/> </form> </body> </html>