Day17

2023.2.9

html5新特性

1. 语义化的元素
2. 新增的表单元素、新属性
3. canvas元素
4. 媒体相关 音频、视频
5. 本地定位
6. 本地储存

新增的语义化元素

头部：<header>定义整个文档中或一个节段的头部</header>

导航：<nav>定义导航链接部分</nav>

（主导航、侧边栏导航、页内导航、菜单、面包屑导航、分页、目录和索引）

底部：<footer>定义文档底部或页脚区域</footer>

<article>表示文档或网页中的独立结构

<h2>相关文章</h2>

<section>定义文档中的节</section>

</article>

（论坛）

<aside>侧边栏、标注栏、广告</aside>

新增的语义化元素2

<figure>相对独立的内容块：图表、代码块、图片

<figcaption>定义figure的标题</figcaption>

</figure>

figure（块级标签）、自带外间距

mark标签（行级标签）：带有标记的文本；

页面中突出显示，高亮的部分，目的吸引用户注意

<time>日期和时间</time>

<time datetime=”2023-2-14”>情人节</time>

datetime属性：日期和日期

新增的语义化标签的兼容处理1

兼容

Js创建html5标签---创建出的html5标签是行级元素，需要使用css把行级元素转换为块级元素

例：document.createElment(“header”);

新增的语义化标签的兼容处理2

<script src=””></script>

视频标签

<video></video>

视频格式：mp4、webM、ogg

常用属性：

src：视频文件的路径

controls：视频播放控件（属性值controls）

loop属性：循环播放（属性值loop）

width、height属性：设置播放器宽高

muted属性：静音

autoplay属性：自动播放，必须在静音后才能播放

poster属性：预览图片，视频在加载中显示的图片封面

音频标签

<audio></audio>

音频格式：mp3、wav、ogg

常用的属性：

src属性：音频文件的路径

controls属性：音频控件

loop属性：循环播放

muted属性：静音

媒介标签

<audio>

<source src=””type=””>

</audio>

<video>

<source src=””type=””>

</video>

新增的表单元素

<input type="url" name="userURL">

<!-- 包括完整的传输协议以及路径，在提交表单时，自动验证url的值 -->

<!-- 验证邮箱 --><!-- @qq.com -->

<input type="telephone" placeholder="电话号码" name="box">

<!-- 用于电话号码的输入框，一般用于触屏的网页，在电脑中无效，在触屏网页中会直接调用虚拟的电话数字键盘 -->

<input type="number" max="6" min="0" step="2" value="2">

 <!-- max最大值 min最小值 step步长(默认值1) value定义初始值-->、

<input type="range" max="6" min="0" step="2">、

<!-- 进度条形式 同number仅样式不同 -->

<input type="color" value="#fff00">

<!-- 色值选择器 -->

<input type="submit" value="提交">

<input type="text" placeholder="提示信息" name="nane" autocomplete="on">

<!-- autocomplete 设置表单是否开启自动填充功能on开启 off关闭 -->

<input type="text" placeholder="提示信息" name="nane" autocomplete="on" autofocus>

<!-- autofocus页面加载时自动获取焦点，一个表单中只能有一个 -->

<input type="text" required>

<!-- required提交表单不能为空，如果要生效，不能加value值 -->

<input type="text" pattern="[0-9]{5}">

<!-- 验证输入的内容---正则表达式 -->

<input type="file" multiple>

<!-- 可以选择多个文件，用于上文件的 按ctel多选 -->