HTML新标签
常见的几个标签
1.header :定义文档的页眉头部
使用场景: 顶部的 logo 信息
案例:
<header> <div></div> </header>
2.nav:定义导航链接的部分
使用场景: 顶部的分类区域
案例:
<nav> <ul> <li><a href="#">语音</a></li> <li><a href="#">首恶</a></li> <li><a href="#">首页</a></li> <li><a href="#">手腕</a></li> </ul> </nav>
3.article:定义文章
article: 区域类的文章
4.footer:定义文档或者节的页脚底部
footer: 底部的区域
5.section:定义文档中的节(区域)
section: 定义文档区域
6.aside:定义其所处内容之外的内容
aside: 所有区域
7.datalist:标签定义选项列表。请与input元素配合使用该元素
datalist: input标签的时候出现
<details>点击箭头查看详情哦! <summary>点击之后显示的内容。</summary> </details>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mJE7QWDs-1689310847695)(C:\Users\tohturusul\AppData\Roaming\Typora\typora-user-images\image-20230622134236891.png)]
<figure> <img src="./img/association-white.png" alt=""> <figcaption>点击之后显示的内容。</figcaption> </figure>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sFplKsNY-1689310847699)(C:\Users\tohturusul\AppData\Roaming\Typora\typora-user-images\image-20230622134728307.png)]
<p>这是一段<mark>非常重要</mark>的段落。</p>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wxs37LgN-1689310847700)(C:\Users\tohturusul\AppData\Roaming\Typora\typora-user-images\image-20230622135141688.png)]
<!-- high 是最大率 是显示为红 low是最中率 是显示未黄 正常是显示为绿色 --> <meter value="30" max="100" min="0" low="60" high="80"></meter>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-esisDCRL-1689310847701)(C:\Users\tohturusul\AppData\Roaming\Typora\typora-user-images\image-20230622140600537.png)]
<progress value="80" max="100"></progress>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-po02e8tz-1689310847702)(C:\Users\tohturusul\AppData\Roaming\Typora\typora-user-images\image-20230622141121302.png)]
<progress max="100"></progress>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OnuR9MqC-1689310847703)(C:\Users\tohturusul\AppData\Roaming\Typora\typora-user-images\image-20230622141212021.png)]
html新增的表单标签
input标签的属性
输入类型 描述 color 选取颜色 date 日期 datetime 选择一个日期 datetime-local 选择日期 邮箱地址 month 选择一个月份 number 数值的输入域 range 一定范围内数字值的输入域 search 搜素 tel 定义输入电话号码 time 选择一个时间 URL 地址输入域 week 选择周和年 <div>------------------------------------------------------</div> <input type="color" value="#ffffff">
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-32Ib7PuY-1689310847704)(C:\Users\tohturusul\AppData\Roaming\Typora\typora-user-images\image-20230622142807259.png)]
<div>------------------------------------------------------</div> <input type="date">
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T4muLcLQ-1689310847705)(C:\Users\tohturusul\AppData\Roaming\Typora\typora-user-images\image-20230622142912178.png)]
<div>------------------------------------------------------</div> <input type="datetime">
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9RTs6K8w-1689310847706)(C:\Users\tohturusul\AppData\Roaming\Typora\typora-user-images\image-20230622143101511.png)]
<div>------------------------------------------------------</div> <input type="datetime-local">
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TCDchvUM-1689310847707)(C:\Users\tohturusul\AppData\Roaming\Typora\typora-user-images\image-20230622143202124.png)]
**语句:**输入框语句的提示:
<input type="text" list="star"> <datalist id="star"> <option value="aa"></option> <option value="aaa"></option> <option value="bbb"></option> <option value="ccccc"></option> <option value="dddddd"></option> </datalist>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lTjmw7iC-1689310847708)(C:\Users\tohturusul\AppData\Roaming\Typora\typora-user-images\image-20230622145651682.png)]
placeholder
required
pattern
min
max
height
width
<form action=""> <input type="text" placeholder="请输入内容..." required="required" autofocus="autofocus"> <!-- placeholder用来提示输入框中需要输入的内容 --> <!-- required 必需在提交之前填写输入字段 --> <!-- autofocus 在访部页面时,文字输入框会自动获得光标焦点,以便输入关键词 --> <!-- multiple 可接受多个值的上传字段 --> <div>---------------------------------------------</div> <input type="file" multiple="multiple"> <select name="" id="" multiple="multiple"> <option value="">111</option> <option value="">222</option> <option value="">333</option> <option value="">444</option> <option value="">555</option> </select> </form>
多媒体标签
video标签
<video width="300" height="400" controls autoplay muted loop poster=""> <source src="" type="video/mp4"> </video> <!-- autoplay 是设置自动播放 --> <!-- controls 是设置自动播放 --> <!-- muted 是设置静音--> <!-- loop 是循环播放 --> <!-- poster 是播放前的图片路径 -->
audio标签
<audio autoplay controls muted loop> <source src="" type="audio/mpeg"> <source src="" type="audio/ogg"> </audio> <!-- autoplay 是设置自动播放 --> <!-- controls 是设置自动播放 --> <!-- muted 是设置静音--> <!-- loop 是循环播放 -->
后续更新。。。