HTML5---02

最新推荐文章于 2025-06-14 18:07:51 发布

原创最新推荐文章于 2025-06-14 18:07:51 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3 #html #css

前端专栏收录该内容

4 篇文章

订阅专栏

本文主要探讨HTML5中的文本类、语义化、列表、超链接、多媒体和表格标签。语义化标签使得网页代码更规范，列表标签用于组织内容，超链接标签实现页面间的跳转，多媒体标签支持音频和视频，但不同浏览器的属性支持存在差异，表格标签则用于展示结构化数据。

HTML常用标签

文本类标签
语义化标签
列表标签
超链接标签
多媒体标签
表格标签

文本类标签

<h1>Hello World!!!</h1>   <!--标题   h1最大-->
<h2>Hello World!!!</h2>
<h3>Hello World!!!</h3>
<h4>Hello World!!!</h4>
<h5>Hello World!!!</h5>
<h6>Hello World!!!</h6>
<p>Hello World!!!</p>  <!--段落标签-->
<b>Hello World!!!</b>  <!--加粗标签-->
<strong>Hello World!!!</strong>   <!--加粗文本，具有强调效果-->
<i>Hello World!!!</i>  <!--斜体标签-->
<em>Hello World!!!</em>  <!--斜体，具有强调效果-->
<br />     <!--换行标签-->
<hr />     <!--水平线标签-->
<u>Hello World!!!</u>    <!--下划线标签-->
<bdo dir="rtl">Hello World!!!</bdo>   
                          <!--覆盖默认的文本方向
                               dir="ltr"  ：默认，可以不写，原样输出
                               dir="rtl"  : 逆序输出
                          -->
             
<details style="width: 100px;">
	<!--定义元素的细节，描述文档某个部分的细节
        <summary></summary>    重新定义该细节的标题
	-->

	<summary>书籍大贩卖</summary>
	<p>西游记</p>
	<p>￥：1800</p>
	<details>
		<summary>商品贩卖</summary>
		<p>HP电脑</p>
		<p>￥：5000</p>
	</details>
</details>
<details>
	<summary>商品</summary>
    <p>HP电脑</p>
	<p>￥：5000</p>
</details>
CO<sub>2</sub>      <!--下标-->
123<sup>10</sup>      <!--上标-->

语义化标签

不起作用，只是是网页的代码风格更加规范

<div></div>     <!--块级元素-->
<span></span>   <!--行级元素-->
<header></header>    <!--网页的头部-->
<section></section>  <!--区块内容-->
<article></article>   <!--独立的内容-->
<nav></nav>           <!--网页导航-->
<aside></aside>       <!--网页的侧边栏（侧边导航栏）-->
<footer></footer>     <!--网页底部-->
<address></address>   <!--定义文档或文章的作者/拥有者的联系信息-->

列表标签

<!--无序列表-->
<ul></ul>
<!--有序列表-->
<ol></ol>
<!--列表项-->
<li></li>
<!--自定义列表-->
<dl></dl>   <!--定义列表-->
<dt></dt>   <!--定义列表中的项目-->
<dd></dd>   <!--定义对应项目的描述-->

超链接标签

<a href="" target=""></a>
<!--
    href=""  : 定义链接跳转的地址
             : 可以设置锚点,href中填写  #  +  需要跳转到的标签的id名
    target=""  : 
               定义在何处打开该链接，    _blank,在新窗口打开
-->

多媒体标签

	<!--表示任务的进度-->
	<progress min="0" max="100"></progress>
	<br />
	<progress min="0" max="100" value="30"></progress>
	<br />
	<!--度量给定的范围，
		min:表示最小值
		max:表示最大值
		value:表示当前值
		low：表示低的最大范围
		high:表示高的最大范围
		optimum:表示该度量的最优值
		注：当low,high,optimum三者都出现是，才能出现类似密码强度（三段不同颜色）似的度量
		可用于密码强度-->

	<meter mim="0" max="100" value="29"></meter>
	<br />
	<meter min="0" max="100" value="88" low="33" high="66" optimum="80"></meter>

	<br />
	<!--在图像上定义局部跳转-->

	<img src="./img/003.png" usemap="#one" />
	<map name="one" id="one">
		<area shape="rect" coords="0,0,100,100" href="https://www.youkuaiyun.com" target="_blank" />
	</map>
	<br />
	<!--加载音频-->

	<audio src="./img/a.mp3" controls loop>
		<source src="./img/a.mp3">
	</audio>

	<!--加载视频-->
	<video controls loop poster="./img/003.png">
		<source src="./img/movie.webm">
	</video>

加载音频和视频的标签有些属性在有的浏览器中不支持，而在一些其他的浏览器支持

表格标签

	<!-- 
        <table></table>           定义表格
        <tr></tr>                 定义行
        <th></th>                 定义表头单元格
        <td></td>                 定义单元格
        <thead></thead>           定义表格的头部
        <tbody></tbody>           定义表格的主体
        <tfoot></tfoot>           定义表格的底部

        后三个标签在默认的情况下不影响表格布局，对表格代码起到分组的作用
    -->
	<table border="1" width="200px" cellspacing="0" cellpadding="10px"> 
		<caption>你好</caption>
		<tr>
			<th>111</th>
			<th>111</th>
			<th>111</th>
		</tr>
		<tr>
			<td>222</td>
			<td>222</td>
			<td>222</td>
		</tr>
	</table>