Web前端知识点总结

HTML知识点

一、功能

用来制作静态网页，网页中的全部内容都是通过Html语言展现出来。

使用场合：开发静态网页。

二、思想

一切功能都由标签实现，标签具有四要素。

三、常用标签

四、案例

1、诗篇

2、学生课程表

3、注册页

CSS知识点

一、功能

1、css格式化页面中的各组成元素

2、css决定元素在页面的具体位置

二、思想

属性是css最小构成单元，每个属性都有特定功能，多个属性构成样式，由样式修饰html语言的标签。

三、样式修饰标签

1、style属性

html标签添加style属性，属性值是多个css属性的组合。

2、标签选择器

样式名与标签关键字相同，根据名称相同自动关联。

3、ID选择器

1>样式名以#开始；2>标签添加id属性与样式关联。

4、类选择器

1>样式名以. 开始；2>标签添加class属性与样式关联。

5、属性选择器

标签名[属性名=属性值]，根据标签关键字和属性值自动关联。

6、包含选择器

1>子样式名中间加>或空格分隔 (>直接包含)；

2>看最后一个子样式是什么选择器就如何关联标签。

7、多个样式名同一样式体

1>样式名中间加逗号分隔；

2>根据样式类型决定如何与标签关联。

8、多条件同时成立选择器

1>多个子样式名紧挨着

2>一个标签必须同时具备这多个条件才可以被该样式修饰

9、各选择器使用场合

1)如果想根据标签名用一个样式修饰所有同名标签时，用标签选择器；

2)如果一个样式只想修饰唯一的一个标签时，用id选择器；

3)如果一个样式想修饰多个任意标签时，用类选择器；

4)尽量使用包含选择器。

四、元素定位

1、盒子模型

通过设置标签的内外边距从而改变元素的位置，没有脱离标准文档流。

相关属性：

marging-top：外上边距

margin-right：外右边距

margin-bottom：外下边距

margin-left：外左边距

margin：同时设置上右下左四个外边距 (顺时针)

padding-top：内上边距

padding-right：内右边距

padding- bottom：内下边距

padding-left：内左边距

padding：同时设置上右下左四个内边距

border-top：设置上边线的粗细,颜色,线型

border-right：设置右边线的粗细,颜色,线型

border-bottom：设置下边线的粗细,颜色,线型

border- left：设置左边线的粗细,颜色,线型

border：同时设置四个边线的粗细,颜色,线型

border-width：只设置4个边线的宽度(粗细)

border-color：//只设置4个边框的边框颜色

border-style：只设置4个边框的边框线型

2、绝对定位

有2套坐标系统：

1)如果该元素所有父标签都没有设置相对定位，那么浏览器左上角为坐标原点，根据left与top值确定元素的位置。

2)第一个设置相对定位的父标签左上角为坐标原点，根据left与top值确定元素的位置。

脱离标准文档流

相关属性：

position: absolute;

//表示绝对地址定位,通过绝对定位,元素可以放置到页面上的任何位置。

left:100px

//绝对定位时表示与浏览器左边框距离。

top:100px

//绝对定位时表示与浏览器上边框距离。

z-index:

//在绝对定位层改变各元素层叠顺序属性值是整数越大越在上方。

3、相对定位

元素原位置(标准文档流的位置)左上角为坐标原点，根据left与top值改变位置。没有脱离标准文档流。

相关属性

position: relative;

//表示相对地址定位,通过相对定位；元素可以放置到页面上的任何位置。

left:100px

//相对定位时表示与元素原始位置的左边距离。

top:100px

//相对定位时表示与元素原始位置的上边距离。

4、浮动定位

把元素靠在在父容器左边或右边. 兄弟元素都设置浮动后成为一行，脱离标准文档流。

相关属性

float : 设置浮动定位

clear: 清除浮动定位的影响

5、各定位方式使用场合

1)靠左或靠右，兄弟标签一列变一行，文字环绕——浮动定位。

2)移动位移比较小，用盒子模型。

3)移动位移比较大，父容器相对定位，子元素绝对定位。

五、添加独立css文件3步骤

1、创建子文件夹和css文件

2、在html页面用标签导入独立css文件

3、定义样式并修饰各html标签

六、静态网页开发思想

1、对网页元素通用属性进行设置。

2、分析页面的组成，整个网页布局划分为多个矩形区域，在矩形区域内部又可以划分子矩形区域，每个矩形区域都用