HTML5一阶段学习总结
目录
基本了解
html语法
浏览器内核(渲染机制)
网页头部
HTML常用标签
文章类标签
图片标签
超链接标签
列表标签
表单标签
表格(拓展)
grid网格
表格标签 (扩展)
CSS
样式表
选择器
css属性
基本属性
字体属性
列表属性
边框属性
浮动属性(重要)
背景属性(重点)
元素
盒模型
弹性盒
换行
BFC(Block Formatting Context):
常用元素
溢出属性
伪元素
伪类选择器
@import引入方式
定位属性 position
背景属性
渐进增强
优雅降级
h5新增标签
过渡(常用)
透明
位移
动画属性
媒体查询
基本了解
站点作用：整合资源
站点命名：
1.不以数字开头
2.不要包含特殊字符
3.不要出现中文
4.英文字母小写
认识html(了解)
网页的组成：结构(html/xhtml) + 表现(css) + 行为(js)
web标准：
w3c:万维网联盟--html/xhtml css
ECMAscript:欧洲厂商联盟--js
html: 超文本标记语言
xhtml: 可扩展性的标记语言，语法上面较html更严格
xhtml和html的区别
1. xhtml的单标签后面必须带/ html的语法可带可不带
2. xhtml的标签名一般都是小写 html的标签可大写可小写
3. xhtml的属性值必须用双引号，html的属性值可单可双
html语法
标签、标记、元素：尖括号里的第一个单词
双标签：成对出现的标签，结束标签必须带/
单标签(空标记)：单独出现的标签
属性：标签后面用空格隔开的单词
1. 属性和属性值之间用 = 连接
2. 属性值要用引号引起来
3. 一个标签可以有多个属性，且多个之间没有顺序
浏览器内核(渲染机制)
Trident内核---代表浏览器ie浏览器
Gecko内核---代表浏览器Mozilla火狐
WebKit内核---代表浏览器苹果浏览器和谷歌旧版本
Blink内核---代表浏览器谷歌 & 欧鹏
网页头部
常见的兼容性bug
(1)bug:透明度 opacity在谷歌和火狐都正常显示，但是在ie8及以下有问题
解决方法hack: filter:alpha(opacity=value)
(2)表单元素对齐不一致
bug:文本输入框是按标准盒模型解析，按钮是按怪异盒模型解析
解决方法hack：用同一种盒模型
(3)超链接去包裹img的时候，在ie10及以下图片会出现边框
解决方法hack:img{border:none}
HTML常用标签
文章类标签
标题标签 h1-h6
特点: 双标签/加粗/h1-h6字体大小逐渐变小
段落标签 p
特点: 双标签
加粗标签 b/strong 语义上的区别 strong表强调
倾斜标签 i/em 语义上的区别 em表强调
换行 br 单标签
水平线 hr 单标签
下划线 u
删除线 del
上标 sup
下标 sub
空格 (常用)
左尖括号 <(常用)
右尖括号 >(常用)
图片标签
img: 单标签 (png/jpg/gif/webp)
src: 图片路径
绝对路径: 直接复制浏览器在线网址即可,但是如果图片下线的话,地址就失效了
相对路径: 将图片下载到自己的文件中,根据图片路径方法去寻找
width: 宽度
height: 高度
title: 鼠标划过图片时候的提示信息
alt: 图片不显示的时候给用户的提示
超链接标签
href: 跳转地址,没有写# 表示为空链接
target: 窗口打开的方式
_self 当前窗口打开,默认
_blank 新开窗口
列表标签
无序列表(常用) ul>li
应用场景：网页的导航/新闻列表/商品列表
有序列表 ol>li
ol的属性：type="1/A/a/I/i" 排序方式 start="数字" 从第几个开始排序
自定义列表(图文混排) dl>dt和dd
一般情况下 dt里面放图片，dt只有一组
一般情况下 dd里面放文字，dd可以有多组
表单标签
表单集 form 一般在套在表单元素的外面
input表单元素
type:表单类型
name:起一个名字
id: 起一个名字
value: 值
文本输入框 type="text"
密码输入框 type="password"
提交按钮 type="submit" value:按钮文字
重置按钮 type="reset" value:按钮文字 一次性清空掉form里面的所有的内容，但是不能清空默认值
表格(拓展)
表格标签 table
width="" 宽度
height="" 高度
border="数值" 边框
cellspacing="数值" 单元格之间的距离
cellpadding="数值" 单元格内的填充
align="left/center/right" 表格的水平位置
行 tr
align="left/center/right" 整个一行文字水平的位置
valign="top/middle/botttom" 整个一行文字垂直的位置
列 td
align="left/center/right" 某个单元格文字水平的位置
valign="top/middle/botttom" 某个单元格文字垂直的位置
colspan="合并单元格的个数" 列合并属性
rowspan="合并单元格的个数" 行合并
border-spacing:数值px; 边框之间的距离
border-collapse:collapse;边框合并成细线边框
table-layout:auto/fixed; auto:表格会根据单元格的内容的多少，自动调整单元格的宽fixed:固定单元格的宽
grid网格
父元素
形成网格 display:grid;
网格的行 grid-template-rows
(1)有几行写几个宽度值，用空格隔开就行
(2)数值px/数值%/数值fr(份数)/repeat(次数,宽度值)
网格的列 grid-template-columns
(1)有几列写几个高度值，用空格隔开就行
(2)数值px/数值%/数值fr(份数)/repeat(次数,高度值)
划分网格区域 grid-template-areas:
(1)有几行写几组引号
(2)引号里面写每一个格子的名字用空格隔开，合并的格子用相同的名字
行间距 row-gap:数值px;
列间距 column-gap:数值px;
子元素
grid-area:区域名; 上面划分区域起好的名字，指定在该区域显示
表格标签 (扩展)
表格行分组
表头，一般是一组 表体，可以是多组 表尾，一般是一组
表格标题
表格列标题
表格列分组
表单集 form(一般把表单元素放到form里面)
action：提交路径
method：提交方式 GET/POST
CSS
css中文名：层叠样式表
样式表
1. 行内样式表(内联样式表)
2. 内部样式表
3. 外部样式表
. 在结构文件的外面新建一个带有.css后缀的文件
. 在结构文件的head标签里面生成一个link标签，在href里面写入css文件的路径
rel:关联文件的类型
type: 当前文件类型
href: css文件的路径
*三种样式表的权重（权重越高，里面的样式会优先显示）
行高样式权重最高 内部和外部的权重根据就近原则(靠近结构的就近)
选择器
标签选择器---标签名{}
id选择器---#id名{}
id名--类似于人的身份证号，每个标签的id名不可以设置成一样的
(1)一般是英文
(2)不要使用特殊字符
(3)不要用数字开头
通用选择器 *{} *：可以选择页面中所有的标签, 一般是选择到所有的标签，然后去掉自带的间距 *{margin:0;padding:0}
class(类)选择器 .class名{}
class名特点：(1)可以重复 (2)一个标签可以有多个class名，多个名字之间用空格隔开
后代选择器: 选择器 选择器 选择器{}
1. 每个选择器之间必须用空格隔开，这些选择器之间一定要有后代(嵌套的)关系
2. 选择器的个数不限制
3. 选择器可以跨代的，不一定要一层一层向下写
群组选择器: 选择器,选择器,选择器{}
1. 选择器的个数不限制，之间用,隔开
2. 选择的种类不限制，可以混搭
层级选择器
后代选择器 选择器 选择器{}
子代选择器 选择器>选择器{}
相邻的后面的兄弟 选择器+选择器{}
相邻的后面的兄弟们 选择器~选择器{}
属性选择器(权重10) 可以选择官方定义的属性，也可选择自定义的属性
[属性名]{} 通过属性名
[属性名="属性值"]{} 属性名和属性值匹配
[属性名^="值"] 属性值以该值打头
[属性名$="值"] 属性值以该值结束
[属性名*="值"] 属性值中包含该值
选择器的权重值：
行内样式 ---1000
id选择器 ---100或者0100
class选择器 ---10或者0010
标签选择器 ---1或者0001
通用选择器权重值 ---0
特点：
1、后代选择器的权重值：是每一个选择器的权重值相加
2、权重值相同的时候根据就近原则
3、群组选择器的权重：只看每一个选择器自己本身，不管别人
层叠：如果样式产生冲突时候，需要根据权重值去看优先显示哪个样式，如果样式没有冲突的时候，样式是正常显示，这种现象称为层叠
css属性
基本属性
背景色 background-color:颜色单词;
宽度 width:数字px; 0可以不带单位
高度 height:数值px; 0可以不带单位
字体属性
字体大小 font-size:数字px/数字em; 默认字体大小为16px,一般情况字体大小设置为偶数,默认1em=16px
字体加粗：font-weight:
(1)bold(加粗)
(2)100-900 100-300:偏细 400、500：正常 600-900 加粗
(3)normal 正常,去掉加粗标签的加粗效果
字体倾斜：font-style:
(1)italic 倾斜
(2)normal 正常,去掉倾斜标签的倾斜效果
字体类型：font-family:宋体
font-family:华文彩云,宋体,楷体;
(1)字体类型有多个的话，从左向右解析，有哪个显示哪个，没有则显示默认的字体类型
文本首行缩进 text-indent:数字px/数字em; em:指的是当前元素的字体大小 数字是当前字体大小的倍数
文本水平位置 text-align:left(靠左)/center(居中)/right(居右)/justify(两端对齐,对英文比较明显)
行高 line-height:数值px
(1)单行文本：让行高和高度的值设置成一样，可以实现垂直居中
(2)多行文本：可以增大行和行之间的距离
颜色color:颜色单词/十六进制#ffc0cb/rgb(0-255,0-255,0-255)
文本修饰text-decoration:
underline 下划线
overline 上划线
line-through 删除线
none 去掉线
字符间距(不常用) letter-spacing:数字px 可以设置负数
(1)对于汉字是字和字之间的距离
(2)对于英文单词是字母和字母之间的距离
词间距(不常用) word-spacing:数字px;单词和单词之间的距离
列表属性
列表符号类型 list-style-type:disc(默认实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号，常用)
列表符号位置 list-style-position:inside(里面)/outside(外面)
列表图片 list-style-image:url(小图的路径)
复合写法 list-style:列表符号类型 列表符号位置 列表图片;
list-style:none; 去掉列表符号(常用)
文字阴影 text-shadow:水平偏移 垂直偏移 模糊程度 阴影颜色
字体图标(通过字体的属性去调整图标的样式)
灰色字体图标的使用
1. 选择需要的图标加入购物车
2. 下载至项目或者下载代码到本地
3. 解压后放在所需要的文件夹里
4. 通过link引入iconfont.css
5. 结构中用span或者i等其他内联标签 必须有iconfont的名 另一个是图标的名
边框属性
分开写法
边框样式 border-style:solid(实线)/dashed(虚线)/dotted(点状线)/double(双实线)
边框粗细(宽) border-width:数值px
边框颜色：border-color:颜色值; 默认跟随字体颜色，
复合写法(常用)：border: 样式值 粗细值 颜色值;
(1)三个值之间是没有顺序的
(2)样式值必须有，粗细值和颜色可选
单方向边框
border-方向(left/top/right/bottom):样式值 粗细值 颜色值;
border-方向:none/0;
浮动属性(重要)
float:none(不浮动)/left(左浮动)/right(右浮动)
应用场景：让纵向排列的元素横向排列
浮动特点
1. 如果浮动元素的宽度超出整个外层容器的宽，放不下的浮动元素会掉下来
2. 加了浮动属性的元素会 脱离文档流，会和后面的正常的元素产生重叠，会挡住后面的元素，但是不会遮挡住文字
清除浮动 (清除前面浮动元素带给自己的影响)
clear:left(左浮动)/right(右浮动)/both(全部)
伪类选择器(权重值为10，和类选择器一样)
超链接元素:link{} 超链接没有访问之前的样式
超链接元素:visited{} 超链接访问之后的样式
元素:hover{} 鼠标划过 重要
元素:active{} 鼠标按下的状态
注意点
1. 如果要给超链接加这几种状态的话，顺序必须是L->V->H->A（爱(love)恨(hate)法则）
2. hover和active针对所有的元素，link和visited只针对超链接
背景属性(重点)
背景色 background-color:颜色值;
背景图 background-image:url(图片路径) 不占位置
背景图重复 background-repeat:repeat(重复)/repeat-x(横向重复)/repeat-y(纵向重复)/no-repeat(不重复)
背景图位置 background-position:水平 垂直;
数值px/关键字 水平：left/center/right 垂直： top/center/bottom
只设置一个只的话，第二个值默认居中
雪碧图(精灵图)-css sprites 必须用背景图插入
雪碧图主要结合是background-position
优点(1)减少图片的体积(2)减少http的请求次数
元素
块级元素(div/p/h1-h6/hr/ul/li/ol/dl/dd/dt)
1. 可以设置宽高
2. 独占一行
3. 作为容器去包裹别人,p不能包裹块级元素，包括他自己
4. margin:auto;可以让块级元素水平居中
内联元素(b/span/a/i/em/strong/u/sup/sub)
1. 不可以设置宽高
2. 可以在同一行显示
3. 内联元素居中，给内元素添加父元素，父元素设置text-aling:center;
内联块元素(img/input)
1. 可以设置宽高
2. 可以在同一行显示
3. 元素居中，给内元素添加父元素，父元素设置text-aling:center;
元素类型的转换
display:
block(块级)
inline(内联)
inline-block(内联块)
list-item(li独有的display值)
none(隐藏)
css属性继承：加在父元素身上的属性会作用到子元素
可以继承
字体类：font-size/font-weight/font-style/font-family
文本类：color/text-align/line-height/text-indent
列表类：list-style-type/list-style-position/list-style-image/list-style
不可继承
width/height/background-color/border/float/text-decoration
注意点:(1)继承样式权重值最低,比0还低(2)自带的样式要自己去,不能通过父亲去
置换元素和非置换元素
置换元素(内联块):img/input/select/textarea
img-src img会根据src的值在页面中显示不一样的内容
input-type input会根据type值不一样显示不同的内容
select会根据选择的不同显示不一样的内容
textarea 会根据输入的东西不同会显示不一样的内容
注：不一样的内容就相当于内容可以更换也就是置换的意思
(1)默认情况下在页面中会形成一个区域，或者一个框
(2)可以设置宽高，可以在同一行显示
非置换元素：除了置换元素
内联块元素的垂直对齐方式vertical-align
baseline 基线
bottom 底线
middle 中线
top 顶线
宽度自适应
1. 宽度不设置，跟随父元素
2. 宽度设置百分数，跟随父元素
最大宽 max-width:宽度可以无限大，但是不能超过该值
最小宽 min-width:宽度可以无限小，但是不能低于该值
内联块：宽度由内容撑开，且可以设置宽度
适用情况
1. 通栏设置百分数
2. 小板块里面的内容，可以不设置让其跟随父元素
高度自适应
1. 高度不设置，由内容撑开
2. height:auto;由内容撑开
3. 设置百分数，参考父元素
最大高 max-height:高度可以由内容无限撑大，但不能超过该值，但是内容依然会溢出，可以设置溢出属性
最小高 min-height:高度可以由内容撑开，变得很低，但是不能低于某个值
适用场景
1. 内容的多少不确定的时候，可以不设置，由内容撑开
2. 板块里面的小板块
全屏页面
1. 给当前元素设置高度百分百 元素{height:100%}
2. 设置body,html{height: 100%;}
高度塌陷
条件：(1)父元素不设置高 (2)子元素添加了浮动
解决方法：
(1) 给高度塌陷的元素设置overflow:hidden;
弊端：会隐藏掉超出父元素的部分
(2) 给浮动元素的后面添加一个块级元素(clear只对块生效)，再给该元素设置clear属性
弊端：页面种会有很多空的div,造成代码冗余(多余)
(3) 完美清除法(通过css的方式添加元素)
父元素::after{
content: "嘿嘿"; 正常是里面没有字
clear: left; 清除浮动
display: block; 添加进来的是内联元素
height: 0;overflow: hidden; 如果有字的处理方法 }
盒模型
边框(border):会撑大盒子，量取的时候从边框里面开始量 外边距(margin)
内容区(content):(1)宽高形成的区域(2)内容(文字/图等)在内容区显示
内填充/内边距(padding)
padding值的特点
padding:数值px; 一个值四周
padding:数值px 数值px; 两个值上下 左右
padding:数值px 数值px 数值px;三个值 上 左右 下
padding:数值px 数值px 数值px 数值px; 四个值顺时针
单方向的padding(要注意单方向和四个方向属性同时存在的时候的顺序问题)
padding-方向(top/right/bottom/left):数值px;
padding的特点
1. padding会撑大盒子,如果不想盒子被撑大,需要在原来的宽高的基础上减去对应方向的padding
2. padding不可以设置负数的
3. padding区域可以显示背景色/图
4. padding可以用来调整内容的位置
5. padding对于内联元素上下显示不准确,左右准确,块和内联块都没问题
边框(border):会撑大盒子，量取的时候从边框里面开始量
外边距(margin)
margin值的设置和padding一样
margin特点
1. margin不会撑大盒子
2. margin可以设置负数，元素会重叠
3. margin区域不会显示该元素的背景色
4. margin可以用来调整盒子和盒子之间的距离
5. margig对内联元素上下不生效，对块和内联块没问题
6. margin: auto;一个值代表四个方向，但是只能实现水平居中
margin值的设置和padding一样
margin特点
1. margin不会撑大盒子
2. margin可以设置负数，元素会重叠
3. margin区域不会显示该元素的背景色
4. margin可以用来调整盒子和盒子之间的距离
5. margig对内联元素上下不生效，对块和内联块没问题
6. margin: auto;一个值代表四个方向，但是只能实现水平居中
margin的bug
1. margin的传递: 给父元素中的第一个子元素设置上边距的时候，会错误的加在父元素的身上
(1) 使用padding
(2) 给父元素加边框
(3) 给父元素/该元素加浮动
(4) 给父元素加overflow:hidden(溢出隐藏)
2. margin的重叠: 给上面的元素加下边距，给下面的元素加上边距，会导致margin值的重叠，重叠之后以最大值显示,左右会相加
弹性盒
父元素
形成弹性盒 display:flex
子元素在主轴的位置justify-content
子元素在交叉轴的位置 align-items
换行 flex-wrap:wrap
多行之间的位置 align-content:flex-start
主轴方向 flex-direction,主轴方向变化之后，所有的属性都跟随新的主轴用
row 从左向右
row-reverse 从右到左
column 从上往下，元素需要从上往下排的时候
column-reverse 从下往上
子元素
子项在交叉轴的位置 align-self
排序 order:数字; 值越大，越靠后，可以为负数
压缩 flex-shrink:1压缩/0不压缩， 常用，如果子项不想被压缩还想在同一行显示
放大 flex-grow:0不放大/数值; 常用，子项宽度想拿到整个父元素的剩余空间(相当于放大)
子项宽度 flex-basis:数值px; 和width是一样的
复合写法flex:放大(0) 压缩(1) 子项宽度(auto)
换行
flex-wrap:nowrap(不换行，压缩)/wrap
多行之间元素的位置 align-content:
stretch 拉伸,去掉高度或者宽度会拉伸
flex-start 整个盒子开始的位置
flex-end 整个盒子结束的位置
center 整个盒子的中心
space-between 整个盒子的两端对齐
space-around 整个盒子的中间留白是两端的2倍
space-evenly 整个盒子的留白平均
子元素
调整某个子元素在交叉轴的位置 align-self
stretch 拉伸。需要去掉子元素宽度或者高度，才能拉伸
flex-start 交叉轴的起点
flex-end 交叉轴的终点
center 交叉轴中点
BFC(Block Formatting Context):
块级格式化上下文 在页面中会形成一块独立(特殊)渲染的区域
触发条件
1. overflow:hidden/auto/scroll
2. float:left/right
3. position:absolute/fixed
4. display:inline-block/table-caption(表格标题)/table-cell(表格单元格)/flex(弹性盒)/inline-flex(内联弹性盒)
特性
1. 在BFC区域内，浮动元素的高度会计算在内---解决高度塌陷
2. BFC的区域不会和浮动元素重叠 ---解决浮动元素和正常元素重叠的问题
3. 在BFC的区域内的元素是不会影响到其他元素 ---解决margin重叠问题
常用元素
盒子阴影 box-shadow: 水平偏移 垂直偏移 模糊程度 模糊大小 阴影颜色
水平偏移
垂直偏移可以是负数，其他不可以,向右和向下偏移为正（如果阴影想在盒子里面，最后加一个inset）
圆角 border-radius
一个值：四周 两个值：对角 三个值：上 对角 下 （设置正圆 50%/100%都行）
溢出属性
overflow/overflow-x/overflow-y
visible 正常显示 默认值
hidden 溢出隐藏
scroll 溢出显示滚动条
auto 自动，内容不溢出不显示滚动条，溢出才显示滚动条
溢出显示省略号(只针对一行文字)
1. 设置white-space:nowrap; 不换行
2. 设置overflow:hidden; 超出宽度的部分隐藏掉
3. 设置text-overflow: ellipsis;隐藏的部分用省略号来代替
伪元素
可以是单冒号：也可是双冒号::
选中元素内的第一个字
元素::first-letter{} 只针对块
选中元素内的第一行
元素::first-line{} 只针对块
给选中元素的里面的前面添加内容
元素::before{ 内联元素
content:""; //没有字也要加空引号}
选中元素的里面的后面添加内容
元素::after{ 内联元素
content:""; //没有字也要加空引号}
伪类选择器
结构性的伪类
-child
:first-child{}
:last-child{}
:nth-child(n){} 括号里可以是数字，可以是odd(奇数)/even(偶数)/数学表达式(2n等)
-type
:first-of-type{}
:last-of-type{}
:nth-of-type(n){}括号里可以是数字，可以是odd(奇数)/even(偶数)/数学表达式(2n等)
这两个选择器在里面孩子相同的时候，一样使用。孩子不同的时候，对于child来说，主要看选择的元素在诸多孩子中是第几个，则写几。对于type的话，先看选择的这类元素总共有几个，然后看在这类里面是第几个，则写几
伪类选择器(权重10)
状态性伪类
可以编辑的表单元素 input:enabled{}
不可以编辑的表单元素 input:disabled{}
获取焦点时的样式 input:focus{}
单选或者多选选中的时候 input:checked+label
男
选中文字高亮的样式 p::selection{}
@import引入方式
link和@import的区别
1. 老祖宗的区别，link属于html标签，可以引入css文件也可以网页小图标，@import属于css提供的方法，只能引入css
引入小图标
(1)在.com或者.cn后面 /favicon.ico
(2)
2. 加载顺序，link引入的css和html是同时加载，@import引入的css是先加载html,后加载css
3. 浏览器支持性，link来说浏览器都支持，@import对于ie浏览器ie5以上
4. js操作样式的区别，js可以操作link引入的样式，但是不能@import引入的
定位属性 position
static 静态定位，默认值相当于没定位
relative 相对定位
1.参考物：自己本身位置
2.移动方向和距离：left/right/top/bottom:数值px;
3.移动之后占位置(不脱离文档流)
absolute 绝对定位
1.参考物：有定位属性的祖先元素
如果祖先元素都带定位属性，就近元素
如果祖先元素中都没带定位属性，参考浏览器
2. 移动方向和距离：lefAt/right/top/bottom:数值px/数值%;
3. 特点
(1) 会脱离文档流，遮挡住后面的元素且遮挡文字（用relative形成参考物较多，原因是不脱离文档流(子绝父相)）
(2) 脱离文档流的元素margin:auto;会失效
(3) 会让内联元素变成块
绝对定位中,属性值设置百分数参考的是参考物
水平垂直居中
1. 元素设置position:absolute;
2. 元素设置top:50%;移动到参考物的中心点的下侧，margin-top:-当前元素高度的一半;向上拉取
3. 元素设置left:50%;移动到参考物的中心点的右侧，margin-left:-当前元素宽度的一半;向左拉取
水平垂直居中
1. 元素设置position:absolute;
2. 元素设置left:0;top:0;right:0;bottom:0;四个方向拉扯
3. 让其居中margin:auto;
固定定位 position:fixed;
参考物: 浏览器窗口
移动方向和距离:移动方向和距离：left/right/top/bottom:数值px/数值%;
特点
1. 会脱离文档流
2. margin:auto都会失效
3. 会把内联元素变成块
4. 不会跟随滚动条滚动
粘性定位 position:sticky;(吸顶效果)
参考物：浏览器窗口
移动方向和距离：top:数值px;
特点：没有达到top之前，元素正常显示，达到距离浏览器窗口的top之后，类似于固定定位(不跟随滚动，脱离文档流)
定位属性权重
(1)定位元素的层级要比普通元素的层级要高
(2)如果大家都加定位属性，结构代码靠后的层级高
(3)定位属性的层级关系 z-index:数值;
1. 值越大，层级越高，越在上面显示
2. 可以设置负数
3. 必须结合定位属性使用
背景属性
background-color
background-image
background-repeat
background-position
background-attachment: scroll(默认背景图会跟着滚动)/fixed(图固定，内容滚)背景图的固定
复合写法 background: 颜色值 url() 重复 位置 固定; 顺序不固定
背景图大小background-size:宽度 高度;
数字px/数值%(背景图可能会拉变形)
关键字
cover:背景图不断拉伸，直到完全充满容器，可能会出现背景图显示不全
contain：背景图不断拉伸，碰到某个边缘就停止拉伸，可能会出现留白
background: palegoldenrod url(https://img0.baidu.com/it/u=848968349,3865335885&fm=26&fmt=auto) no-repeat 0 0/contain; 位置和大小之间用 / 隔开
渐进增强
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
浏览器前缀
ie浏览器 -ms-
火狐 -moz-
欧鹏 -o-
谷歌/苹果浏览器 -webkit-
h5新增标签
主要特点：语义化 ie8及以下不支持
header 头部
nav 导航
section 区块
main 主要
footer 底部
hgroup 标题组
time 时间 内联元素
mark 标记 内联元素
figure 类似dl figcaption类似于dd
文本描述
音频 audio (内联块)
当前浏览器不支持audio
controls: 控件
muted: 静音
loop: 循环
autoplay: 自动播放 谷歌和火狐是禁止自动播放的，ie可以
视频 video(内联块)
视频属性和音频一样，但是视频静音的时候可以自动播放
poster="图片路径" 视频没播放之前的广告图
表单新增type类型(了解)
邮箱 type="email"
地址 type="url"
数字 type="number"
滑块 type="range"
颜色 type="color"
搜索 type="search"
年月 type="date"
月 type="month"
周 type="week"
时分 type="time"
年月日时分秒 type="datetime-local"
表单新增属性
required 必填
placehodler 提示信息
autofocus 自动聚焦
multiple 多选 文件上传多个
pattern="[0-9][A-Z]{3}" 正则表达(限制用户输入内容的格式)
autocomplete="on/off" 显示历史记录 需要结合name和value使用
过渡(常用)
需要过渡属性 transition-property:属性名; 多个属性名之间用,隔开。也可用all代替，可有可无
过渡的时间 transition-duration: s/ms; 1s=1000ms; 必须有
过渡延迟时间 transition-delay:s/ms; 可有可无
过渡执行的效果 transition-timing-function:linear(匀速)/ease(慢下来)/ease-in(加速)/ease-out(减速)/ease-in-out(先加后减)
复合写法 transition: 需要过渡属性 过渡的时间 过渡延迟时间 过渡执行的效果;
(1)过渡时间必须有，其他都可以没有
(2)属性值没有顺序，两个时间同时出现第一个是过渡时间，如果只写一个时间就是过渡时间
(3)过渡一般需要结合hover使用,使其产生两种状态，一个初始状态一个结束状态
(4)要保证有初始值和结束值才可以过渡
透明
rbga() a：透明度 0-1 1：不透明 0：完全透明 值越小越透明
opacity: 0-1 1：不透明 0：完全透明 值越小越透明（i8及以下就不支持）
区别：rgba只透明背景，opacity透明背景和内容
ie及以下的支持方式
filter:alpha(opacity=value); value(1-100)
线性渐变(常用)
浏览器前缀要加在linear前面，方向中的to要去掉，代表意思为从该方向
background-image:-webkit-linear-gradient(bottom,颜色值1);
background-image:-webkit-repeating-linear-gradient()
径向渐变
background-image: radial-gradient(位置,颜色1,颜色2);
默认从中心开始渐变，如果要改变位置(和背景图位置一样)，需要加浏览器前缀
background-image: -webkit-radial-gradient(bottom center, red,yellow,green);
重复性的径向渐变
background-image: repeating-radial-gradient(red 20px,yellow 40px);
background-image: -webkit-repeating-radial-gradient(red 20px,yellow 40px);
标准(w3c)盒模型 box-sizing:content-box;
总宽=width+padding左右+border左右+margin的左右
怪异(ie)盒模型 box-sizing: border-box; ie678的时候不添加文档声明也可以触发
总宽=width+margin的左右;
2d/3d变形
位移
x轴位移 transform:translateX(数值px/%) 向右为正 百分数参考当前元素
y轴位移 transform:translateY(数值px/%) 向下为正 百分数参考当前元素
z轴位移 transform:translateZ(数值px/%) 向前为正
xy都位移
transform:translateX(200px) translateY(200px)
transform: translate(200px,200px)
transform: translate(200px)一个值代表x轴位移
xyz都位移
transform:translateX(200px) translateY(200px) translateZ(数值px/%)
transform:translate3d(x,y,z)
形成3d空间(舞台) transform-style:flat(平面)/preserve-3d 加在变形元素的父元素身上
利用定位和位移实现水平垂直居中
1.元素设置position:absolute;
2.元素设置top:50%;left:50%;移动到参考物中心的点的右下侧
3.向左和向上拉取当前元素宽高的一半 transform:translate(-50%,-50%);这里的百分数参考元素本身
2d/3d变形旋转
x轴旋转 transform:rotateX(数值deg)
y轴旋转 transform:rotateY(数值deg)
z轴旋转 transform:rotateZ(数值deg)
xy旋转
transform: rotateX(数值deg)rotateY(数值deg)
景深 perspective:数值px; 近(值越小)大远小，一般加在变形元素的父元素身上
变形原点 transform-origin:水平 垂直;
既旋转又位移
transform:rotateX(数值deg) translateX()
变形旋转
xy旋转 transform:rotateX() rotateY()
transform:rotate(z) z轴旋转
xyz都旋转
transform:rotateX() rotateY() rotateZ()
transform:rotate3d(a,b,c,d) abc的取值是0或者1 0：不旋转 1：旋转 d:旋转角度
变形缩放
x轴缩放 transform:scaleX(数字) 0:完全隐藏 1:不缩放 0-1缩小 >1放大
y轴缩放 transform:scaleY(数字)
z轴缩放 transform:scaleZ(数字)
xy缩放
transform:scaleX(数字) scaleY(数字);
transform:scale(x,y) 只设置一个值 x和y
xyz都缩放
transform:scaleX(数字) scaleY(数字) scaleZ(数字);
transform:scale3d(x,y,z)
变形倾斜2d
x轴倾斜 transform:skewX(数字deg)
y轴倾斜 transform:skewY(数字deg)
xy都倾斜 transform:skewX(数字deg) skewY(数字deg)
transform:skew(x,y)
动画属性
使用动画
animation-name:动画名; 指定使用的动画 必须
animation-duration:s/ms; 动画执行的时间 必须
animation-delay:s/ms;动画延迟时间
animation-timing-function:linear/ease/esae-in/ease-out/ease-in-out;动画效果
animation-interation-count:数字/infinte(无限次) 执行次数
animation-play-state:running/paused(暂停)
animation-fill-mode:backwards(停在第一个关键帧)/forwards(最后一个关键帧)
animation-direction:reverse(反转)/alternate(正反交替)
定义动画
复合写法
animation:动画名 动画执行的时间 动画延迟时间 动画效果 执行次数(没有顺序)
定义动画的关键字@keyframs 带前缀要加在@和k之间 @-webkit-keyframes
@keyframs 动画名{
关键帧划分的是时间
from{color:red}
to{color:blue}
百分数
0%{}--from
10%{}
20%{}
30%{}
100%{}--to }
动画和过渡的区别
1. 过渡一般需要hover去触发的，动画可有自己执行
2. 动画可有添加多个状态，过渡只有开始和结束两种状态
3. 动画可以停止
响应式页面：
根据不同的浏览器窗口大小，显示不同的样式
媒体查询
@media 设备类型 and (媒体特性){}
设备类型：all/screen
and:连接符
媒体特性:视口的宽(能够看得到的区域的宽)
max-width:最大宽 视口宽度低于该值的时候
min-width:最小宽 视口宽度高于该值的时候
/* 视口宽度低于700的时候 高度变300 背景色变蓝色 */
@media all and (max-width:700px){
.box{height: 300px;background-color: blue}
}
/* 视口宽度400-600的时候 高度变100 背景色变黄色 字体大小40 */
@media all and (min-width:400px) and (max-width:600px){
.box{height: 100px;background-color: yellow;font-size: 40px;}
}
/* 视口宽度高于100的时候 字体颜色变红色 */
@media all and (min-width:100px) {
.box{color: red;}
HTML5一阶段学习总结相关推荐
- 前端H5怎么切换语言_「自学系列一」HTML5大前端学习路线+视频教程完整版
全新Java.HTML5前端.大数据.Python爬虫.全链UI设计.软件测试.Unity 3D.Go语言等多个技术方向的全套视频. 面对这么多的知识点,有的盆友就麻爪了-- 我是谁? 我该从哪里开始 ...
- 自学大数据者请进：大数据学习线路及各阶段学习书籍推荐
大数据学习路线及各阶段学习书籍推荐!废话不多说,直接切入主题,有需要的小伙伴可以参考学习! 阶段一.大数据基础--java语言基础方面 自学大数据者请进:大数据学习线路及各阶段学习书籍.视频推荐 (1 ...
- 大数据学习线路及各阶段学习书籍推荐
大数据学习路线及各阶段学习书籍推荐!废话不多说,直接切入主题,有需要的小伙伴可以参考学习! 阶段一.大数据基础--java语言基础方面 (1)Java语言基础 Java开发介绍.熟悉Eclipse开发 ...
- 分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(4月16日-4月22日)
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(4月16日-4月22日) 本周Silverlight学习资源更新 银光中国网友原创:Silverlight中获取 ...
- 分享Silverlight/Windows8/WPF/WP7/HTML5一周学习导读(5月6日-5月12日)
分享Silverlight/Windows8/WPF/WP7/HTML5一周学习导读(5月6日-5月12日) 本周Silverlight学习资源更新 Beginning Silverlight 4 i ...
- 分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(4月2日-4月8日)
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(4月2日-4月8日) 本周Silverlight学习资源更新 Microsoft Silverlight 4从入 ...
- 分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(11月28日-12月4日)
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(11月28日-12月4日) 本周Silverlight学习资源更新 Silverlight HttpUtil 封 ...
- 分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(2月6日-2月12日)
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(2月6日-2月12日) 本周Silverlight学习资源更新 实现Silverlight自定义载入动画的方法( ...
- 基于html5的在线教育,基于HTML5的在线学习系统的设计与实现
基于HTML5的在线学习系统的设计与实现 发布时间:2019-11-18所属分类:科技论文浏览:1次 摘 要: 摘 要: 在线课程学习网站的发展迅速,吸引了广大用户.基于 HTML5 的在线学习系统经 ...
最新文章
- Python学习的十个阶段，学完大成，对应一下看看你自己在哪个阶段
- 解题报告：luogu P2341 受欢迎的牛（Tarjan算法，强连通分量判定，缩点，模板）
- get传递中文产生乱码的解决方式汇总
- python掌握程度怎么判断-想要学习人工智能需要掌握Python到什么程度
- 阿里配管专家解读：如何最优成本搭建非标准的iOS构建集群
- 【记忆断层、记忆裂痕】
- go gin框架：StaticFS搭建文件服务器（可以加载文件夹及文件）
- Mybatis应用（一）应用步骤
- 数学--矩阵快速幂详解
- HandlerThread用法
- 简单电子相册视频制作的步骤和要点
- xp虚拟服务器设置,VMWare的XP虚拟机网络设置
- 《互联网大厂晋升指南》读书笔记-下
- Java+vue实现滑动拼图验证码简单实现
- 摘要加密算法——MD5加密
- 以漫画的形式描述联邦学习
- 三元（三目）运算符解释
- eclipse如何汉化--安装各国语言包
- 《C语言程序设计》(谭浩强第五版) 第2章 算法——程序的灵魂
- UE4中蓝图实现输入框输入关键字搜索对应东西