<!-- HTML 常用标签大全 -->
<!DOCTYPE html>
<html>
<head>
<title>HTML 常用标签示例</title>
</head>
<body>
<!-- 文档类型声明 -->
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<!-- 根元素 -->
<html> <!-- HTML文档的根元素 -->
<!-- 头部信息 -->
<head>
<title>页面标题</title> <!-- 设置页面的标题 -->
<meta charset="UTF-8"> <!-- 设置字符编码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口宽度和缩放比例 -->
<link rel="stylesheet" href="styles.css"> <!-- 链接外部样式表 -->
<script src="script.js"></script> <!-- 引入外部JavaScript文件 -->
</head>
<!-- 页面主体 -->
<body>
<header>
<h1>这是主标题</h1> <!-- h1到h6标签用于定义标题，h1是最重要的，h6是最不重要的 -->
</header>
<nav>
<ul>
<li><a href="#section1">链接1</a></li> <!-- a标签用于创建超链接 -->
<li><a href="#section2">链接2</a></li>
</ul>
</nav>
<section id="section1">
<p>这是一个段落。</p> <!-- p标签用于定义段落 -->
<p>另一个段落。</p>
</section>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
<aside>
<h2>侧边栏标题</h2>
<p>侧边栏内容...</p>
</aside>
<footer>
<p>页脚内容</p>
</footer>
<form action="/submit_form" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"> <!-- input标签用于创建输入控件 -->
<input type="submit" value="提交"> <!-- 提交按钮 -->
</form>
<table>
<tr>
<th>表头1</th> <!-- th标签用于定义表格中的表头单元格 -->
<th>表头2</th>
</tr>
<tr>
<td>数据1</td> <!-- td标签用于定义表格中的标准单元格 -->
<td>数据2</td>
</tr>
</table>
<img src="image.jpg" alt="描述图片的文字"> <!-- img标签用于嵌入图像 -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4"> <!-- video标签用于嵌入视频 -->
您的浏览器不支持 video 标签。
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg"> <!-- audio标签用于嵌入音频 -->
您的浏览器不支持 audio 标签。
</audio>
<div style="background-color: lightblue;">
<p>这是一个带有样式的div容器。</p> <!-- div标签用于定义文档中的分区或节 -->
</div>
<span style="color: red;">这是一个带有样式的span文本。</span> <!-- span标签用于定义文档中的行内元素 -->
</body>
</html>希望这些常用标签及其解释对你有帮助！
上一篇：html5+css3
下一篇：html video标签属性
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站