Appearance
HTML
概述
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>青山之巅(qinshan.top)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html><!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
HTML文档的后缀名：.html、.htm，以上两种后缀名没有区别，都可以使用。
什么是 HTML?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- 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>
Web 浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。
HTML版本
从初期的网络诞生后，已经出现了许多HTML版本:
| 版本 | 发布时间 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
<!DOCTYPE> 声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
html
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>通用声明
HTML5
html
<!DOCTYPE html>HTML 4.01
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
HTML 编辑器推荐
可以使用专业的 HTML 编辑器来编辑 HTML，几款常用的编辑器：
HBuilderX：https://www.dcloud.io/hbuilderx.html
VS Code：https://code.visualstudio.com/
VS Code 可以安装 Live Preview 插件来实时预览编写的代码，在编辑窗口右击鼠标，选择 Show Preview 选项，这样我们就可以在编辑代码过程中实时预览到效果了。
Sublime Text：http://www.sublimetext.com/
基础
HTML 标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
html
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>HTML 段落
HTML 段落是通过标签 <p> 来定义的。
html
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>HTML 链接
HTML 链接是通过标签 <a> 来定义的，在 href 属性中指定链接的地址。
html
<a href="https://www.qinshan.top">这是一个链接</a>HTML 图像
HTML 图像是通过标签 <img> 来定义的，图像的名称和尺寸是以属性的形式提供的。
html
<img src="/images/logo.png" width="258" height="39" />HTML 元素
HTML 文档由 HTML 元素定义。
HTML 元素
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
<p> | 这是一个段落 | </p> |
<a href="default.htm"> | 这是一个链接 | </a> |
<br> | 换行 |
开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容。
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。
HTML 文档由相互嵌套的 HTML 元素构成。
HTML 文档实例
html
<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>以上实例包含了三个 HTML 元素。
HTML 实例解析
<p> 元素:
html
<p>这是第一个段落。</p>这个 <p> 元素定义了 HTML 文档中的一个段落。 这个元素拥有一个开始标签<p> 以及一个结束标签 </p>. 元素内容是: 这是第一个段落。
<body> 元素:
html
<body>
<p>这是第一个段落。</p>
</body><body> 元素定义了 HTML 文档的主体。 这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。 元素内容是另一个 HTML 元素（p 元素）。
<html> 元素：
html
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html><html> 元素定义了整个 HTML 文档。 这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>. 元素内容是另一个 HTML 元素（body 元素）。
不要忘记结束标签
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
html
<p>这是一个段落
<p>这是一个段落以上实例在浏览器中也能正常显示，因为关闭标签是可选的。
但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
HTML 提示：使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
HTML 属性
属性是 HTML 元素提供的附加信息。
属性总是以 name="value" 的形式写在标签内，name 是属性的名称，value 是属性的值。
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
实例
HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='John "ShotGun" Nelson'
HTML 提示：使用小写属性
属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
HTML 属性参考手册
查看完整的HTML属性列表: HTML 标签参考手册。
下面列出了适用于大多数 HTML 元素的属性：
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
id: 给元素一个唯一的标识符，可以用于 CSS 选择器或 JavaScript 操作。<div id="header">This is a header</div>class: 给元素指定一个或多个类名，方便通过 CSS 或 JavaScript 操作。<p class="text-muted">This is a paragraph.</p>style: 直接为元素定义 CSS 样式。<span style="color: red;">This text is red.</span>href: 用于<a>标签，指定链接目标。<a href="https://www.example.com">Visit Example</a>src: 用于<img>和<script>标签，指定资源的路径。<img src="image.jpg" alt="Description">alt: 用于<img>标签，提供图片的替代文本。<img src="logo.png" alt="Company Logo">title: 提供关于元素的额外信息，通常在鼠标悬停时显示。<button title="Click me">Submit</button>name: 在<input>,<form>,<select>等表单元素中使用，定义元素的名称。<input type="text" name="username">value: 定义表单元素的值。<input type="text" value="Default text">target: 用于<a>标签，指定链接的打开方式（如_blank在新窗口中打开）。<a href="https://www.example.com" target="_blank" rel="noopener">Open in new tab</a>type: 指定表单元素的类型（如text,password,submit）。<input type="password" name="password">placeholder: 为<input>和<textarea>提供一个占位符文本。<input type="text" placeholder="Enter your name">
更多标准属性说明： HTML 标准属性参考手册.