HTML 常用标签指南
这个指南包含了最常用的 HTML 标签及其实际应用示例。
基本结构标签
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<meta charset="UTF-8">
</head>
<body>
网页内容
</body>
</html>
|
文本标签
标题 (h1-h6)
1
2
3
4
5
6
| <h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
|
段落和文本格式
1
2
3
4
5
6
| <p>这是一个段落</p>
<strong>粗体文本</strong>
<em>斜体文本</em>
<u>下划线文本</u>
<br>
<hr>
|
链接和图片
链接
1
2
3
4
5
|
<a href="https://www.example.com">点击这里</a>
<a href="https://www.example.com" target="_blank">在新窗口打开</a>
|
在新窗口打开
图片
1
2
3
4
5
|
<img src="image.jpg" alt="图片描述">
<img src="image.jpg" alt="图片描述" width="300" height="200">
|
列表
无序列表
1
2
3
4
5
| <ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
|
有序列表
1
2
3
4
5
| <ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
|
表格
1
2
3
4
5
6
7
8
9
10
| <table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
|
表单元素
基本表单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <form action="/submit" method="post">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动
<select name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="japan">日本</option>
</select>
<textarea name="message" rows="4" cols="50">请输入内容...</textarea>
<input type="submit" value="提交">
</form>
|
语义化标签 (HTML5)
1
2
3
4
5
6
7
| <header>网页头部</header>
<nav>导航栏</nav>
<main>主要内容</main>
<article>文章内容</article>
<section>区块</section>
<aside>侧边栏</aside>
<footer>页脚</footer>
|
多媒体标签
视频
1
2
3
4
| <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持视频标签
</video>
|
音频
1
2
3
4
| <audio controls>
<source src="music.mp3" type="audio/mpeg">
您的浏览器不支持音频标签
</audio>
|
常用属性
class: 定义元素的类名id: 定义元素的唯一标识符style: 定义元素的行内样式title: 定义元素的提示文本data-*: 自定义数据属性
1
2
3
| <div class="container" id="main" style="color: blue;" title="这是一个容器">
内容
</div>
|
注释
这个指南涵盖了最常用的HTML标签，你可以根据需要复制相应的代码示例并修改使用。记住要根据实际需求选择合适的标签，并确保代码的语义化和可访问性。
