HTML 基本语法规范

一、HTML概述

1. 什么是HTML？

HTML（HyperText Markup Language）是超文本标记语言，用于创建网页的结构和内容。它通过标记（标签）来组织文本、图像、链接和其他网页元素。

2. HTML的结构

一个HTML文档通常由以下几个部分组成：

<!DOCTYPE html>：声明文档类型，告诉浏览器当前文档是HTML5。
<html>：根元素，包含网页的所有内容。
<head>：包含元数据（例如字符集、标题、样式链接等）。
<body>：包含网页的主体内容，浏览器显示的实际内容。

二、HTML基本语法规范

标签：HTML使用标签来定义网页内容，每个标签由一对尖括号组成，例如 <html>, <body>, <p> 等。
- 标签名称由字母组成，不区分大小写，但通常使用小写。
- 标签通常成对出现，包含开始标签 <tag> 和结束标签 </tag>，有时会有自闭合标签（如 <img />）。
属性：标签可以有属性，属性为标签提供附加信息。例如，<a href="url"> 中的 href 是属性。
- 属性名和属性值通过等号 = 连接，属性值必须用引号括起来。
注释：HTML注释用  包围。例如：
```

```
嵌套：HTML元素可以嵌套，但需要遵循语法规则，如标签必须正确闭合。

三、HTML常见元素

文档类型声明
- <!DOCTYPE html>：定义文档类型并告诉浏览器当前文档使用的是HTML5标准。
HTML文档结构

<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="zh">
<head>
    <meta charset="UTF-8"> <!-- 设置字符集 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口 -->
    <title>我的第一个网页</title> <!-- 网页标题 -->
</head>
<body>
    <h1>欢迎来到我的第一个网页</h1> <!-- 主标题 -->
    <p>这是一个HTML文档的简单示例。</p> <!-- 段落 -->
</body>
</html>

中文注释：

<!DOCTYPE html>：声明文档类型为HTML5。
<html lang="zh">：HTML根元素，lang="zh"指定文档的语言为中文。
<head>：文档头部，包含元数据，如字符集和标题。
<meta charset="UTF-8">：设置网页字符编码为UTF-8，确保可以显示中文字符。
<title>：网页的标题，会显示在浏览器的标签页中。

四、HTML元素详细说明

1. 文本元素

标题元素：HTML中有六个级别的标题元素，<h1> 到 <h6>，数字越小，标题级别越大。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

段落元素：用于定义文本段落。

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

超链接元素：通过<a>标签创建链接，使用href属性指定链接目标。

<a href="https://www.example.com">点击这里访问示例网站</a>

2. 列表元素

无序列表：使用<ul>定义无序列表，列表项使用<li>。

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

有序列表：使用<ol>定义有序列表，列表项同样使用<li>。

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

3. 表格元素

表格：表格元素使用<table>定义，表头使用<thead>，表格主体使用<tbody>，表格行使用<tr>，表格数据使用<td>。

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

4. 图片元素

图片：通过<img>标签插入图片，使用src属性指定图片路径，使用alt属性提供图片的替代文本。

<img src="example.jpg" alt="这是示例图片" />

5. 表单元素

输入框：通过<input>标签创建输入框，type属性定义输入框类型。

<form action="submit_form.php" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" placeholder="请输入您的姓名" required />
    <input type="submit" value="提交" />
</form>

五、HTML常见语法错误

未闭合的标签：
- 每个标签需要正确闭合，如 <div> 应有 </div>。
属性值未加引号：
- 属性值应始终用双引号或单引号括起来，如 href="https://example.com"。
不正确的嵌套：
- 标签嵌套时要遵循正确的顺序，如 <p><strong>文本</p></strong> 是错误的，应改为 <p><strong>文本</strong></p>。

六、总结

HTML使用标签定义网页的结构，每个标签都可以有属性来提供更多的信息。
常见的标签包括文本、图像、链接、表格、列表和表单等。
必须遵循HTML语法规则，如标签闭合、属性值用引号括起等。
通过遵守HTML语法规范，可以确保网页正确显示并具备良好的可访问性和用户体验。

附：常用HTML标签总结表

标签	描述	示例
`<html>`	根元素	`<html lang="zh">`
`<head>`	头部	`<head><title>标题</title></head>`
`<body>`	主体	`<body><h1>标题</h1></body>`
`<h1>`–`<h6>`	标题	`<h1>大标题</h1>`
`<p>`	段落	`<p>这是段落。</p>`
`<a>`	超链接	`<a href="url">点击链接</a>`
`<img>`	图片	`<img src="image.jpg" alt="图片说明">`
`<ul>`	无序列表	`<ul><li>项1</li></ul>`
`<ol>`	有序列表	`<ol><li>第一项</li></ol>`
`<table>`	表格	`<table><tr><td>内容</td></tr></table>`
`<form>`	表单	`<form><input type="text"></form>`