【HTML5+CSS3笔记】

图片标签：<img src="" alt=""> src是路径，alt是替换文本，title属性是鼠标悬停时显示的，以及width和height属性给出其中一个值，图片会等比例缩放

路径：绝对路径：通常从盘符开始，例：D:\
相对路径：从当前文件开始找目标文件的过程 ./当前文件夹 ../上级文件夹
音频标签：<audio src="" controls></audio> controls：显示播放的控件 autoplay：自动播放（部分浏览器不支持） loop：循环播放
视频标签：<video src="" controls></video> 属性同音频标签 autoplay自动播放（谷歌浏览器中需配合muted实现静音播放）
链接标签：<a href=""></a> href="#"为空链接 target="_self"（默认）覆盖原网页； target="_blank"新窗口打开网址（保留原网页）

4、列表标签

无序列表：

<ul>

                   <li></li>
            <li></li>
            </ul>
PS:<ul>里面只能放li标签，li标签里面能嵌套任何标签，有序列表也是一样

有序列表：

<ol>

自定义列表：dl 表示自定义列表的整体，用于包裹dt/dd标签

dt 表示自定义列表的主题
dd 表示自定义列表的针对主题的每一项内容

5、表格标签

标签	说明
table	表格整体，可用于包裹多个tr
tr	表格的行，可用于包裹td
td	表格单元格，可用于包裹内容

表格相关属性
border	边框属性
width	表格宽度
height	表格高度
caption	表格整体大标题，默认表格整体顶部居中
th	表头单元格，通常用于表格第一行，默认加粗并居中

表格的结构标签：thead 表格头部

tbody 表格主体

tfoot 表格底部

合并单元格

        跨行合并 rowspan 垂直合并
   跨列合并 colspan 水平合并这俩只是属性例：rowspan="2"
   PS：合并只能在结构内合并，比如thead内的表格不能跟tbody内的表格合并

6、表单标签form

input系列标签

属性：
text 文本框，用于输入单行文本 placeholder 占位符，提示用户输入内容，例： placeholder="请输入用户名”
password 密码框
radio 单选框 name表示分组，有相同name属性为一组，一组内只能选一个；checked默认选中
checkbox 多选框
file 文件选择，用于上传文件 multiple上传可选多个文件
submit 提交按钮 value属性
reset 重置按钮
button 普通按钮，可做标签，默认无功能，配合js食用

button标签

type属性值：submit/reset/button/menu

select下拉菜单标签
select标签：下拉菜单的整体
option标签：下拉菜单的每一项

常见属性：selected默认选中

textarea文本域标签

cols：规定了文本域内可见宽度
rows：规定文本域内可见行数

label标签

用于绑定内容与表单标签的关系（绑定内容与标签）
使用方法1、用label标签把内容（如：文本）包裹起来，在表单标签上添加id属性，在label标签的for属性中设置对应的id属性
使用方法2、直接用label标签把内容（如：文本）包裹起来，需要把label标签的for属性删除即可

7、语义化标签

没有语义的布局标签

div标签：一行只显示一个（独占一行）
span标签：一行可显示多个

有语义的布局标签

header：网页头部
nav：网页导航
footer：网页底部
aside：网页侧边栏
section：网页区块
article：网页文章

字符实体

空格： 及其他

CSS3知识点

基础认知

CSS引入方式

内嵌式：CSS写在style标签中
外嵌式：CSS写在一个单独的.css文件中，要通过link，有多个页面用这个，多使用在项目中
行内式：CSS写在标签的style属性中

一、基础选择器

1、标签选择器

以标签命名的选择器
结构：标签名{css属性名：属性值;}

2、类选择器

所有标签都有class属性

结构：.类名{css属性名：属性值;}
类名组成：数字、字母、下划线、中划线。
一个标签可以同时有多个类名，类名之间以空格隔开

3、id选择器

所有标签都有id属性
结构：#id{css属性名：属性值;}
id属性值类似于身份证号，在一个页面中是唯一的，不可重复
一个标签只能有一个id属性值
一个id选择器只能选中一个标签

4、通配符选择器

结构：*{css属性名：属性值;}
找到页面中所有的标签，设置样式。一般用于清除标签的margin和padding

二、字体和文本样式

字体大小：font-size 取值：数字+px （默认字号16）
字体粗细：font-weight 关键字：正常normal；加粗bold 纯数字（100-900）：正常400；加粗700
字体样式：font-style 正常：normal；倾斜：italic
字体系列：font-famliy 默认微软雅黑

无衬线字体：sans-serif

衬线字体：serif

等宽字体：monospace

字体font相关属性的连写：font:style weight size/line-height famliy;

文本缩进：属性名text-indent，取值数字+px/em（1em=目前的一个字大小）
文本水平对齐方式：text-align，取值 left,center,right，默认居左
文本修饰：text_decoration，取值 underline（下划线），line-through（删除线），overline（上划线），none（无装饰）
行高：line-height，取值数字+px或者直接倍数（当前字体大小的倍数）让单行文本垂直居中可以设置取值为文字父元素高度
标签水平居中 margin：0 auto ----->版心居中

三、CSS进阶

1、选择器进阶

后代选择器：空格语法：选择器1 选择器2{}
子代选择器：> 语法：选择器1>选择器2{} 只选中儿子
并集选择器：, 选择器1，选择器2{}
交集选择器选择器1选择器2{} 用于选择有多个选择器的标签

hover伪类选择器：鼠标悬停在元素上的状态（例a:hover{})

2、背景相关属性

背景颜色属性名：background-color(bgc) 默认背景是透明的
背景图片 background-image(bgi):url(路径)
背景平铺 background-repeat 取值：repeat（默认值，横竖都平铺），no-repeat（不平铺），repeat-x（沿水平方向平铺），repeat-y（沿垂直方向平铺）
背景位置 background-position(bgp) 取值：方位名词：left,center,right,top,center,bottom，或者数字+px（坐标）
背景相关属性连写 background(bg) 推荐顺序：color image repeat position

img是插入图，用来实现网页中重要的图片，背景图用来修饰

3、元素显示模式

块级元素

特点：1、独占一行
2、宽度默认是父元素的宽度，高度默认由内容展开
3、可以设置宽高

代表元素：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…

行内元素

特点：1、一行可以显示多个
2、宽度和高度默认由内容撑开
3、不可以设置宽高
代表元素：a、span 、b、u、i、s、strong、ins、em、del…

行内块元素

特点：1、一行可以显示多个
2、可以设置宽高
代表标签：input、textarea、button、select...

元素显示模式转换

display:block	转换成块级元素	使用较多
display:inline-block	转换成行内块元素	使用较多
display:inline	转换成行内元素	使用较少

html嵌套规范注意点
p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素，除了a标签

4、CSS特性

继承性（文字控制属性都可以继承） a标签的color会继承失效，h系列标签的font-size会继承失效
层叠性 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
优先级
（1)优先级公式：继承<通配符选择器<标签选择器<类<id<行内样式<!important（写在属性值后面，分号前面）
（2)权重叠加计算计算公式（每一级之间不存在进位）：（行内式的个数，id选择器个数，类选择器个数，标签选择器个数）

拓展

快捷键 alt+shift+鼠标左键可以选多行内容
PxCook软件---可以看图片尺寸和颜色代码

5、盒子模型

构成：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)
边框boeder 连写：如border：10px solid red; 快捷键：bd+tab 虚线dashed，点线dotted
只设置单个边框写法：border-方向：size solid color;
内边距padding
盒子自动内减：box-sizing: border-box; 盒子就不会被内边距、边框撑大，自动在内容中减去
外边距margin

清除默认内外边距

*{
margin:0;
padding:0;
}

6、外边距折叠现象

合并现象：垂直布局的块级布局，上下的margin会合并，最终的距离为margin的最大值
解决方法：只给一个盒子设置margin的最大值
塌陷现象：互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起往下移动
解决方法：1、给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
2、给父元素设置overflow：hidden
3、转换成行内块元素
4、设置浮动

行内标签的内外边距，通过margin或padding改变行内标签的垂直位置，无法生效。可用line-height改变

7、CSS浮动

结构伪类选择器

根据元素在HTML中的结构关系找元素，减少对于HTML中类的依赖，有利于保持代码整洁

选择器	说明
E:first-child{}	匹配父元素中第一个元素，并且是E元素
E:last-child{}	匹配父元素中最后一个元素，并且是E元素
E:nth-child(n){}	匹配父元素中第n个元素，并且是E元素
E:nth-last-child(n){}	匹配父元素中倒数第n个元素，并且是E元素

n的常见公式
2n、even	偶数
2n+1、2n-1、odd	奇数
-n+5	找到前五个
n+5	找到从第5个往后

伪元素

由CSS模拟出的标签效果

伪元素	说明
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

PS：必须设置content属性才能生效，伪元素默认是行内元素

标准流

文档流，标签默认的排列方式

8、浮动（float）

特点：1、浮动元素会脱离标准流，在标准流中不占位置
        2、浮动元素比标准流高半个级别，可以覆盖标准流中的元素
          3、浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
        4、浮动元素有特殊的显示效果：一行可以显示多个，可以设置宽高

PS：浮动的元素不能通过text-align:center或者margin:0 auto居中

拓展

css样式书写顺序： 1、浮动/display
2、盒子模型：margin border padding 宽度高度背景色
3、文字样式

9、清除浮动

1、直接设置父元素高度
2、额外标签法：在父元素内容的最后添加一个块级元素，在添加的块级元素设置clear:both，缺点是会在页面中添加额外的标签，使页面的html结构变得复杂
3、单伪元素清除法：用伪元素替代额外标签，直接给标签加类即可清除。
基本写法：

          .clearfix::after{
               content:'';
               display:block;
               clear:both;
           }
       补充写法：为了兼容性，在基本写法中多写俩属性：height:0; visibility:hidden;
4、双伪元素清除法：写法：

.clearfix::before,.clearfix::after{ /* before这个类用于解决外边距塌陷问题 */

content:'';

display:table;

}

.clearfix::after{ /* 这个类是真正清除浮动的标签 */

clear:both;

}

5、给父元素设置overflow:hidden; 特点：方便

四、CSS定位和装饰

1、初识

网页常见的布局方式：标准流、浮动、定位
定位的常见应用场景：可以解决盒子与盒子之间的层叠问题，可以让盒子始终固定在屏幕中的某个位置

2、使用定位的步骤

1、设置定位方式，属性名position。

属性值	说明
static	静态定位，就是标准流
relative	相对定位
absolute	绝对定位
fixed	固定定位

2、设置偏移值，分水平和垂直方向。

3、定位介绍

相对定位 position:relative;

1、不脱标，占有原来的位置
2、任然具有原有的显示模式特点
3、改变位置参照自己的原来的位置
PS：如果left和right都有，以left为准；如果top和bottom都有，以top为准

绝对定位 position:absolute;

1、脱标，不占原来的位置
2、具备行内式特点（在一行生存，宽高生效）
PS：绝对定位的盒子不能使用左右margin:auto居中需要居中加上该属性transform:translate(-50%,-50%);

子绝父相：父级相对定位，子级绝对定位

绝对定位找父级的方式：就近原则，如果逐层找不到有定位的父级，就以浏览器窗口为参照

固定定位 position:fixed;

                  1、脱标，不占位置
                2、改变位置参考浏览器窗口
                3、具备行内块特点

4、元素层级问题

不同布局方式元素的层级关系：标准流<浮动<定位
不同定位之间的层级关系：
• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
要更改定位元素的层级，使用z-index属性设置层级，设置的数值越大，层级越高，显示顺序越靠上。z-index默认值为0，该属性配合定位使用。

5、装饰

文字对齐问题

垂直对齐方式：属性名vertical-align

PS：浏览器把行内和行内块模式当作文字处理，默认基线对齐

属性值	说明
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

光标类型属性名：cursor

属性值	说明
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字形，提示用户可以选择文字
move	十字光标，提示用户可以移动

边框圆角属性名：border-radius 常见取值：数字+px，百分比

常见应用：1、画一个正圆：盒子必须是正方形，设置边框圆角为盒子宽高的一半 → border-radius:50%
2、胶囊按钮：盒子要求是长方形，取值为盒子高度的一半

overflow溢出部分显示效果属性名：overflow

溢出部分：指盒子内容部分超出盒子范围的部分

属性值	说明
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条