本文共 11571 字，大约阅读时间需要 38 分钟。
如果您对前端的其它内容的学习感兴趣，可以前往 翻阅。具体专栏内容如下：
HTML介绍
本人是个新手，写下博客用于自我复习、自我总结。 如有错误之处，请各位大佬指出。 学习资料来源于：尚硅谷
对于整个前端最基础的三部分内容就是：HTML、CSS、JavaScript。当然也涉及到了。W3C的出现是为了制定网页开发的标准，以使同一个网页在不同的浏览器中有相同的效果。所以，我们编写的网页都需要遵循W3C的规范。具体内容可点击上面链接查阅。
表现：CSS用于控制页面中元素的样式
行为：JavaScript用于响应用户操作
HTML简介
HTML（Hypertext Markup Language）也被称为 超文本标记语言。
• 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。
• 在使用 HTML 时，我们会以 标签的形式 来 标识网页中的不同组成部分。
那么标签到底是什么？该如何使用？
标签结构
<标签名> 标签内容
标签一般成对出现，但随着后续的学习，我们也会发现一些 自结束标签：<标签名/>
元素
• 我们在有了标签之后，这个完整的标签结构也被称为 元素。
• 这里我们 可以暂时 将元素和标签认为是一个 同义词。
我们先不考虑具体标签的用法，看一下说明：
一级标题
在上面这段代码里，p 我们就可以称为元素，当然也可以说为 p 标签。
除了上面这种基本结构外，标签也是可以嵌套的，也就是标签内部可以放其它标签。
我是一个段落
在上面这段代码里，p 也是一个元素，em 是 p 的子元素，p 是 em 的父元素。
在通常情况下，为了方便代码管理，区分各部分功能，经常会用某些标签（比如 div）来包裹功能代码。
内容
• div 也是一个元素。
• div 是 p 和 em 的祖先元素。
• p 和 em 是 div 的后代元素。
注释
• HTML 注释中的内容不会在网页中显示。
• 格式:
• 合理的使用注释可以帮助开发人员理解网页的代码。
• 注释不能嵌套！
HTML使用的基本结构
结合上面的内容，我们先来看一下最基本的结构。这需要涉及到几个标签。
< html >
• 作用：<html> 标签用于告诉浏览器这个文档中包含的信息是用HTML编写的。
• 用法：
– 所有的网页的内容都需要编写到html标签中，一个页面中html标签只能有一个。
– html标签中有两个子标签head和body 。
< head >
• 作用：<head> 标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息。
• 用法：head标签作为html标签的子元素的出现，一个网页中只能有一个head。
在 head 标签中，通常会包括 meta 标签、title 标签，也可以考虑选择将 CSS样式信息（style 标签）写在其中。
< title >
• 作用：<title> 标签表示网页的标题，一般会在网页的标题栏上显示。title标签中的文字，是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。
• 用法：
– 建议将title标签紧贴着head标签编写，这样搜索引擎可以快速检索到标题标签。
– 网站中的多个页面的title也不应该重复，这样不利于搜索隐藏检索。
< body >
• 作用：<body>标签用来设置网页的主体，所有在页面中能看到的内容都应该编写到body标签中。
• 用法： body标签作为html的子标签使用。
所以综上所述，最基本的结构就是下述代码所示：
网页标题 回乡偶书（二首）
其一
贺知章
少小离家老大回
乡音无改鬓毛衰
儿童相见不相识
笑问客从何处来
如果我们想运行HTML，最简单的方式就是可以在记事本上书写，然后改txt格式为html。
除此以外，笔者推荐的编译器：WebStorm（强烈推荐）、IDEA、VS Code、HBuilderX。
在这里简单介绍该如何运行（以 WebStorm 为例）：
在WebStorm打开自己新建的项目文件夹之后，可以通过左上角 File - New - HTML File 的方式来新建HTML文件。
或者右键左侧项目文件夹，也可以New一个HTML文件即可。 
通常编译器新建HTML文件，基本结构都会创建（随后将会对其中内容进行说明）。 如果我们想运行，只需要鼠标放在代码页面，右上就会出现想要运行的浏览器。选择一个已经安装在电脑的浏览器即可。（对于浏览器，笔者强烈推荐使用Google Chrome）
接下来说回正题。
网页标题 回乡偶书（二首）
其一
贺知章
少小离家老大回
乡音无改鬓毛衰
儿童相见不相识
笑问客从何处来
如果您将上面的代码这样直接运行的话，我们可以发现，展现的效果在网页中就是一行。虽然暂时不知道body标签中其它标签的用法，但是这确实不是想要的结果。这是因为基本结构不止如此。
doctype
HTML总共有很多的版本，而且这其中至少有三个版本在广泛使用，那么浏览器怎么知道我们在使用哪个版本呢？
为了让浏览器知道我们使用的HTML版本，我们还需要在网页的最上边添加一个doctype声明，来告诉浏览器网页的版本。
比如：
可以发现上述文档声明十分的麻烦。不过现在通常使用的是 html5 的文档声明，非常简单： 需要注意：如果不写的话，解析网页时可能会产生一些不可预期的行为，所以避免的最好方式就是在页面中编写正确的doctype。不过不用担心，在用各种编译器时，这些通常都会自动生成。
meta
除此以外，还有编码问题。如果我们保存文件时使用的是 utf-8 进行编码，而浏览器读取页面时使用 gb2312，这样就会导致页面中的内容不能正常显示，也就是我们所说的乱码。
（常见的字符集：ASKII、ISO8859-1、GBK、GB2312、UTF-8。）
所以我们只需要统一两者使用的字符集就可以解决乱码问题。为了页面有更好的使用性，一般会使用utf-8。
为了解决这个问题，在html5中只需要使用meta标签即可完成这个任务：
meta作用：
– meta 标签可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
– meta 标签位于文档的头部，不包含任何内容。meta 标签的属性定义了与文档相关联的名称/值对。
以下是基础用法：
如果您对meta标签感兴趣，可以参考以下文章内容：、 现在综合以上内容，一个HTML文件，最基本的结构如下所示：
网页的基本结构 示例
HTML使用的补充说明
属性
在往后的学习中，标签的属性必不可少。这个属性是直接在HTML标签中设置的。
有了这个属性后，它就能为 HTML元素提供附加信息，告知标签该如何展现，或者展现什么内容。有些属性可以是任意值，有些则必须是指定值。具体内容在学习过程中就可以体会到。
属性需要设置在开始标签或自结束标签中。属性总是以 名称 / 值对 的形式出现。
简例：
标题
常见属性
• id
– id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。
• class
– class属性用来为标签分组，拥有相同class属性的标签我们认为就是一组，可以出现相同的class属性，可以为一个元素指定多个class。
（ id 和 class 主要是用来和 CSS 配合，在后续CSS文章中即可看到）
• title
– title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。
其它说明：当然属性不止于这些，以上是每个标签都可以设置的内容。后续还有很多用法，主要是针对各个标签而言。
标签属性例：
标签的属性 这是我的第二个网页！
常用标签
< h1 > ~ < h6 >
h1 ~ h6都是网页中的标题标签，用来表示网页中某一段正文的一个标题，不同的是，从h1 ~ h6重要性越来越低。通常认为 h1 ~ h6 重要性仅次于页面的title。
一般标题标签通常只会使用到h3，h3以后的标题标签对于搜索引擎就没有什么意义了。
一个页面中通常只会使用一个h1标签。
< p >
p 标签表示网页中的一个段落。
一般浏览器会在段落的前和后各加上一个换行，也就是段落会在页面中自成一行。
< br />
br 标签表示一个换行标签，使用br标签可以使br标签后的内容另起一行
< hr />
hr 标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分成上下两个部分。
< img /> ※
<img/>标签是图片标签，可以用来向页面中引入一张外部的图片。img标签是一个自结束标签。
img这种元素属于替换元素。
所谓替换元素就是 浏览器会根据其标签的元素属性来判断显示具体的内容的元素，且元素一般拥有固定的尺寸。比如：img标签，浏览器就会根据src来显示内容。
而非替换元素就是 直接将内容告诉浏览器，直接显示出来。例如：p标签，浏览器会直接显示p标签里的内容。
• 属性：
– src ：指向一个外部的图片的路径。（路径规则和超链接是一样的）
– alt ：图片的描述。这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录。
例：
图片标签 
< a > ※
• 作用：
– <a> 标签是超链接标签，通过a标签，可以快速跳转到其他页面。
• 属性：
– href ：指向一个链接地址，这个地址可以是一个外部网站的地址，也可以写一个内部页面的地址。
– target：设置打开目标页面的位置，可选值：_blank新窗口、_self当前窗口。
在a标签中可以嵌套除它自身外的任何元素。
例：
超链接 超链接 超链接2 去底部 去第三个自然段在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia quasi numquam quam molestias cumque eveniet ab nobis doloribus dolores. Nesciunt, distinctio tempore similique consequuntur nulla dolorem sapiente minus praesentium impedit.
这是一个新的超链接 这是一个新的超链接 回到顶部
当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径。
对于相对路径，通常都会使用 ./或../开头。
./表示当前文件所在的目录
../ 表示当前文件所在目录的上一级目录
也就是说，./可以省略不写。如果不写./，也不写../，则就相当于写了./。
例：
Document 超链接1 超链接2 超链接3 超链接4
文本标签
< em >和< strong >
• em标签用于表示一段内容中的着重点。
• strong标签用于表示一个内容的重要性。
这两个标签可以单独使用，也可以一起使用。
警告：任何情况下不要接近僵尸。他们只是 看起来 很友好，实际上他们是为了吃你的胳膊！
通常em显示为斜体，而strong显示为粗体。
< i >和< b >
• i 标签会使文字变成斜体。
• b 标签会使文字变成粗体。
这两个标签和em和strong类似，但是这两个标签没有语义。所以根据html5标准，当我们只想设置文本特殊显示，而不需要强调内容时就可以使用i和b标签。
< small >
small标签表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。
浏览器在显示small标签时会显示一个比父元素小的字号。
©2016 XX. 保留所有权利.
< cite >
使用 cite 标签可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等。
《七龙珠》讲的是召唤神龙的故事。
< blockquote >和< q >
• blockquote 和 q 表示标记引用的文本。
• blockquote 用于长引用，q 用于短引用。
• 在两个标签中还可以使用 cite 属性来表示引用的地址。
孟子曾经说过：天将降大任于是人也...
孔子曾经说过：
学而时习之不亦说乎
< sup >和< sub >
• sup 和 sub 用于定义上标和下标。
上标主要用于表示类似于103中的3。
103
下标则用于表示类似余H2O中的2。
H2O
< ins >和< del >
• ins 表示插入的内容，显示时通常会加上下划线。
• del 表示删除的内容，显示时通常会加上删除线。
布局标签（结构化语义标签 div）
在这里最重要的就是记住这个 div 标签。虽然它没有语义，但是它能标识一个区块，将代码分成多个区域，并且正是因为它没有语义，所以 div 标签 也是十分重要的布局元素。后续将一直使用。
列表相关标签
在html中也可以创建列表，html列表一共有三种：
(1) 有序列表：使用 ol 标签来创建有序列表，使用 li 表示列表项
(2) 无序列表：使用 ul 标签来创建无序列表，使用 li 表示列表项
(3) 定义列表：使用 dl 标签来创建一个定义列表，使用 dt 来表示定义的内容，使用 dd 来对内容进行解释说明
列表之间可以互相嵌套。
例：
Document
- 结构
- 表现
- 行为
- 结构
- 表现
- 行为
- 结构
- 结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落
- 结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落
- 结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落
- aa
- aa-1
- aa-2
- aa-1
- aa-2
效果图：
音视频标签
audio 标签用来向页面中引入一个外部的音频文件的。
音视频文件引入时，默认情况下不允许用户自己控制播放停止。
如果您现在对音视频标签用法感兴趣，可参考我的文章：
属性：
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
- 如果设置了autoplay 则音乐在打开页面时会自动播放 但是目前来讲大部分浏览器都不会自动对音乐进行播放 (因为浏览器的安全性考量）
loop 音乐是否循环播放
使用video标签来向网页中引入一个视频。使用方式和audio基本上是一样的.
例：
音视频
相关用法的展示
更多其他标签和以上所有标签的使用，大家可以参照，自己尝试。
基础使用展示代码：
Document 一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
回乡偶书二首
其一
在p标签中的内容就表示一个段落
在p标签中的内容就表示一个段落
今天天气真不错！
你今天必须要完成作业！
鲁迅说：这句话我是从来没有说过的！子曰学而时习之，乐呵乐呵！今天天气真不错啊
效果图：
例：（内联框架） 内联框架 Hello
对标签的说明
在对标签的使用时，您可能注意到了，有的标签会自己占据一行，后续标签会默认到下一行中排列。也有的标签会在一行中排列。这是因为这些标签有自己的特性。
都有哪些标签：
块状标签：<div> <p> <nav> <h1~h6> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <footer> <header> <main> <section> <artical>…
行内标签：<a> <i> <span> <em> <u> <br> <strong>…
行内块状标签：<input> <img> <label> <textarea> <select> <option>…
它们的区别：
块状标签： 能独自占据一行，可以对其设置宽度、高度、对齐等属性。它可以容纳行内标签和其他块状标签。但是 p,h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
行内状标签： 不能独自占据一行，默认在一行中排列，不能对其设置宽度、高度、对齐等属性，仅仅靠自身的字体大小和图像尺寸来支撑结构。行内元素只能容纳文本或其他行内元素。（a特殊: a标签可以放div块级标签，同时a标签里不能再放a标签）
行内块标签： 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。默认宽度就是它本身内容的宽度。高度，行高、外边距以及内边距都可以控制。
例：（浏览器解析网页，会自动对内容进行修正）
Document
哈哈
我就要写在html标签的外部！
效果图：
实体（转义字符）
实体：
在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。
比如<和>，我们不能直接在页面中使用<和>号，因为浏览器会将它解析为html标签。
为了可以使用这些预留字符，我们必须在html中使用字符实体。
语法: &实体名;
例： 实体 今天 天气真不错！
a<b>c
目前通过HTML的了解，我们可以发现，现在只能显示我们想展现的事物，但是还没有办法给这些事物调节样式（比如：位置、颜色、字体大小等）。后续CSS就是做这方面工作的。
转载地址：http://gayki.baihongyu.com/