1、网页的组成部分：

文字、图片和超链接等元素构成，还包括了音频、视频等等；

2、为什么要遵循web标准？

由于各个浏览器的内核不同，导致同一代码在经过不同浏览器渲染后生成的页面也有所不同。所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致。

3、div和span

div标签布局标签，主要是布局用的大标签，也是主要标签;

特点：没有语义，独占一行；

span标签布局标签，不用来做主要布局，一般放特殊效果的文字或者小图标；

特点：没有语义，一行共存多个；

4、锚点定位

作用：实现页面内部的跳转

分两步实现锚点链接：

第一步：找目标，想要跳转到的位置添加id=”id名称”

第二步：设置锚点按钮，超链接a，

<a href=”#id名称”>跳转到目标</a>

5、表格的结构：

一对table标签嵌套tr标签，tr标签嵌套td标签；

table表示表格整体，tr表示行，td表示单元格（列）；

6、单元格的合并

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”

注意：合并单元格的顺序：先上后下，先左后右；

7、自定义列表的使用技巧：

（1）  一个dl嵌套一个dt和多个dd，相当于中国的一词多义；

（2）一个dl里面可以嵌套多对的dt和dd（实际工作中很少用）；

（3）  一些图文混排效果可以用dl嵌套dt和dd实现，dt放图片，dd放文字；

8、Input表单属性（死记硬背）

（1）value 默认值，没有交互效果 --- value=”请输入您的名字”/ （2）placeholder占位符 html5的新属性，有交互效果 --- placeholder="请输入您的名字"

（3）name   给当前的数据起一个名字，让后台工作人员调用

9、使用外部链接的步骤

（1）新建：.css格式的css文件，直接书写选择器以及css样式；

（2）引用：利用link标签引入新建的css文件，要配合link的三个属性  rel关系，type文件类型 （可以省略），href文件路径；

10、外部链接的好处

一个css样式可以共享，如果两个页面的标签样式完全一致，就可以使用同一个css文件，然后分别连接过来即可；

11、通配符选择器*

一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；

*{

        margin:0;

        padding:0;

}

以上代码表示清空所有的默认边距；

13、字体的综合写法 font复合属性

注意:使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的，否则不生效；

14、链接的伪类四种状态：

    a:link        未访问的链接（访问前）

    a:visited    已访问的链接（访问后）

    a:hover      鼠标移动到连接上（鼠标经过）

    a:active      选定的链接（按下鼠标的时候）

15、标签显示模式（重点要理解）

实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：

     块级元素：自己独占一行；--- 代表标签 div、h标签

     行内元素：一行可以共存多个；--- 代表标签  span 、a

     行内块元素：一行可以共存多个； --- 代表标签 img 、 input

16、精确取值

background-position:X坐标（水平方向）  Y坐标（垂直方向）取值如果去精确单位，第一个是X轴的值，第二个是Y轴的值，如果只写了一个值就表示X轴，Y轴默认为center；

17、盒子撑大问题

问题：如果盒子有固定的宽高的情况下，添加了边框和内边距，盒子的实际大小会变大；

解决方案：添加了多少就减去多少； ----- 加多少减多

注意：如果在样式内设置了padding，但是又设置了padding-left/padding-right或者padding-top/padding-bottom，那么就根据css的层叠性去更改相应的值；

18、属性border-radius

属性值

一个值：四个角都是一样的弧度   border-radius:30px;

两个值： border-radius: 左上右下  右上左下;  ---- border-radius: 20px 60px;

三个值： border-radius: 左上  右上左下 右下;  ---- border-radius: 20px 60px 100px;

四个值： border-radius: 左上右上 右下 左下;  ---- border-radius: 20px 60px 80px  10px;

正圆：如果想要得到正圆我们必须是一个正方形，然后设置border-radius: 50%;

胶囊形状：首先是一个长方形，然后设置border-radius的取值为长方形高度一半；

19、左右布局

方法1：一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子右浮动float:right;

方法2：:一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子左浮动float:left;，如果两个盒子之间有距离就直接给第一个盒子添加margin-left即可；

1、网页的组成部分：

文字、图片和超链接等元素构成，还包括了音频、视频等等；

2、为什么要遵循web标准？

由于各个浏览器的内核不同，导致同一代码在经过不同浏览器渲染后生成的页面也有所不同。所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致。

3、div和span

div标签布局标签，主要是布局用的大标签，也是主要标签;

特点：没有语义，独占一行；

span标签布局标签，不用来做主要布局，一般放特殊效果的文字或者小图标；

特点：没有语义，一行共存多个；

4、锚点定位

作用：实现页面内部的跳转

分两步实现锚点链接：

第一步：找目标，想要跳转到的位置添加id=”id名称”

第二步：设置锚点按钮，超链接a，

<a href=”#id名称”>跳转到目标</a>

5、表格的结构：

一对table标签嵌套tr标签，tr标签嵌套td标签；

table表示表格整体，tr表示行，td表示单元格（列）；

6、单元格的合并

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”

注意：合并单元格的顺序：先上后下，先左后右；

7、自定义列表的使用技巧：

（1）  一个dl嵌套一个dt和多个dd，相当于中国的一词多义；

（2）一个dl里面可以嵌套多对的dt和dd（实际工作中很少用）；

（3）  一些图文混排效果可以用dl嵌套dt和dd实现，dt放图片，dd放文字；

8、Input表单属性（死记硬背）

（1）value 默认值，没有交互效果 --- value=”请输入您的名字”/ （2）placeholder占位符 html5的新属性，有交互效果 --- placeholder="请输入您的名字"

（3）name   给当前的数据起一个名字，让后台工作人员调用

9、使用外部链接的步骤

（1）新建：.css格式的css文件，直接书写选择器以及css样式；

（2）引用：利用link标签引入新建的css文件，要配合link的三个属性  rel关系，type文件类型 （可以省略），href文件路径；

10、外部链接的好处

一个css样式可以共享，如果两个页面的标签样式完全一致，就可以使用同一个css文件，然后分别连接过来即可；

11、通配符选择器*

一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；

*{

        margin:0;

        padding:0;

}

以上代码表示清空所有的默认边距；

13、字体的综合写法 font复合属性

注意:使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的，否则不生效；

14、链接的伪类四种状态：

    a:link        未访问的链接（访问前）

    a:visited    已访问的链接（访问后）

    a:hover      鼠标移动到连接上（鼠标经过）

    a:active      选定的链接（按下鼠标的时候）

15、标签显示模式（重点要理解）

实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：

     块级元素：自己独占一行；--- 代表标签 div、h标签

     行内元素：一行可以共存多个；--- 代表标签  span 、a

     行内块元素：一行可以共存多个； --- 代表标签 img 、 input

16、精确取值

background-position:X坐标（水平方向）  Y坐标（垂直方向）取值如果去精确单位，第一个是X轴的值，第二个是Y轴的值，如果只写了一个值就表示X轴，Y轴默认为center；

17、盒子撑大问题

问题：如果盒子有固定的宽高的情况下，添加了边框和内边距，盒子的实际大小会变大；

解决方案：添加了多少就减去多少； ----- 加多少减多

注意：如果在样式内设置了padding，但是又设置了padding-left/padding-right或者padding-top/padding-bottom，那么就根据css的层叠性去更改相应的值；

18、属性border-radius

属性值

一个值：四个角都是一样的弧度   border-radius:30px;

两个值： border-radius: 左上右下  右上左下;  ---- border-radius: 20px 60px;

三个值： border-radius: 左上  右上左下 右下;  ---- border-radius: 20px 60px 100px;

四个值： border-radius: 左上右上 右下 左下;  ---- border-radius: 20px 60px 80px  10px;

正圆：如果想要得到正圆我们必须是一个正方形，然后设置border-radius: 50%;

胶囊形状：首先是一个长方形，然后设置border-radius的取值为长方形高度一半；

19、左右布局

方法1：一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子右浮动float:right;

方法2：:一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子左浮动float:left;，如果两个盒子之间有距离就直接给第一个盒子添加margin-left即可；