###
HTML常用
标签整理及示例代码
HTML 是一种
用于创建网页的标准标记语言，其核心是通过
标签来描述网页内容。以下是常用的
HTML 标签及其用法示例。
####
1. 文档结构
标签
- **`<!DOCTYPE
html>`**：声明文档类型为
HTML5[^2]。
- **`<
html>`**：
定义整个
HTML 文档的根元素[^
1]。
- **`<head>`**：包含文档的元信息（metadata），如 `<title>`、`<meta>` 等[^2]。
- **`<body>`**：包含网页的主要内容，如文本、图像、链接等[^
1]。
#### 2.
标题标签
- **`<h
1>` 到 `<h
6>`**：
定义标题，其中 `<h
1>` 是最高级别的
标题，`<h
6>` 是最低级别的
标题[^2]。
```
html
<h
1>这是一个一级
标题</h
1>
<h2>这是一个二级
标题</h2>
```
#### 3. 段落
标签
- **`<p>`**：
定义段落内容[^
1]。
```
html
<p>这是一个段落。</p>
```
#### 4. 超链接
标签
- **`<a>`**：创建超链接，`href` 属性指定链接地址，`target="_blank"` 表示在新窗口打开链接。
```
html
<a href="http
://www.baidu.com" title="百度链接" target="_blank">百度</a>
```
####
5. 图像
标签
- **`<img>`**：插入图像，`src` 属性指定图像路径，`alt` 属性提供替代文本。
```
html
<img src="./images/
11.jpg" alt="图片" width="700" />
```
####
6. 换行与水平线
标签
- **`<br>`**：插入换行符[^3]。
- **`<hr>`**：插入水平线。
```
html
<br/>
<hr/>
```
#### 7. 锚点
标签
- **`<a>`**：结合 `id` 属性实现页面内跳转[^2]。
```
html
<a href="#myimg">我的女友</a>
<a id="myimg"></a>
```
#### 8. 列表
标签
- **无序列表 `<ul>` 和 `<li>`**：创建无序列表。
- **有序列表 `<ol>` 和 `<li>`**：创建有序列表。
```
html
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
```
#### 9. 表格
标签
- **`<table>`**：
定义表格。
- **`<tr>`**：
定义表格
中的行。
- **`<td>`**：
定义表格
中的单元格。
```
html
<table border="
1">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>2
5</td>
</tr>
</table>
```
####
10. 表单
标签
- **`<form>`**：
定义表单。
- **`<input>`**：
定义输入控件，如文本框、按钮等。
- **`<label>`**：
定义表单控件的
标签。
```
html
<form action="/submit" method="post">
<label for="name">姓名
:</label>
<input type="text" id="name" name="name"><br><br>
<input type="submit" value="提交">
</form>
```
####
11. 块级与行内
标签
- **块级
标签**：如 `<div>`、`<p>`，占据整行显示。
- **行内
标签**：如 `<span>`、`<a>`，仅占据内容所需的宽度[^
1]。
```
html
<div>这是一个块级元素</div>
<span>这是一个行内元素</span>
```
####
12. 注释
标签
- **`<!
-- -->`**：添加注释，不会在浏览器中显示。
```
html
<!
-- 这是一个注释
-->
```
### 示例完整代码
以下是一个完整的
HTML 示例代码，包含多种常用
标签：
```
html
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF
-8">
<title>
HTML常用
标签示例</title>
</head>
<body>
<h
1>欢迎来到
HTML世界</h
1>
<p>这是一个段落。</p>
<a href="http
://www.baidu.com" target="_blank">访问百度</a>
<img src="./images/example.jpg" alt="示例图片" width="300">
<br/>
<hr/>
<ul>
<li>水果</li>
<li>蔬菜</li>
</ul>
<table border="
1">
<tr>
<td>列
1</td>
<td>列2</td>
</tr>
</table>
</body>
</
html>
```
本文探讨了HTML5中取消<h1>-<h6>的align属性，并推荐使用CSS进行内容布局，同时回顾HTML4.01与HTML5在标题标记上的区别。
扫一扫
1451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
