一、学习内容
1.HTML5新增语义化标签
1.1 section标签
表示页面中的一个内容区块
1.2 header标签
表示整个页面的标题,或者某个区块的标题
1.3 footer标签
表示整个页面的尾部,或者某个区块的尾部
1.4 nav标签
表示页面中的导航链接部分
1.5 article标签
表示一块与上下文无关的独立的内容
1.6 aside标签
在article之外,但与article内容相关的辅助信息
1.7 figure标签
表示一段独立的流内容,可以使用figcaption标签为其添加标题
1.8 main标签
表示页面中的主要内容,IE不兼容
兼容低版本浏览器:
1.9 dialog标签
定义对话框或者窗口
属性open规定 dialog 元素是活动的,用户可与之交互。
1.10 canvas标签
HTML5 canvas 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成
canvas 标签只是图形容器,您必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
2. 表单新增内容
2.1 input标签新增内容
<!--拖动条-->
<input type="range" name="" id="" value="20"><br>
<!--选择颜色-->
<input type="color" name="" id=""><br>
<!--选择年月日-->
<input type="date" name="" id=""><br>
<!--选择年月日时分-->
<input type="datetime-local" name="" id=""><br>
<!--邮箱-->
<input type="email" name="" id=""><br>
<!--选择文件-->
<input type="file" name="" id=""><br>
<!--定义图像作为提交按钮-->
<input type="image" src="images/Ak1.png" alt=""><br>
<!--数字-->
<input type="number" name="" id=""><br>
<!--搜索-->
<input type="search" name="" id=""><br>
<!--手机号-->
<input type="tel" name="" id=""><br>
<!--时分-->
<input type="time" name="" id=""><br>
<!--年和第几周-->
<input type="week" name="" id=""><br>
<!--定义用于 URL 的文本字段。-->
<input type="url" name="" id=""><br>
<!--年和第几个月-->
<input type="month" name="" id=""><br>
2.2 表单新增属性
-
placeholder属性:文本框处于未输入状态时文本框中显示的输入提示。
-
autofocus属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得焦点,一个页面只能有一个。
-
required属性:验证输入不能为空
-
autocomplete属性:输入富足和所用的自动完成功能,是一个节省输入时间,同时也十分方便的功能。属性值:on/off。on可是显示指定候补输入的数据列表,使用datalist元素与list属性提供候补输入的数据列表,自动完成时,可以将该datalist元素中的数据作为候补输入的数据在文本框中显示:
-
novalidate取消验证 可以对form表单添加novalidate属性,即使form表单中的input添加了required,也将不进行验证partten
-
Multiple:可以输入一个或多个值,每个值之间用逗号分开 例: 还可以应用于file
-
pattern属性pattern用于验证表单输入的内容,通常HTML5的type属性,比如email、tel、number、data类、url等,已经自带了简单的数据格式验证功能了,加上pattern后,前端部分的验证更加简单高效了。显而易见,pattern的属性值要用正则表达式。
-
output:定义不同类型的输出,如计算结果的输出,或脚本的输出。
注:必须从属于某个表单。即,必须将它书写在表单内部
-
Datalist :数据列表
例:
提示:option 元素永远都要设置 value 属性。
list属性:结合datalist元素使用
3. video和audio
video元素 定义视频
<video src="movie.ogg" controls="controls">Video元素</video>
audio元素 定义音频
<audio src="someaduio.wav">Audio元素</audio>
controls属性:如果出现该属性,则向用户显示控件,比如播放按钮。
autoplay属性:如果出现该属性,则视频在就绪后马上播放。
loop属性:重复播放属性。
muted属性:静音属性。
poster属性:规定视频正在下载时显示的图像,直到用户点击播放按钮。
<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
<video controls>
<source src="../mv/movie.ogg" type="video/ogg">
<source src="../mv/web.mp4" type="video/mp4">
</video>
Type属性值: 用于视频:video/ogg video/mp4 video/webm 用于音频:audio/ogg audio/mpeg audio/mp3