学习 HTML
- 目标：学习如何使用 HTML 来创建站点
HTML 简介
首先看一段 HTML 示例：
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
什么是 HTML？
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言(markup language)
- HTML 使用标记标签来描述网页
HTML 标签的特性：
- 关键词由尖括号包围而成，如
- 成对出现，如 <b> 和 </b>，其中 <b> 为开始标签(也称为开放标签)，</b> 为结束标签(也称为闭合标签)
网页 = HTML文档
Web客户端和服务器之间的交互基于超文本传输协议(Hypertext Transfer Protocol，HTTP)，该协议是建立在 TCP 协议之上的。
- Web 客户端(即浏览器)打开一个到 Web 服务器的连接，请求某些内容
- Web 服务器响应所请求的内容，然后关闭连接
- Web 客户端读取这些内容，再将其显示在屏幕上
可以视作 Web 浏览器的作用是读取 HTML 文档，使用标签来解释页面的内容，并以网页的形式显示出来。
对最初的实例的解释：
- <html> 与 </html> 之间的
- <body> 与 </body> 之间的内容为可见的页面内容
- <h1> 与 </h1> 之间的内容被显示为标题
- <p> 与 </p> 之间的内容被显示为段落
HTML 编辑器
HTML 编辑器的选用
可以选用专业的 HTML 编辑器(如Adobe Dreamweaver、Microsoft Expression Web等)来进行 HTML 编辑的任务，同时也推荐使用 Notepad 或 TextEdit 等文本编辑器来学习 HTML。
选用 VS Code 后的简单配置
我选用了 VS Code 作为主用的 HTML 编辑器。由于 VS Code 默认在其控制台中查看 HTML 页面，这使得我们的调试以及查看效果很不方便，于是我们首先安装 Open In Browser 拓展插件，安装成功后通过快捷键 Alt + B 即可在默认浏览器打开当前的 HTML 页面；通过快捷键 Shift + Alt + B 可以选择其他浏览器打开。
HTML 元素
HTML 文档是由 HTML 元素定义的。HTML 元素是指从开始标签到结束标签的所有代码，即：
<p>This is a paragraph</p>
对于以上的代码，This is a paragraph在开始标签(<p>)与结束标签(</p>)之间，即为元素内容。
- 以开始标签起始，直至结束标签终止
- 某些 HTML 元素具有空内容(empty content)，称为空元素，比如 <br> (定义换行)。所有元素都必须被关闭，而空元素则在开始标签中被关闭(在开始标签中添加斜杠)，因此 <br /> 为关闭空元素的正确方法
- 大多数 HTML 元素可拥有属性
- HTML标签对字母大小写不敏感，但推荐使用小写标签，即尽量使用 <p> 而不使用 </p>
- HTML 文档由嵌套的 HTML 元素构成
- 虽然省略结束标签后大多数浏览器仍可以正确显示 HTML，但未来的 HTML 版本不允许省略结束标签，因此不要忘记结束标签
HTML 属性
HTML 标签可拥有属性。HTML 属性可以提供有关 HTML 元素的附加信息。
- 属性以类似
name = "value"的名称/值对的形式出现 - 属性在 HTML 元素的开始标签中规定
- HTML 属性对字母大小写不敏感，但推荐使用小写属性
- 属性值应被包括在引号内，单引号、双引号均可，推荐使用更常用的双引号
<!-- 对标题的对齐方式添加附加信息 -->
<h1 align="center">居中的标题</h1>
<!--
对链接的地址添加附加信息
HTML链接由<a>标签定义，链接的地址在href属性中指定
-->
<a href="http://www.w3school.com.cn">This is a link</a>
HTML 标题与段落
HTML 标题
HTML标题由 <h1> ~ <h6> 等标签定义，其中由 <h1> 到 <h6>，标题字体由大至小。
- 将标题利用好以清晰地呈现文档的结构
- <hr /> 标签可用于创建水平线，用于分隔内容
- HTML 会默认自动地在块级元素(如段落、标题等)前后添加一个额外的空行
HTML 段落
HTML 段落以标签 <p> 定义。在显示页面时，浏览器会移除源代码中多余的空格/空行，即源代码中所有连续的空行都会被显示为一个空格。