HTML（超文本标记语言）是构建网页的基石。通过不同的标签，HTML定义了网页的结构和内容。了解各种HTML标签的用法是前端开发的基础。本文将回顾HTML中常见标签的用法，并介绍它们在实际开发中的应用。
一、结构性标签
-
<!DOCTYPE html>这个标签声明文档类型，并指定HTML5标准。它应该是HTML文档的第一行。
<!DOCTYPE html> -
<html>HTML文档的根元素，包含了整个网页的内容。
<html lang="en"> <!-- 网页内容 --> </html> -
<head>包含文档的元数据，如标题、字符集声明、链接到CSS文件等。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题</title> <link rel="stylesheet" href="styles.css"> </head> -
<body>包含网页的主要内容部分，如文本、图片、链接等。
<body> <h1>欢迎来到我的网站</h1> <p>这里是内容。</p> </body>
二、文本标签
-
<h1>至<h6>标题标签，用于定义从大到小的六级标题。
<h1>主标题</h1> <h2>副标题</h2> -
<p>段落标签，用于定义文本段落。
<p>这是一个段落。</p> -
<a>链接标签，用于定义超链接。
<a href="https://www.example.com">访问示例网站</a> -
<strong>和<em>强调和加重文本的标签。
<strong>用于强调重要性，<em>用于强调语气。<strong>重要</strong> <em>强调</em> -
<blockquote>块级引用标签，用于引用外部来源的内容。
<blockquote> <p>这是一个引用的内容。</p> </blockquote> -
<code>和<pre><code>标签用于展示代码，<pre>标签用于保持代码格式。<pre> <code> console.log('Hello, world!'); </code> </pre>
三、列表标签
-
<ul>和<ol>无序列表（
<ul>）和有序列表（<ol>）用于展示列表项。<ul> <li>无序列表项 1</li> <li>无序列表项 2</li> </ul> <ol> <li>有序列表项 1</li> <li>有序列表项 2</li> </ol> -
<dl>,<dt>,<dd>定义列表，用于定义词汇与描述。
<dl> <dt>术语</dt> <dd>定义</dd> </dl>
四、表格标签
-
<table>表格标签，用于创建表格。
<table> <thead> <tr> <th>表头 1</th> <th>表头 2</th> </tr> </thead> <tbody> <tr> <td>数据 1</td> <td>数据 2</td> </tr> </tbody> </table> -
<tr>,<th>,<td>表格行（
<tr>）、表头单元格（<th>）、普通单元格（<td>）用于定义表格的结构。<tr> <th>表头</th> <td>数据</td> </tr>
五、表单标签
-
<form>表单标签，用于创建用户输入的表单。
<form action="/submit" method="post"> <input type="text" name="name" placeholder="你的名字"> <input type="submit" value="提交"> </form> -
<input>,<textarea>,<button>用户输入控件，包括文本框（
<input>）、文本区域（<textarea>）和按钮（<button>）。<input type="text" name="username" placeholder="用户名"> <textarea name="message" placeholder="留言"></textarea> <button type="button">点击我</button> -
<select>,<option>下拉菜单和选项，用于创建选择列表。
<select name="options"> <option value="1">选项 1</option> <option value="2">选项 2</option> </select>
六、媒体标签
-
<img>图像标签，用于在网页中嵌入图片。
<img src="image.jpg" alt="描述文本"> -
<audio>和<video>媒体标签，用于嵌入音频和视频文件。
<audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <video controls width="600"> <source src="video.mp4" type="video/mp4"> Your browser does not support the video element. </video>
七、语义化标签
-
<header>,<footer>,<main>,<section>,<article>,<aside>,<nav>这些标签用于定义页面的不同区域，提高网页的语义性和可读性。
<header> <h1>网站标题</h1> <nav>导航菜单</nav> </header> <main> <section> <article> <h2>文章标题</h2> <p>文章内容</p> </article> </section> </main> <footer> <p>页脚内容</p> </footer>
八、HTML5 新标签
-
<details>和<summary>用于创建可展开的内容区域。
<details> <summary>点击展开</summary> <p>详细内容</p> </details> -
<figure>和<figcaption>用于为图像或图表提供说明文本。
<figure> <img src="diagram.png" alt="图表"> <figcaption>图表说明</figcaption> </figure> -
<progress>和<meter>用于显示进度条和测量值。
<progress value="70" max="100">70%</progress> <meter value="0.6">60%</meter>
结论
了解和掌握HTML标签的使用是每个前端开发者的基本技能。从基础的结构性标签到高级的HTML5新标签，这些标签帮助我们构建和组织网页内容。熟练运用这些标签，不仅能提高开发效率，还能提升网页的语义性和可访问性。在实际开发中，根据需求选择合适的标签和属性，将使你的网页更具结构性和表现力。
标签：网页,定义,标签,全攻略,HTML,用于,列表 From： https://blog.csdn.net/weixin_48576413/article/details/141569339