（使用菜鸟教程学习）
目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
上面的代码解释——
★什么是HTML?
HTML 是用来描述网页的一种语言。超文本标记语言！
它不是一种编程语言。
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 标签通常是成对出现的：
标签对中的第一个标签是开始标签，第二个标签是结束标签！
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户~
★<!DOCTYPE> 声明
正确的声明有助于浏览器中正确地显示网页。
doctype的拼写，大小写均可。
所有主流浏览器都支持该声明。以下是完整网页声明——
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK（如360浏览器）。
（使用 VS Code 工具来创建 HTML 文件！）
★HTML 标题（六级，h1~h6）
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
结果——
★HTML 段落定义
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
浏览器会自动地在段落的前后添加空行。
★HTML 链接（通过那个a来定义）
<a href="https://www.runoob.com">这是一个链接</a>
（上面，在 href 属性中指定链接的地址）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。
</p>
<p><a href="//www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>
———— target 属性————
使用 target 属性，你可以定义被链接的文档在何处显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
</body>
</html>
★HTML 图像——img
参见——打开
注意： 图像的名称和尺寸是以属性的形式提供的。
★HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
未来将强制使用小写标签属性，所以别大写~
★HTML 属性
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”，例如链接的地址在 href 属性中指定！
属性值应该始终被包括在引号内。单双引号都可。但在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name=‘John “ShotGun” Nelson’
查阅——HTML参考手册
★水平线
hr 标签在 HTML 页面中创建水平线。e.g.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>
★HTML 注释
写法：
<!-- 这是一个注释，注释在浏览器中不会显示 -->
开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。
★如何查看源代码？
你是否看过一些网页然后惊叹它是如何实现的。如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox）。
★HTML 折行
在不产生一个新段落的情况下进行换行（新行），请使用 br标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>这个<br>段落<br>演示了分行的效果</p>
</body>
</html>
运行结果——
这个
段落
演示了分行的效果
★HTML 输出 - 使用提醒
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
</body>
</html>
★文本格式化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<!--use格式化标签-->
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>
</html>
运行结果：
★HTML头部详解（head）
- head元素包含了所有的头部标签元素。在head元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
- title
该标签定义了不同文档的标题（浏览器工具栏的标题），在HTML文档中必须存在。标题也是当网页添加到收藏夹时，显示在收藏夹中的标题。还是显示在搜索引擎结果页面的标题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
- base（页面链接标签的默认链接地址）
base标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接！
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
- link元素
该标签定义了文档与外部资源之间的关系。通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- style
标签定义了HTML文档的样式文件引用地址.
在style元素中你也可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
- meta（元数据）
meta标签描述了一些基本的元数据。
meta 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
</head>
上述代码块定义了：关键词、网页描述内容、网页作者！
- script
用于加载脚本文件，如： JavaScript。 - 总结表
