HTML 语法与结构

阅读量:70

HTML（超文本标记语言）是构建网页的基础语言。它通过使用标签（tags）来描述网页的结构和内容，使浏览器能够正确地显示文本、图像、链接等元素。本文将详细介绍 HTML 的基本语法和结构，帮助初学者掌握如何编写规范的 HTML 文档。

HTML 文档的基本结构

一个标准的 HTML 文档由以下几个部分组成：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题</title>
  </head>
  <body>
    <!-- 网页内容 -->
  </body>
</html>

1. `<!DOCTYPE html>`

这行声明定义了文档类型，告知浏览器当前文档使用的是 HTML5 标准。它位于文档的第一行，是 HTML5 的简洁声明方式。

2. `<html lang="zh-CN">`

<html> 标签是所有 HTML 元素的根元素。lang 属性指定了文档的语言，这对于搜索引擎优化（SEO）和无障碍访问（accessibility）非常重要。上述示例中，lang="zh-CN" 表示文档的语言是简体中文。

3. `<head>`

<head> 元素包含了关于文档的元数据（metadata），如字符集、页面标题、样式表链接等。这些信息不会直接显示在网页内容中，但对页面的功能和表现有重要影响。

常见的 `<head>` 子元素：

<meta charset="UTF-8">：定义文档的字符集为 UTF-8，确保文档能够正确显示多种语言字符。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口（viewport）属性，确保页面在移动设备上有良好的显示效果。
<title>：定义网页的标题，显示在浏览器的标签页上。
<link>：用于链接外部资源，如样式表或图标。

4. `<body>`

<body> 元素包含了网页的主要内容，如文本、图像、链接、表格等。浏览器会根据这些内容进行渲染，呈现给用户。

常用的 HTML 元素

HTML 提供了多种元素来描述不同类型的内容。以下是一些常用的 HTML 元素及其用途：

1. 标题（Headings）

HTML 提供了六级标题标签，<h1> 到 <h6>，用于定义不同层级的标题，<h1> 为最高级别，<h6> 为最低级别。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

2. 段落（Paragraphs）

<p> 标签用于定义段落。

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

这是一个段落。

这是另一个段落。

3. 链接（Links）

<a> 标签用于创建超链接，href 属性指定链接目标。

<a href="https://qingxue.top">访问清雪</a>

访问清雪

4. 图像（Images）

<img> 标签用于嵌入图像，src 属性指定图像路径，alt 属性提供图像的替代文本。

图像路径也可以是指向图片的直链

<img src="image.jpg" alt="描述图像的替代文本">

5. 列表（Lists）

HTML 支持有序列表和无序列表。

无序列表使用 <ul> 标签，列表项使用 <li> 标签。

<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

项目一

项目二

项目三

有序列表使用 <ol> 标签，列表项同样使用 <li> 标签。

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

第一项

第二项

第三项

6. 表格（Tables）

<table> 标签用于创建表格，结合 <tr>（表格行）、<th>（表头单元格）和 <td>（表格数据单元格）标签使用。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>22</td>
    <td>上海</td>
  </tr>
</table>

姓名年龄城市

张三 28 北京

李四 22 上海

姓名	年龄	城市
张三	28	北京
李四	22	上海

7. 表单（Forms）

<form> 标签用于创建交互式表单，包含输入字段、按钮等元素。

form中的action参数代表点击提交后会将数据提交至 /submit 处

method参数则代表数据以post方式提交

<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="提交">
</form>

姓名：
邮箱：

HTML 属性

HTML 元素可以包含属性，以提供额外的信息。属性通常位于开始标签内，以键值对的形式出现，键和值之间用等号连接，值使用双引号括起来。

<a href="https://qingxue.top" target="_blank">访问清雪</a>

在上述示例中：

href 属性指定链接的目标 URL。
target="_blank" 属性指定在新标签页中打开链接。

嵌套与空元素

HTML 元素可以相互嵌套，但必须遵循正确的嵌套顺序。例如，块级元素可以包含行内元素，但行内元素不应包含块级元素。

<p>这是一个段落，其中包含一个 <a href="#">链接</a>。</p>

这是一个段落，其中包含一个链接。

此外，HTML 还有一些空元素，即没有内容的元素，如 <img>、<br>、<hr> 等。这些元素不需要结束标签，但在 XHTML 语法中，需要以自闭合形式书写，如 <img src="image.jpg" alt="描述" />。

注释

在HTML中可以使用 // 来表示注释此行

<h1>标题</h1>
<p>清雪</p> //我是注释

在大部分情况下注释可以帮助别人理解你的代码

~~正经人谁写注释啊~~

本文为【qingxue.top】原创
未经允许严禁转载！

HTML 文档的基本结构

1. <!DOCTYPE html>

2. <html lang="zh-CN">

3. <head>

常见的 <head> 子元素：

4. <body>