HTML5语义化元素
2016-02-15 17:34
411 查看
在HTML 5对HTML 4所做的各种修改中,一个比较重大的修改就是为了使文档结构更加清晰明确,容易阅读,增加了许多新的结构元素。
页眉 主要用于页面的头部的信息介绍,也可用于板块头部
页面上的一个标题组合 一个标题和一个子标题,或者标语的组合
aside 的内容应该与 article 的内容相关。被包含在article标签中作为主要内容的附属信息部分,其中的内容 以是与当前文章有关的引用、词汇列表等。
在article之外使用,作为页面或站点全局的附属信息部分;
最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。
IE下的兼容
标签 针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们 方法如下: 在页面的头部加下:
样式 HTML5语义化标签在IE6-8下,我们用js创建出来之后,他是不会有任何默认样式的甚至是 display,所以在样式表里 要对这些标签定义一下 它默认的display
Forms
新的输入型控件
email : 电子邮箱文本框,跟普通的没什么区别 当输入不是邮箱的时候,验证通不过 移动端的键盘会有变化
tel : 电话号码
url : 网页的UR
L search : 搜索引擎 chrome下输入文字后,会多出一个关闭的
X range : 特定范围内的数值选择器 min、max、step( 步数 )
例子 : 用JS来显示当前数值
新的输入型控件_2
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期
datetime-local : 显示完整日期,不含时区
time : 显示时间,不含时区
date : 显示日期
week : 显示周
month : 显示月
新的表单特性和函数
placeholder : 输入框提示信息 例子 : 微博的密码框提示
autocomplete : 是否保存用户输入值 默认为on,关闭提示选择
off autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表 list值为datalist标签的
id required : 此项必填,不能为空
Pattern : 正则验证 pattern=”\d{1,5}“ Formaction 在submit里定义提交地址
表单验证
validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,一种验证失败返回false
oText.addEventListener(“invalid”,fn1,false);
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow:验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError 不符合自定义验证
setCustomValidity(); 自定义验证
这里只列出了一些基本元素,更多详细内容还需查看W3C的有关文档。
<header></header>
页眉 主要用于页面的头部的信息介绍,也可用于板块头部
<hgroup></hgroup>
页面上的一个标题组合 一个标题和一个子标题,或者标语的组合
<hgroup> 语义化标签 <h1>HTML5语义化标签</h1> <h2></h2> </hgroup> <nav></nav> 导航 (包含链接的的一个列表) <nav> <a href=“#”>链接</a> <a href=“#”>链接</a> </nav> <nav> <p><a href=“#”>HTML 5</a></p> <p><a href=“#”>HTML 5</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),其中的内容可以是友情链接、附属导航或广告单元等。
<details></details>用于描述文档或文档某个部分的细节 该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容 Open 属性默认展开 < summary></summary> details 元素的标题 <details> <summary>HTML 5</summary> <p>HTML 5,新的web时代</p> </details> <dialog></dialog>定义一段对话 <dialog> <dt>老师</dt> <dd>2+2 等于?</dd> <dt>学生</dt> <dd>4</dd> <dt>老师</dt> <dd>答对了!</dd> </dialog> <progress> <progress>定义进度条 <progress max="100" value="76"> <span>76</span>% </progress>
IE下的兼容
标签 针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们 方法如下: 在页面的头部加下:
<script> document.createElement(“header”); document.createElement(“nav”); document.createElement(“footer”); …… </script>
样式 HTML5语义化标签在IE6-8下,我们用js创建出来之后,他是不会有任何默认样式的甚至是 display,所以在样式表里 要对这些标签定义一下 它默认的display
Forms
新的输入型控件
email : 电子邮箱文本框,跟普通的没什么区别 当输入不是邮箱的时候,验证通不过 移动端的键盘会有变化
tel : 电话号码
url : 网页的UR
L search : 搜索引擎 chrome下输入文字后,会多出一个关闭的
X range : 特定范围内的数值选择器 min、max、step( 步数 )
例子 : 用JS来显示当前数值
新的输入型控件_2
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期
datetime-local : 显示完整日期,不含时区
time : 显示时间,不含时区
date : 显示日期
week : 显示周
month : 显示月
新的表单特性和函数
placeholder : 输入框提示信息 例子 : 微博的密码框提示
autocomplete : 是否保存用户输入值 默认为on,关闭提示选择
off autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表 list值为datalist标签的
id required : 此项必填,不能为空
Pattern : 正则验证 pattern=”\d{1,5}“ Formaction 在submit里定义提交地址
表单验证
validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,一种验证失败返回false
oText.addEventListener(“invalid”,fn1,false);
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow:验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError 不符合自定义验证
setCustomValidity(); 自定义验证
这里只列出了一些基本元素,更多详细内容还需查看W3C的有关文档。
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 注册表的组织结构
- 通过Mootools 1.2来操纵HTML DOM元素
- 表格标签table深入了解
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- 如何使用jquery easyui创建标签组件
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类(类似XElement语法)
- 没有文件大小限制并免费的PDF到HTML转换工具
- SQLSERVER的非聚集索引结构深度理解
- 调整SQLServer2000运行中数据库结构
- JavaScript与HTML结合的基本使用方法整理
- C#基础语法:结构和类区别详解