从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值

一、html5新增标签

1.结构性标签

header 定义网页的头部

nav 定义网页的导航

footer 定义网页的底部

section 定义网页的某个区域

article 定义网页中的一篇文章

aside 定义网页的侧边栏

hgroup 将网页某个区域的标题进行组合

figure 将网页中的元素进行组合

figcaption 定义figure的标题

dialog 定义一个对话框

2.定义带有记号的文本语法： <mark>带有记号的文本</mark>

3.定义一定范围内的标量或测量语法：<meter min="0" max="100" value="10"></meter>

4.定义一定范围内的进度或进程语法：<progress min="0" max="100" value="1"></progress>

5.音频语法：

<audio controls autoplay loop>
<source src="1.mp3" type="audio/mp3"/>
...
Your browser does not support the element
</audio>

注：

a）controls 添加一个音频控制条

b) autoplay 设置自动播放

c) loop 设置循环播放

d) src 引入音频文件

注：常见的音频格式：mp3,wav,ogg

6.视频语法：

<video controls width="500" height="300" autoplay loop poster="1.jpg">
<source src="1.mp4" type="video/mp4"/>
...
Your browser does not support the element
</video>

注：

a) width 定义视频区域的宽度

b) height 定义视频区域的高度

c) poster 在播放前或快进时显示的一张图片

d) controls,autoplay,loop,src同audio中的这些属性

注：常见的视频格式：mp4,webm,ogg

---

二、h5表单新增type属性值

1.type="email"　　限制用户输入必须为邮箱（必须含有@,并且@前后内容不能为空）

2.type="url"　　　 限制用户输入必须为网址(必须含有http:)

3.type="number"　限制用户输入必须为数字

eg: <input type="number" value="1" min="1" max="10" step="2"/>

注：step用来设置每次递增和递减的数量，默认为1

4.type="range"　　产生一个滑动条的效果

5.type="color"　　产生一个颜色选择面板

6.type="date"　　产生一个选择日期的面板（年/月/日）

7.type="time"　　选择时间（时:分）

8.type="month"　　选择年月

9.type="week"　　选择某一日期是这一年的第几周

---

三、h5新增表单新属性

1.required限制用户输入不能为空，必填

eg: <input type="text" required/>

2.placeholder给input控件添加一个默认提示信息

3.autofocus页面加载完成后自动聚焦到某一个input控件

4.pattern限制用户输入的内容要匹配相应的正则表达式

eg: <input type="text" pattern="[a-zA-Z0-9]{6,16}"/>

5.min/max　限制输入的最大，最小值

eg: <input type="number" min="1" max="10"/>

6.step设置number类型和range类型每次递增递减的值

7.产生一个具有搜索意义的表单

a) type="search" 具有搜索意义的input控件

b) list 关联一个datalist的下拉提示单

c) datalist 数据列表下拉菜单

eg: <input type="search" list="data"/>

<datalist id="data">
<option>aaa</option>
<option>bbb</option>
...
</datalist>

注：type为search的input框的list属性值必须和datalist标签的id名一致才能实现搜索的功能

8.novalidate取消表单验证

eg: <form novalidate="novalidate">...</form>