作为一个嵌入式应用开发者，网页前后端的东西也要了解一点，不需要有多深度，至少别人说了你知道一点，就像我们用算法一样，你不是那个行业的，不专业从事那个行业的事情。所以只要有知识的广度即可，不然做类似和云端服务器合作的项目就会很懵逼。
我们先来了解下基础知识。
一、网络学习基础-网络结构和HTML
网络常见基本结构
B/S网络结构:
Browser/Server:
浏览器/服务器，这是现在最流行的网络模式。平常的上网：比如新浪网、凤凰网等。
我的电脑(客户端)http请求 新浪网(服务器端)
在浏览器软件的地址栏中，输入一个 ==================> 当Apache收到客户端的请求后， 网址，并回车。 首先，Apache先判断一下，文件拓展名。 如：http://www.sina.com.cn/index.html <================== 1)如果请求的文件是.html文件，Apache将在 http请求结果 自己的空间中查找文件，找到后直接返回给客户端。
如果请求的文件是.php文件，它需要将.php文件
各样的代码。 转给PHP程序来处理。
主要有三种代码：html代码、CSS代码、JavaScript代码。
html代码：主要控制网页的结构。(标题、正文、链接等等)
CSS代码 ：主要控制网页的外观。(颜色，文字粗细等等)
JS代码 ：主要控制网页的行为。(比如动画等等)
C/S Client/Server :
客户端/服务器端。最关键的地方，在自己的电脑上安装一个客户端软件，通过客户端访问服务器。例如： QQ
http协议： 就是上互联网所遵守的一种规则。
www.sina.com.cn 是要访问的服务器的名称。
服务器： 安装了服务器端软件(Apache,IIS)的电脑。
浏览器的功能: 将各种代码(从服务器返回)，翻译成“图文混排”的效果。
二、HTML简介
(1)HTML: Hypertext Markup Language : 超文本标注语言
(2)HTML是一种规范，是一种标准，编写网页的一种标准。
(3)超文本：就是网页上不光有文本，还有图片，音乐，视频等。
(4)标注:是一种记号，是一种标志。如：红绿灯。
(6)语言:这里的"语言"就是代码，跟所谓的"程序语言"一点关系都没有。
(7)HTML的主要目的：就是用来显示网页的不同效果、不同部分。
如:文本，这就表示将文本进行加粗。(bold),这个..就是标记。
HTML文件结构
<html> <head> <title>新浪首页</title> </head> <body> 网页正文。。。。。 </body> </html>
HTML文件结构的说明
(1) 标记的含义：
告诉浏览器，其中的内容或者代码用什么格式(图片、视频)来进行翻译。
(2) 标记的含义：
告诉浏览器，网页中的汉字用什么字符集(GB2312(简体中文),BIG5(繁体中文),JIS(日文),utf-8(多国语言字符集))显示。
(英文，数字是全球统一的，不会乱码，但是，如果不使用正确的字符集，会出现乱码)
(3) 标记的含义：
是网页主要内容的显示区域。网页中99%的内容都必须放在。
只有放在中，最终浏览器翻译以后，才能看见结果。
HTML标签格式
HTML标记，大致分两类 : (1)双边标记 ; (2)单边标记
(1)双边标记
是指有开始和结束标记，内容放在开始和结束标记之间。
如内容
语法格式：<标签 属性1 = "值 1" 属性2 = "值2">内容</标签>
"属性"的理解：人的特征(属性)有身高=170cm、体重=100KG、姓名=张三
例如：
<font size="6" color="blue" face="楷体">这是6号字体文本</font>
font是标签，size是属性表示字体大小,color也是属性，表示显示字体的颜色。face也是属性，表示字体类型。
表示加下划线
(2)单边标记
是指有开始标记，而没有结束标记，单边标记一般是没有内容。如：
表示换行
单边标记一般起一个特殊的功能。
单边标记常用的有10多个标记。
语法格式：<标签 属性1 = "值 1" 属性2 = "值2">
HTML标签编写规范
(1)HTML标记不区分大小写。如:、、
(2)HTML标记属性可有可无，有的标记是没有属性的，如:、、等</strong></span></div><div style="text-align: justify;"><span style="color: #021EAA;"><strong>(3)双边标记的内容在开始和结束标签之间，单边标记没有内容。</strong></span></div><div style="text-align: justify;"><span style="color: #021EAA;"><strong>(4)HTML标记可以相互嵌套，但一定注意是顺序嵌套，外层套内层，一层套一层。</strong></span></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cmeta%20http-equiv%3D%5C%22content-type%5C%22%20content%3D%5C%22text%2Fhtml%3Bcharset%3Dutf-8%5C%22%3E%22%2C%22id%22%3A%22QtIpl%22%7D"></div><div style="text-align: justify;">功能：告诉浏览器，如何翻译汉字。</div><div style="text-align: justify;">Content-type:内容类型</div><div style="text-align: justify;">Content:详细内容类型介绍</div><div style="text-align: justify;">Text/html:网页是text格式，html是文本中的小格式。</div><div style="text-align: justify;">charset:字符集，主要控制汉字如何显示</div><div style="text-align: justify;">utf-8:多国语言编码，什么国家的语言都可以正常显示。</div><div style="text-align: justify;"> 好了，光说不练假把戏，咱们就来写第一个网页吧，用NotePad C++编辑器创建一个1.html的文件，然后输入以下网页代码：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Chtml%3E%20%5Cn%20%20%20%20%3Chead%3E%5Cn%20%20%20%20%20%20%20%20%3Ctitle%3E%E8%BF%99%E6%98%AF%E4%B8%80%E9%A6%96%E8%AF%97%E6%9E%84%E6%88%90%E7%9A%84%E7%BD%91%E9%A1%B5%3C%2Ftitle%3E%5Cn%20%20%20%20%20%20%20%20%3Cmeta%20http-equiv%3D%5C%22content-type%5C%22%20content%3D%5C%22text%2Fhtml%3Bcharset%3Dutf-8%5C%22%3E%5Cn%20%20%20%20%3C%2Fhead%3E%5Cn%20%20%20%20%3Cbody%3E%5Cn%20%20%20%20%20%20%20%20%3C!--%E6%A0%87%E9%A2%981%20%3Ch1%3E%20%3C%2Fh1%3E--%3E%5Cn%20%20%20%20%20%20%20%20%3Ch1%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cfont%20size%3D%5C%226%5C%22%20color%3D%5C%22blue%5C%22%20face%3D%5C%22%E9%BB%91%E4%BD%93%5C%22%3E%E6%98%A5%E6%99%93%3C%2Ffont%3E%5Cn%20%20%20%20%20%20%20%20%3C%2Fh1%3E%5Cn%20%20%20%20%20%20%20%20%3C!--%E6%AE%B5%E8%90%BD%20%3Cp%3E%20%20%3C%2Fp%3E%20--%3E%5Cn%20%20%20%20%20%20%20%20%3Cp%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cu%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cfont%20size%3D%5C%223%5C%22%20color%3D%5C%22black%5C%22%20face%3D%5C%22%E9%BB%91%E4%BD%93%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%E6%98%A5%E7%9C%A0%E4%B8%8D%E8%A7%89%E6%99%93%EF%BC%8C%E5%A4%84%E5%A4%84%E9%97%BB%E5%95%BC%E9%B8%9F%E3%80%82%3C%2Fu%3E%3Cbr%3E%3Cu%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%E5%A4%9C%E6%9D%A5%E9%A3%8E%E9%9B%A8%E5%A3%B0%EF%BC%8C%E8%8A%B1%E8%90%BD%E7%9F%A5%E5%A4%9A%E5%B0%91%E3%80%82%3C%2Ffont%3E%3C%2Fu%3E%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%3C%2Fp%3E%5Cn%20%20%20%20%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%22mnycK%22%7D"></div><div style="text-align: justify;"><span>运行结果：</span></div><div style="text-align: justify;"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fyprfm4gyaegoo_e35885d8fe9b410d890556280a05ef6f.jpg%22%2C%22originWidth%22%3A944%2C%22originHeight%22%3A431%2C%22name%22%3A%22640.jpg%22%2C%22size%22%3A28606%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A944%2C%22height%22%3A431%7D"></span></div><div style="text-align: justify;"><span style="color: #3DA742;"><strong><span class="lake-fontsize-14"><body>的常用属性</span></strong></span></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22(1)bgColor%20%3A%20%E7%BD%91%E9%A1%B5%E7%9A%84%E8%83%8C%E6%99%AF%E8%89%B2%E3%80%82%20%E5%A6%82%3A%20%3Cbody%20bgColor%3D%5C%22red%5C%22%3E%5Cn(2)Background%20%3A%20%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87%E5%9C%B0%E5%9D%80%20%E3%80%82%20%E5%A6%82%3A%20%3Cbody%20%20background%3D%5C%22images%2Fbg.png%5C%22%3E%20%20%5Cn%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87%E6%9C%80%E5%A5%BD%E8%B7%9F%E7%BD%91%E9%A1%B5%E6%94%BE%E5%9C%A8%E4%B8%80%E8%B5%B7%EF%BC%8C%E6%9C%80%E5%A5%BD%E4%B8%8D%E8%A6%81%E7%94%A8%E4%B8%AD%E6%96%87%E6%9D%A5%E5%91%BD%E5%90%8D%EF%BC%8C%E8%83%8C%E6%99%AF%E6%98%AF%E5%B9%B3%E9%93%BA%E6%95%88%E6%9E%9C%E3%80%82%5Cn%E4%BE%8B%E5%A6%82%EF%BC%9A%3Cbody%20bgcolor%20%3D%20%5C%22%2399cc33%5C%22%20background%3D%5C%22images%5C%5C20170331151615532.png%5C%22%3E%5CnHTML%E6%96%87%E6%9C%AC%E4%BF%AE%E9%A5%B0%E6%A0%87%E8%AE%B0%EF%BC%9A%5Cn(3)%3Cb%3E%3C%2Fb%3E%EF%BC%9A%20%20%20%20%20%20%20%20%E5%8A%A0%E7%B2%97%20bold(%E8%B7%9F%E6%96%87%E6%9C%AC%E7%9B%B8%E5%85%B3)%20%20%20%20%20%E5%A6%82%3A%20%3Cb%3E%E6%96%87%E5%AD%97%3C%2Fb%3E%20%20%EF%BC%8C%E8%BF%99%E4%B8%AA%E6%A0%87%E8%AE%B0%E6%B2%A1%E6%9C%89%E5%B1%9E%E6%80%A7%5Cn(4)%3Ci%3E%3C%2Fi%3E%3A%20%20%20%20%20%20%20%20%20%E5%8A%A0%E6%96%9C%E4%BD%93%20italic(%E8%B7%9F%E6%96%87%E6%9C%AC%E7%9B%B8%E5%85%B3)%20%E5%A6%82%EF%BC%9A%3Ci%3E%E6%96%87%E5%AD%97%3C%2Fi%3E%5Cn(5)%3Cu%3E%3C%2Fu%3E%3A%20%20%20%20%20%20%20%20%20%E4%B8%8B%E5%88%92%E7%BA%BF%20underline%E3%80%82%20%20%20%20%20%20%20%20%E5%A6%82%3A%20%3Cu%3E%E6%96%87%E5%AD%97%3C%2Fu%3E%5Cn(6)%3Cs%3E%3C%2Fs%3E%3A%20%20%20%20%20%20%20%20%20%E5%88%A0%E9%99%A4%E7%BA%BF%20strike%E3%80%82%20%20%20%20%20%20%20%20%20%20%20%E5%A6%82%3A%20%3Cs%3E%E6%96%87%E5%AD%97%3C%2Fs%3E%5Cn(7)%3Csup%3E%3C%2Fsup%3E%3A%20%20%20%20%20%E4%B8%8A%E6%A0%87%E3%80%82%5Cn(8)%3Csub%3E%3C%2Fsub%3E%3A%20%20%20%20%20%E4%B8%8B%E6%A0%87%E3%80%82%5Cn%20%20%20%20%E4%BE%8B%E5%A6%82%EF%BC%9A%3Cfont%20size%3D%5C%227%5C%22%3Ea%3Csup%3E2%3C%2Fsup%3E%20%2B%20b%3Csub%3E2%3C%2Fsub%3E%20%3D%2024%20%3C%2Ffont%3E%5Cn(9)%3Cfont%3E%3C%2Ffont%3E%3A%20%20%20%20%20%20%20%20%E5%AD%97%E4%BD%93%E6%A0%87%E8%AE%B0%5Cn%20%20%20%20size%20%3A%20%E6%96%87%E6%9C%AC%E5%A4%A7%E5%B0%8F%EF%BC%8C%E5%8F%96%E5%80%BC1-7%2C1%E5%B0%8F%EF%BC%8C7%E5%A4%A7%E3%80%82%5Cn%20%20%20%20Color%3A%20%E9%A2%9C%E8%89%B2%E5%80%BC%E3%80%82%5Cn%20%20%20%20Face%20%3A%E5%AD%97%E4%BD%93%E3%80%82%E6%A5%B7%E4%BD%93%E3%80%81%E9%BB%91%E4%BD%93%E3%80%81%E5%AE%8B%E4%BD%93%E3%80%82%E3%80%82%E3%80%82%E3%80%82%22%2C%22id%22%3A%227Bc2f%22%7D"></div><div><span class="lake-fontsize-14" style="color: #4F4F4F;"></span><span class="lake-fontsize-14" style="color: #4F4F4F;">接下来看一个实例，更好了说明如何使用这些标记：</span></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Chtml%3E%20%5Cn%20%20%20%20%3Chead%3E%5Cn%20%20%20%20%20%20%20%20%3Ctitle%3E%E8%BF%99%E6%98%AF%E4%B8%80%E9%A6%96%E8%AF%97%E6%9E%84%E6%88%90%E7%9A%84%E7%BD%91%E9%A1%B5%3C%2Ftitle%3E%5Cn%20%20%20%20%20%20%20%20%3Cmeta%20http-equiv%3D%5C%22content-type%5C%22%20content%3D%5C%22text%2Fhtml%3Bcharset%3Dutf-8%5C%22%3E%5Cn%20%20%20%20%3C%2Fhead%3E%5Cn%20%20%20%20%3C!--%E8%AE%BE%E7%BD%AEbody%E7%9A%84%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2%E4%B8%BA%E7%BB%BF%E8%89%B2%20--%3E%5Cn%20%20%20%20%3Cbody%20bgcolor%3D%5C%22green%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3C!--%E6%A0%87%E9%A2%981%20--%3E%5Cn%20%20%20%20%20%20%20%20%3Ch1%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cfont%20size%3D%5C%226%5C%22%20color%3D%5C%22red%5C%22%20face%3D%5C%22%E6%A5%B7%E4%BD%93%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%E5%85%B3%E9%9B%8E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ffont%3E%5Cn%20%20%20%20%20%20%20%20%3C%2Fh1%3E%5Cn%20%20%20%20%20%20%20%20%3C!--%20%E6%A0%87%E9%A2%982--%3E%5Cn%20%20%20%20%20%20%20%20%3Ch2%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cfont%20size%3D%5C%225%5C%22%20color%3D%5C%22red%5C%22%20face%3D%5C%22%E6%A5%B7%E4%BD%93%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%E5%85%88%E7%A7%A6%EF%BC%9A%E4%BD%9A%E5%90%8D%5Cn%20%20%20%20%20%20%20%20%3C%2Fh2%3E%5Cn%20%20%20%20%20%20%20%20%3C!--%E6%AE%B5%E8%90%BD--%3E%5Cn%20%20%20%20%20%20%20%20%3Cp%3E%5Cn%20%20%20%20%20%20%20%20%3Cfont%20size%3D%5C%224%5C%22%20color%3D%5C%22red%5C%22%20face%3D%5C%22%E6%A5%B7%E4%BD%93%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3Cb%3E%3Ci%3E%E5%85%B3%E5%85%B3%E9%9B%8E%E9%B8%A0%EF%BC%8C%E5%9C%A8%E6%B2%B3%E4%B9%8B%E6%B4%B2%E3%80%82%E7%AA%88%E7%AA%95%E6%B7%91%E5%A5%B3%EF%BC%8C%E5%90%9B%E5%AD%90%E5%A5%BD%E9%80%91%E3%80%82%3C%2Fi%3E%3C%2Fb%3E%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%3Cb%3E%3Cu%3E%E5%8F%82%E5%B7%AE%E8%8D%87%E8%8F%9C%EF%BC%8C%E5%B7%A6%E5%8F%B3%E6%B5%81%E4%B9%8B%E3%80%82%E7%AA%88%E7%AA%95%E6%B7%91%E5%A5%B3%EF%BC%8C%E5%AF%A4%E5%AF%90%E6%B1%82%E4%B9%8B%E3%80%82%3C%2Fu%3E%3C%2Fb%3E%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%3Cb%3E%3Cs%3E%E6%B1%82%E4%B9%8B%E4%B8%8D%E5%BE%97%EF%BC%8C%E5%AF%A4%E5%AF%90%E6%80%9D%E6%9C%8D%E3%80%82%E6%82%A0%E5%93%89%E6%82%A0%E5%93%89%EF%BC%8C%E8%BE%97%E8%BD%AC%E5%8F%8D%E4%BE%A7%E3%80%82%3C%2Fs%3E%3C%2Fb%3E%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%3Cb%3E%E5%8F%82%E5%B7%AE%E8%8D%87%E8%8F%9C%EF%BC%8C%E5%B7%A6%E5%8F%B3%E9%87%87%E4%B9%8B%E3%80%82%E7%AA%88%E7%AA%95%E6%B7%91%E5%A5%B3%EF%BC%8C%E7%90%B4%E7%91%9F%E5%8F%8B%E4%B9%8B%E3%80%82%3C%2Fb%3E%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%3Cb%3E%E5%8F%82%E5%B7%AE%E8%8D%87%E8%8F%9C%EF%BC%8C%E5%B7%A6%E5%8F%B3%E8%8A%BC%E4%B9%8B%E3%80%82%E7%AA%88%E7%AA%95%E6%B7%91%E5%A5%B3%EF%BC%8C%E9%92%9F%E9%BC%93%E4%B9%90%E4%B9%8B%E3%80%82%3C%2Fb%3E%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%3C%2Ffont%3E%5Cn%20%20%20%20%20%20%20%20%3C%2Fp%3E%5Cn%20%20%20%20%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%222rZAn%22%7D"></div><div><span class="lake-fontsize-14" style="color: #4F4F4F;"></span></div><div style="text-align: justify;">运行结果：</div><div style="text-align: justify;"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fyprfm4gyaegoo_a02c4eea0b164962bdfba8150bbb2a3b.jpg%22%2C%22originWidth%22%3A762%2C%22originHeight%22%3A263%2C%22name%22%3A%22640.jpg%22%2C%22size%22%3A31101%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A762%2C%22height%22%3A263%7D"></span></div><div style="text-align: justify;"><span style="color: rgba(0, 0, 0, 0.9);">那如果背景颜色换成图片该怎么做呢？先在HTML文件的当前路径下创建一个images文件夹，注意，最好还是让存放图片的文件夹和HTML在同一路径下，这样便于管理。</span></div><div style="text-align: justify;"><span style="color: rgba(0, 0, 0, 0.9);"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fyprfm4gyaegoo_af4a9bc775ce4ace950d8dc0ffb0df28.jpg%22%2C%22originWidth%22%3A701%2C%22originHeight%22%3A242%2C%22name%22%3A%22640.jpg%22%2C%22size%22%3A20555%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A701%2C%22height%22%3A242%7D"></span></span></div><div style="text-align: justify;">往这个文件夹放入一张图片格式，gif,png,jpg等等都可以。。。我下面的这张是png图片。。。</div><div style="text-align: justify;">然后，修改HTML代码如下：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Chtml%3E%20%5Cn%20%20%20%20%3Chead%3E%5Cn%20%20%20%20%20%20%20%20%3Ctitle%3E%E8%BF%99%E6%98%AF%E4%B8%80%E9%A6%96%E8%AF%97%E6%9E%84%E6%88%90%E7%9A%84%E7%BD%91%E9%A1%B5%3C%2Ftitle%3E%5Cn%20%20%20%20%20%20%20%20%3Cmeta%20http-equiv%3D%5C%22content-type%5C%22%20content%3D%5C%22text%2Fhtml%3Bcharset%3Dutf-8%5C%22%3E%5Cn%20%20%20%20%3C%2Fhead%3E%5Cn%20%20%20%20%3C!--%E8%AE%BE%E7%BD%AEbody%E7%9A%84%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87%E4%B8%BA20170331151615532.png%20--%3E%5Cn%20%20%20%20%3Cbody%20background%3D%5C%22images%2F20170331151615532.png%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3C!--%E6%A0%87%E9%A2%981%20--%3E%5Cn%20%20%20%20%20%20%20%20%3Ch1%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cfont%20size%3D%5C%226%5C%22%20color%3D%5C%22red%5C%22%20face%3D%5C%22%E6%A5%B7%E4%BD%93%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%E5%85%B3%E9%9B%8E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ffont%3E%5Cn%20%20%20%20%20%20%20%20%3C%2Fh1%3E%5Cn%20%20%20%20%20%20%20%20%3C!--%20%E6%A0%87%E9%A2%982--%3E%5Cn%20%20%20%20%20%20%20%20%3Ch2%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cfont%20size%3D%5C%225%5C%22%20color%3D%5C%22red%5C%22%20face%3D%5C%22%E6%A5%B7%E4%BD%93%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%E5%85%88%E7%A7%A6%EF%BC%9A%E4%BD%9A%E5%90%8D%5Cn%20%20%20%20%20%20%20%20%3C%2Fh2%3E%5Cn%20%20%20%20%20%20%20%20%3C!--%E6%AE%B5%E8%90%BD--%3E%5Cn%20%20%20%20%20%20%20%20%3Cp%3E%5Cn%20%20%20%20%20%20%20%20%3Cfont%20size%3D%5C%224%5C%22%20color%3D%5C%22red%5C%22%20face%3D%5C%22%E6%A5%B7%E4%BD%93%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3Cb%3E%3Ci%3E%E5%85%B3%E5%85%B3%E9%9B%8E%E9%B8%A0%EF%BC%8C%E5%9C%A8%E6%B2%B3%E4%B9%8B%E6%B4%B2%E3%80%82%E7%AA%88%E7%AA%95%E6%B7%91%E5%A5%B3%EF%BC%8C%E5%90%9B%E5%AD%90%E5%A5%BD%E9%80%91%E3%80%82%3C%2Fi%3E%3C%2Fb%3E%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%3Cb%3E%3Cu%3E%E5%8F%82%E5%B7%AE%E8%8D%87%E8%8F%9C%EF%BC%8C%E5%B7%A6%E5%8F%B3%E6%B5%81%E4%B9%8B%E3%80%82%E7%AA%88%E7%AA%95%E6%B7%91%E5%A5%B3%EF%BC%8C%E5%AF%A4%E5%AF%90%E6%B1%82%E4%B9%8B%E3%80%82%3C%2Fu%3E%3C%2Fb%3E%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%3Cb%3E%3Cs%3E%E6%B1%82%E4%B9%8B%E4%B8%8D%E5%BE%97%EF%BC%8C%E5%AF%A4%E5%AF%90%E6%80%9D%E6%9C%8D%E3%80%82%E6%82%A0%E5%93%89%E6%82%A0%E5%93%89%EF%BC%8C%E8%BE%97%E8%BD%AC%E5%8F%8D%E4%BE%A7%E3%80%82%3C%2Fs%3E%3C%2Fb%3E%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%3Cb%3E%E5%8F%82%E5%B7%AE%E8%8D%87%E8%8F%9C%EF%BC%8C%E5%B7%A6%E5%8F%B3%E9%87%87%E4%B9%8B%E3%80%82%E7%AA%88%E7%AA%95%E6%B7%91%E5%A5%B3%EF%BC%8C%E7%90%B4%E7%91%9F%E5%8F%8B%E4%B9%8B%E3%80%82%3C%2Fb%3E%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%3Cb%3E%E5%8F%82%E5%B7%AE%E8%8D%87%E8%8F%9C%EF%BC%8C%E5%B7%A6%E5%8F%B3%E8%8A%BC%E4%B9%8B%E3%80%82%E7%AA%88%E7%AA%95%E6%B7%91%E5%A5%B3%EF%BC%8C%E9%92%9F%E9%BC%93%E4%B9%90%E4%B9%8B%E3%80%82%3C%2Fb%3E%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%3C%2Ffont%3E%5Cn%20%20%20%20%20%20%20%20%3C%2Fp%3E%5Cn%20%20%20%20%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%22bpl63%22%7D"></div><div style="text-align: justify;"><span>显示结果：</span><span style="color: rgba(0, 0, 0, 0.9);"><br /></span></div><div style="text-align: justify;"><span style="color: rgba(0, 0, 0, 0.9);"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fyprfm4gyaegoo_01ede5f751bc4baeb54b69df63c2bae6.jpg%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A585%2C%22name%22%3A%22640.jpg%22%2C%22size%22%3A117624%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A1080%2C%22height%22%3A585%7D"></span></span></div><div style="text-align: justify;"><span class="lake-fontsize-12" style="color: #4F4F4F;"> 我们学习了boda常用的属性以及HTML的一些标记，但是图显示的效果却不是那么的好看。</span><span class="lake-fontsize-12" style="color: #4F4F4F;">原因就是没有排版好，接下来使用居中来使这个页面更好看一点，顺便多加入几个别的标记。</span></div><div style="text-align: justify;"><span style="color: #FF0000;"><strong><span class="lake-fontsize-12"><span class="lake-fontsize-12">HTML排版标记</span> </span></strong></span></div><div style="text-align: justify;">(1)<div></div> ： 表示一个段落。一段文字放在p标记里就可以了。</div><div style="text-align: justify;"> 常用属性：align 水平对齐方式，取值:left(左对齐)、center(居中对齐)、right(右对齐)，一个段落默认就是左对齐。</div><div style="text-align: justify;">(2)换行标记<br></div><div style="text-align: justify;">(3)水平线标记(单边标记)：<hr></div><div style="text-align: justify;"> size:水平线的粗细，单位一般为px</div><div style="text-align: justify;"> color:颜色</div><div style="text-align: justify;"> width:水平线的宽度</div><div style="text-align: justify;"> noshade:去掉水平线的阴影。(在HTML中，noshade是没有值的属性)如: <hrnoshade></div><div style="text-align: justify;">如： </div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Chr%20size%3D%5C%221%5C%22%20color%3D%5C%22blue%5C%22%20width%3D%5C%2250%25%5C%22%20%20noshade%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22BhuXm%22%7D"></div><div style="text-align: justify;">(4)<pre>预排版标记</div><div style="text-align: justify;"> 功能：将保留所有的空白字符(空格、换行符),换句话说就是原封不动的输出。</div><div style="text-align: justify;"> 语法：<pre></pre>:双边标记</div><div style="text-align: justify;">(5)<h1>...<h6></div><div style="text-align: justify;">一级标题到六级标题</div><div style="text-align: justify;">标题标记：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ch1%3E%3C%2Fh1%3E%20...%20%3Ch6%3E%3C%2Fh6%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%222wAHG%22%7D"></div><div style="text-align: justify;">功能：定义各种标题</div><div style="text-align: justify;">属性：</div><div style="text-align: justify;">align 水平对齐,取值:left(左对齐)、center(居中对齐)、right(右对齐)，一个段落默认就是左对齐。</div><div style="text-align: justify;">写个例子看看效果是怎么样的：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Chtml%3E%20%5Cn%20%20%20%20%3Chead%3E%5Cn%20%20%20%20%20%20%20%20%3Ctitle%3E%E8%BF%99%E6%98%AF%E4%B8%80%E9%A6%96%E8%AF%97%E6%9E%84%E6%88%90%E7%9A%84%E7%BD%91%E9%A1%B5%3C%2Ftitle%3E%5Cn%20%20%20%20%20%20%20%20%3Cmeta%20http-equiv%3D%5C%22content-type%5C%22%20content%3D%5C%22text%2Fhtml%3Bcharset%3Dutf-8%5C%22%3E%5Cn%20%20%20%20%3C%2Fhead%3E%5Cn%20%20%20%20%3Cbody%20bgColor%3D%5C%22white%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3C!--%E6%A0%87%E9%A2%981%20%E5%B9%B6%E8%AE%BE%E7%BD%AE%E6%A0%87%E9%A2%981%E5%B1%85%E4%B8%AD--%3E%5Cn%20%20%20%20%20%20%20%20%3Ch1%20align%3D%5C%22center%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cfont%20size%3D%5C%226%5C%22%20color%3D%5C%22red%5C%22%20face%3D%5C%22%E6%A5%B7%E4%BD%93%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%E5%85%B3%E9%9B%8E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ffont%3E%5Cn%20%20%20%20%20%20%20%20%3C%2Fh1%3E%5Cn%20%20%20%20%20%20%20%20%3C!--%20%E8%AE%BE%E7%BD%AE%E6%B0%B4%E5%B9%B3%E7%BA%BF%E7%9A%84%E7%B2%97%E7%BB%86%EF%BC%8C%E9%A2%9C%E8%89%B2%EF%BC%8C%E5%AE%BD%E5%BA%A6%E5%92%8C%E5%8E%BB%E9%98%B4%E5%BD%B1--%3E%5Cn%20%20%20%20%20%20%20%20%3Chr%20size%3D%5C%225%5C%22%20color%3D%5C%22green%5C%22%20width%3D%5C%221600%5C%22%20noshade%3E%5Cn%20%20%20%20%20%20%20%20%3C!--%20%E6%A0%87%E9%A2%982%20%E5%B9%B6%E8%AE%BE%E7%BD%AE%E6%A0%87%E9%A2%982%E5%B1%85%E4%B8%AD--%3E%5Cn%20%20%20%20%20%20%20%20%3Ch2%20align%3D%5C%22center%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cfont%20size%3D%5C%225%5C%22%20color%3D%5C%22red%5C%22%20face%3D%5C%22%E6%A5%B7%E4%BD%93%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%E5%85%88%E7%A7%A6%EF%BC%9A%E4%BD%9A%E5%90%8D%5Cn%20%20%20%20%20%20%20%20%3C%2Fh2%3E%5Cn%20%20%20%20%20%20%20%20%3C!--%20%E8%AE%BE%E7%BD%AE%E6%B0%B4%E5%B9%B3%E7%BA%BF%E7%9A%84%E7%B2%97%E7%BB%86%EF%BC%8C%E9%A2%9C%E8%89%B2%EF%BC%8C%E5%AE%BD%E5%BA%A6%E5%92%8C%E5%8E%BB%E9%98%B4%E5%BD%B1--%3E%5Cn%20%20%20%20%20%20%20%20%3Chr%20size%3D%5C%2210%5C%22%20color%3D%5C%22red%5C%22%20width%3D%5C%221600%5C%22%20noshade%3E%5Cn%20%20%20%20%20%20%20%20%3C!--%E6%AE%B5%E8%90%BD--%3E%5Cn%20%20%20%20%20%20%20%20%3Cp%20align%3D%5C%22center%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cfont%20size%3D%5C%224%5C%22%20color%3D%5C%22black%5C%22%20face%3D%5C%22%E6%A5%B7%E4%BD%93%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cb%3E%3Ci%3E%E5%85%B3%E5%85%B3%E9%9B%8E%E9%B8%A0%EF%BC%8C%E5%9C%A8%E6%B2%B3%E4%B9%8B%E6%B4%B2%E3%80%82%E7%AA%88%E7%AA%95%E6%B7%91%E5%A5%B3%EF%BC%8C%E5%90%9B%E5%AD%90%E5%A5%BD%E9%80%91%E3%80%82%3C%2Fi%3E%3C%2Fb%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cb%3E%3Cu%3E%E5%8F%82%E5%B7%AE%E8%8D%87%E8%8F%9C%EF%BC%8C%E5%B7%A6%E5%8F%B3%E6%B5%81%E4%B9%8B%E3%80%82%E7%AA%88%E7%AA%95%E6%B7%91%E5%A5%B3%EF%BC%8C%E5%AF%A4%E5%AF%90%E6%B1%82%E4%B9%8B%E3%80%82%3C%2Fu%3E%3C%2Fb%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cb%3E%3Cs%3E%E6%B1%82%E4%B9%8B%E4%B8%8D%E5%BE%97%EF%BC%8C%E5%AF%A4%E5%AF%90%E6%80%9D%E6%9C%8D%E3%80%82%E6%82%A0%E5%93%89%E6%82%A0%E5%93%89%EF%BC%8C%E8%BE%97%E8%BD%AC%E5%8F%8D%E4%BE%A7%E3%80%82%3C%2Fs%3E%3C%2Fb%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cb%3E%E5%8F%82%E5%B7%AE%E8%8D%87%E8%8F%9C%EF%BC%8C%E5%B7%A6%E5%8F%B3%E9%87%87%E4%B9%8B%E3%80%82%E7%AA%88%E7%AA%95%E6%B7%91%E5%A5%B3%EF%BC%8C%E7%90%B4%E7%91%9F%E5%8F%8B%E4%B9%8B%E3%80%82%3C%2Fb%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cb%3E%E5%8F%82%E5%B7%AE%E8%8D%87%E8%8F%9C%EF%BC%8C%E5%B7%A6%E5%8F%B3%E8%8A%BC%E4%B9%8B%E3%80%82%E7%AA%88%E7%AA%95%E6%B7%91%E5%A5%B3%EF%BC%8C%E9%92%9F%E9%BC%93%E4%B9%90%E4%B9%8B%E3%80%82%3C%2Fb%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cbr%3E%5Cn%20%20%20%20%20%20%20%20%3C%2Fp%3E%5Cn%20%20%20%20%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%22gR1qX%22%7D"></div><div>运行效果：<span style="color: rgba(0, 0, 0, 0.9);"><br /></span></div><div style="text-align: justify;"><span style="color: rgba(0, 0, 0, 0.9);"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fyprfm4gyaegoo_a6faf91d39d84673b373f38f56654a23.png%22%2C%22originWidth%22%3A554%2C%22originHeight%22%3A134%2C%22name%22%3A%22640.png%22%2C%22size%22%3A22144%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A554%2C%22height%22%3A134%7D"></span></span></div>
