登录  /  注册
首页 > web前端 > H5教程 > 正文

Html5语义化标签及兼容性处理详解

PHP中文网
发布: 2017-06-21 14:27:54
原创
1155人浏览过

页眉

主要用于页面的头部的信息介绍,也可用于板块头部

页面上的一个标题组合 一个标题和一个子标题,或者标语的组合

妙味课堂

带您进入富有人情味的IT培训

导航 (包含链接的的一个列表)

链接链接

妙味课堂

妙味课堂

妙味精品课程

页脚 页面的底部 或者 版块底部

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

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

用于对元素进行组合。一般用于图片或视频

figure的子元素 用于对figure的内容 进行说明

Html5语义化标签及兼容性处理详解(注意没有alt)

妙味课堂 photo &copy 妙味趣学

用来表现时间或日期

我们在每天早上 开始营业。

参数

我在 有个约会。

选项列表。

与 input 元素配合使用,来定义 input 可能的值。

用于描述文档或文档某个部分的细节 该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容

Open 属性默认展开

details 元素的标题

妙味课堂

国内将知名的IT培训机构

定义一段对话

老师

2+2 等于?

学生

4

老师

答对了!

定义文章 或页面作者的详细联系信息

需要标记的词或句子

给表单添加一个公钥

用户:

公钥:

定义进度条

76%

标签

针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们 方法如下:

在页面的头部加下:

<script></script>

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语义化标签及兼容性处理详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号