HTML新标签

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新增的表单标签

8. input标签的属性

   输入类型	描述
   color	选取颜色
   date	日期
   datetime	选择一个日期
   datetime-local	选择日期
   email	邮箱地址
   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)]

   1. placeholder

   2. required

   3. pattern

   4. min

   5. max

   6. height

   7. 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>
   

多媒体标签

1. video标签

   <video width="300" height="400" controls autoplay muted loop poster="">
   		<source src="" type="video/mp4">
   	</video>
   	<!-- autoplay 是设置自动播放 -->
   	<!-- controls 是设置自动播放 -->
   	<!-- muted 是设置静音-->
   	<!-- loop 是循环播放 -->
   	<!-- poster 是播放前的图片路径 -->
   

2. audio标签

   <audio autoplay controls muted loop>
   	<source src="" type="audio/mpeg">
   	<source src="" type="audio/ogg">
   </audio>
   <!-- autoplay 是设置自动播放 -->
   <!-- controls 是设置自动播放 -->
   <!-- muted 是设置静音-->
   <!-- loop 是循环播放 -->
   

后续更新。。。