HTML+CSS知识点总结_html第八章总结

第一章基础

HTML 基础

（1）标记：
单独标记/成对标记（不分大小写）
开始标记：
头部标记：
元信息标记:
文件标题标记:
主体标记：
（2）元素：
每一组标记及其内部文字就构成了一个元素,整个html文件就是
由一个大元素包含许多小元素构成。
（3）注释：
a.文件开始标记 中：
b.CSS中：/* 注释文字 /
c.JavaScript 中：//注释文字（单行） / 注释文字 */（多行）
注意：1.前不能加注释；2.

文本

1、标题
(1)标记：

默认大小：浏览器默认为body:100%=16px;
h1=32px
h2=24px
h3=18.72px
h4=p=16px
h5=13.28px
h6=12px
(2)对齐方式:align，值有：left,center,right;
2、文字
斜体：或
加粗： 或
下划线：
删除线： 或
上标：
下标：
3、段落
(1)标记：

包含段落

划分段落
(2)换行：
:一个换一行，多个换多行
(3)原格式：

:保留代码中的原始文字格式
4、水平线
（1）如果写成行内样式：

---

（2）如果写成css样式： hr{ width:95%; margin:0 auto; border:0; //清除默认边框 border-top:2px solid #fff; //通过边框来设置颜色 粗细 线形 渐变 等 } ## 图像与超链接 1、图像标签 (1) 相对地址：在同一目录下：直接输入图片名称； 在下一级目录中：目录名+/+文件名； 在上一级目录中：“../”+目录名/文件名； 2、图像属性 height:高度； width:宽度； border:边框； hspace:水平间距； vspace:垂直间距； align：与文字的对齐方式； title:提示文字 alt: 替代文字 3、超链接 (1)文本链接 链接文字 (2)图像链接 (3)锚(书签)链接 1.建立书签（目的地）: 会跳到这里 2.创建链接（出发地）: 点击这里

第二章列表、表格、多媒体

列表

(1)无序列表
1

• 符号类型: none:无/ disc:实心圆/ circle:空心 圆/ square:实心块
• …….

(2)有序列表

1. 符号类型: 1/a/A/i/I
4. …….

补充： 将列表符号设为自定义图片

(3)定义列表 一种两层列表,用于解释名词,名词为第一层,解释为第二层,较第一层缩 进.

名词

解释一

解释二

……

(4)列表嵌套: ## 表格 (1)无序列表

• 符号类型: none:无/ disc:实心圆/ circle:空心 圆/ square:实心块
• …….

(2)有序列表

1. 符号类型: 1/a/A/i/I
4. …….

补充： 将列表符号设为自定义图片

(3)定义列表 一种两层列表,用于解释名词,名词为第一层,解释为第二层,较第一层缩 进.

名词

解释一

解释二

……

(4)列表嵌套: ## 多媒体 你的浏览器不支持video元素 音频

第三章表单

表单

1.概述:主要用于收集信息,是用户与网站交互的重要手段.（列表与表
格则是用来向用户展示信息）
2.声明:
3.属性:
method:信息提交方式:get/post action:
信息将要提交的程序的地址
name:名字 enctype:信息提交的编码方式 target:目标窗
口的打开方式
4.表单元素:<input type=" " ……>

1. 文本框
   a. 单行文本框
   <input type=“text” name="’ size="" maxlength="" value="">
   name:名字 size:文本框的长度,单位为字符
   maxlength:可输入的最大字符数 value:定义默认值
2. 密码输入框
   <input type=“password” name="’ size="" maxlength=""
   value="">
3. 绑定标记
   :单击与该标记绑定的文字或图片就可以获取焦点，
   如：
   Male
4. 单选与复选
   a. 单选
   value:传递给处理程序的值 name:名称,一般相同
   checked :默认选中
5. 复选 <input type=“checkbox” value="" name="’
   checked>
6. 按钮
   a. 普通 <input type=“button” value=""
   name="’ οnclick=“处理程序”>
   b. 提交 <input type=“submit” value=""
   name="’ >
   c. 重置 <input type=“reset” value=""
   name="’ >
   value:按键上显示的文字 name:按
   键名称
7. 文件域 :用于上传文件
   
8. 图像域
   
   5.文本域:可以添加多行文字
   
   
   6.菜单/下拉列表: (用于星座/年月日/血型等的选择)
   语法:
   

要显示的内容 要显示的内容 属性: name:名称 size:文本框长度 multiple:多 部分上传 value:选项值 selected:默认选中（单选）

第四章CSS1

CSS语法与引入

一、使用CSS的优势
1、内容与样式分离。用HTML语言制件网页，用CSS设置风格、样式，且
单独存放在一个文件中。
2、表现统一。CSS可以套用于多个网页，使其风格统一，且一动百动，
便于维护。
3、样式更丰富，代码量更少，加快网页浏览速度，节省带宽。
二、语法结构
选择器{声明} selector { property : value }
1、selector:选择器，告诉CSS改变谁
2、property:属性，告诉CSS改什么
3、value:属性值，告诉CSS怎么改
三、引入方法
1、行内
直接在需要的标签中使用style属性设置，仅对本标签起作用。如：

2、内部 直接写在中的 4、优先级：行内>内部>外部 就近原则 ## 选择器 1、属性选择器 通过属性来选择,可以是系统属性,也可以是自定义属性. 语法:[att=val],[att1=val1],[att2=val2]…{ } 2、类和ID选择器 .calss{ } (可以用多次) #id{ }(只能用一次) 3、伪类和伪元素选择器 a:link 末访问的超链接 a:visited 已访问 过的链接 a:hover 鼠标悬浮 a :active 鼠标单击未释放 :first-letter 第一个字符 :first-line 第一 行 :before 在前端插入 :after 从尾 端插入 4、其它选择器 * 通配符（选择所有元素） E{} 标签选择 E F{} 后代（包含）选择 E>F {} 子一级包含选择 E+F {} 相邻的一个兄弟选择 E~F {} 通用的所有兄弟选择 E,F,G..{} 并集选择 E:first-child E中的第一个标记 E:focus E中获取了焦点的标记

第五章CSS2

常用属性

1.文本相关的属性

1. 字体样式
   所有:font:style weigth size family
   风格:font-style:normal(正常)//italic(斜体)//oblique(斜体)
   粗细:font-weight: normal(正常-400) // bold(粗体-700) //
   lighter(细体)
   大小:font-size:px/in/cm/%;
   类型:font-family:英文字体,中文字体;
   (2) 文本样式
   颜色:color:
   水平对齐:text-align:left/right/center/justify(两端对齐)
   垂直对齐:verticel-align:middle,top,bottom （需要选中所有的文
   字、图片等元素，再应用些属性）
   段首缩进:text-indent:em/px
   行高:line-height:px
   装饰:text-decoration:underline(下划线)/line-through(删除线)
   阴影:text-shadow : color x-offset y-offset blur-radius;
   2.背景相关的属性
   (1) 背景颜色:background-color: transparent(默认值:透明)
   (2) 背景图像:background-image: url( );
   (3) 图像平铺:background-repeat:
   repeat: 沿水平和垂直两个方向平铺; no-repeat:
   不重复,只显示一次;
   repeat-x: 只沿水平方向重复显示; repeaty: 只沿垂直方向重复显示;
   (4) 图像定位:background-position:
   值 含义
   x px y
   px
   x:水平方向(向右为正) y:垂直方向(向下为正)
   x % y
   %
   x:水平方向 y:垂直方向
   X Y x: left/center/right y: top/center/botton(默认
   为center)
   （5）背景渐变：background:linear-gradient ( position,
   color1, color2,…) 线性渐变
   radial-gradient 径向渐变
   （6）背景尺寸 background-size：（可以对宽度和高度分别设置）
   px:像素； auto：保持背景自身尺寸； %：相对于背景元素
   所在容器的宽度；
   cover：放大，以填充整个父元素；contain：保持自身比例，并缩
   放到宽或高正好适应父元素；
   （7）背景：background:color images position repeat;
   经验：如果要给一个元素添加多个背景图片：中间用逗号分开，比如：
   background:url("…/images/nav1.png") left center no-repeat,
   url("…/images/n_arrow.gif")right center no-repeat;
   3.列表相关的属性
   (1)list-style-type: none:无/ disc:实心圆/ circle:空心圆/
   square:实心块
   (2)list-style-position:
   outside(默认值,标记位于文本左外部)
   inside(标记在文本以内)
   (3)list-style-image:url;(用图像代替系统标记)
   (4)list-style:简写,按照以上顺序,一次性设置
   4.超链接相关的属性
   (1) a:link 未访问时的样式
   (2) a:visited 已访问过的样式
   (3) a:hover 鼠标悬停时的样式
   *5.鼠标相关的属性 cursor
   (1) default:默认 (2) pointer:小手
   (3) crosshair:十字形 (4) text: I 形光标
   *6.vertical-align属性
   定义行内元素的基线相对于该元素所在行的基线，在垂直方向的对齐方
   式
   值 描述
   sub 对齐文档的上标
   super 对齐文档的下标
   top 把元素的顶端与行中最高元素的顶端对齐
   text-top 把元素的顶端与父元素字体的顶端对齐
   middle 把此元素放置在父元素的中部
   bottom 把元素的顶端与行中最低的元素的顶端对
   齐
   text-bottom 把元素的底端与父元素字体的底端对齐
   1、关于input：
   1、去掉默认的边框：outline:none; border:none;
   2、设置高度：padding: 7px 0px; 也可以用height，但是输入
   框的光标会置于顶部，还要设置其他样式去优化。
   3、设置输入的文字大小：font-size;
   4、当输入框获取焦点时：input:focus{ };
   2、关于表格：
   去掉单元格间的边框重合：border­collapse:collapseq

第六章 盒子

盒子

1.组成

1. 外边距:margin:盒子的外部,与其它元素之间的距离，默认透
   明。可理解为白边。
2. 边框:border:
   的虚线边
3. 内边距:padding:内容与边框的距离。可理解为填充。
4. 盒子的总尺寸=width+padding+border+margin
   5.box-sizing:(总尺寸计算方式)
   content-box:
   .test1{ box-sizing:content-box; width:200px;
   padding:10px; border:15px solid #eee; }
   实际宽度为：200+102+152 =250 内容宽度为:200
   border-box:
   .test2{ box-sizing:border-box; width:200px;
   padding:10px; border:15px solid #eee; }
   实际宽度为：200 内容宽度为:200-102-
   152=150
   2.外边距
   属性: margin-top/margin-right/margin-bottom/margin-left;
   顺时针,即:上,右,下,左// 每少写一个,默认为与其对边相同.
   网页居中对齐：margin:0 auto；（必要条件：1、须为块元素
   2、有固定宽度）。
   3.边框
   属性: 粗细:border--width: 自定义px值/thin细/ medium默认/
   thick粗
   颜色:border--color;
   线型:border-*-style: solid实线/ dotted点线/
   dashed虚线/ double双线
   简写时，此三个属性没有固定排序
   圆角:border-radius(半径): px / % （也适用于
   图片等）
   width=height; border-radius:50% == 圆形；
   4.内边距
   属性:padding-top/padding-right/padding-bottom/padding-left;
   顺序与外边距相同
   5、盒子阴影
   语法：box-shadow:(inset/outset) x-offset y-offset
   blur-radius (阴影的大小) color;
   如果不写偏移量，就是向四周均匀发散。

块与行内

1.标准流 元素根据块/行内元素的特性按从左到右，从上到下
的默认方式自然排序。

1. 块级元素:一个矩形区域，竖直排列，左右撑满，可以设置宽高
   如://

   /

   1. /
      • /
      • /
      • 内联元素:不占独立区域，横向排列,自动折行，无法设置宽高
        如:
        2.dispay属性 可控制元素的显示或隐藏；可转换行内元素和块元
        素
        block:块级元素的默认值,前后有换行符
        inline:内联元素的默认值,前后无换行符
        inline-block:行内块元素,像行内元素一样排成一行，又可以像块元素
        一样设置宽高，会解析空格
        (所有的空格默认解析成为一个)
        none:设置元素隐藏
        3、visibility 属性：设置元素是否可见。
        visibility:hidden； ==隐藏
        visibility:visible； ==显示
        注意：使用此属性，即使不可见的元素也会占据页面上的空间。
        使用 “display：none” 的元素，不占据页面空间。

margin的合并

补充：外边距合并(折叠)
外边距合并指的是， 当两个相邻的两个盒子（可能是兄弟关系
也可能是包含关系）的垂直外边距相遇时，它们将合并成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
而左右外边距不合并。
注意：只有普通文档流中的块元素的垂直外边距才会发生外边距合
并。行内、浮动或绝对定位的元素之间的外边距不会合并。
这个问题发生的原因是：根据规范， 一个块元素如果没有上补白
(padding-top)或上边框(border-top)，那么这个盒子的上外边距会和
其内部中的第一个子元素的上边距合并。
说白点就是：父元素的第一个子元素的上边距margin-top如果碰不
到有效的border或者padding.就会不断一层一层的找自己的祖先元素的
麻烦。只要给祖先元素设置个有效的 border或者padding就可以有效解
决这个问题。
解决方案：这里提供这样几种方法：
让父级具有“包裹性”
将父级over-flow设为hidden
将父级display设为inline-block
将父级float或absolute
改变父级的结构
给父元素设置padding
给父元素设置透明border

第七章浮动

浮动

浮动：漂浮+移动
1.float属性
left:元素靠左侧浮动; right :元素靠右侧浮
动 none:默认值,不浮出;
注意：inline-block 与float 的区别：
2.清除浮动 这个规则只能影响使用清除的元素本身，不影响其
他元素。
left:在左侧不允许有浮动的元素; right:在右
侧不允许有浮动的元素;
both:左右两侧都不允许有元素浮动; none:默认值,允许两侧
浮出;
3.防止父级边框塌陷
1.一个

浮动元素的高度塌陷

在一个div块级元素没有设置宽度的情况下，默认是占据这个显示屏
幕的全部宽度，但是当这个div设置浮动之后，这个块级元素就会没有
高度，进行收缩，显示为空白。由此，可以进行分析出，浮动之后的元
素会存在收缩的效果，当一个块级元素没有设置宽度的时候，进行浮
动，就会失去高度。

解决浮动对齐

问题：
有如下4个div，要将左上和左下两个 左对齐，且和右div在上下方
向对齐，即如下效果：

如果正常的将左上和左下进行左浮动，右边进行右浮动，将出现： 

原因分析：
父div的宽度不够，所以“左下”自动下移，但“左上”右边的区域
仍是属于“左下”的，所以“右边”也自动下移。
解决方法之一：
改变他们在body中的布局顺序，将“右边”放到“左下”的上边，
即：

这样，“右边”先浮动到右侧，“左下”再浮动到左侧。

第八章定位

定位

！！CSS的三种定位机制：标准流/相对定位，浮动/绝对定
位（脱离标准流）
定位：一般父级用相对定位，子级用绝对定位
1.相对定位：position：relative
2.绝对定位：position：absolute
3.固定定位：position：fixed
默认static没有定位
偏移量：left和top 比 right和bottom的优先级要高
相对定位：
相对于自身原始位置进行定位；原点在自身左上角；不脱离文档流
特性：
1.提升层级
绝对定位：
以已定位的父级为原点进行定位；如果没有定位父级，以浏览器窗口定
位；会脱离文档流
特性：
1.提升层级
2.由内容决定宽度和高度（好像变成了行内元素）
3.绝对定位要和相对定位配合使用
4.如果绝对定位的子级有浮动，可以省略清浮动的操作
固定定位：
以窗口左上角为原点定位，定位之后相对于窗口的位置始终不变；会脱
离文档流
特性：
1.不兼容IE6
2.如果固定定位的子级有浮动，可以省略清浮动的操作
层级关系：负z-index值 < 标准流 < float（及文档同级）<
position < 正z-index值
注意：z-index、left/top/right/bottom只对使用了
position属性（static除外）的元素有效
另外：子元素的zindex不管怎么修改都是在父元素里的
zindex，父元素需要和同级别的元素比较zindex，子元素在
父元素中,再和自己同级别的zindex比较

第九章动画

动画

一、 transform （变形）
translate()：平移
translate(x,y)：正值向右向下，负值向左向上；
也可以写成%，指自身的宽度或高度；
translateX,translateY:只沿水平或竖直方向平移；
scale()：缩放 可以写一个值，也可以写两个
rotate()：旋转 单位：deg,正值表示顺时针
skew()：倾斜
二、transition （过渡）：过渡属性 所需时间 动画函数 延迟时间
经验：如果要实现效果：将鼠标悬停到图片上时旋转，但移出后又转回
来，需要将变形和过渡分别定义在悬浮和离开选择器上，而不是写在一
起：
img:hover{
transform:rotate(360deg) scale(1.2);
}
img{
transition:all 1.2s ease-in-out;
}
三、动画animation
1、创建关键帧 ：@keyframes 动画名称
2、调用关键帧：
animation的参数: 动画名称 所需时间 过渡函数 延迟时间 播放次数
（1/infinite） 播放方向 播放状态 发生的操作
css下镜像翻转两种写法：
利用css动画属性rotate旋转来实现：
/* 方法一 /
.mirrorRotateLevel { transform:
rotateY(180deg); / 水平镜像翻转 /
}
.mirrorRotateVertical { transform:
rotateX(180deg); / 垂直镜像翻转 */ }