入门

本章将带你了解HTML的基本概念，并创建你的第一个网页。

HTML简介

什么是HTML？

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。

HyperText（超文本）：指页面内可以包含超链接，点击链接可以跳转到其他页面
Markup（标记）：指使用标签（Tag）来描述网页内容
Language（语言）：它是一种计算机语言，有特定的语法规则

HTML的历史

版本	年份	主要特点
HTML 1.0	1991	最初的HTML版本，功能简单
HTML 4.01	1999	增加了样式表和脚本支持
XHTML 1.0	2000	更严格的HTML规范
HTML5	2014	现代HTML标准，支持多媒体和语义化

HTML标签基础

什么是标签？

HTML标签是HTML语言中最基本的单位，用于定义网页中的不同元素。

标签的基本格式：

html

<标签名>内容</标签名>

标签的分类

1. 双标签（容器标签）

大多数HTML标签都是双标签，由开始标签和结束标签组成，内容放在中间。

html

<!-- 这是一个段落标签 -->
<p>这是一个段落内容</p>

<!-- 这是一个标题标签 -->
<h1>这是一级标题</h1>

<!-- 这是一个div容器 -->
<div>这是一个div容器</div>

2. 单标签（自闭合标签）

部分标签没有内容，只需要一个标签即可。

html

<!-- 换行标签 -->
<br>

<!-- 水平线标签 -->
<hr>

<!-- 图片标签 -->
<img src="image.jpg" alt="图片描述">

<!-- 输入框标签 -->
<input type="text">

提示

在HTML5中，单标签可以不写斜杠，但为了代码规范，建议写成 <br /> 或 <br> 的形式。

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>

结构详解

`<!DOCTYPE html>`

文档类型声明，告诉浏览器这是一个HTML5文档。必须放在文档的第一行。

html

<!DOCTYPE html>

`<html>` 标签

根标签，所有其他标签都包含在其中。lang 属性指定网页的语言。

html

<html lang="zh-CN">
    <!-- 网页的所有内容 -->
</html>

`<head>` 标签

头部标签，包含网页的元信息（不直接显示在页面上）：

html

<head>
    <!-- 字符编码设置 -->
    <meta charset="UTF-8">
    
    <!-- 视口设置，用于响应式布局 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 网页标题，显示在浏览器标签页上 -->
    <title>我的网页</title>
    
    <!-- 引入外部CSS样式 -->
    <link rel="stylesheet" href="style.css">
    
    <!-- 内部CSS样式 -->
    <style>
        body {
            background-color: #f0f0f0;
        }
    </style>
</head>

`<body>` 标签

主体标签，包含网页中所有可见的内容：

html

<body>
    <!-- 标题 -->
    <h1>欢迎来到我的网站</h1>
    
    <!-- 段落 -->
    <p>这是网页的主要内容。</p>
    
    <!-- 链接 -->
    <a href="https://www.example.com">点击访问</a>
    
    <!-- 图片 -->
    <img src="photo.jpg" alt="照片">
</body>

创建第一个网页

让我们动手创建一个完整的HTML网页：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 设置字符编码为UTF-8，支持中文显示 -->
    <meta charset="UTF-8">
    
    <!-- 设置视口，使网页在移动设备上正常显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 设置网页标题 -->
    <title>我的第一个网页</title>
</head>
<body>
    <!-- 一级标题 -->
    <h1>欢迎来到HTML世界</h1>
    
    <!-- 水平分割线 -->
    <hr>
    
    <!-- 段落内容 -->
    <p>这是我的第一个HTML网页，我正在学习网页开发！</p>
    
    <!-- 二级标题 -->
    <h2>关于我</h2>
    
    <!-- 段落内容 -->
    <p>我是一名编程初学者，正在学习HTML基础。</p>
    
    <!-- 换行 -->
    <br>
    
    <!-- 斜体文字 -->
    <p><i>学习使我快乐！</i></p>
    
    <!-- 加粗文字 -->
    <p><b>坚持就是胜利！</b></p>
</body>
</html>

如何运行HTML文件

创建文件：新建一个文本文件，将上面的代码复制进去
保存文件：将文件保存为 index.html（注意扩展名是 .html）
打开文件：双击文件，会自动用浏览器打开

注意

确保文件扩展名是 .html 而不是 .txt。如果看不到扩展名，请在文件资源管理器中开启"文件扩展名"显示。

HTML注释

注释是代码中的说明文字，不会在浏览器中显示，用于帮助开发者理解代码。

html

<!-- 这是一个单行注释 -->

<!--
    这是一个
    多行注释
    可以写很多内容
-->

<body>
    <!-- 头部区域开始 -->
    <header>
        <h1>网站标题</h1>
    </header>
    <!-- 头部区域结束 -->
    
    <!-- 主要内容区域 -->
    <main>
        <p>网页内容</p>
    </main>
</body>

养成好习惯

在关键位置添加注释，解释代码的作用
不要过度注释，代码本身应该尽量清晰易懂
注释要及时更新，保持与代码同步

HTML属性

属性为HTML元素提供附加信息，总是在开始标签中定义。

属性的基本格式

html

<标签名 属性名="属性值">内容</标签名>

常见属性示例

html

<!-- lang属性：指定语言 -->
<html lang="zh-CN">

<!-- charset属性：指定字符编码 -->
<meta charset="UTF-8">

<!-- href属性：指定链接地址 -->
<a href="https://www.example.com">访问网站</a>

<!-- src属性：指定图片路径 -->
<img src="image.jpg" alt="图片描述">

<!-- class属性：指定CSS类名 -->
<p class="highlight">高亮段落</p>

<!-- id属性：指定唯一标识符 -->
<div id="header">页头</div>

<!-- style属性：指定内联样式 -->
<p style="color: red;">红色文字</p>

属性使用规则

属性值必须用引号包围（推荐使用双引号）
属性名不区分大小写，但推荐使用小写
一个标签可以有多个属性，用空格分隔
属性值不要包含特殊字符

html

<!-- 正确写法 -->
<a href="https://www.example.com" target="_blank">链接</a>

<!-- 错误写法：属性值没有引号 -->
<a href=https://www.example.com>链接</a>

<!-- 错误写法：属性值包含特殊字符 -->
<a href="点击"链接"">链接</a>

HTML中的空白和换行

在HTML中，多个连续的空格和换行会被合并为一个空格：

html

<p>这里有    多个    空格</p>
<!-- 浏览器显示：这里有 多个 空格 -->

<p>这里有
多个
换行</p>
<!-- 浏览器显示：这里有 多个 换行 -->

如果需要保留空白和换行，可以使用：

html

<!-- 使用 <br> 标签换行 -->
<p>第一行<br>第二行<br>第三行</p>

<!-- 使用 <pre> 标签保留格式 -->
<pre>
    这里的
    空白和换行
    都会被保留
</pre>

<!-- 使用 &nbsp; 表示不换行空格 -->
<p>这里有&nbsp;&nbsp;&nbsp;多个空格</p>

常用特殊字符

在HTML中，某些字符有特殊含义，需要使用实体字符来表示：

字符	实体代码	说明
`<`	`<`	小于号
`>`	`>`	大于号
`&`	`&`	和号
`"`	`"`	双引号
`'`	`'`	单引号
空格	` `	不换行空格
©	`©`	版权符号
®	`®`	注册商标
™	`™`	商标符号

html

<p>5 &lt; 10 表示 5 小于 10</p>
<p>版权所有 &copy; 2024</p>
<p>公司名称&trade;</p>

本章小结

本章我们学习了：

HTML的基本概念：超文本标记语言，用于创建网页
标签的分类：双标签和单标签
HTML文档结构：<!DOCTYPE>、<html>、<head>、<body>
创建第一个网页：动手实践
HTML注释：代码说明，不会显示
HTML属性：为元素提供附加信息
特殊字符：使用实体代码表示特殊字符

下一章我们将学习基础标签，了解更多的HTML标签用法。

入门 ​

HTML简介 ​

什么是HTML？ ​

HTML的历史 ​

HTML标签基础 ​

什么是标签？ ​

标签的分类 ​

1. 双标签（容器标签） ​

2. 单标签（自闭合标签） ​

HTML文档结构 ​

结构详解 ​

<!DOCTYPE html> ​

<html> 标签 ​

<head> 标签 ​

<body> 标签 ​

创建第一个网页 ​

如何运行HTML文件 ​

HTML注释 ​

HTML属性 ​

属性的基本格式 ​

常见属性示例 ​

属性使用规则 ​

HTML中的空白和换行 ​

常用特殊字符 ​

本章小结 ​

下一章 ​

入门

HTML简介

什么是HTML？

HTML的历史

HTML标签基础

什么是标签？

标签的分类

1. 双标签（容器标签）

2. 单标签（自闭合标签）

HTML文档结构

结构详解

`<!DOCTYPE html>`

`<html>` 标签

`<head>` 标签

`<body>` 标签

创建第一个网页

如何运行HTML文件

HTML注释

HTML属性

属性的基本格式

常见属性示例

属性使用规则

HTML中的空白和换行

常用特殊字符

本章小结

下一章