HTML学习笔记（六）HTML5学习

结构/语义元素

<header>...</header>：定义文档头部区域
<footer>...</footer>：定义文档脚部区域
<section>...</section>：定义文档中的节（页面中的一块区域）
<article>...</article>：定义页面独立的内容区域（独立的文章内容）
<aside>...</aside>：定义页面的侧边栏内容（相关内容或者引文）
<nav>...</nav>：定义导航链接的部分。

表单

新增的表单元素

<datalist>...</datalist>：定义选项列表，与input元素配合使用

使用方法：

<input type="text" value="输入明星" list="star"/> <!--  input里面用 list -->
<datalist id="star">   <!-- datalist 里面用 id  来实现和 input 链接 -->  
            <option>刘德华</option>
            <option>刘若英</option>
            <option>刘晓庆</option>
            <option>郭富城</option>
            <option>张学友</option>
            <option>郭郭</option>
</datalist>

新增的input输入类型

类型	使用示例	含义
email	<input type="email" />	输入邮箱格式
url	<input type="url" />	输入url格式
number	<input type="number" />	输入数字
range	<input type="range" />	自由拖动滑块
search	<input type="search" />	搜索框（体现语义化）
color	<input type="color" />	输入选取颜色
date	<input type="date" />	选取日、月、年
month	<input type="month" />	选取月、年
week	<input type="week" />	选取周和年
time	<input type="time" />	选取时间（小时和分钟）
datetime	<input type="datetime" />	选取时间、日、月、年（UTC时间）
datetime-local	<input type="datetime-local" />	选取时间、日、月、年（本地时间）

新增的表单属性

属性	用法	含义
autocomplete	<input type="text" autocomplete="off">	规定表单是否应该启用自动完成功能有2个值， on：代表记录已经输入的值 ； off：代表不记录已经输入的值 注意： 1、autocomplete 首先需要提交按钮 2、这个表单您必须给他名字
autofocus	<input type="text" autofocus>	autofocus 属性是一个 boolean属性. autofocus 属性规定在页面加载时，域自动地获得焦点。
form		form 属性规定输入域所属的一个或多个表单。
placeholder	<input type="text" placeholder="请输入用户名">	对用户输入进行提示，提示用户可以输入的内容占位符，当用户输入的时候，里面的文字消失，删除所有文字，自动返回
required	<input type="text" required>	设置必填项，内容不能为空
multiple	<input type="file" multiple>	可以设置选择多个文件
accesskey	<input type="text" accesskey="s">	规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式

 

新增的多媒体元素

<audio>...</audio>：定义音频内容
<video>...</video>：定义视频内容
<source>...</source>：定义多媒体资源 （多浏览器支持）
<embed>...</embed>：定义嵌入的内容

 audio元素

使用方法：

<audio src="./music/1.mp3"></audio>

属性：

• autoplay：自动播放
• controls：播放控件
• loop：循环播放，loop="2"代表循环两次，loop="-1"代表无线循环

 auto支持3种音频格式：ogg、mp3、wav

多浏览器支持的方案，如下：

需要用到source元素

<auto>
    <source src="./music/1.mp3" />
    <source src="./music/1.wav" />
    <source src="./music/1.ogg" />
    您的浏览器不支持HTML音频播放功能
</auto>

video元素

使用方法：

<video src="./videos/1.mp4 controls"></video>

属性：

• autoplay：自动播放
• controls：播放控件
• loop：循环播放，loop="2"代表循环两次，loop="-1"代表无线循环
• width：设置播放窗口宽度
• height：设置播放窗口高度

video支持3种视频格式：ogg、mp4、webM

 多浏览器支持方案：

<video>
    <source src="./videos/1.ogg" />
    <source src="./videos/1.mp4" />
    您的浏览器不支持HTML视频播放功能
</video>