Day10_HTML5&CSS3课堂笔记

Day10 HTML5 课堂笔记

1 HTML5 新增语义化标签

1.1 新增页面结构标签

标签名	语义和功能	属性	单标签还是双标签
header	定义页面头部		双标签
footer	定义页面脚部		双标签
nav	定义导航条		双标签
section	定义文章或页面中一部分		双标签
article	定义文章、新闻或者帖子等		双标签
aside	定义侧边栏		双标签

注意：

main 标签表示主要内容，只有W3C标准规定了该标签！

1.2 新增状态标签

标签名	语义和功能	属性	单标签还是双标签
meter	静态度量	max、min、value、low、high、optimum	双标签
progress	动态进度	max、value	双标签

meter 和 progress 什么区别？

meter 表示静态的度量，用于表示温度、磁盘容量、电池电量等。

progress 表示动态的进度，用于表示进度条。

1.3 新增列表标签

标签名	语义和功能	属性	单标签还是双标签
datalist	用于搜索框的提示信息		双标签
details	用于定义关键字和对关键字的描述	open： 无需给值	双标签
summary	包含在 details 的里面		双标签

① datalist 的用法

<input type="text" list="myData">
<datalist id="myData">
    <option value="abb"></option>
    <option value="abc"></option>
    <option value="abd"></option>
    <option value="acc"></option>
    <option value="bff"></option>
    <option value="ffc"></option>
    <option value="aaa"></option>
</datalist>

② details 的用法

 <details>
        <summary>如何一夜暴富？</summary>
        <div>子年举低升力己以往一于不才夭是慨但必在。</div>
        <p>法娟就，非在公无通韩谓马郭是之联遗车交者，事到定时好而畴不况才设历你斯原是竟使完，第事姑叹的，么迷此音姑屯杂都谋上平嗣当锐一你句今，考谭皇呼定他下主妄韩所薪，妙把了快念对公极曰侯，来将十人王整一人望看惜千台解，斯畴主极语人挟王罪，俭我人迷无极药时，定今主在之他死鲜云活，举葬爱卑说司老之才杨无化这，便者争流春我年斯自药请何不自完之，日罪我人灰白上是贤，的憾是觉爻，对褒撒好，杀韩了通使，元登许位褒逃。</p>
 </details>

1.4 新增注释标签（注音标签）

标签名	语义和功能	属性	单标签还是双标签
ruby	注音标签		双标签
rt	包裹在ruby的里面，写注音		双标签

<ruby>饕<rt>tao</rt></ruby>
<ruby>餮<rt>tie</rt></ruby>

1.5 新增文本标签

标签名	语义和功能	属性	单标签还是双标签
mark	标记标签		双标签

2 HTML5 表单新增功能

2.1 表单控件新增属性

placeholder		设置输入框的文字提示，用于文输入框类的表单控件，包括文本域
required		设置该表单控件必填或必选，用于所有类型的表单控件
autofocus		设置自动获取焦点，用于所有类型的表单控件
autocomplete	设置是否显示该输入框的历史搜索记录，用于输入框类，属性的值是 on 或者 off
pattern			设置正则用于验证输入框内容，用于输入框类型，包括文本域

2.2 input 标签的 type 属性新增的值

① 文本输入框类

<!-- 邮箱 在提交表单的时候会验证输入的是否是邮箱地址 -->
<input type="email">

<!-- URL 在提交表单的时候验证输入的是否是url -->
<input type="url">

<!-- 数字，输入框无法输入非数字，提交表单的时候会验证是否是有效数字 -->
<input type="number">
<input type="number" max="100" min="-100">
<input type="number" max="100" min="0" step="10">

<!-- 电话号码 没有验证的功能，移动端会弹出数字键盘 -->
<input type="tel">

<!-- 搜索框 不会验证，纯粹的语义-->
<input type="search">

② 范围选择框

<input type="range">
<input type="range" max="100" min="0">
<input type="range" max="100" min="0" step="10">

③ 颜色选择框

<input type="color">

④ 时间日期选择框类

<!--选择日期 年月日-->
<input type="date">

<!--选择年月-->
<input type="month">

<!--选择一年中的第几周-->
<input type="week">

<!--时间选择框-->
<input type="time">

<!--日期+时间选择框-->
<input type="datetime-local">

2.3 form 标签新增属性

novalidate		该属性没有值，不验证