HTML 5css3课程总结,课程总结【黑马web前端】

知识总结帖子

=== html ===

01、网页的组成：

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

02、常见的浏览器：

IE、火狐(Firefox)、谷歌(Chrome)、safari和Operra，统称5大浏览器

03、浏览器内核的作用：

读取网页内容；

04、移动端常见浏览器内核：

一般都用Webkit内核

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

由于各个浏览器的内核不同，所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致

06、web标准的组成部分(重点)

结构标准(HTML)，表现标准(CSS样式)，行为标准(javascript)

07、html结构

  ：让浏览器用H5的标准来解析代码

lang="en"  ：当前网页所在国家的语言，一般en表示英文，zh-CN 表示中文

：字符集，用来对我们书写的字符进行对应国家文字的编译

08、标签的语义化的目的

语义化标签让代码结构更清晰，方便代码的阅读和维护，也可以让浏览器或者网络爬虫更好的解析从而分析其中的内容，更好得到优化网站的搜索引擎

09、图片的常见属性

alt--图像不能正常显示的时候替换文本       title--鼠标移入图片显示提示文本

src-- 图像路径    width--设置图片的宽度       height--设置图片的高度

=== css ===

1.        Css的作用：

Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；能够将结构html和样式css分离书写，简化代码，提高可阅读性。

2.        css引入方式

行内样式、内嵌样式(内联样式)、外部链接样式(外联样式)

3.        CSS选择器

01.        基础选择器：

A 标签选择器   B 类选择器  C ID选择器  D 通配符选择器(*)

02.        复合选择器

A  后代选择器( ) B 子代选择器(>) C 交集选择器() D 并集选择器(,)

E 伪类选择器(：)

4.        字体样式及综合写法

综合写法：font:  font-style  font-weight  font-size/line height  font-family

其余样式：color  text-indent  text-decoration  text-align

5.        盒子

01 显示模式

A 行内元素 (a  span  i  em  )

特点：一行显示多个，无宽高

B 块级元素(div  h  p  ul  li ..)

特点：独占一行，有宽高

C 行内块元素(img  input)

特点：一行多个，有宽高，默认宽度由内容撑开

注意: IE浏览器正常显示，谷歌浏览器不显示img的宽高；

02 显示模式之间的转换

将元素转化为块级元素：display:block;

将元素转化为行内元素：display:inline;

将元素转化为行内块元素：display:inline-block;

03单行文本垂直居中

垂直居中：设置行高line-height的取值为盒子自身的高度；

垂直偏下：line-height的取值大于盒子的高度；

垂直偏上：line-height的取值小于盒子的高度；

04背景图片

综合写法：background：背景颜色  背景图片 是否平铺(no-repeat/repeat-x/repeat-y)

x轴位置   y轴位置(center/top…)

05 css三大特性

层叠性、继承性(font-/text-/)、优越性(继承的权重为0)

06 盒子边框

综合写法：border: width  style(solid/dashed/dotted)color;

只能一次性设置一条边框，和内外边距不同；

border-collapse:collapse; : 表示相邻的边框合并在一起；

07 内外边距

Padding：无论加给行内元素还是块级元素还是什么，都可以把内容撑开

08水平居中

A 块级元素水平居中的条件：

盒子必须要有固定的宽度 , margin：上下  auto；/ margin：auto；

B 行内元素和行内块元素及文本水平居中：

text-align : center;

09外边距塌陷

解决方案：

1、为父级设置上边框(不用，因为添加了border父级的高度会增大)

2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；

3、直接给父级添加overflow:hidden;

10圆角

Border-radius: 50%

四个值：左上角、右上角、右下角、左下角。

11盒子阴影

box-shadow/ text- shadow : 水平阴影   垂直阴影   模糊距离   阴影大小   阴影颜色；

box-shadow:  2px  2px  2px  rgba(0, 0, 0, .3) ;

6布局

01网页布局的三种机制

普通流布局、浮动布局、定位布局

7 浮动布局

01原理

让元素脱离文档流，进行页面效果的布局；

01、浮动之后的元素脱离了标准流，原来位置就空了

02、盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；

03、浮动以后的元素的特点：

•        浮动之后的盒子的显示模式会更改为行内块元素的特点；

•        浮动之后的元素之间的没有缝隙的，紧贴在一起而且是顶部对齐；

•        如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

02实际工作中导航的制作方法

li嵌套a语义清晰；如果直接用a，搜索引擎会认为你是关键字堆叠从而降权网站的引擎权限，影响排名；友情链接类似的小导航可以直接用a链接完成。

03基本的布局思路：

A．首先所有的主导航都要用ul嵌套li，li嵌套a，

B．设置li左浮动float:left;,然后设置li的固定宽高(宽度有时候可以不写用padding设置左右的值撑开)；

C．将li里面的a标签转换给块元素display:block;，然后设置宽高和li一样(如果要用padding撑开的话我们直接给a设置padding值，li只需要设置高度)；

D．最后设置鼠标经过a的时候的样式

04清除浮动

/*声明清除浮动的样式*/

.clearfix:after {

content: "";

display: block;

height: 0;

visibility: hidden;

clear: both;

}

.clearfix {

*zoom: 1;  /*ie6,7 专门清除浮动的样式*/

}

05 css属性书写顺序

1、布局定位属性：display / position / float / clear / visibility / overflow(建议 display 第一个写，毕竟关系到模式)

2、自身属性：width / height / margin / padding / border / background

3、文本属性：color / font / text-decoration / text-align / line-height/ vertical-align / white- space / break-word

4、其他属性(CSS3)：content / cursor / border-radius / box-shadow / text-shadow

8 定位布局

01定位模式

静态定位：position:static;

知道就好，注意后面有时候书写JS特效可能会用到；

相对定位：position:relative;

参照物：相对于自己去进行位置移动；

相对定位特点：相对于自己为参照物进行位移，属于占位定位，盒子仍然在标准流里面；

相对定位是不会改变盒子的显示模式的；

绝对定位：position:absolute;

参照物：绝对定位的参照物默认以父级为主，如果父级没有定位，就一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照；

绝对定位特点：绝对定位是完全脱离了标准流不占位的，参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照定位；

固定定位：position:fixed

参照物：电脑屏幕(可视窗口)；

注意：固定定位完全脱离了标准流，参照物是可视窗口为准，和父级没任何关系；

02定位块元素的水平居中

相对定位：margin: auto;

绝对定位：自动转换为行内块元素，无宽。left : 50%;  margin-left : 50%*width;

03 z-index堆叠顺序

z-index是定位的z轴显示，只能用于相对定位、绝对定位和固定定位，数值越大越靠前，取值没有单位；

如果没有定位属性的话z-index不生效；

04实际工作中banner布局思路

A 新建一个父级盒子用来盛放所有的元素，设置好宽高

B 父级盒子里面，滚动的图片一般都用ul嵌套li，后期会根据图片的多少删减li的个数

C 左右切换的小箭头(< >)，一般我们建议大家使用span完成，可以利用cursor: pointer;实现手型图标，然后将两个span以大的父级盒子为父级进行子绝父相的定位；

D 小圆点的布局一般使用ol嵌套li，然后将ol子绝父相定位到盒子的合适位置，再让ol里面的li左浮动float:left;设置固定的宽高；

05漂浮在主页面侧边的小导航位置设置

将固定定位的盒子left:50%; 然后设置margin-left的值=版心的一半+定位盒子的宽度+任意值；

tip：

1、        如果导航文字不一致，高度固定，通过设置padding值左右撑开。

2、vertical-align: middle; 可以让图片按照中心基线对齐

不仅可以解决图片和文字垂直居中对齐的问题，还可以解决图片默认留白的问题

直接写进base.css里面

3、        隐藏：

不占位：display： none/ block;

占位：visibility: hidden;

不占位：overflow:hidden; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来；

4、用户界面-鼠标样式

•        鼠标样式：cursor

•        小白(默认) cursor:default;

•        小手： cursor:pointer; 提示用户可以点击下一步

•        移动： cursor:move;

•        文本： cursor:text;

•        禁止： cursor:not-allowed;

5、        用户界面-轮廓线   outline:none;

6、用户界面-防止拖拽文本域

Textarea默认有轮廓线可以outline:none;取消， resize:none;不允许拖拽

7、溢出的文字省略号显示

01  white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，

02  overflow:hidden;

03  text-overflow:ellipsis; 隐藏的内容以省略号显示；

8、精灵图

使用css精灵技术可以减少对服务器的请求次数；

可以将多个小图标合并成一张图片，成为css精灵图或者css雪碧图；

精灵图的使用核心技术

01、使用精灵图调用小图标的核心技术其实就是背景图片定位background-position: -X轴 -Y轴;

02、使用精灵图的时候一定要注意盛放精灵图的盒子的宽高必须是固定的；

9、盒子的突出显示效果

01 按照设计稿将盒子的宽高设置合理，然后让盒子左浮动float:left;，

02 由于两条边重合为2，我们只需要一条描边，我们设置margin-top:-1px; 和margin-left:-1px; 让两条边重合；

03小盒子里面的内容需要定位，我们就要给小盒子添加相对定位position: relative;(相对定位占位)，默认的层叠顺序是0也就是z-index:0;

04 鼠标经过写盒子的时候，将盒子的层叠顺序调到最上z-index:1;(配合定位使用)

10、书写三角形

第一步 设置盒子的宽高为0

第二步 设置盒子的四条边框的样式

第三步 根据三角的朝向不同该设置不同的透明色transparent