HTML5学习记录

新增语义化标签

新增布局标签

标签名	语义
header	页面或部分区域的头部
footer	页面或部分区域的底部
nav	导航栏
article	文章等
section	文章中的某段文字
aside	侧边栏

以上均为双标签

article 和 section区别：

• article 包含 section，artical 里面可以有多个 section 。 
• section 强调的是分段或分块
• article 比较独立

新增状态标签

meter标签

语义：

 显示某些量（例：手机电量条）

常用属性：

属性	作用
hight	规定高值
low	规定低值
max	规定最大值
min	规定最小值
optimum	规定最优值
value	规定当前值

 progress 标签

语义：

  显示进度

常用属性：

属性	作用
max	规定最大值
value	规定当前值

新增列表标签

标签名	语义
datalist	用于搜索框的关键字提示
details	用于展示问题和答案，或对专有名词进行解释
summary	写在 details 的里面，用于指定问题或专有名词

    <input type="text" list="test01">
    <datalist id="test01">
        <option value="test">test</option>
        <option value="text">text</option>
        <option value="dom">dom</option>
        <option value="bom">bom</option>
    </datalist>

效果示例：

    <details>
        <summary>test1111</summary>
        <p>111</p>
        <p>222</p>
        <p>333</p>
    </details>

效果示例：

新增文本标签 

注音

标签：

1. ruby：需要注音文字
2. rt：注音

<ruby>
    <span>离八月二十号还有十天</span>
    <rt> li ba yue er shi hao hai you shi nian </rt>
</ruby> 

 

标记

标签名：

  mark：用于标记搜索结果中的关键字

新增表单功能

表单控件新增属性

属性名	功能	使用标签
placeholder = “ ”	提示文字	文字输入类标签
required	必填项	除按钮外所有
autofocus	自动获取焦点	所有
autocomplete = “ on/off”	保存输入记录	除密码、多行输入外的文字 输入类标签
pattern	正则表达式	文本输入类标签（多行输入除外） 与required配合使用

input标签新增type属性值

属性值	作用（语义）	是否验证格式
email	邮箱输入	验证格式，输入为空则不验证格式
url	网址输入
number	数字输入
search	搜索输入，可删除	不验证格式
tel	电话输入
range	范围选择
color	颜色选择
date	日期选择
month	月份选择
week	周选择
time	时间选择
datetime-local	日期+时间选择

form 标签新增属性

属性名：novalidate

功能：提交表单时不再进行验证。

新增多媒体标签

视频

标签名：<video>  双标签

属性：

属性名	属性值	作用
src	文件地址	视频地址
poster		封面地址
controls	无	视频可控（最好写上）
muted		静音
autoplay		自动播放
loop		循环播放
preload	auto / metadata / none	预加载，如果使用 autoplay ，则 忽略该属性

音频

标签名：<audio> 双标签

属性：

属性名	属性值	作用
src	文件地址	音频地址
controls	无	音频可控（最好写上）
muted		静音
autoplay		自动播放
loop		循环播放
preload	auto / metadata / none	预加载，如果使用 autoplay ，则 忽略该属性

新增全局属性（了解）

属性名	功能
contenteditable	表示元素是否可被用户编辑，可选值如下： true ：可编辑 false ：不可编辑
draggable	表示元素可以被拖动，可选值如下： true ：可拖动 false ：不可拖动
hidden	隐藏元素
spellcheck	规定是否对元素进行拼写和语法检查，可选值如下： true ：检查 false ：不检查
contextmenu	规定元素的上下文菜单，在用户鼠标右键点击元素时显示。
data-*	用于存储页面的私有定制数据