今天是公众号文章排版学习的第四天。按照计划，今天会进行HTML 标记的基础学习。我选择在W3school学习，这个网上随便搜索一下应该就能找到。下面记录今天的具体学习项目：
HTML 简介
HTML 是用来描述网页的一种语言，是一种超文本标记语言。
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。由尖括号包围，比如 <html>，通常成对出现，比如 <b> 和</b>，其中第一个标签是开始标签，第二个标签是结束标签
HTML文档就是网页。Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
HTML 编辑器
推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我个人推荐使用notepad++，因为我是windows操作系统，另外就是notepad++功能比记事本强大太多了。
编辑HTML文档流程：打开编辑器，键入HTML代码，保存为.htm或.html文件，用浏览器打开这个文件。
HTML 基础
HTML 标题通过 <h1> – <h6> 等标签进行定义。段落通过 <p>标签进行定义。链接通过 <a>标签进行定义。图像通过 <img>标签进行定义。
HTML 元素
HTML 元素指的是从开始标签到结束标签的所有代码。
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。HTML 标签对大小写不敏感：<P> 等同于 <p>。但是推荐使用小写标签。
HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=”value”。属性总是在 HTML 元素的开始标签中规定。属性和属性值对大小写不敏感，但是属性推荐用小写。另外属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，
HTML 标题
HTML 标题通过 <h1> – <h6> 等标签进行定义。<h1> 定义最大的标题。<h6> 定义最小的标题。请确保将 HTML 标题标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为网页的结构和内容编制索引。<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
HTML 段落
段落通过 <p>标签进行定义。不要使用空的段落标记 <p></p> 去插入一个空行，这是个坏习惯。用<br />标签代替它！（但是也不要用 <br /> 标签去创建列表。）<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。即使 <br> 在所有浏览器中的显示都没有问题，使用<br />也是更长远的保障。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
HTML 样式
style 属性用于改变 HTML 元素的样式。style 属性的作用：*提供了一种改变所有 HTML 元素的样式的通用方法。**样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
按这里的意思，其实样式和CSS文件起的作用是差不多的。不同的是CSS文件属于独立的样式表。而style属于HTML元素的一个属性。
HTML 格式化
HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。学习文章排版布局应该要把格式化做好，提前就设置好样式。
HTML 引用
HTML <q>元素定义短的引用。浏览器通常会为 <q> 元素包围引号。
HTML <blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote> 元素进行缩进处理。
HTML <abbr> 元素定义缩写或首字母缩略语。对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。HTML <dfn> 元素定义项目或缩写的定义。
HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
HTML <cite> 元素定义著作的标题。浏览器通常会以斜体显示<cite>元素。
HTML <bdo> 元素定义双流向覆盖（bi-directional override）。<bdo> 元素用于覆盖当前文本方向：
HTML 计算机代码
通常，HTML 使用可变的字母尺寸，以及可变的字母间距。在显示计算机代码示例时，并不需要如此。<kbd>,<samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。
<code> 元素不保留多余的空格和折行，如需解决该问题，您必须在<pre>元素中包围代码。
HTML<var> 元素定义数学变量：
HTML 注释
通过注释标签 <!– 与 –> 向 HTML 源代码添加注释.
HTML CSS
通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
HTML 链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。我们通过使用<a>标签在 HTML 中创建链接。有两种使用 <a> 标签的方式：通过使用 href 属性 – 创建指向另一个文档的链接；通过使用 name 属性 – 创建文档内的书签。
“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。使用 Target 属性，你可以定义被链接的文档在何处显示。
name 属性规定锚（anchor）的名称。可以使用 name 属性创建 HTML 页面中的书签。当使用命名锚（named anchors）时，可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。锚的名称可以是任何你喜欢的名字。可以使用 id 属性来替代 name 属性，命名锚同样有效。
将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到这个命名锚了。请始终将正斜杠添加到子文件夹。
命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。这个完全可以通过Markdown的TOC自动生成目录完成。假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
HTML 图像
在 HTML 中，图像由 <img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
alt 属性用来为图像定义一串预备的可替换的文本。
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
如果不定义边框属性，表格将不显示边框。表格的表头使用 <th>标签进行定义。
为了避免空单元格不显示这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
HTML 列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li> 标签。
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以<dd>开始。
HTML 块
大多数 HTML 元素被定义为块级元素或内联元素。“块级元素”译为 block level element，“内联元素”译为 inline element。块级元素在浏览器显示时，通常会以新行来开始（和结束）。内联元素在显示时通常不会以新行开始。
HTML <div>元素是块级元素，它是可用于组合其他 HTML 元素的容器。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span>元素是内联元素，可用作文本的容器。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
目前来看<div>和<span>应该是学习的重中之重。
HTML 类
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式。
HTML 布局
<div>元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
使用<table>元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式
HTML 响应式设计
RWD 指的是响应式 Web 设计（Responsive Web Design），RWD 能够以可变尺寸传递网页，RWD 对于平板和移动设备是必需的。
另一个创建响应式设计的方法，是使用现成的 CSS 框架。Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机。
HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
框架结构标签（<frameset>）定义如何将窗口分割为框架。每个 frameset 定义了一系列行或列。rows/columns 的值规定了每行或每列占据屏幕的面积。Frame 标签定义了放置在每个框架中的 HTML 文档。为不支持框架的浏览器添加<noframes>标签。
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。
HTML 内联框架
iframe 用于在网页内显示网页。height 和 width 属性用于规定 iframe 的高度和宽度。属性值的默认单位是像素，但也可以用百分比来设定（比如 “80%”）。frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 “0” 就可以移除边框。iframe 可用作链接的目标（target）。链接的 target 属性必须引用iframe 的 name 属性。
HTML 背景
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
推荐使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。
HTML 脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。
<script>标签用于定义客户端脚本，比如 JavaScript。script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新。
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容。
如果浏览器压根没法识别 <script> 标签，那么<script>标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。所有很多脚本都会写在注释里面。
HTML 头部
<head>元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
<title> 标签定义文档的标题。title 元素在所有 HTML/XHTML 文档中都是必需的。title 元素能够定义浏览器工具栏中的标题，提供页面被添加到收藏夹时显示的标题，显示在搜索引擎结果中的页面标题。
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）
<link> 标签定义文档与外部资源之间的关系。<link> 标签最常用于连接样式表。
<style> 标签用于为 HTML 文档定义样式信息。可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式。
元数据（metadata）是关于数据的信息。<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta> 标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。name 和 content 属性的作用是描述页面的内容。
<script> 标签用于定义客户端脚本，比如 JavaScript。
HTML 实体
在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
HTML 中的常用字符实体是不间断空格( )。实体名称对大小写敏感！
HTML URL
URL 也被称为网址。当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
遵守以下的语法规则：scheme://host.domain:port/path/filename
scheme – 定义因特网服务的类型。最常见的类型是 http、https、ftp、file。
host – 定义域主机（http 的默认主机是 www）
domain – 定义因特网域名，比如 mrwis.com
:port – 定义主机上的端口号（http 的默认端口号是 80）
ath – 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename – 定义文档/资源的名称
URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。
HTML URL 编码
URL 编码会将字符转换为可通过因特网传输的格式。Web 浏览器通过 URL 从 web 服务器请求页面。
URL 只能使用 ASCII 字符集来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格。URL 编码通常使用 + 来替换空格。
HTML Web 服务器
如果希望向世界发布您的网站，那么您必须把它存放在 web 服务器上。大多数小公司会把网站存放到由 ISP （因特网服务提供商）提供的服务器上。
HTML 颜色
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）
HTML 颜色名
大多数的浏览器都支持颜色名集合。仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
HTML 文档类型
<!DOCTYPE> 声明帮助浏览器正确地显示网页。
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
HTML 速查手册
以上内容的集合。
文章的全部知识点都来源于W3school，我仅仅是做了一个简单的记录。相当于一个学习笔记吧。其中有部分知识跨度较大，对于目前的我来说，基本用不上。因为我的主要目的是进行公众号文章排版，所以只要掌握基本的HTML标记和style样式就好了。也就没有进行深入的学习，后期根据实际需要再去具体的补充需要学习的内容。
希望以上对你有所帮助。
今日语录：
当你的才华还撑不住你的野心时，那你就应该静下心来学习。
转载请保留页面地址：https://www.hulklee.com/wechat-article-layout-part-4/
