HTML的基本标签和属性是什么

发布时间：2022-03-03 11:21:48 作者：小新
来源：亿速云阅读：225

# HTML的基本标签和属性是什么

## 引言

HTML（HyperText Markup Language）是构建网页的基础语言，通过标签（tags）和属性（attributes）定义文档结构和内容。本文将系统介绍HTML的核心标签及其常用属性，帮助初学者快速掌握网页开发基础。

---

## 一、HTML文档结构标签

### 1. 根标签 `<html>`
```html
<html lang="zh-CN">
  <!-- 文档内容 -->
</html>

作用：定义HTML文档的根元素
常用属性：
- lang：指定文档语言（如en/zh-CN）

2. 头部标签 `<head>`

<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
</head>

包含元素：
- <meta>：定义元数据（如字符集）
- <title>：浏览器标签页标题
- <link>：引入外部资源（如CSS）
- <style>：内嵌CSS样式

3. 主体标签 `<body>`

<body>
  <!-- 可见内容区域 -->
</body>

作用：包含所有可见内容

二、文本内容标签

1. 标题标签 `<h1>-<h6>`

<h1>一级标题</h1>
<h2>二级标题</h2>

注意：从h1到h6重要性递减

2. 段落标签 `<p>`

<p>这是一个段落文本。</p>

3. 换行标签 `<br>`

第一行<br>第二行

特点：单标签，无需闭合

4. 水平线 `<hr>`

<hr>

5. 文本格式化标签

标签	作用	示例
`<strong>`	加粗（语义重要）	`<strong>重要</strong>`
`<em>`	斜体（强调）	`<em>强调</em>`
`<del>`	删除线	`<del>原价</del>`
`<sub>`	下标	H₂O

三、多媒体标签

1. 图片标签 `<img>`

<img src="image.jpg" alt="描述文本" width="200">

关键属性：
- src：图片路径（必选）
- alt：替代文本（SEO重要）
- width/height：尺寸控制

2. 音频标签 `<audio>`

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

属性：
- controls：显示播放控件
- autoplay：自动播放（慎用）

3. 视频标签 `<video>`

<video width="320" controls>
  <source src="video.mp4" type="video/mp4">
</video>

四、超链接与锚点

1. 超链接 `<a>`

<a href="https://example.com" target="_blank">访问示例</a>

重要属性：
- href：目标URL
- target：
  - _self：当前窗口（默认）
  - _blank：新窗口

2. 锚点链接

<a href="#section1">跳转到第一节</a>
...
<h2 id="section1">第一节</h2>

五、列表标签

1. 无序列表 `<ul>`

<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>

2. 有序列表 `<ol>`

<ol start="3" type="A">
  <li>第一项</li>
  <li>第二项</li>
</ol>

属性：
- type：编号类型（1/A/a/I/i）
- start：起始值

3. 定义列表 `<dl>`

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
</dl>

六、表格标签

<table border="1">
  <caption>学生成绩表</caption>
  <tr>
    <th>姓名</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>90</td>
  </tr>
</table>

核心标签：
- <table>：定义表格
- <tr>：表格行
- <td>：标准单元格
- <th>：表头单元格（自动加粗居中）

七、表单标签

1. 表单容器 `<form>`

<form action="/submit" method="POST">
  <!-- 表单控件 -->
</form>

关键属性：
- action：提交地址
- method：HTTP方法（GET/POST）

2. 输入框 `<input>`

<input type="text" name="username" placeholder="请输入用户名">

常用type值：
- text：文本输入
- password：密码输入
- checkbox：复选框
- radio：单选按钮
- submit：提交按钮

3. 下拉菜单 `<select>`

<select name="city">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
</select>

4. 文本域 `<textarea>`

<textarea rows="4" cols="50"></textarea>

八、通用属性

1. 核心属性

id：唯一标识符
class：CSS类名
style：内联样式

2. 事件属性

onclick：点击事件
onmouseover：鼠标悬停事件

3. 数据属性

<div data-user-id="123"></div>

自定义data-*属性用于存储额外信息

结语

掌握这些基础标签和属性是前端开发的起点。随着HTML5的发展，还出现了更多语义化标签（如<header>、<article>等），建议在熟悉基础后进一步学习。实践是巩固知识的最佳方式，建议通过构建简单网页来练习这些标签的使用。 “`

注：本文约1500字，采用Markdown格式编写，包含： 1. 层级标题结构 2. 代码块示例 3. 表格对比 4. 分类说明 5. 重点标注

HTML的基本标签和属性是什么

2. 头部标签 <head>

3. 主体标签 <body>

二、文本内容标签

1. 标题标签 <h1>-<h6>

2. 段落标签 <p>

3. 换行标签 <br>

4. 水平线 <hr>