<学习html>第八天笔记-HTML5文档类型和字符集、HTML5新标签与特性（常用新标签、新增input type属性值、常用新属性、多媒体标签）

来源：互联网发布：二叉树遍历递归算法编辑：程序博客网时间：2024/05/26 09:56

（十二）HTML5文档类型和字符集、HTML5新标签与特性

1、文档类型设定
·document
HTML：sublime输入html：4s
XHTML：sublime输入html：xt
HTML5：sublime输入html：5 <!DOCTYPE html>

2、字符设定
这里写图片描述
字符设定图

3、常用新标签
W3C手册中文官网：http://w3cschool.com.cn/

header：定义文档的页眉、头部 <header></header>
nav：定义导航链接部分 <nav></nav>
footer：定义文档或节的页脚、底部 <footer></footer>
article：定义文章 <article></article>
section：定义文档中的节（section 区段） <section></section>
aside：定义其所处内容之外的内容（侧边） <aside></aside>

datalist：标签定义选项列表，与input元素搭配使用：
例：

<input type="text" value="输入明星" list="star" /><datalist id="star">    <option>刘德华</option>    <option>刘若英</option>    <option>刘晓庆</option>    <option>张杰</option>    ......</datalist>

注：在input里面用list=”…”
在datalist里面用id=”…”来实现input和datalist之间的链接。

fieldset：可将表单内的相关元素分组、打包，和legend搭配使用：
例：

<fieldset>    <legend>用户登录</legend>    用户名:<input type="text" /><br />    密码:<input type="password" /></fieldset>

注：里面一般是标题。

4、新增的input type属性值
这里写图片描述
新增的input type属性值图

5、常用新属性
这里写图片描述
常用新属性图
*注意：其中autocomplete属性①首先需要一个提交按钮
②这个表单必须给它一个name值

6、多媒体标签
embed：标签定义嵌入的内容
audio：播放音频
video：播放视频

①多媒体embed
embed可以用来插入各种多媒体，格式可以是：Midi、wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

<embed src="..."></embed>

②多媒体audio
HTML5通过<audio>标签来解决音频播放的问题。
通过src指定音频文件路径即可：

<audio src="..."></audio>

并且可以通过附加属性可以更友好的控制音频的播放：如：
autoplay：自动播放
controls：是否显示不默认播放控件
loop：循环播放（如loop=”2”就循环2次，loop=”-1”或loop就是无限循环）
由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图：
这里写图片描述
audio元素支持三种音频格式图

因浏览器兼容性问题，我们需要做三种声音文件 ogg、mp3、wav，如下图：

<audio>    <source src="文件路径.MP3" />    <source src="文件路径.wav" />    <source src="文件路径.ogg" />    您的浏览器不支持HTML音频播放功能</audio>

③多媒体video

<video src="文件路径.mp4" controls="controls"></video>

同样，通过附加属性可以更友好的控制视频的播放：
autoplay：自动播放
controls：是否显示默认播放控件
loop：循环播放
width：设置播放窗口的宽度
height：设置播放窗口的高度

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图：
这里写图片描述
video元素支持三种视频格式图

多浏览器支持的方案：

<video controls autoplay>    <source src="文件名/路径.mp4" />    <source src="文件名/路径.ogg" />    <source src="文件名/路径.webm" />    您的浏览器不支持视频播放功能</video>

阅读全文

0 0