Html5语义化标签及兼容性处理详解
主要用于页面的头部的信息介绍,也可用于板块头部 hgroup> /hgroup> 页面上的一个标题组合 一个标题和一个子标题,或者标语的组合
hgroup>
h1> 妙味课堂/h1>
h2> 带您进入富有人情味的IT培训/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>
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> 妙味课堂 photo & copy 妙味趣学/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>
summary> 妙味课堂/summary>
p> 国内将知名的IT培训机构/p>
/details>
diaLOG> /dialog> 定义一段对话
dialog>
dt> 老师/dt>
dd> 2+2 等于?/dd>
dt> 学生/dt>
dd> 4/dd>
dt> 老师/dt>
dd> 答对了!/dd>
/dialog>
address> /address> 定义文章 或页面作者的详细联系信息
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="100" value="76">
span> 76/span> %
/progress>
标签
针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们 方法如下:
在页面的头部加下:
script>
document.createElement(“header”);
document.createElement(“nav”);
document.createElement(“footer”);
……
/script>
样式
HTML5语义化标签在IE6-8下,我们用js创建出来之后,他是不会有任何默认样式的甚至是 display,所以在样式表里 要对这些标签定义一下 它默认的display
新的输入型控件
email : 电子邮箱文本框,跟普通的没什么区别 当输入不是邮箱的时候,验证通不过 移动端的键盘会有变化
tel : 电话号码
url : 网页的URL
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} “
表单验证
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(); 自定义验证
Invalid事件 : 验证反馈
input.addEventListener('invalid',fn,false)
阻止默认验证:ev.preventDefault()
formnovalidate属性 : 关闭验证
Formaction 在submit里定义提交地址
以上就是Html5语义化标签及兼容性处理详解的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: Html5语义化标签及兼容性处理详解
本文地址: https://pptw.com/jishu/583447.html