举个例子： - **\** 声明为 HTML5 文档 - **\** 元素是 HTML 页面的根元素 - **\** 元素包含了文档的元（meta）数据，如 **\** 定义网页编码格式为 **utf-8**。 - **\** 元素描述了文档的标题 - **\<body>** 元素包含了可见的页面内容 - **\<h1>** 元素定义一个大标题 - **\<p>** 元素定义一个段落 **注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。** ## **什么是 HTML?** HTML 是用来描述网页的一种语言。 - HTML 指的是超文本标记语言: **H**yper**T**ext **M**arkup **L**anguage - HTML 不是一种编程语言，而是一种**标记**语言 - 标记语言是一套**标记标签** (markup tag) - HTML 使用标记标签来**描述**网页 - HTML 文档包含了HTML **标签**及**文本**内容 - HTML文档也叫做 **web 页面** ### **HTML 标签** HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 - HTML 标签是由*尖括号*包围的关键词，比如\<html> - HTML 标签通常是*成对出现*的，比如\<b> 和 \</b> - 标签对中的第一个标签是*开始标签*，第二个标签是*结束标签* - 开始和结束标签也被称为*开放标签*和*闭合标签* <标签>内容</标签> ### HTML 元素: "HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思. 但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例: HTML 元素: `<p>这是一个段落。</p>` <p>这是一个段落。</p> ### Web浏览器 （如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。 浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户 只有 \<body> 区域才会在浏览器中显示。 ### **\<!DOCTYPE> 声明** <!DOCTYPE>声明有助于浏览器中正确显示网页。 网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。 doctype 声明是不区分大小写的，以下方式均可： ``` <!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html> ``` ### **通用声明** **HTML5** \<!DOCTYPE html> **中文编码** 目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。 **HTML 实例** ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 页面标题

我的第一个标题

我的第一个段落。

``` **保存 html 文件时，文档编码和 meta 设置的编码，一定要相同，只要不相同，就一定会出现乱码！** **之所以一定要写上\，就是为了防止浏览器的怪异模式，强制浏览器按照标准模式渲染网页！** ## **HTML 元素** HTML 文档由 HTML 元素定义。 **HTML 元素** 开始标签、结束标签和元素内容； | **开始标签 \*** | **元素内容** | **结束标签 \*** | | ------------------------ | ------------ | --------------- | | \

| 这是一个段落 | \

| | \ | 这是一个链接 | \ | | \
| 换行 | | \*开始标签常被称为**起始标签（opening tag）**，结束标签常称为**闭合标签（closing tag）**。 **HTML 元素语法** - HTML 元素以**开始标签**起始 - HTML 元素以**结束标签**终止 - **元素的内容**是开始标签与结束标签之间的内容 - 某些 HTML 元素具有**空内容（empty content）** - 空元素**在开始标签中进行关闭**（以开始标签的结束而结束） - 大多数 HTML 元素可拥有**属性** **嵌套的 HTML 元素** 大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。 HTML 文档由相互嵌套的 HTML 元素构成。 \

元素定义了 HTML 文档中的一个段落。 这个元素拥有一个开始标签 \

以及一个结束标签 \

。

这是第一个段落。

元素内容是: 这是第一个段落。 \ 元素定义了 HTML 文档的主体。 这个元素拥有一个开始标签 \ 以及一个结束标签\。

这是第一个段落。

元素内容是另一个 HTML 元素（p 元素）。 \ 元素定义了整个 HTML 文档。 这个元素拥有一个开始标签 \ ，以及一个结束标签 \.

这是第一个段落。

元素内容是另一个 HTML 元素（body 元素）。 **HTML 空元素** 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。 \
就是没有关闭标签的空元素（\
标签定义换行）。 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。 在开始标签中添加斜杠，比如 \
，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。 即使 \
在所有浏览器中都是有效的，但使用 \
其实是更长远的保障。 **HTML 提示：使用小写标签** HTML 标签对大小写不敏感：\

等同于 \

。许多网站都使用大写的 HTML 标签。 万维网联盟（W3C）在 HTML 4 中**推荐**使用小写，而在未来 (X)HTML 版本中**强制**使用小写。 ## **HTML 属性** 属性是 HTML 元素提供的附加信息。 属性通常出现在 HTML 标签的开始标签中，用于定义元素的行为、样式、内容或其他特性。 属性总是以 **name="value"** 的形式写在标签内，**name** 是属性的名称，**value** 是属性的值。 **HTML 属性** - HTML 元素可以设置**属性** - 属性可以在元素中添加**附加信息** - 属性一般描述于**开始标签** - 属性总是以名称/值对的形式出现，**比如：name="value"**。 **HTML 属性常用引用属性值** 属性值应该始终被包括在引号内。 双引号是最常用的，不过使用单引号也没有问题。 使用双引号： `Link` Link 使用单引号： `Link` Link [HTML 标签参考手册](https://www.runoob.com/tags/html-reference.html)。 **全局属性** 全局属性是所有 HTML 元素都可以使用的属性。 **id**：为元素指定唯一的标识符。 `

` **class**：为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。 `

This is a highlighted text.

` **style**：用于直接在元素上应用 CSS 样式。 `

This is a styled paragraph.

`

This is a styled paragraph.

**title**：为元素提供额外的提示信息，通常在鼠标悬停时显示。 `HTML` HTML **data-\***：用于存储自定义数据，通常通过 JavaScript 访问。 `
User Info
` **特定元素的属性** 某些属性仅适用于特定的 HTML 元素。 **href**（用于 \ 和 \ 元素）：指定链接的目标 URL。 `Visit Example` Visit Example **src**（用于 \, \ ``` **HTML\