html、 css基础笔记

web标准

web标准主要包括：结构（html）、表现（css）、和行为（行为）

DOCTYPE和lang以及字符集的作用

文档类型声明，作用就是告诉浏览器使用哪种HTMl版本来显示网页 文档类型声明标签

lang 语言种类

charset字符集可以存储各种各样的文字

常用的GB2312简体中文 BIG5繁体中文 GBK包含了简体中文和繁体中文

utf-8万国码 最常用 如果没有写就会出现乱码

div和span标签

和 的区别

div 是一个人独占一行

可以放好多个在一行上

图像标签注意点

注意：属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开

属性采取键值对的格式，即key =”value“的格式，属性=”属性值“

alt 和title属性的区别

alt 是替换文本

title 是提示文本

目录文件夹和根目录

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件。图片等

根目录：打开目录文件夹的第一层就是根目录

相对路径(上)

在同一个目录下就直接引用就行了

下一级路径images/img.jpg

上一级…/

绝对路径

绝对路径：电脑中的哪个地方，从盘符开始，唯一的

链接标签(上)

标签 链接

target:打开窗口的方式

_self在自身页面打开

_blank：新窗口

2.外部链接：像http

3.内部链接:网站中有的页面

空链接 设置属性 href="#"

4.下载链接 ：地址链接的是文件.exe或者是zip

锚点链接

锚点链接：点我们的点击链接，可以快速定位到页面中的某个位置

表格标签基本使用

表格不是用来布局页面的，而是用来展示数据的

表头单元格标签

表头单元格标签 th 文字会加粗居中显示

表格相关属性(了解)

内容和单元格左上边的距离cell padding

表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头和表格主体两大部分

表单使用场景以及分类

为什么使用表单：为了收集用户信息

表单的组成：表单域、表单控件、提示信息

表单域

表单域就是一个包含表单元素的区域

标签用于定义表单域，以实现用户信息的收集和传递 会把它范围内的表单元素提交给服务器

有三个属性

action

method

name

input之name和value属性

name 是表单元素的名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1

比如男name=‘sex’ 女name=‘sex’

value 就是要提供的数据

-input之checked和maxlength属性

单选按钮和复选框可以设置checked属性当打开时可以默认勾中 主要争对单选和多选按钮

maxlength 最多可以输入的字符

input之type属性提交和重置按钮

type=submit 提交按钮

type=reset 重置

type=“file” 文件上传

-label标签

标签为input元素自定义标注（标签）

用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点转到或者对应的表单元素上，用来增加用户体验

for 属性对应与相关元素里面的id属性

select下拉表单

至少一个

 <option></option>

option 中有也有selected 默认被选中

textarea文本域标签

当用户输入内容较多的情况下

cols 一行可以写的字符数

rows显示多少行

CSS选择器的作用

有很多

基础选择器 缺点把某一大类选出来

和复合选择器

标签选择器

标签名作为选择器

类选择器

可以单独选择其中一个或几个

格式.类名{属性1：属性值}

类选择器特殊使用-多类名

就是一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签，简单理解就是一个标签有多个名字

格式class=“类名1 类名2”

意义？就是把一些公共的样式放到另外一个类选择器中 以后如果要改的话，就去公共样式中去改就好了

id选择器

样式通过#定义的结构id调用，只能调用一次，别人切勿使用

通配符选择器

*选中所有元素

font-weight字体粗细

font-weight:700或者bold都是加粗的意思

font-weight:400 或者normal 就是正常

font-style字体样式

两个属性:

normal:正常

italic:斜体

font复合属性写法

font:font-style font-weight font-size/lineheight font-family；

要严格按顺序来

必须要有font-size 和font-family其他可以省略

可以这样写font:20px “黑体”；

文本颜色color

可以直接写颜色，或者#十六进制 还有rgb(200,0,0)

文本对齐text-align

本质是让盒子里的文字居中对齐

文本装饰text-decoration

给文字加些东西装饰文本

21-文本缩进text-indent

text-indent:30px;首行缩进，也就是第一行缩进多少距离

2em意思是格式文字缩进两个文字的意思（相对单位）

如果当前元素没有定义字体大小则默认相对于父元素字体大小

22-行间距line-height

可以控制行与行之间的距离

行高变大会改变上下间距的大小

上下间距是一样高度的

24-内部样式表

1.行内

2.内部：写到style中

3.外部：写道css文件中

25-行内样式表

直接在元素内部添加style属性

style="";

权重高

26-外部样式表

就是css内容过多

.css文件

一般建个网站css都会比较多

link 元素 有个rel 属性是样式表的意思stylesheet

02-emmet语法生成html标签

生成标签直接输入标签名加！号

父子关系>

兄弟关系+

如果带有类名或者id直接元素后面.或者#

如果生成的div类名是有顺序的，可以用自增符号$

如果想要在生成的标签内部写内容可以用{}表示

div{好的}就会生成这样

好的

默认都是div

03-emmet语法快速生成css样式

就是属性的首字母比如text-align=center 可以写成tac

04-快速格式化代码

shift+Alt+F也可以自己设置

05-复合选择器简介

复合选择器建立在基础选择器之上的

06-后代选择器

又称包含选择器

ol li{

}

如果li里还有a标签

ol li a{

}

ol也可以换成.类名或者#id名

07-子元素选择器

必须选择亲儿子元素没有孙子

格式 元素1>元素2

09-并集选择器

可以选择多组标签

div,p{

}

,相当于和 对它们进行集体声明

10-链接伪类选择器(上)

用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第1个，第n个元素

一般用：

1.链接伪类

a:link 没有访问过的链接 其实也可以直接改

a:visited 已访问过的链接 比如点击了这个链接

a:hover 鼠标经过

a:active 鼠标按下去没有松开

注意事项：

按照link visited hover active 顺序来

2.：focus 伪类选择器

用于选择获得焦点的表单元素

14-什么是元素显示模式

就是元素以什么方式进行显示

一般分为块元素和行内元素

15-块元素

如果块级元素没有设置宽度那么和父元素一样宽

高度没说

文字类的元素不能使用块级元素

标签主要用于存放文字，因此

里面不能存放块级元素，特别是不能存放

还有

16-行内元素

相邻的行内元素可以在一行上放多个

高和宽设置是无效的

默认的宽度就是它本身内容的宽度

行内元素只能容纳文本或者其他行内元素

注意

a

链接里面不能再放链接

特殊情况下里面可以放块级元素，但是给转换一下块级模式最安全

17-行内块元素

在行内元素有几个特殊标签它们同时具有块元素和行元素的特点

有些资料称它们为行内块元素

一行上可以有多个行内块元素

默认宽度就是它内容的宽度

高度和宽度内边距可以设置

19-显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解一个模式的元素需要另外一种模式

转换为块模式

eg：

a{

dispaly:block; 使用最多的

}

转换为行内模式

display:inline;

转换为行内块

display:inline-block 也用的多

22-单行文字垂直居中的原理

单行文字垂直居中

解决方案：让文字的行高=盒子的高度，就可以让文字在当前盒子内垂直居中 也就是line-height=height

原理：行高上空隙和下空隙把文字挤到中间来了

24-背景图片

background-img:url()

常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常方便控制位置（精灵图特使一种运用场景）

25-背景平铺

背景平铺：backgroud-repeat

既有北京图片又有背景颜色的话背景图片会压住背景颜色

26-背景位置-方位名词

background-position:方位名词

如果插入图片就没那么容易控制位置

backgroud-position:center top

水平向上显示

也可以省略一个省略的那个默认居中显示

29-背景位置-精确单位

backgroud-posiition:x y;意思是x轴y轴

如果只指定一个值，那该数值一定是x坐标，另一个默认垂直居中

30-背景位置-混合单位

如果是混合单位那第一个值一定是x坐标，第二个值一定是y坐标

31-背景固定

backgroud-attachment:scroll || fixed

背景图像默认scroll

32-背景属性复合写法

背景没有顺序要求和font不一样

33-背景颜色半透明

backgroud:rgba(z,x,c,v);

最后一个参数决定透明度

01-CSS三大特性之层叠性

层叠性，如果样式存在冲突情况，采取就近原则

继承性，子标签会继承父标签的某些样式（跟文字字体颜色相关），如文本颜色和字号 比如说body{}

body行高1.5这样写法的优势就是里面子元素可以根据自己文字的大小自动调整行高

优先级，

选择器相同，则执行层叠性

选择器不同，

a有一个默认的样式所有即使body写了也不会继承

06-CSS权重的叠加

ul li{ } 权重比li{ } 高

因为 li权重是0001 而ul li 的权重是0001+0001=0002所以权重较高

权重虽然会叠加，但永远不会有进位

09-看透网页布局本质

网页布局的核心就是用css摆盒子

10-盒子模型组成部分

border边距

content内容

padding内边距

外边距margin

11-盒子模型边框border

border-width

border-style

border-color

12-边框的复合写法

复合写法和之前的background一样，也没有顺序

13-表格细线边框

table td 都得定义样式

border-collapse:collapse（合并的意思） 合并相邻的边框

14-边框会影响盒子实际大小

边框与内容之间的距离

16-padding复合属性

padding:

1个值代表上下左右都有几个像素的内边距

2个值，代表上下边距是5像素，左右内边距是10像素

3个值（上左右（相等）下）代表上5左右10像素，下边距20像素

4个值按顺时针数下来（上右下左）

17-padding会影响盒子实际大小

会撑大 如果保证盒子和原方案一样，则需要让width/height减去多出来的内边距大小即可

21-padding不会撑开盒子的情况

如果盒子本身没有指定width/height 属性，则此时padding不会撑开盒子大小

如果仍然给width加了100%也会增大

22-盒子模型外边距margin

盒子与盒子之间的距离

简写方式和padding一致

23-外边距典型应用-块级盒子水平…

条件

1.盒子必须设置宽度

2.盒子左右的边距都设置为auto

margin:o auto 上下为0 左右居中

只适用于block

24-行内元素和行内块元素水平居中

行内元素或者行内块就把它当成文字，把它的父元素设置文字居中对齐就行了 text-align:center

图片也是一样

26-外边距合并-嵌套块元素塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：

1.为父元素定义一个上边框

2.可以为父元素定义上内边距

3.可以为父元素添加overflow:hidden

27-清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清除下网页元素的内外边距

*{

}

把所有元素全部清除内外边距

注意：

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内元素就可以了

解惑

布局为啥用不同盒子，为啥不只用div

标签都是有语义的，合理的地方用合理的标签。比如产品标题就用h ，大量文字段落就用p

2.为啥用那么多类名

类名就是给每个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易，后期也维护方便

3.到底用margin还是padding

大部分情况下两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现

4.自己做没有思路

布局有很多种实现方式，要多用辅助工具，比如屏幕画笔，ps等等

03-综合案例-快报模块列表制作

list-style:none 去除前面的圆点

04-圆角边框原理 P165 - 02:37

border-radius:半径长度（可以是px也可以百分比）

radius半径

如果是正方形设置为高度或长度的一半就好了

如果是矩形设置为高度的一半就好

该属性是一个简写 也可以有四个数值顺序为左上开始顺时针

两个值就是对角线

06-盒子阴影 P167 - 00:22

box-shadow：

h-shadow水平阴影的位置

v-shadow垂直阴影

blur模糊距离 也就是虚实

spread 阴影的尺寸 影子的大小

color 阴影颜色

inset outset(默认的)

盒子阴影不占用空间

07-文字阴影 P168 - 00:23

text-shadow和盒子阴影类似前面四个属性一样

09-传统网页布局三种方式 P170 - 01:22

标准流：就是标签按照规定好的默认方式排列

比如块级元素和行内元素按默认方式摆放

浮动流

定位流

10-为什么需要浮动 P171 - 03:37

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

12-浮动特性-脱标 P173 - 00:36

下一个浮动要浮动的位置一定是相对于上一个也设置的浮动

1.浮动元素会脱离标准流（不再保留原先的位置）

2.浮动元素会一行内显示并且元素顶部对齐

3.浮动元素会具有行内块元素的特性

浮动就像浮起来了一样就是字面意思

13-浮动特性-浮动元素一行显示 P174 - 01:09

是跟着盒子的上面进行对齐 都在一行进行显示，除非一行装不了就会换行

---

15-浮动元素经常搭配标准流的父元素 P176 - 02:31

浮动元素以父元素为基准对齐 用父元素进行约束

20-常见的网页布局 P181 - 01:04

浮动布局注意点：

1.浮动和标准流的父元素排列上下位置，之后内部元素采取浮动排列左右位置

2.一个元素浮动了，理论上其余兄弟也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

22-为什么清除浮动 P183 - 08:14

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

由于浮动元素不再占有原文档流的位置，所以它会对后面的元素排版产生影响

23-清除浮动本质以及额外标签法 P184 - 00:05**

本质：清除浮动元素造成的影响

策略：闭合浮动

方法：

1.额外标签法也称为隔墙法：就是在浮动元素末尾添加一个空标签，例如< div style=“clear:both”>或者其他标签如（
等）

注意：新添加的标签元素必须时块级元素，不能是行内元素

24-清除浮动之父元素overflow P185 - 00:04

给父元素添加overflow属性，

overflow：hidden

25-清除浮动之after伪元素 P186 - 00:07

after方式是额外标签法的升级版，也是给父元素添加

26-清除浮动之双伪元素 P187 - 00:08

02-为什么需要定位 P222 - 01:04

定位可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

03-定位组成 P223 - 01:00

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

有四种

04-相对定位 P224 - 04:05

1.相对于自己原来的位置的定位

2.原来的位置还保留着（不脱标）它最典型的应用是给绝对定位当爹的

05-绝对定位-没有父级或者父级无… P225 - 00:24

绝对定位是相对于祖先元素来说的的

父元素的上下左右

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

2.如果父级没有定位但爷爷级有定位，那现在是以爷爷级定位

3.谁离我近并且带有定位的，就相对于谁定位

07-绝对定位脱标的不占有原来位置 P227 - 00:21

08-子绝父相的由来 P228 - 01:30

子绝父相

10-固定定位 P230 - 00:10

position:fixed

以浏览器的可视窗口为基准点，就是我们能看到的窗口大小

跟父元素没有关系

也是不占有位置，脱离标准流

11-固定定位小技巧-固定到版心右侧 P231 - 01:11

12-粘性定位（了解） P232 - 00:10

position:sticky;top:10px

特点：

1.以浏览器为可视窗口

2.占有位置

3.必须有方位top left 等

14-定位的叠放顺序 P234 - 01:08

通过z-index来控制盒子的前后次序默认auto

数值越大越靠上

如果属性值相同，按照书写顺序，后来居上

数值后面不能加单位；

只有定位的盒子才有z-index属性

15-绝对定位的盒子居中算法 P235 - 01:38

加了绝对定位的盒子不能通过margin ：auto来居中

16-定位的特殊特性 P236 - 00:14

17-浮动元素不会压住标准流的文… P237 - 00:55

浮动定位：会压住段落，但是不会压住文字，会把文字挤出来（浮动最初就是为了文字环绕效果）

绝对定位或固定定位，会压住下面的文字

25-display显示隐藏元素 P245 - 00:22

1.diaplay 属性用于设置一个元素怎么显示2

none 隐藏元素的意思 位置不保留了

block 显示元素的意思

26-visibility显示隐藏元素 P246 - 00:30

visible 隐藏元素后继续保留原来位置

27-overflow溢出显示隐藏 P247 - 00:01

对溢出的元素进行显示或隐藏

默认的是visible显示的

scroll溢出的部分显示滚动条

auto 有溢出需要就显示滚动条，没有就不显示

10-CSS三角的做法 P259 - 00:02

12-用户界面-鼠标样式 P261 - 00:34

鼠标样式：cursor :default白色箭头

pointer小手样式

13-用户界面-取消表单轮廓和防止… P262 - 00:16

outline:none表单的轮廓线取消

textaere{

resize:none

}

textaere里尽量放到一行里不要有空格

14-vertical-align实现行内块和文字垂直居中对齐 P263 - 03:29

只对行内或行内块元素有效

设置图片和文字进行对齐

15-图片底侧空白缝隙解决方案 P264 - 00:42

图片底侧有一个空白缝隙

图片默认和文字的基线对齐

解决方案：

1.设置vertical-align:不是baseline就行了

2.设置为块级元素

16-单行文字溢出省略号显示 P265 - 00:16

17-多行文字溢出省略号显示 P266 - 00:06

22-布局技巧-CSS三角巧妙运用（上） P271 - 00:46

24-CSS初始化 P273 - 00:36

对浏览器重新设置样式

03-HTML5-新增视频标签 P276 - 00:10

视频 </vedio/>

只支持三种视频格式

MP4兼容性最强

04-HTML5新增音频标签 P277 - 00:29

Mp3兼容性最强

07-CSS3新增属性选择器（上） P280 - 01:37

input[value] 选出有value属性的框，选择这个元素

input[type=text]也可以选出

08-CSS3新增属性选择器（下） P281 - 02:08

div[class^=icon]选出首先是div然后属性值以icon开头的

$是结尾的意思

*是只要属性里有这个就行

注意：类、属性、伪类权重都是10

09-CSS3新增结构伪类选择器-选择第n个元素 P282 - 00:19

选择ul里的第一个孩子

ul li:first-child 就是ul里面第一个孩子选出

ul il:last-child最后一个孩子

nth-child(n) 选择某个父元素的一个或多个特点的子元素

比如第二个孩子

ul li:nth-child(2)

nth-child()里的参数也可以为even或odd

也可以是公式 nth-child(n)就是选择了所有孩子

注意这个参数只能是n

也可以是2n或者其他n 什么2n+1 n-5等等

11-nth-child和nth-of-type的区别 P285 - 01:26

nth-child所有的盒子都会排一个序号 这个会先看，然后再看前面的标签

nth-of-type：则会先看标签然后再看序号

12-CSS3新增伪元素选择器使用场景和由来 P286 - 00:16

这个伪元素选择器可以帮助我们利用css创建新标签元素，而不需要html标签，从而简化html结构

13-CSS3新增伪元素选择器基本使用 P287 - 00:13

这个盒子是行内元素，并不能设置宽高

element::before{

	content：内容

}或者after

before就是放在父元素内容的最前面（左边）

after是放在父元素内容的最后面（右边）

权重是1加上前面的元素就是2

17-CSS3盒子模型border-box P291 - 00:13

border-sizeing:border-box

这样就不用管padding会撑大盒子了

18-CSS3图片模糊处理 P292 - 01:56

filter:blur(5px);

括号里的数值越大就越模糊

19-计算盒子宽度calc函数 P293 - 00:07

width：calc(100%-30px)

20-CSS3新增属性过渡（上） P294 - 00:52

给变化的标签添加谁做过渡给谁加

后面两个值可以省略

21-CSS3新增属性过渡（下） P295 - 00:37

不能分开写width和height属性

得用逗号进行分割来写

不过如果想要多个属性都发生变化用属性用all就行了