网络结构与HTML学习笔记
作为一个嵌入式应用开发者，网页前后端的东西也要了解一点，不需要有多深度，至少别人说了你知道一点，就像我们用算法一样，你不是那个行业的，不专业从事那个行业的事情。所以只要有知识的广度即可，不然做类似和云端服务器合作的项目就会很懵逼。
我们先来了解下基础知识。
一、网络学习基础-网络结构和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的主要目的：就是用来显示网页的不同效果、不同部分。
如:<b>文本</b>，这就表示将文本进行加粗。(bold),这个<b>..</b>就是标记。
HTML文件结构
<html>
<head>
<title>新浪首页</title>
</head>
<body>
网页正文。。。。。
</body>
</html>HTML文件结构的说明
(1)<html> </html> 标记的含义：
告诉浏览器，其中的内容或者代码用什么格式(图片、视频)来进行翻译。
(2)<head> </head> 标记的含义：
告诉浏览器，网页中的汉字用什么字符集(GB2312(简体中文),BIG5(繁体中文),JIS(日文),utf-8(多国语言字符集))显示。
(英文，数字是全球统一的，不会乱码，但是，如果不使用正确的字符集，会出现乱码)
(3)<body> </body> 标记的含义：
是网页主要内容的显示区域。网页中99%的内容都必须放在<body>。
只有放在<body>中，最终浏览器翻译以后，才能看见结果。
HTML标签格式
HTML标记，大致分两类 : (1)双边标记 ; (2)单边标记
(1)双边标记
是指有开始和结束标记，内容放在开始和结束标记之间。
如<b>内容</b>
语法格式：<标签 属性1 = "值 1" 属性2 = "值2">内容</标签>"属性"的理解：人的特征(属性)有身高=170cm、体重=100KG、姓名=张三
例如：
<font size="6" color="blue" face="楷体">这是6号字体文本</font>font是标签，size是属性表示字体大小,color也是属性，表示显示字体的颜色。face也是属性，表示字体类型。
<u> </u>表示加下划线
(2)单边标记
是指有开始标记，而没有结束标记，单边标记一般是没有内容。如：</br> 表示换行
单边标记一般起一个特殊的功能。
单边标记常用的有10多个标记。
语法格式：<标签 属性1 = "值 1" 属性2 = "值2">HTML标签编写规范
(1)HTML标记不区分大小写。如:<font>、<Font>、<FONT>
(2)HTML标记属性可有可无，有的标记是没有属性的，如:<html>、<head>、<title>等
(3)双边标记的内容在开始和结束标签之间，单边标记没有内容。
(4)HTML标记可以相互嵌套，但一定注意是顺序嵌套，外层套内层，一层套一层。
<meta http-equiv="content-type" content="text/html;charset=utf-8">功能：告诉浏览器，如何翻译汉字。
Content-type:内容类型
Content:详细内容类型介绍
Text/html:网页是text格式，html是文本中的小格式。
charset:字符集，主要控制汉字如何显示
utf-8:多国语言编码，什么国家的语言都可以正常显示。
好了，光说不练假把戏，咱们就来写第一个网页吧，用NotePad C++编辑器创建一个1.html的文件，然后输入以下网页代码：
<html>
<head>
<title>这是一首诗构成的网页</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<!--标题1 <h1> </h1>-->
<h1>
<font size="6" color="blue" face="黑体">春晓</font>
</h1>
<!--段落 <p> </p> -->
<p>
<u>
<font size="3" color="black" face="黑体">
春眠不觉晓，处处闻啼鸟。</u><br><u>
夜来风雨声，花落知多少。</font></u><br>
</p>
</body>
</html>运行结果：
<body>的常用属性
(1)bgColor : 网页的背景色。 如: <body bgColor="red">
(2)Background : 网页背景图片地址 。 如: <body background="images/bg.png">
网页背景图片最好跟网页放在一起，最好不要用中文来命名，背景是平铺效果。
例如：<body bgcolor = "#99cc33" background="images\20170331151615532.png">
HTML文本修饰标记：
(3)<b></b>： 加粗 bold(跟文本相关) 如: <b>文字</b> ，这个标记没有属性
(4)<i></i>: 加斜体 italic(跟文本相关) 如：<i>文字</i>
(5)<u></u>: 下划线 underline。 如: <u>文字</u>
(6)<s></s>: 删除线 strike。 如: <s>文字</s>
(7)<sup></sup>: 上标。
(8)<sub></sub>: 下标。
例如：<font size="7">a<sup>2</sup> + b<sub>2</sub> = 24 </font>
(9)<font></font>: 字体标记
size : 文本大小，取值1-7,1小，7大。
Color: 颜色值。
Face :字体。楷体、黑体、宋体。。。。接下来看一个实例，更好了说明如何使用这些标记：
<html>
<head>
<title>这是一首诗构成的网页</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<!--设置body的背景颜色为绿色 -->
<body bgcolor="green">
<!--标题1 -->
<h1>
<font size="6" color="red" face="楷体">
关雎
</font>
</h1>
<!-- 标题2-->
<h2>
<font size="5" color="red" face="楷体">
先秦：佚名
</h2>
<!--段落-->
<p>
<font size="4" color="red" face="楷体">
<b><i>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</i></b><br>
<b><u>参差荇菜，左右流之。窈窕淑女，寤寐求之。</u></b><br>
<b><s>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</s></b><br>
<b>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</b><br>
<b>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</b><br>
</font>
</p>
</body>
</html>运行结果：
那如果背景颜色换成图片该怎么做呢？先在HTML文件的当前路径下创建一个images文件夹，注意，最好还是让存放图片的文件夹和HTML在同一路径下，这样便于管理。
往这个文件夹放入一张图片格式，gif,png,jpg等等都可以。。。我下面的这张是png图片。。。
然后，修改HTML代码如下：
<html>
<head>
<title>这是一首诗构成的网页</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<!--设置body的背景图片为20170331151615532.png -->
<body background="images/20170331151615532.png">
<!--标题1 -->
<h1>
<font size="6" color="red" face="楷体">
关雎
</font>
</h1>
<!-- 标题2-->
<h2>
<font size="5" color="red" face="楷体">
先秦：佚名
</h2>
<!--段落-->
<p>
<font size="4" color="red" face="楷体">
<b><i>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</i></b><br>
<b><u>参差荇菜，左右流之。窈窕淑女，寤寐求之。</u></b><br>
<b><s>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</s></b><br>
<b>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</b><br>
<b>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</b><br>
</font>
</p>
</body>
</html>显示结果：
我们学习了boda常用的属性以及HTML的一些标记，但是图显示的效果却不是那么的好看。原因就是没有排版好，接下来使用居中来使这个页面更好看一点，顺便多加入几个别的标记。
HTML排版标记
(1)<p></p> ： 表示一个段落。一段文字放在p标记里就可以了。
常用属性：align 水平对齐方式，取值:left(左对齐)、center(居中对齐)、right(右对齐)，一个段落默认就是左对齐。
(2)换行标记<br>
(3)水平线标记(单边标记)：<hr>
size:水平线的粗细，单位一般为px
color:颜色
width:水平线的宽度
noshade:去掉水平线的阴影。(在HTML中，noshade是没有值的属性)如: <hrnoshade>
如： <hr size="1" color="blue" width="50%" noshade>
(4)<pre>预排版标记
功能：将保留所有的空白字符(空格、换行符),换句话说就是原封不动的输出。
语法：<pre></pre>:双边标记
(5)<h1>...<h6>
一级标题到六级标题
标题标记：<h1></h1> ... <h6></h6>
功能：定义各种标题
属性：
align 水平对齐,取值:left(左对齐)、center(居中对齐)、right(右对齐)，一个段落默认就是左对齐。
写个例子看看效果是怎么样的：
<html>
<head>
<title>这是一首诗构成的网页</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body bgColor="white">
<!--标题1 并设置标题1居中-->
<h1 align="center">
<font size="6" color="red" face="楷体">
关雎
</font>
</h1>
<!-- 设置水平线的粗细，颜色，宽度和去阴影-->
<hr size="5" color="green" width="1600" noshade>
<!-- 标题2 并设置标题2居中-->
<h2 align="center">
<font size="5" color="red" face="楷体">
先秦：佚名
</h2>
<!-- 设置水平线的粗细，颜色，宽度和去阴影-->
<hr size="10" color="red" width="1600" noshade>
<!--段落-->
<p align="center">
<font size="4" color="black" face="楷体">
<b><i>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</i></b>
<br>
<b><u>参差荇菜，左右流之。窈窕淑女，寤寐求之。</u></b>
<br>
<b><s>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</s></b>
<br>
<b>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</b>
<br>
<b>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</b>
<br>
</p>
</body>
</html>运行效果：
