HTML5基础知识整理（一）—— 新增标签和属性

HTML5新特性的浏览器支持情况

http://www.caniuse.com/#index

语义化标签的由来

http://devfiles.myopera.com/articles/572/idlist-url.htm

语义化标签

<header></header> 页眉
主要用于页面的头部的信息介绍，也可用于板块头部

<footer></footer>页脚

页面的底部或者版块底部

<hgroup></hgroup> 页面上的一个标题组合（在最新的html5.1中已被废除）
一个标题和一个子标题，或者标语的组合

<span style="font-size:18px;"><hgroup><h1>妙味课堂</h1><h2>带您进入富有人情味的IT培训</h2>
</hgroup></span>

<nav></nav> 导航（包含链接的的一个列表）

<span style="font-size:18px;"><nav><a href=“#”>链接</a><a href=“#”>链接</a></nav><nav><p><a href=“#”>妙味课堂</a></p><p><a href=“#”>妙味课堂</a></p>
</nav></span>

<span style="font-size:18px;"><nav><h2>妙味精品课程</h2><ul><li><a href=“#”>javascript</a></li><li><a href=“#”>html+css</a></li></ul>
</nav></span>

<section> </section> 页面上的版块
用于划分页面上的不同区域,或者划分文章里不同的节

<article></ article > 用来在页面中表示一套结构完整且独立的内容部分
可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。

<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分

aside 的内容应该与 article 的内容相关。
被包含在<article>中作为主要内容的附属信息部分，其中的内容以是与当前文章有关的引用、词汇列表等
在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

<span style="font-size:18px;"><section>页面上的一个区块或者说一个版块</section><article>主体</article>
<aside>article的附属信息</aside></span>

<figure> < figure > 用于对元素进行组合。一般用于图片或视频
<figcaption> <figcaption> figure的子元素用于对figure的内容进行说明

<span style="font-size:18px;"><figure><img src=“****.png”/>  <span style="color:#ff0000;">(注意没有alt)</span><figcaption> ******** &copy ********</figcaption>
</figure></span>

<datalist></datalist>选项列表。与 input 元素配合使用，来定义 input 可能的值。

<span style="font-size:18px;"><input type="text" list="valList" />
<datalist id="valList"><option value="javascript">javascript</option><option value="html">html</option><option value="css">css</option>
</datalist></span>

<details></details>用于描述文档或文档某个部分的细节

该元素用于摘录引用等应该与页面的主要内容区分开的其他内容
Open 属性默认展开

< summary></summary> details 元素的标题

<span style="font-size:18px;"><details><summary>妙味课堂</summary><p>国内将知名的IT培训机构</p>
</details></span>

点击summary后，details标签中出现open属性，默认为第一个图。

<dialog></dialog>定义一段对话

<span style="font-size:18px;"><dialog><dt>老师</dt><dd>2+2 等于？</dd><dt>学生</dt><dd>4</dd><dt>老师</dt><dd>答对了！</dd>
</dialog></span>

<mark></mark> 需要标记的词或句子

<span style="font-size:18px;"><mark>标记</mark>  // 此文字将黄色背景显示</span>

<progress><progress>定义进度条

<time>10:54 2014-1-5</time>

<span style="font-size:18px;"><progress max="100" value="76"><span>76%</span>
</progress></span>

<time> 标签不会在任何浏览器中呈现任何特殊效果。

IE6、7、8下的兼容

针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们。方法如下：
在页面的头部加下：

<span style="font-size:18px;"><script>document.createElement(“header”);document.createElement(“nav”);document.createElement(“footer”);……
</script></span>

HTML5语义化标签在IE6-8下，我们用js创建出来之后，他是不会有任何默认样式的甚至是 display，所以在样式表里要对这些标签定义一下它默认的display

新的输入型控件

email : 电子邮箱文本框，跟普通的没什么区别
当输入不是邮箱的时候，验证通不过，移动端的键盘会有变化

<span style="font-size:18px;"><input type="email"></span>

tel : 电话号码没有验证，移动端的键盘会有变化

<span style="font-size:18px;"><input type="tel"></span>

url : 网页的URL 有url验证

<span style="font-size:18px;"><input type="url"></span>

search : 搜索引擎 chrome下输入文字后，会多出一个关闭的X

<span style="font-size:18px;"><input type="search"></span>

range : 特定范围内的数值选择器 min、max、step( 步数 )

<span style="font-size:18px;"><input type="range" max="10" min="0" step="2"  value="2" />
<input type="submit" /></span>

number : 只能包含数字的输入框 有数字验证，移动端键盘会有变化，在chrome下获取鼠标后会有上下箭头，用来加减数字。

<span style="font-size:18px;"><input type="number"/>
<input type="submit" /></span>

color : 颜色选择器 点击会出现颜色选择器

<span style="font-size:18px;"><input type="color"/>
<input type="submit" /></span>

datetime : 显示完整日期

<span style="font-size:18px;"><p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p></span>

便于搜索引擎搜索。当搜索引擎搜索该网页时，知道这个标签里面的文本是和事件有关的的，不是普通的文本内容。也可用这个标签实现自动更新内部文本、

datetime-local : 显示完整日期，不含时区

<span style="font-size:18px;"><input type="datetime-local" />
<input type="submit" /></span>

time : 显示时间，不含时区
date : 显示日期
week : 显示周
month : 显示月

<span style="font-size:18px;"><form><input type="month" />月<input type="week" />周<input type="date" />日<input type="time" /><input type="submit" />
</form></span>

新的表单特性和函数

placeholder : 输入框提示信息

<input type="password" value="" placeholder="请输入">

该属性显示效果和value类似，但是对于密码输入框password，不会将提示信息也显示成 ··· 。

autocomplete : 是否保存用户输入值
默认为on，关闭提示选择off

<input type="text" name="user" autocomplete="on">

autofocus : 指定表单获取输入焦点

<input type="text" name="user" autocomplete="off" autofocus="">

list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id

required : 此项必填，不能为空

<input type="text" required="">

Pattern : 正则验证 pattern="\d{1,5}“

<input type="text" pattern="\d{1,5}">

Formaction 在submit里定义提交地址

<span style="font-size:18px;"><form action="http://www.miaov.com"><input type="text"  /><input type="password"  /><input type="submit" value="提交" Formaction="http://www.baidu.com"  /><input type="submit" value="保存草稿" Formaction="http://www.qq.com" />
</form></span>

表单验证

validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值是否符合min、max及step的规则
customError 不符合自定义验证；setCustomValidity(); 设置自定义验证

可以通过js查看验证状态：

<pre code_snippet_id="473135" snippet_file_name="blog_20140923_28_1463508" name="code" class="html"><pre code_snippet_id="473135" snippet_file_name="blog_20140923_28_1463508" name="code" class="html"><pre name="code" class="html"><script>
window.οnlοad=function()
{var oText=document.getElementById("text");oText.addEventListener('invalid',fn,false);function fn(){alert(oText.validity.valid);   // 是否满足验证

                alert(oText.validity.valueMissing);// 用户输入为空的时候 返回true 否则返回false}};
</script>

<form action="http://www.miaov.com">
<span style="white-space:pre"> </span><input type="text" id="text" <span style="color:#cc0000;">required</span>  /><input type="submit" value="提交"/>
</form>

返回的验证信息根据表单控件要求。

<script>
window.οnlοad=function()
{var oText=document.getElementById("text");oText.addEventListener('invalid',fn,false);oText.value='123456789012345';function fn(){alert(oText.validity.tooLong);// 用户输入值超过maxLength时候 返回true 否则返回false}};
</script>

<form action="#"><input type="text" id="text" maxlength="10" value="" name="user" /><input type="submit" value="提交"/>
</form>

Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false)
阻止默认验证：ev.preventDefault()
自定义验证
input.oninput=function(){
if(this.value=="胖子")
this.setCustomValidity("请不要输入胖子");
};

window.οnlοad=function()
{var oText=document.getElementById("text");oText.οninput=function(){if(this.value=="胖子"){this.setCustomValidity("请不要输入胖子");}else{this.setCustomValidity("");}};oText.addEventListener('invalid',fn,false);function fn(){alert(oText.validity.customError);// 用户输入值不合符自定义验证的时候 返回true 否则返回false}};

<form action="#">老刘是<input type="text" id="text" /><input type="submit" value="提交"/>
</form>

formnovalidate属性 : 关闭验证

<form action="http://www.miaov.com"><input type="text" required name="user"  /><input type="email" name="email" required /><input type="submit" value="提交" Formaction="http://www.baidu.com"  /><input type="submit" value="保存草稿" Formaction="http://www.qq.com" <span style="color:#cc0000;">formnovalidate</span> />
</form>

点击第一个submit时，会有验证提示，但是点击第二个时就没有验证了。

HTML5基础知识整理（一）—— 新增标签和属性相关推荐

HTML5的基础知识整理
HTML5 概述:HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. 文章目录 HTML5 前言一.HTMl ...
Web前端基础知识整理
1. 前端基础知识文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述特点: 扩展名为.xml 内容区分大小写标签要成对出现,形成容器,只能有一个标签按正确 ...
jQuery基础知识整理
jQuery基础知识整理 jQuery简介什么是jQuery(了解) jQuery简化JS代码 jQuery的核心思想:"写的更少,但做的更多"(write less,do mo ...
使用Aspose.Cells的基础知识整理
使用Aspose.Cells的基础知识整理转自 http://www.cnblogs.com/kenblove/archive/2009/01/07/1371104.html 这两天用Aspose. ...
HTML5 基础知识
HTML5 基础知识什么是 HTML? HTML 是一种超文本标记语言,"超文本"就是指页面内可以包含图片.链接.深职音乐.视频.程序等非文字元素 HTML 不是一种编程语言 H ...
python常用变量名_python基础知识整理
Python Python开发 Python语言 python基础知识整理序言:本文简单介绍python基础知识的一些重要知识点,用于总结复习,每个知识点的具体用法会在后面的博客中一一补充程序: 一 ...
计算机二级c语基础知识,计算机二级C语基础知识整理.doc
计算机二级C语基础知识整理 1.1 算法算法:是一组有穷指令集,是解题方案的准确而完整的描述.通俗地说,算法就是计算机解题的过程.算法不等于程序,也不等于计算方法,程序的编制不可能优于算法的设计. ...
html5基础知识文档,HTML5基础知识（1）
原标题:HTML5基础知识(1) html5是万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力, ...
前端基础知识整理汇总（中）
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...

HTML5基础知识整理（一）—— 新增标签和属性

HTML5基础知识整理（一）—— 新增标签和属性相关推荐

最新文章

热门文章