整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
多互联网新鲜资讯、工作奇淫技巧关注原创【飞鱼在浪屿】（日更新）
Unicode是涵盖世界上大多数书写系统。用在网络，大多数操作系统，Java和.NET的标准编码等。
在Unicode诞生之前，都有自己的编码，它们都不同，而且不兼容编码。而Unicode是几乎所有字符的超集，因此可以用于互换信息。
它诞生至今30多年了。
在开始下文之前，如果遇到查询unicode代码的，可以使用工具类网站https://unicode.yunser.com/unicode
Unicode 为每个字符（例如a，?， ?，不和?）定义一个代码/数字。从Unicode 6.2开始（http://www.unicode.org/versions/Unicode6.2.0/），共有109,976个代码！
它还包括组合字符，诸如??之类，这些字符可以添加到其他字符中；这样，Unicode不需要字母和重音的每种可能组合设置一个代码。另一方面，Unicode的一般不关心字体或风格上的区别：比如下面两个是同一种字符：
Unicode不只是字符集合。它还涵盖了诸如UTF-8之类的标准编码。小写/大写/标题大小写映射，整理（排序），换行符，从右到左的脚本的渲染处理等。
因为Unicode是其他编码的超集，所以它有时包括同一个字符，但是却有多个不同的代码，例如，以下三个：
python输出
为了使它们在相等性测试等中被视为相同的字符串，您应该通过Unicode规范（http://unicode.org/reports/tr15/）运行所有输入。最常见的形式是 NFC（Normalisation Form C），它尽可能使用预先组合字符，并如果存在多个，则一个严格的顺序定义这变音符号。NFD D（Normalisation Form D）则尽可能撰写1个字符。只要您保持一致，使用哪种形式都没有关系。NFD通常更快（代码点更少），建议通过NFD运行输入，并通过NFC输出。
Compatibility decomposition/兼容性分解（NFKC，compatibility decomposition + canonical composition）会把?，Ⅸ和甚至?映射为为“FFI”，“IX”和“5”分别。搜索文本时，这种NFKC规范化功能会起到帮助。
在Unicode世界中，大小写并不是那么简单：
为了确保您的代码能够处理这些情况以及任何新的情况，Unicode提供了 一种单向 “ casefold”操作，该操作允许不区分大小写的比较。
排序（或排序规则）是特定于语言环境的，并且像大小写一样充满特殊性：
仅通过二进制比较进行排序是不够的。而且，代码点通常也不是明智的。幸运的是，Unicode指定了一种 可高度自定义的归类算法，该算法涵盖了所有边缘情况，并且做了一些巧妙的工作以使其变得相当快。这是一个示例：2
该UCA可以把“10”和“2”视为数值，如排序“10”“放在“2”后面？” 。把“?”视为字符串“问号”。
大端序有UTF-8，UTF-16和UTF-32。每种编码都保证几乎每个码点和字节序列的可逆映射。
国际字符 给域名带来了一个大问题。就像 I （I 0049 拉丁文大写 I）和 l（l 006C拉丁L的小写） 看起来很相似一样，Unicode除了增加了许多不可见的控制字符，空格字符和从右到左的文本外，还将这个问题放大很多。
浏览器和注册商已针对此采取了几种措施：
RFC 3491定义了nameprep，一种在字符串可以在域名中使用之前对字符串进行大小写折叠，规范化和清理的机制。如果使用了禁止的代码点，这将删除许多不可见的字符并抛出异常。
出于传统原因，DNS不允许ASCII之外的扩展字符，因此Punycode是ASCII兼容的编码方案。例如，café.com变为xn--caf-dma.com。所有Punycode编码的域组件都可以通过其xn--前缀立即识别。
这也适用于顶级域名 ：比如中国的代码为xn-fiqs8s。
在Perl至少，一切（substr，length，index，reverse...）操作是以代码点为准。但这通常不是你想要的，因为用户认为像?这样的字符实际上是两个代码点（y + ??）。
甚至看似没问题的东西，例如printf "%-10s", $str完全中断组合字符，全角字符（例如中文/日文）或零角字符的操作。
一旦涉及到Unicode ，换行（或自动换行）就变得异常复杂。您必须考虑各种不间断和不间断的控制和空格字符，每种语言中的标点符号（例如?和?引号或数字中使用的句号或逗号）以及每个字符的宽度。
当您使用Unicode字符串作为文件或目录名称时，所有操作都不好用。使用什么编码？使用什么API？（Windows有两种，一种使用Unicode，另一种尝试使用与语言环境相关的编码）。Mac OSX文件系统则会执行规范化，例如对文件名执行NFD。如果您的平台不了解分解后的Unicode，则可能会出现问题。
汉字是中文，日文（汉字）以及韩文和越南文的共同特征。根据脚本的不同，许多脚本都有独特的视觉外观，但是Unicode出于简化和性能的原因将它们统一为一个代码点（示例）。
这引起了争议，因为角色的视觉形式可能有意义；可能不会向用户显示他们的国家/地区版本，而是其他国家/地区的版本。在某些情况下，它们看起来可能非常不同（例如，直）。正如西方名称的变化（例如“ John”或“ Jon”）一样，日语名称可能使用Unicode无法提供的特定字形变体，因此人们实际上无法以自己喜欢的方式来写自己的名字！
实际上，用户选择一种字体以其想要的样式呈现字形，无论是日语还是中文。变体选择器（参见下文）是解决该问题的另一种方法。
由于政治和遗留原因（与旧字符集兼容），Unicode不会尝试统一简体和繁体中文。
Unicode 6.0版增加了722个“表情符号”字符，这些表情符号通常在日语手机上使用，但最近在Mac OS X（Lion），Gmail，iPhone和Windows Phone 7中使用。某些字体可能选择将其呈现为全彩色表情符号。 ; 有些则可能根本不支持他们。
表情符号的Unicode表示，包含你熟悉的LOVE HOTEL 和PILE OF POO
Unicode 6.0的表情符号为许多国家（地区）标志引入了符号，但并不是全部国家。作为一种可选方案，范围U + 1F1E6 .. U + 1F1FF 定义了从A到Z的符号。如果该范围中的两个符号形成了ISO-3166-1国家代码（例如，法国的“ FR”），则渲染器可以显示为国旗！
变体选择器是代码点，可更改渲染字符之前的字符方式。有256个，它们占据的范围为U + FE00 .. U + FE0F 和U + E0100.. U + E01EF加上U + 180B，U + 180C和U + 180D。
它们对于蒙古语脚本来说是必不可少的，蒙古语脚本具有不同的字形形式，具体取决于其在单词中的位置，单词的性别，附近有哪些字母，单词是否为外国单词以及现代与传统拼字法（详细信息）。
预计这些将用于提供由Han Unification统一的字形的变体。
它们还用于更深奥的事物，例如数学运算符的衬线版本。
tml和css的关系：css是修饰HTML样是的，HTML+css是构成网页的基本页面结构及样式。
1、标签是由英文状态下< >两个尖括号构成的。
2、html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。
3、标签与标签之间是可以嵌套的，但是先后顺序必须保持一致。
4、HTML标签不区分大小写，一般采用小写。
5、head标签：head标签为双标签，通常嵌套<meta>、<title>、<style>标签使用。
6、body标签：网页中所展示的内容全部放在body标签中。
2-1语义化
明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等。
语义化标签的好处：
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。
2-2段落标签-p标签
语法：<p>段落文本</p>
注意：在网页上显示文章，就把文章放在p标签中。有多少个段落就放多少个p标签。
2-3 自定义文字样式-span标签
语法：<span>文本</span>
注意：这个标签是没有语义的，它的作用就是设置单独的样式。
2-4标题标签-hx标签
语法：<hx>标题文本</hx>（x为1-6）
注意：标题标签一共有6个，h1,h2,h3,h4,h5,h6,分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。
2-5 自定义块-div标签
语法：<div>......</div>
注意：在网页中独立的栏目板块就是一个典型的逻辑部分，每个逻辑部分可以单独放在div标签中，div标签相当于一个容器。
2-6在body中用<header>标签来定义头部；<footer>标签来定义底部；<section>标签用来定义正文的区域；<aside>标签，定义一个侧边栏区域。
文本中需要换行的地方使用<br/>标签，<br />标签作用相当于word文档中的回车； 代表一个空格；<hr/>标签代表水平分割线。 <hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
4-1无序列表-ul-li标签
语法：<ul>
<li>信息</li>
<li>信息</li>
<li>信息</li>
....................
</ul>
注意：ul-li是无序列表标签，ul-li是没有前后顺序的，在网页中默认每项li前显示的是一个小圆点。
4-2 有序列表-ol-li标签
语法：<ol>
<li>信息</li>
<li>信息</li>
<li>信息</li>
....................
</ol>
注意：ol-li标签是有序列表标签，是用前后顺序的，在网页中默认每项li前从1开始显示。
5-1 添加图片标签-img标签
语法：<img src="图片地址" alt="下载失败时的替换文本" title="提示文本">
讲解：
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
5-2添加超链接-a标签
语法：<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
5-3 a标签target属性，可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。
5-4制作表格标签-table标签
讲解：
创建表格的四个元素：table、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
4、<th>…</th>：表格的头部的一个单元格，表格表头。
5、表格中列的个数，取决于一行中数据单元格的个数。
6、border属性可以为表格添加边框，属性值为数字。
注意：
1、table标签用来定义整个表格，为双标签，必须有结束标签。
2、table标签里面可以放caption标签和tr标签。
3、caption标签用来定义表格的标题。
4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。
5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
6、td同来设置表格的列，一组td标签代表一列。
7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。
6-1表单标签-form标签
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法：<form method="传送方式" action="服务器文件">。
讲解：
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3. method ： 数据传送的方式（get/post）。
注意：
1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。
2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。
6-2 用户名和密码-文本输入框、密码输入框
语法：
<form>
<input type="text/password" name="名称" value="文本" />
</form>
1、type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)。
6-3 input标签的Placeholder属性。
当需要提示用户输入框需要输入框的内容，可以用到placeholder属性。
1、placeholder属性为输入框占位符,里面可以放提示的输入信息。
2、placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。
3、占位符内容不是输入框真正的内容。
6-4数字输入框
讲解：
1、input的type属性设置为number,则表示该输入框的类型为数字。
2、数字框只能输入数字，输入其他字符无效。
3、数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。
6-5网址输入框
1、input的type属性设置为url,则表示该输入框的类型为网址。
2、数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。
6-6邮箱输入框
1、Input的type属性设置为email,则表示该输入框的类型为邮箱。
2、数字框的值必须包含@。
3、数字框的值@之后必须有内容,否则会报错误提示。
6-7 创建文本域-textarea标签
当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法：
<textarea rows="行数" cols="列数">文本</textarea>
这两个属性可用css样式的width和height来代替：col用width、row用height来代替。
1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。
6-8 lable标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法：<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
6-9 单选框和复选框
两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。
语法：<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
注意:同一组的单选按钮，name 取值一定要一致
6-10 创建下拉菜单-select、option标签
讲解：
1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。
2、select标签里面只能放option标签，表示下拉列表的选项。
3、option标签放选项内容，不放置其他标签。
4、value：<option value=”提交值”>选项</option>
5、selected="selected"：设置selected="selected"属性，则该选项就被默认选中。
6-11 提交按钮-submit
当用户需要提交表单信息到服务器时，需要用到提交按钮。
语法：<input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
6-12 重置按钮-reset
当用户需要重置表单信息到初始时的状态时,可以设置reset按钮。
语法：<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字
7-1 认识CSS样式
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
7-2 CSS代码语法
CSS样式由选择符和声明组成，而声明又由属性和值组成。
选择符：又称选择器，指明网页中要应用样式规则的元素。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。
7-3 CSS注释代码
注释语句：就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来表明
7-4 内联式CSS样式
内联式：就是把css代码直接写在现有的HTML标签中，注意要写在元素的开始标签里，并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。
例：<p style="color:red">这里文字是红色。</p>
7-5 嵌入式CSS样式
嵌入式：就是可以把css样式代码写在<style type="text/css"></style>标签之间。嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
例：<style type="text/css">
span{
color:red;
}
</style>
7-6 外部式CSS样式
外部式：外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内。
例：<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
7-7 三种连接方式的优先级
总结：他们的优先级：内联式 > 嵌入式 > 外部式。但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。采取就近原则，离被设置元素越近优先级别越高。
8-1 什么是选择器
css3每一条css样式声明（定义）由两部分组成
选择器{
样式;
}
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
8-2标签选择器
如编辑器中的<html>、<body>、<h1>、<p>、<img>，就是HTML代码中的标签
8-3 类选择器
语法：.类选器名称{css样式代码;}
注意：
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）
8-4 ID选择器
注意：
1、使用ID选择器，必须给标签添加上id属性，为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
3、id属性的值即为当前标签的id，尽量见名思意，语义化。
8-5 类选择器和ID选择器的区别
相同点：可以应用于任何元素；
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
8-6 的选择器
即大于符号(>),用于选择指定标签元素的第一代子元素。
8-7 后代选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。
注意：子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
8-8 通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素。
8-9 伪类选择器
它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：比较常用的还是 a:hover 的组合。
8-10 分组选择器
为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）。
9-1 样式的继承
样式的继承：CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
9-2 选择器的优先级
讲解：
1、如果一个元素使用了多个选择器,则会按照选择器的优先级来给定样式。
2、选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器。
9-3 权值计算-特殊性
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
9-4 选择器的最高层级!important
!important要写在分号前面。
当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页，浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，请记住!important优先级样式是个例外，权值高于用户自己设置的样式。
10-1 字体的样式
font-family：设置字体的类型
例：body{font-family:"Microsoft Yahei";}
font-size:设置字体的大小
例：body{font-size:12px;}
font-weight:设置字体的粗细
例：p span{font-weight:bold;}
font-style：设置字体的斜体样式
1、font-style可以设置字体样式，并且有种3设置方式。
2、正常字体为normal,也是font-style的默认值。
3、italic为设置字体为斜体，用于字体本身就有倾斜的样式。
4、oblique为设置倾斜的字体，强制将字体倾斜。
10-2 字体颜色
1、color属性可以设置字体颜色。
2、color的值有3种设置方式：
英文命令颜色
例：p{color:red;}
RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
例：p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。
例：p{color:rgb(20%,33%,25%);}
十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
例：p{color:#00ffff;}
第十一章 CSS3文本样式
11-1添加文本修饰-text-decoration
1、text-decoration可以设置添加到文本的修饰。
2、text-decoration默认值为none, 定义标准的文本。
3、text-decoration的值为underline为定义文本下的一条线。
4、text-decoration的值为overline为定义文本上的一条线。
5、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。
11-2 文本添加首行缩进-text-indent
为文本添加首行缩进，2em的意思就是文字的2倍大小。
例：p{text-indent:2em;}
11-3 为文字设置行间间距-line-height
例：p{line-height:1.5em;}
11-4 增加或减少字符间的空白
letter-spacing:设置文字间隔或者字母间隔
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
word-spacing:设置单词与单词之间的距离。
11-5 设置对齐方式-text-align
例：h1{
text-align:center;
}
<h1>了不起的盖茨比</h1>
11-6 长度值
长度单位：常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
12-1 元素分类
分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>....
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>.....
常用的内联块状元素有：
<img>、<input>.....
12-2 块级元素
display:block就是将元素显示为块级元素
例：将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
12-3 内联元素
display:inline将元素设置为内联元素
例： div{
display:inline;
}
......
<div>我要变成内联元素</div>
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
12-4 内联块状元素
display:inline-block就是将元素设置为内联块状元素
内联块状元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
12-5盒模型的宽度和高度
css内定义的宽（width）和高（height），指的是填充以里的内容范围。
一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
12-6盒模型的背景
网页中的标签不论是行内元素还是块状元素都可以给它设置一个背景色。
为标签设置背景颜色可以使background-color:颜色值来实现。
12-7盒模型的边框
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
讲解:
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用像素（px）。
12-8 设置圆角边框-border-radius
例：div{border-radius: 20px 10px 15px 30px;}
12-9 设置内边距-padding
元素内容与边框之间是可以设置距离的，称之为“内边距（填充）”。
填充也可分为上、右、下、左(顺时针)
12-10 设置外边距-margin
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。
总结一下：padding和margin的区别，padding在边框里，margin在边框外。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
13-1 流动模型
流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
特征：
1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
2、在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）。
13-2 浮动模型
浮动模型：任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动
例：实现两个 div 元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
例：同时设置两个元素右浮动也可以实现一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:right;
}
例：设置两个元素一左一右可以实现一行显示
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
13-3 层模型
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
13-4 绝对定位：position:absolute
需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
例：实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
13-5 相对定位：position:relative
需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
例：实现相对于以前位置向下移动50px，向右移动100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
13-6 固定定位：position:fixed
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同。
13-7 Relative与Absolute组合使用
1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
14-1弹性盒模型之flex属性
技术点的解释：
1、设置display: flex属性可以把块级元素在一排显示。
2、flex需要添加在父元素上，改变子元素的排列顺序。
3、默认为从左往右依次排列,且和父元素左边没有间隙。
14-2使用justify-content属性设置横轴排列方式
本属性定义了项目在主轴上的对齐方式
属性值分别为：justify-content: flex-start（交叉轴的起点对齐） | flex-end（右对齐） | center（居中） | space-between（两端对齐，项目之间的间隔都相等。） | space-around（每个项目两侧的间隔相等）;
14-3 使用align-items属性设置纵轴排列方式
本属性定义了项目在交叉轴上的对齐方式
属性值分别为：
align-items: flex-start（左对齐） | flex-end（交叉轴的终点对齐） | center（交叉轴的中点对齐） | baseline（项目的第一行文字的基线对齐） | stretch（如果项目未设置高度或设为auto，将占满整个容器的高度。）;
14-4 给子元素设置flex占比
1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后,其宽度属性会失效。
15-1 水平居中行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
例：<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
css代码
<style>
.txtCenter{
text-align:center;
}
</style>
15-2 水平居中设置-定宽块状元素
定宽块状元素：块状元素的宽度width为固定值。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。注意：元素的“上下 margin” 是可以随意设置的。
例：
html代码：
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
css代码：
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
15-3 已知宽高实现盒子水平垂直居中
已知宽高实现盒子水平垂直居中。通常使用定位完成
例：
要实现子元素相对于父元素垂直水平居中,我们只需要输入以下代码：
讲解：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。效果：
3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。
15-4 宽高不定实现盒子水平垂直居中
未知宽高实现盒子水平垂直居中，通常使用定位以及translate完成
例： <div class="box">
<div class="box1">
慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网
</div>
</div>
添加样式：
.box {
border: 1px solid #00ee00;
height: 300px;
position: relative;
}
.box1 {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
效果图：
技术点的解释：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%。
3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。
<canvas> 是 HTML5 新增的元素，可用于通过使用 JavaScript 中的脚本来绘制图形。例如，它可以用于绘制图形、制作照片、创建动画，甚至可以进行实时视频处理或渲染。
重点：
canvas的应用场景非常广泛，目前canvas主要应用于一下几个领域。
（1）数据可视化
canvas在数据可视化中应用最多的就是绘制图表了，因为canvas是Javascript动态绘制的，用它不仅仅是绘制一张静态的图表，还可以够根据数据的变化动态修改图表，实时展现数据的变化
现在有很多的数据可视化的js库，比如百度开源的Echart大部分是基于canvas开发的
（2）H5小游戏
Canvas以其独特的特性，强大的绘图功能，可以轻松胜任游戏开发。我们在手机上、网页上随处可见的网页游戏，很大一部分是基于canvas开发的。
一个简单的html canvas开发的五子棋游戏
另外现在火热的各种小游戏，如微信小游戏、头条小游戏绝大部分也是基于canvas开发的。针对此也出现了很多H5游戏引擎，比如Egret（白鹭）引擎、Layabox引擎。用它们来开发小游戏会更加的方便。更多的H5小游戏，可以在微信或里搜索查看。
（3）特效背景
我们经常看到有一些网站的背景有一些会动的线条，还会跟随鼠标移动，看起非常的酷炫，而且还很好玩。比如我们来欣赏几个：
这是一个登陆界面的酷炫背景，随着鼠标的移动会有点线图形跟随出现，结合背景图，有一种星空的深邃感。
在很多网站见过这个背景效果，鼠标移动时，就有一些会动的点线图案随着鼠标移动，有时浏览网站会情不自禁地玩上一会儿。
还有白色的
这是一个漂亮的心形效果，应该知道能用它来做什么。
比较酷炫的鼠标滑过效果，在欢迎页面或活动页面比较实用
以上只是随便分享了几个，网上可以搜到更多、更酷炫的效果，感兴趣的可以自行搜索。
（5）其它应用
canvas的应用还有很多，它可以是一个大型的应用，也可以是一个非常小的效果，比如一些小动画、活动页面的一个小游戏等，这里无法一一列举。总之 canvas的应用场景是非常广泛的。还有更多的场景需要我们去探索。
看了这么多的效果，接下来我们就要来学习如何使用canvas了，不多它多复杂，我们都通过一个简单的例子来入门。请看如下代码：
说明：
canvas是一个html元素，一般我们就在html中使用它，步骤如下
（1）在html中建一个<canvas>元素；
（2）在js代码中获取canvas对象；
（3）用获取到的canvas对象再获取绘画上下文对象context;
（4）真正绘画时，我们使用的是context进行绘制
本文主要了解canvas及其应用场景，最后简单的介绍了canvas的使用，后续将有更多的canvas系列教程，敬请关注。
*请认真填写需求信息，我们会在24小时内与您取得联系。
