这篇文章运用简单易懂的例子给大家介绍Html5语义化标签及兼容性处理详细介绍,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
成都创新互联专注于网站建设,为客户提供成都网站设计、成都网站制作、网页设计开发服务,多年建网站服务经验,各类网站都可以开发,成都品牌网站建设,公司官网,公司展示网站,网站设计,建网站费用,建网站多少钱,价格优惠,收费合理。主要用于页面的头部的信息介绍,也可用于板块头部 页面上的一个标题组合 一个标题和一个子标题,或者标语的组合
妙味课堂
带您进入富有人情味的IT培训
导航 (包含链接的的一个列表)
妙味精品课程
页脚 页面的底部 或者 版块底部
(注意没有alt)
用来表现时间或日期
我们在每天早上 开始营业。
参数我在 有个约会。
选项列表。
与 input 元素配合使用,来定义 input 可能的值。
Open 属性默认展开
< summary> details 元素的标题
国内将知名的IT培训机构
定义一段对话
需要标记的词或句子
76%
标签
针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们 方法如下:
在页面的头部加下:
document.createElement(“header”);
document.createElement(“nav”);
document.createElement(“footer”);
……
样式
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语义化标签及兼容性处理详细介绍就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站名称:Html5语义化标签及兼容性处理详细介绍-创新互联
新闻来源:http://lswzjz.com/article/djojih.html