html5语义化标签的由来,html5语义化标签——回顾(示例代码)

html5 头部结构  　　   　　

页眉

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

页面上的一个标题组合

一个标题和一个子标题，或者标语的组合

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

妙味课堂

妙味课堂

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

页面上的版块

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

article > 用来在页面中表示一套结构完整且独立的内容部分

aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分

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

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

(注意没有alt)

html5语义化标签

用来表现时间或日期

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

参数

我在 情人节 有个约会。

选项列表。与 input 元素配合使用，来定义 input 可能的值。

javascript

html

css

用于描述文档或文档某个部分的细节

该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容

Open 属性默认展开

< summary> details 元素的标题

元素标题

内容

定义一段对话

老师2+2 等于？学生4老师答对了！

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

需要标记的词或句子

给表单添加一个公钥

用户:

公钥:

定义进度条

76%

forms

新的输入型控件

email  :  电子邮箱文本框，跟普通的没什么区别当输入不是邮箱的时候，验证通不过移动端的键盘会有变化

tel   :   电话号码

url   :   网页的URL

search  :  搜索引擎

chrome下输入文字后，会多出一个关闭的X

range  :  特定范围内的数值选择器

min、max、step( 步数 )

新的输入型控件

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(); 自定义验证

表单验证

Invalid事件  :  验证反馈 input.addEventListener(‘invalid‘,fn,false)

阻止默认验证：ev.preventDefault()

formnovalidate属性  :  关闭验证