html5语义化标签——回顾
html5 头部结构 <!doctype html> <meta charset=“utf-8”/>
<header></header> 页眉
主要用于页面的头部的信息介绍,也可用于板块头部
<hgroup></hgroup> 页面上的一个标题组合
一个标题和一个子标题,或者标语的组合
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
<nav></nav> 导航 (包含链接的的一个列表)(包含链接的的一个列表)
<nav>
<p><a href=“#”>妙味课堂</a></p>
<p><a href=“#”>妙味课堂</a></p>
</nav>
<footer></footer>页脚 页面的底部 或者 版块底部
<section> <section> 页面上的版块
用于划分页面上的不同区域,或者划分文章里不同的节
<article></ article > 用来在页面中表示一套结构完整且独立的内容部分
<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分
<figure> < figure > 用于对元素进行组合。一般用于图片或视频
<figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明
<figure>
<img src=“miaov.png”/>(注意没有alt)
<figcaption> html5语义化标签</figcaption>
</figure>
<time></time>用来表现时间或日期
<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>参数
<p> 我在 <time datetime="2017-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>内容</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>
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属性 : 关闭验证
demo 下载 https://github.com/ningmengxs/html5.git
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例