定义：超文本标记语言

 

　　Hypetext Markup Language

 

　　特点：

 

　　不需要编译，直接由浏览器执行

 

　　是一个文本文件

 

　　必须用htm或html作文件后缀

 

　　对大小写不敏感，HTML或html都可以

 

　　<DOCTYPE html 必须放到文档第一行

 

　　<!DOCTYPE>声明不是标签

 

　　html标签的属性

 

　　语法：<标签名 属性名1=”属性值1” 属性名2=”属性值2” …>自己的文本</标签名>

 

　　CSS定义：Cascading Style Sheets 层叠样式表

 

　　CSS的作用：

 

　　结构和样式 – css分离的方式，便于后期的维护和改版

 

　　可以用多套样式，使得网页有任意样式切换的效果

 

　　使得页面载入更快，降低服务器的成本

 

　　行内样式外部样式内部样式

 

　　在标签内部添加css样式

 

　　单独把样式写到CSS文件中，在html文件中引入CSS文件

 

　　外部样式就是新建一个文档，里面全写css，然后通过link 插入到html代码中

 

　　作用：使得网页的表示层和结构层能够进行彻底分离

 

　　link 用于定义文档和外部资源的关系

 

　　rel=”stylesheet” relationship关系

 

　　type=”text/css” 定义css样式文件的类型

 

　　href=”index.css” 引用的具体文件

 

　　内部样式写在html结构内部，写于head标签中

 

　　CSS选择器就是用来找到需要添加样式的标签或位置

 

　　常用的选择器有：

 

　　标签选择器： 此为内部样式、标签选择器修改文本样式的方式

 

　　-类选择器：标签内部加入class=""，class的属性值必须为字母数字，且首位必须为字母， class的属性在style标签中前面须加符号"."

 

　　id选择器：id的写法与class一致，但id的属性是唯一的，且在style标签

 

　　CSS中标签样式的属性

 

　　背景样式 background

 

　　1.background-color： 颜色值 颜色作为背景颜色

 

　　2.background-image： 图片位置 图片作为背景图片

 

　　3.background-repeat： repeat repeat-x repeat-y no-repeat 背景图片的重复方向

 

　　4.background-attachment： 背景是否随着滚动条滚动

 

　　1.Fixed 文字滚动，背景图片不随着滚动

 

　　2.scroll 背景图片随着文字一起滚动

 

　　5.background-position： 背景图像的起始位置

 

　　1.top left ,top center ,top right ,center left,center center,center right,bottom left,bottom center,bottom right

 

　　如果只定义了一个值，那么第二个值将是center 默认值 0% 0%

 

　　2.x% y% 第一个值是水平 第二个值是垂直

 

　　左上角：0% 0% 右下角：100% 100%如果规定了一个值另一个值就是50%

 

　　background 背景样式的值是复合了属性值的组合，在实际应用中，可在background后按顺序依次写入五个属性值

 

　　Div的样式设置

 

　　div大小、背景设置

 

　　div溢出效果展示，换行、滚动条显示

 

　　div边框、轮廓设置

 

　　盒子模型

 

　　超出div宽度和高度的文字或者图片进行隐藏处理

 

　　超出div宽度和高度的文字或者图片增加滚动条

 

　　overflow属性设置：

 

　　visible: 默认溢出

 

　　hidden： 隐藏溢出内容

 

　　scoll: 加滚动条

 

　　auto： 按需显示滚动条

 

　　Div的轮廓包含轮廓和边框两部分

 

　　CSS轮廓：outline属性

 

　　作用：绘制于元素周围的一条线，位于边框外缘的外围，可起到突出元素的作用

 

　　dashed ：虚线框

 

　　dotted：点状

 

　　soild：实线

 

　　double：双线

 

　　none：无线

 

　　CSS边框：border属性

 

　　作用：设置div边框的边线宽度，颜色，虚线，实线等样式css属性

 

　　边框可设置的边：border-left border-right border-top border-bottom

 

　　dashed：虚线框

 

　　dotted：点状

 

　　soild：实线

 

　　double：双线

 

　　none：无线

 

　　盒子模型用来改变间距，一般用于块级标签

 

　　盒子属性：

 

　　width: 宽度

 

　　height： 高度

 

　　border： 边框

 

　　margin： 外边距 盒子与盒子之间的距离

 

　　padding： 内边距 内容与边框之间的距离

 

　　margin与padding的属性：

 

　　margin/padding：0px 0px 0px 0px;

 

　　内外边距的方向： 上 右 下 左

 

　　注：

 

　　1.当margin/padding: 0px 0px;时

 

　　则第一个值代表上下边距，第二个值代表左右边距；

 

　　2.当margin/padding： 0px 0px 0px;时

 

　　则第一个值代表上边距，第二个值代表左右边距，第三个值代表下边距；

 

　　3.当margin/padding：0px;时

 

　　则代表所有边距为同一个数值

 

　　box-sizing的padding部分多出的产生：

 

　　content-box:宽高之外的元素的内边距和边框，默认益处的效果

 

　　border-box:已设定的宽高减去内边距得到的内容的宽高

 

　　定位机制

 

　　（标准）文档流，脱标流（脱离标准文档流 – float、position：absolute）

 

　　文档流：

 

　　1、空白折叠现象 （行级标签写在同一行）

 

　　2、高矮不齐，底边对齐

 

　　3、自动换行，一行写满，换行写

 

　　left: 向左浮动

 

　　right： 向右浮动

 

　　none： 不浮动

 

　　崩塌效果：

 

　　当父级盒子没有设置宽高范围时，父级盒子的范围将会随着子级范围而被撑开

 

　　当父级盒子设置宽高范围时，会对子级范围进行约束

 

　　当子级元素全部设置浮动，而父级没有宽高范围时，父级崩塌

 

　　clear：both/left/right