作者：ggty11 | 来源：互联网 | 2023-05-27 21:26
HTML5新特性的浏览器支持情况http:www.caniuse.com#index语义化标签的由来http:devfiles.myopera.comarticles572idlist
HTML5新特性的浏览器支持情况
http://www.caniuse.com/#index
语义化标签的由来
http://devfiles.myopera.com/articles/572/idlist-url.htm
语义化标签
页眉
主要用于页面的头部的信息介绍，也可用于板块头部
页脚
页面的底部 或者 版块底部
页面上的一个标题组合 （在最新的html5.1中已被废除）
一个标题和一个子标题，或者标语的组合
妙味课堂
带您进入富有人情味的IT培训
导航 （包含链接的的一个列表）
页面上的版块
用于划分页面上的不同区域,或者划分文章里不同的节
用来在页面中表示一套结构完整且独立的内容部分
可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。
元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分
aside 的内容应该与 article 的内容相关。
被包含在中作为主要内容的附属信息部分，其中的内容 以是与当前文章有关的引用、词汇列表等
在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
主体
用于对元素进行组合。一般用于图片或视频
figure的子元素 用于对figure的内容 进行说明
(注意没有alt)
******** © ********
选项列表。与 input 元素配合使用，来定义 input 可能的值。
该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容
Open 属性默认展开
details 元素的标题
妙味课堂
国内将知名的IT培训机构
点击summary后，details标签中出现open属性，默认为第一个图。
定义一段对话
需要标记的词或句子
标记 // 此文字将黄色背景显示
IE6、7、8下的兼容
针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用Javascript来解决他们。方法如下：
在页面的头部加下：
HTML5语义化标签在IE6-8下，我们用js创建出来之后，他是不会有任何默认样式的甚至是 display，所以在样式表里 要对这些标签定义一下 它默认的display
新的输入型控件
email : 电子邮箱文本框，跟普通的没什么区别
当输入不是邮箱的时候，验证通不过，移动端的键盘会有变化
tel : 电话号码 没有验证，移动端的键盘会有变化
url : 网页的URL 有url验证
search : 搜索引擎 chrome下输入文字后，会多出一个关闭的X
range : 特定范围内的数值选择器 min、max、step( 步数 )
number : 只能包含数字的输入框 有数字验证，移动端键盘会有变化，在chrome下获取鼠标后会有上下箭头，用来加减数字。
color : 颜色选择器 点击会出现颜色选择器
datetime : 显示完整日期
我在 有个约会。
便于搜索引擎搜索。当搜索引擎搜索该网页时，知道这个标签里面的文本是和事件有关的的，不是普通的文本内容。也可用这个标签实现自动更新内部文本、
datetime-local : 显示完整日期，不含时区
time : 显示时间，不含时区
date : 显示日期
week : 显示周
month : 显示月
月
周
日
新的表单特性和函数
placeholder : 输入框提示信息
该属性显示效果和value类似，但是对于密码输入框password，不会将提示信息也显示成 ··· 。
autocomplete : 是否保存用户输入值
默认为on，关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id
required : 此项必填，不能为空
Pattern : 正则验证 pattern="\d{1,5}“
Formaction 在submit里定义提交地址
表单验证
validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError 不符合自定义验证 ；setCustomValidity(); 设置自定义验证
可以通过js查看验证状态：
required />
返回的验证信息根据表单控件要求。
Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false)
阻止默认验证：ev.preventDefault()
自定义验证
input.oninput=function(){
if(this.value=="胖子")
this.setCustomValidity("请不要输入胖子");
};
window.Onload=function()
{
var oText=document.getElementById("text");
oText.Oninput=function()
{
if(this.value=="胖子")
{
this.setCustomValidity("请不要输入胖子");
}
else
{
this.setCustomValidity("");
}
};
oText.addEventListener('invalid',fn,false);
function fn()
{
alert(oText.validity.customError);// 用户输入值不合符自定义验证的时候 返回true 否则返回false
}
};
老刘是
formnovalidate属性 : 关闭验证
formnovalidate />
点击第一个submit时，会有验证提示，但是点击第二个时就没有验证了。
京公网安备 11010802041100号