tips：惨，一个月没写网页了，感觉好像忘了好多东西，写个博客压压惊！
先写一个最简单的网页，桌面右键新建一个文本文档，修改后缀名为html，妥了，网页建好了！是不是很简单！想要显示内容？简单，在新建的文本文档中输入Hello Word，再改后缀名，是不是有了！是不是很神奇！
当然，这不能算是一个网页，网页是一个包含HTML标签的纯文本文件，那么这个文件它包含HTML标签吗，如果你用网页编辑器打开它你就会发现它没有任何的HTML标签。
一、HTML常用标签
1、构建一个网页的基础标签
所有的网页都会包含三对标签：<html></html><head></head><body></body>
<html>
<head>
</head>
<body>
</body>
</html>其中<html></html>是网页的跟标签，网页所有的内容都必须写在这一对标签之中，除了文档声明<!DOCTYPE html>，如果把html当作是一个整体，那么它就分成两个部分，head以及body。
head，译为头部，在这个部分写的是网页的标题，网页引用的脚本、样式、元信息等内容。
body，译为身体，在这个部分写的是网页的主体内容，所有呈现在你眼前的静态内容都写在这个部分。
2、<head>标签中的内容（常用）
<head>是双标签，定义在文档的头部，描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
- <meta>是单标签，该标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
- <title>是双标签，该标签定义文档的标题，浏览器将其显示在网页的标题栏或状态栏上。
- <link>是单标签，该标签定义文档与外部资源的关系，通常用来引用外部样式表。
- <style>是双标签，该标签用于为 HTML 文档定义样式信息。
- <script>是双标签，该标签用于定义客户端脚本，比如 JavaScript，可以通过 src 属性指向外部脚本文件。
3、<body>标签中的内容（常用）
<body>是双标签，定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
注：body中的标签有很多，回头再写一篇博客专门介绍
二、CSS常用样式
1、css是啥
css，Cascading Style Sheets缩写，即层叠样式表，定义如何显示HTML元素，通俗的讲就是让页面变的花里胡哨。
2、css的引用
css有三种引用方式，分别是内联样式，内部样式，外部样式。
内联样式写在网页的元素标签的style属性中：
<div style="width:100px;height:100px"></div>内部样式写在头部的<style>标签中：
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #000000;
}
</style>外部样式通过<link>标签引入
<link rel="stylesheet" type="text/css" href="style.css">3、选择器
css中的一个标准的样式由两个部分组成，选择器和声明，选择器用于选择你想要改变样式的HTML元素，声明即是属性和值，例如
div{width:100px;height:100px;background:red}div即是选择器，大括号中的即使样式。
css中常用的选择器是id选择器，类选择器，元素选择器。
id选择器是通过元素的id匹配到该元素，id是所有选择器中最特殊的一个选择器，因为它必须是唯一的，语法：
#box{width:100px;height:100px}类选择器是通过元素的class匹配到该元素，不同的元素可以有相同的class名，一个元素可以有多个class名，语法：
.box{width:100px;height:100px}元素选择器是通过元素的标签名匹配到该元素，语法：
div{width:100px;height:100px}除此之外还有后代选择器、子代选择器、兄弟选择器，后代选择器用空格连接，匹配该元素下的每一个后代；子代选择器用 > 连接，匹配该元素的直系子代；兄弟选择器用 + 连接，匹配该元素的的同级元素。
div p{color:red}
div>p{color:red}
div+p{color:red}4、css常用样式（写几个意思意思）
width: 100px;/*宽度*/
height: 100px;/*高度*/
color: red;/*字体颜色*/
background-color: red;/*背景颜色*/
background-image: url("xx.jpg");/*背景图片*/
font-size: 12px;/*字体大小*/
font-family: "宋体";/*字体样式*/
border: 1px solid red;/*边框*/
margin: 10px;/*外边距*/
padding: 10px;/*内边距*/三、CSS布局
css可以分为两种布局，一种是div+css布局，另一种是table布局，前者是主流，后者逐渐被淘汰，但某些特定情况下仍旧会使用。
1、盒子模型
盒子模型是css的核心，即整个网页是一个大盒子，大盒子中放数个中盒子，中盒子再放数个小盒子，层层嵌套成整个网页。css的盒子模型有两种：IE盒子模型和标准的W3C盒子模型。盒模型由内容（content）、内边距（padding）、边框（border）以及外边距（margin）组成。两种盒模型的区别是IE的内容部分把内边距和边框计算了进去。
2、浮动
float，浮动，即让盒子浮起来，专业术语就是脱离文档流。浮动之后的元素不在文档中占据位置，它会向上浮动，直到撞到父级边框或者撞到别的浮动元素，后面的元素会自动向前填补位置。float有两个值，left和right，一者向左浮动，一者向右浮动。
浮动之后的元素不占文档位置，会导致其父级的高度塌陷，有三种解决办法：给父级设置固定高度、让父级浮动、清除浮动。（清除浮动回头再写一篇博客）
3、定位
position，定位，通过设置该属性的值改变元素的定位原点，默认为static，即没有定位，元素出现在正常的文档流中。除默认值外还有：
absolute，绝对定位，生成绝对定位的元素，相对于值不为static的第一个父元素进行定位。设置该值，元素会向上查找设置过position的父元素，定位原点即是该父元素的原点。
relative，相对定位，生成相对定位的元素，相对于其正常位置进行定位。
fixed，窗口定位，生成绝对定位的元素，相对于浏览器窗口的定位。
inherit，继承父元素的position定位。
想要移动谁就给谁一个绝对定位，再给父级一个相对定位。
元素设置定位后，再设置left、right、top、bottom、四个属性值改变其位置
4、弹性盒模型布局（css3新增）
设置display：flex，该布局方式是css3新增的，回头再写一篇博客。
四、知识点
1、文档声明<!DOCTYPE html>
文档声明位于文档的第一行，作用时告知浏览器用什么文档标准解析这个文档。如果文档声明不存在，浏览器会以兼容模式呈现该文档的内容，兼容模式下，文档以宽松的向后兼容的方式显示，模拟老式浏览器的行为，防止站点无法工作。
2、div和span
div是块元素，独占一行，可以设置宽高；span是行内元素，宽高由内容撑开。两者运用得好会让布局变得很轻松。
3、外边距重叠
在css中，相邻的两个盒子同时设置了外边距（margin），那么两者的外边距将会合并成单独的外边距，称为折叠外边距。相邻的两个外边距都是正数时，折叠结果是两者中的较大值；相邻的两个外边距都是负数时，折叠结果时两者绝对值较大的值；相邻的两个外边距一正一负时，折叠结果时两者相加的值。
4、css多列等高
大盒子中有数个高度不同的小盒子
给大盒子设置overflow: hidden;小盒子设置margin-bottom: -999px;padding-bottom: 999px;
大盒子的高度会被撑到最高的那个小盒子的高度，其余比它低的小盒子会自动补偿这部分的高度差。
5、css优先级
优先级就近原则，同等权重下样式定义最近者为准，载入样式以最后载入的为准。
内联样式 > 内部样式 > 外部样式 ！important > id > class > tag ！important的优先级比所有的都高
6、css的权重
标签的权重为1，class的权重为10，id的权重为100，权重的计算方式时相加，例如#box .class div{} 结果为100+10+1
to be continued~~~