第六章 HTML+CSS 知识点汇总

1.标题标签列表常用标签

h1,h2,h3,h4,h5,h6 :标题标签
p:段落标签
br:换行标签
hr:水平线
center:居中

ul: 无序列表
ol:有序列表
li:列表项(与ul和ol结合使用)

dl: 自定义列表
dt:自定义列表标题标签
dd:自定义列表数据标签

pre:预格式标签

b: 加粗标签
u:下划线标签
i:斜体标签
sub:下标
sup:上标

2.字体 font 图片 img 超链接 div span table

font :字体 face:类型 color:颜色 size:大小

img :标签 src属性:指明图片文件路径
title:放到图片上时的提示内容
alt:图片显示不出时的替代文字
width:宽度 height:高度

a:超链接 href:可以链接到目标页面
target:指定在哪个浏览器窗口打开目标页面
name:通过name属性可以创建锚点位置

div: 块状容器标签，最纯净的标签，没有附加格式
span :行内容器标签，最纯净的标签，没有附加格式

table :表格根标签
bg:背景颜色
background:背景图片
align:对齐方式
(对于表格是表格位置，对于tr,td则是内容位置)
border:边框
tr:行标签
th:列标题标签
td:数据单元格标签
colspan:跨列
rowspan:跨行
caption:表格标题标签

3.form import select textarea

form :表单元素根标签
action:表单数据提交的目标地址
method:表单数据提交的方式
name:元素名称
input type:text 文本框
password 密码框
size:框的长度
maxlength:内容长度
value:默认值
radio:单选按钮
name:必须一致才能互斥
value:必须设置value值
checked:默认选中某一项
checkbox:复选框
name:必须一致，表示一组选项
value:必须设置
checked:默认选中某一项
submit:提交按钮,点击自动提交数据
image:图片按钮,点击自动提交数据
reset:重置表单
button:普通按钮(结合javascript使用)
file:文件上传元素
select : 下拉选择框
option:下拉选项,文本写到option标签中间
value:值属性
selected:默认选中某一项
textarea: 多行文本框
cols:宽度 rows:高度

4.文本样式背景样式盒子模型显示模型

css 样式

文本样式
color:文本颜色
font-size:字体大小
font-family:字体类型
font-weight:字体粗细
font-style:字体风格 italic
text-align:字体水平对齐(left,right,center)

text-indent:缩进

line-height:行高结合height可以设置自动的垂直居中

letter-spacing:设置字符间距

vertical-align:垂直对齐方式针对表格设值:tmiddle,bottom
针对文本:要设置像素值，
正值向上，负值向下
white-space:nowrap 文本不换行，在一行显示

背景样式:
background-color:背景颜色
background-image:背景图片 url(图片路径)
background-repeat:背景平铺方式 repeat,no-repeat,repeat-x,repeat-y
background-position:
背景位置水平垂直 (英文关键字,数值,百分比可以取正负值)
background-size:背景大小

background:复合属性，批量设置颜色，图片，平铺方式，位置

盒子模型:
width:宽度 height:高度
padding:内填充 top,right,bottom,left 上右下左
值:4个值上右下左
3个值上左右下
2个值上下左右
1个值上右下左
border:边框
border-width:宽度
border-style:样式 solid(实线框) dashed(虚线框) dotted(点线框)
border-color:颜色
border:复合属性批量设置宽度，样式，颜色
border-方向: 复合属性设置某一个方向边框的宽度，样式，颜色
border-left:1px solid red
左边框为1个像素红色实线框
margin: 外边局 top,right,bottom,left 上右下左
值:4个值上右下左
3个值上左右下
2个值上下左右
1个值上右下左
盒子与盒子的关系：水平盒子:间距是两个盒子的外边距之和
垂直盒子:间距是两个盒子外边距大的那个值
重叠盒子:外边距设置为负值可以实现重叠

显示模型:
所有的html元素可以分为三类:
块状:独占一行，可以设置宽和高
h标签,p,table,form,div
行内:挤在一行，不可以设置宽和高
a,b,u,i,span
行内块状:挤在一行，可以设置宽和高
img,input

5.display 伪类样式

display :可以修改元素的显示模式
inline:让元素以行内方式显示
block:让元素以块状方式显示
inline-block:让元素既有行内又有块状的特点
(位于一行之内，可以设置宽和高)
none:隐藏元素

超链接 a
伪类样式 : :link(默认效果) :visited(点击后的效果)
:hover(鼠标悬浮到元素上触发，其他元素也适用)
:active(点击时触发)
text-decoration:用于去除下划线
overline:上划线
underline:下划线
none:没有线
line-through:删除线

6.浮动定位模型包含块

浮动:
1.元素浮动后高度为0，但是保留宽度,没有脱离文档基本层
2.浮动都是靠边定位
3.浮动可以使元素水平排列(块状元素失去独占一行的特征)
浮动可以让行内元素具有块状特征可以设置宽和高，但是不能独占一行
4.对于嵌套结构而言，如果父容器没有高度，所有的子容器都浮动，
则会导致父容器塌陷。
a.空div+clear 清除塌陷，空div加在浮动子元素后面
b.父容器设置overflow:auto 内容自适应，解决塌陷
c.使用父容器的:after，动态添加内容，设置清除属性clear:both

float:left 向左浮动
right:向右浮动
none:不浮动
clear:清除浮动
left,right,both(两边)

定位模型:
position:
absolute:绝对定位
1.脱离文档流,不在页面中占据位置
2.可以通过left,right,top,bottom属性设置偏移
这个偏移默认是相对于浏览器左上角进行偏移
relative:相对定位
1.没有脱离文档流，在页面中占据位置
2.可以通过left,right,top,bottom属性设置偏移
这个偏移是相对于元素原有的页面位置进行偏移
fixed: 固定定位
1.脱离文档流，在页面中不占据位置
2.可以通过left,right,top,bottom属性设置偏移
这个偏移相对于浏览器窗口，固定不变
(当滚动页面时，位置依旧不变)
static:静态定位
1.默认的标准文档流的布局模式
2.不能通过方位属性设置偏移
3.只能通过盒模型调整位置
包含块:当元素设置定位属性为相对定位，固定定位，绝对定位后，
这个元素就被称为包含块。
当包含块中的子元素设置为绝对定位时，设置的偏移会以
包含块为基准进行偏移。如果子元素的宽和高为百分比则
也是以包含块为标准进行设置。