HTML5新标签与特性

最新推荐文章于 2024-10-18 17:29:29 发布

暗香盈袖@

最新推荐文章于 2024-10-18 17:29:29 发布

阅读量156

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/dcwal/article/details/132478085

版权

1.

网页三剑客：H5、C3、JS

HTML5 中的一些有趣的新特性：

新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 date、time、email、url、search、week
用于媒介回放的 video 和 audio 元素
用于绘画的 canvas 元素
对本地离线存储的更好的支持

2. 新增语义化标签

header：定义文档的页眉,用来表示页面的头部。
nav：导航栏
main：主体信息
aside : 侧边栏
article：article元素表示文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报纸中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。
section：定义文档中的节（section、区段）
footer：定义文档或节的页脚
meter: 使用 meter 元素来度量给定范围（gauge）内的数据
```
<meter value="3" min="0" max="10">十分之三</meter>
```
progress: 标签定义运行中的进度（进程）
```
<progress value="3" min="0" max="10"></progress>
```

3. 表单新添属性

属性	用法	含义
placeholder	`<input type="text" placeholder="请输入用户名">`	提示信息
autofocus	`<input type="text" autofocus>`	规定当页面加载时 input 元素应该自动获得焦点
multiple	`<input type="file" multiple>`	上传多文件
autocomplete	`<input type="text" autocomplete="on" name="auto">`	规定表单是否应该启用自动完成功能，on默认，启用自动完成（name必须，提交按钮必须）
required	`<input type="text" required>`	必填项
tabindex	`<button tabindex="2">点我</button>`	指定获取焦点的顺序
data-*	`<div id="box" data-user-name="张美丽">box</div>`	自定义标签属性

4. 新增的input的type属性值

类型****	使用示例****	含义****
email	`<input type="email">`	输入邮箱格式
tel	`<input type="tel">`	输入手机号码格式
url	`<input type="url">`	输入url格式
number	`<input type="number">`	输入数字格式
search	`<input type="search">`	搜索框（体现语义化）
range	`<input type="range">`	自由拖动滑块
time	`<input type="time">`	时间
date	`<input type="date">`	年月日
month	`<input type="month">`	年月
week	`<input type="week">`	第几周

综合案例

<form action="">
        <div>
            姓名:<input type="text" required placeholder="请输入用户名">
        </div>
        <div>
            手机号码:<input type="tel" required>
        </div>
        <div>
            邮箱地址:<input type="email" required>
        </div>
        <div>
            所属学院:<input type="text" placeholder="请选择" required>
        </div>
        <div>
            入学成绩:<input type="text" required value="0">
        </div>
        <div>
            基础水平:<progress  max="10" min="0" value="1"></progress>
        </div>
        <div>
            入学日期:<input type="date" required>
        </div>
        <div>
            毕业日期:<input type="date" required>
        </div>
        <input type="submit">
    </form>