admin管理员组

文章数量:814258

HTML+CSS 学习总结

HTML

1、HTML
超文本标记语言

2、作用
写网页结构内容

3、文件后缀
.html 或者 .htm

4、HTML不区分大小写,建议小写

5、html由浏览器解析执行,由上往下,由左往右

6、标签 标记 元素
HTML由标签组成
标签是一对尖括号包含的关键词

双标记 封闭类型标记

h1-h6,div,span,p,b,i,u,s,del,sup,sub,em,strong,a,ul,ol,li,dl,dt,dd,form,button,textarea,table,tr,td,th,caption,tbody,thead,tfoot,header,nav,footer,aside,section,article,video,audio,script,body.head.html...

单标记 非封闭类型标记 空标记

br,hr,img,input,link,meta,source...

7、块级元素和行内元素的区别
1)块级元素独占一行,行内元素在同一行显示
2)块级元素默认宽度为100%,行内元素默认宽度由内容撑开
3)块级元素可以设置宽高,行内元素设置宽高不生效
4)块级元素可以设置margin和padding的四周,行内元素只能设置margin和padding的左右
5)布局时,块级元素可以包含块级元素和行内元素,行内元素一般不要包含块级元素
6)块级元素默认display:bolck; ,行内元素默认display:inline;
7)常见块级元素

h1,h6,div,p,ul,ol,li,dl,dt,dd,hr,table,tr,td,th,form,header,nav,footer,aside,section,article....

8)常见行内元素

img,a,span,b,i,u,s,del,sup,sub,em,strong,video,input,button,textarea,select...

8、DOCTYPE
文档类型声明
作用:告诉浏览器按当前标准解析代码

9、图片

<img src="必须属性  路径" alt="图片不显示给予提示" title="鼠标悬停给予提示"/>

路径:
1)绝对路径
2)相对路径
①平级 直接写
②下一级 /
③上一级 …/

10、超链接

<a href="必须属性 路径  #  javascript:;" target="打开的窗口 _self  _blank" name="锚点"></a>

11、列表
1)无序列表

<ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
</ul>

2)有序列表

<ol><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
</ol>

3)自定义列表

<dl><dt>主题</dt><dd>描述</dd><dd>描述</dd><dd>描述</dd>
</dl>

12、表格
作用:给用户展示数据

<table><caption>表格的标题</caption><thead><tr><th colspan="水平合并" rowspan="垂直合并"></th><th></th><th></th></tr></thead><tbody><tr><td></td><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td><td></td></tr></tfoot>
</table>

13、表单
1)提交数据
2)标签

<form action="提交的地址" name="表单的名称" method="提交的方式get|post" enctype="multipart/form-data"></form>

get和post的区别:
①get提交数据不安全,会在地址栏中显示,post安全
②get只能提交少量的数据,post理论上没有限制
3)表单元素

<input type="text">
<input type="password">
<input type="radio" name="">
<input type="checkbox">
<input type="submit">
<input type="reset">
<input type="button">
<button>提交  type = submit</button>
<button type="reset">重置</button>
<button type="button">没有功能的按钮</button>
<input type="file">  form的编码格式改为二进制
<input type="hidden">
<select name="" id=""><option value=""></option><option value=""></option><option value=""></option><option value=""></option>
</select>
<textarea name="" id="" cols="30" rows="10"></textarea>

4)表单元素常用的属性
value 当前值
name 表单元素的名称
checked 默认选中,配合单选按钮和多选按钮使用
selected 默认显示,配合option使用
readonly 只读
disabled 禁用

5)HTML5新增type类型

<input type="email">
<input type="url">
<input type="search">
<input type="tel">
<input type="color">
<input type="number">
<input type="range">
<input type="date">
<input type="month">
<input type="week">

6)HTML5新增表单元素的属性
placeholder 默认提示
autofocus 自动获取焦点
min和max 最小值和最大值,配合number和range使用
minlength和maxlength 最小长度和最大长度
required 必填项
multiple 可以输入多个,用逗号隔开,配合邮箱和网址使用

14、HTML5新增语义化布局标签

<header>头部</header>
<nav>导航条</nav>
<aside>侧边栏</aside>
<article>文章、帖子、博客等</article>
<section>章节、独立的一块</section>
<footer>页脚</footer>

15、你对语义化的理解
看到标签知道他表示的意思
正确的标签干正确的事情

优点:
①有利于SEO
②有利于屏幕阅读者去读取
③有利于团队开发和维护

16、视频和音频
1)视频

<video src="路径" autoplay loop muted controls poster="视频播放前显示一张图片">您的浏览器不支持视频</video>

2)音频

<audio src="路径" autoplay loop muted controls>您的浏览器不支持音频</audio>

3)资源
可以给浏览器提供多种视频或者音频格式的选择

<video><source src="1.mp4"/><source src="1.ogg"/><source src="1.webM"/>您的浏览器不支持视频
</video>

17、实体字符

&nbsp;  空格
&lt;  <
&gt;  >

18、HTML5新增标签

<!-- 多用于元素和元素的组合 -->
<figure><img src="../Mike/images/film.jpg" alt=""><figcaption>电影</figcaption>
</figure>
<!-- 细节 -->
<details><summary>少年</summary><p>省略的内容</p>
</details>

呵呵 哈哈啊啊

<!-- 突出显示 -->
呵呵 <mark>哈哈</mark>啊啊

你的浏览器不支持刻度

<!-- 刻度 -->
<meter min="0" max="100" value="86" low="20" high="80">你的浏览器不支持刻度</meter>

你的浏览器不支持进度条

<!-- 进度条 -->
<progress max="100" value="66">你的浏览器不支持进度条</progress>

您的浏览器不支持画布

<!-- 画布 -->
<canvas>您的浏览器不支持画布</canvas>

css

1、css
层叠样式表

2、作用
1)实现了内容与表现的分离
2)提高了代码的可重用性和可维护性

3、文件后缀
.css

4、css的特点
1)继承性
font-* , text-* ,line-height ,color
2)层叠性
3)优先级
优先级高的样式生效
优先级相同后写的样式生效

5、引入css的方式
1)内联方式
行内样式 —— 只对当前元素生效
利用HTML的style属性

<div style="color: red;"></div>

2)内部样式 —— 只对当前页面生效

<head><style>选择器{属性:属性值;属性:属性值;}</style>
</head>

3)外部样式 —— 实现了内容与表现的分离,提高了代码的可重用性和可维护性

<head><link rel="stylesheet" href="">
</head>

4)导入式

<head><style>@import url();</style>
</head>

@import和link的区别:
1)@import先加载HTML文件,再加载css文件,link是同时加载HTML和css文件
2)@import只能引入css文件,link还可以引入其他内容
3)@import有兼容性,link没有兼容性
4)JavaScript操作DOM时,只能操作link引入的css
5)@import会增加页面的http请求

6、选择器
作用:选中写样式的元素

1)基础选择器
全局选择器 通用选择器

*{}

选中页面所有元素

元素选择器

div{}
img{}
a{}

选中页面所有指定的元素

类选择器

.className{}

类名可以重复 一个class可以起多个名字,用空格隔开

ID选择器

#IDName{
}

ID名字具唯一性

选择器优先级:行内样式>ID选择器>类选择器>元素选择器>全局选择器
权重: 1000 100 10 1

合并选择器

选择器1,选择器2,...{}

2)关系选择器
1.后代选择器 空格

选择器1 选择器2{		}

选中所有后代

2.子代选择器 >

选择器1>选择器2{    }

选中所有直接子代

3.相邻兄弟选择器 +

选择器1+选择器2{		}

平级 挨着 后面的一个兄弟

4.通用兄弟选择器 ~

选择器1~选择器2{		}

平级 后面所有的兄弟

3)伪类选择器
冒号链接

:link     点击之前
:visited  点击之后
:hover    鼠标悬停
:active   鼠标按下
<!-- css3新增伪类选择器 -->
:first-child   第一个子元素是...
:last-child    最后一个子元素是...
:nth-child(number|even|odd|倍数)    第几个子元素是...
:only-child  唯一一个子元素是...
:empty       空的子元素是...
:not(选择器)  否定
<!-- 表单 -->
:focus   获取焦点时的样式
:checked  被选中时的样式

4)伪对象选择器 伪元素选择器

::before{content:"";
}
::after{content:"";
}

5)属性选择器

[属性]
[属性=属性值]
元素[属性=属性值]
元素[属性^=值]  以什么开头
元素[属性$=值]  以什么结尾
元素[属性*=值]  包含

7、字体的属性 —— 继承性
1)设置字体颜色

color:	;

颜色的取值:
①关键字
②十六进制
③rgb()
④rgba()

2)字体的大小

font-size:16px;

浏览器支持的最小字体为12px

3)字体是否加粗

font-weight:normal|bold|100-900;

400 = normal
700 = bold

4)字体是否倾斜

font-style:normal|italic;

5)字体

font-family:	,	,	;

8、文本的属性 —— 继承性
1)设置元素内容水平对齐方式

text-align:left|right|center;

2)文本装饰

text-decoration:underline|none|overline|line-through;

3)英文大小写转换

text-transform:uppercase|lowercase|capitalize;

4)首行缩进

text-indent:	px|em;

px 像素
em 相对单位

9、列表的属性
1)设置项目符号

list-style-type:none;

2)设置项目符号为图片

list-style-image:url();

3)设置项目符号的位置

list-style-position:outside|inside;

4)简写

list-style:none;

10、表格的属性
1)元素的宽高

width:;
height:;

2)表格的边框

border:1px solid red;

3)内容与边框之间的距离

padding:	;

4)边框折叠

border-collapse: collapse;

5)背景颜色

background-color:	;

6)背景图片

background-image:url();

7)单元格内容水平对齐方式

text-align:left|right|center;

8)单元格内容垂直对齐方式

vertical-align:top|bottom|middle;

11、背景的属性
1)背景颜色

background-color:transparent;

2)背景图片

background-image:url();

3)背景图片是否平铺

background-repeat:repeat|no-repeat|repeat-x|repeat-y;

4)背景图片的大小

background-size:x y;

取值 px % cover contain

5)背景图片定位

background-position:x y;

默认显示0 0
取值 px % left right top bottom center

6)背景图片固定

background-attachment:scroll|fixed;

7)简写

background:颜色 图片 平铺 大小 定位 固定;

12、雪碧图 css精灵 css sprite
1)定义
雪碧图是一项图片整合技术
把许多小图整合到一张大图上面

2)原理

background-image:url();
//引入图片
background-position:x y;
//移动位置

3)优点
①减少页面的http请求
②减少了图片的字节数
③减少图片命名困扰

4)缺点
①整合图片比较麻烦
②移动的时候比较麻烦

13、盒模型
1)标准盒模型 w3c盒模型
①组成部分

content+padding+border+margin

②实际宽度

width+padding+border+margin

③content 内容区域

width:;
height:;
min-width:;
max-width:;
min-height:;
max-height:;

块级元素默认宽度100%,行内元素默认宽度由内容撑开
块级元素和行内元素的高度默认都由内容撑开

块级元素可以设置宽高,行内元素设置宽高不生效

④padding 内边距 不能设置负值和auto
设置内容与边框的距离

padding:value;  四周
padding:value value;  上下  左右
padding:value value value;  上  左右  下
padding:value value value value;  上  右  下  左padding-top:;
padding-bottom:;
padding-left:;
padding-right:;

注意:padding会撑大容器

⑤border 边框

border-style:solid|dotted|dashed|double|none;  必须属性,边框的样式,默认3px  黑色
border-color:;  边框的颜色
border-width:;  边框的宽度
简写:border:1px solid red;  四周的边框
border-top:1px solid red;border-top-style:;border-top-color:;border-top-width:;
border-bottom:1px solid red;border-bottom-style:;border-bottom-color:;border-bottom-width:;
border-left:1px solid red;border-left-style:;border-left-color:;border-left-width:;
border-right:1px solid red;border-right-style:;border-right-color:;border-right-width:;

⑥margin 外边距 可以取正负、auto
设置元素之间的距离

margin:value;  四周
margin:value value;  上下  左右
margin:value value value;  上  左右  下
margin:value value value value;  上  右  下  左margin-top:;
margin-bottom:;
margin-left:;
margin-right:;

a、块级元素水平居中

div{width:	;margin:0 auto;
}

b、垂直方向上外边距合并问题
当垂直方向上外边距相撞时,取较大值
浮动元素不合并

c、margin-top问题
第一个块级子元素设置margin-top时,父元素会跟着一下走下来

解决:


1.父元素加 overflow:hidden;
2.父元素或者子元素浮动
3.父元素加border:1px solid transparent;
4.父元素加padding-top:1px;


2)怪异盒模型 IE盒模型
①组成部分

content+padding+border+margin

②实际宽度

width+marginwidth包含了padding和border

③盒模型相互转换

box-sizing:content-box;  默认值   标准盒模型
box-sizing:border-box;  怪异盒模型

3)弹性盒模型 伸缩盒模型 flexBox
在弹性盒模型中float和clear不生效

①写在父元素上的属性
a、开启弹性盒

display:flex;

子元素默认水平排列、

b、设置弹性盒的方向

flex-direction:row|column|row-revers|column-reverse;
row:默认值  子元素默认水平排列
column:子元素垂直排列
row-revers:子元素水平倒序排列
column-reverse:子元素垂直倒序排列

c、设置子元素在主轴的对齐方式
默认主轴为x轴,侧轴为y轴
当子元素垂直排列时,y轴为主轴,侧轴为x轴

justify-content:flex-star|flex-end|center|space-between|space-around;
flex-star:默认值 弹性盒的开始
flex-end:弹性盒的结束
center:居中
space-between:在子元素之间平均分配父元素剩余的空间(子元素间距)
space-around:在子元素之间分配父元素剩余的空间,两侧是中间的一半

d、设置子元素在侧轴的对齐方式

align-items:flex-star|flex-end|center;

②写在子元素上的属性

flex-grow:number;

设置子元素怎么分配父元素剩下的空间

14、浮动 float
1)原理
元素浮动以后排除到普通文档流之外
浮动以后元素在页面中不占据位置
浮动后碰到父元素的边框或者浮动元素的边框就会停止
浮动不会重叠
浮动只有左右浮动
浮动后所有元素转换为块级元素

2)语法

float:left|right|none;

3)清除浮动的方法
元素浮动后在页面中不占据位置,如果父元素不设置高度,父元素的高度就会坍塌,对后面的元素产生影响

①浮动元素的父元素加overflow:hidden|auto; (自动找高)
②浮动元素的父元素加高(高度已知)
③受影响的元素加clear:left|right|both;(高度没有找到)
④空div法 (父元素高度找到,但页面会增加许多div元素)
浮动元素后面加一个空div

空div{clear:both;}

⑤伪对象法

浮动元素的父元素::after{content:"";display:block;clear:both;
}

15、元素定位

position:;

属性值:
1)静态定位
static 默认值 没有定位

2)相对定位

position:relative;

相对于自己原位置定位
定位后原位置保留
配合left、right、top、bottom移动

应用场景:
①自己小范围移动
②配合绝对定位使用

3)绝对定位

position:absolute;

相对于已经定位的父元素定位
如果父元素没有定位,逐级往上找,最后相对于body定位
定位后原位置不保留
配合left、right、top、bottom移动

应用场景:
形成独立的一层

4)固定定位

position:fixed;

相对于浏览器窗口定位
定位后原位置不保留
配合left、right、top、bottom移动

应用场景:
固定在页面某个位置

5)堆叠顺序

z-index:number;

取值越大,层级越往上
可以取负值
同时定位后,后面的元素在上面
必须配合定位使用(relative、fixed、absolute)

16、display属性

display:	;
block  块级元素
inline  行内元素
inline-block 行内块,既在同一行显示,又可以设置宽高**行内块会识别代码之间的空白**常见行内块:img、input、button等
none   隐藏,隐藏后不占据位置
flex   弹性盒模型
table  表格
table-cell  单元格、

17、不占据页面位置的属性

display:none;
float:left|right;
position:absolute;
position:fixed;

元素默认宽度由内容撑开

18、display:none;
和visibility:hidden;
和opacity:0;
和overflow:hidden;的区别

display:none;  隐藏元素自己,隐藏后不占据位置
visibility:hidden;   隐藏元素自己,隐藏后原位置保留
opacity:0;      设置元素透明度为0,隐藏后原位置保留
overflow:hidden;    溢出部分隐藏

19、居中问题
1)元素内容水平居中

text-align:center;

2)一行文字垂直居中
行高等于高

line-height:;

3)块级元素水平居中

margin:0 auto;

4)多行内容垂直居中

自己    margin:   px 0;
父元素  padding:  px 0;

5)子元素在父元素中水平垂直居中
①宽度已知

<div class="box"><div class="box1"></div>
</div>

a、绝对定位

<style>.box{width: 400px;height: 400px;background-color: red;position: relative;}.box1{width: 100px;height: 100px;background-color: pink;position: absolute;left: 150px;top: 150px;}
</style>

b、绝对定位

<style>.box{width: 400px;height: 400px;background-color: red;position: relative;}.box1{width: 100px;height: 100px;background-color: pink;position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;}
</style>

c、margin

<style>.box{width: 400px;height: 400px;background-color: red;overflow: hidden;}.box1{width: 100px;height: 100px;background-color: pink;margin: 150px;   //子元素设置margin}
</style>

b、padding

<style>.box{width: 400px;height: 400px;background-color: red;padding: 150px;     //父元素paddingbox-sizing: border-box;}.box1{width: 100px;height: 100px;background-color: pink;}
</style>

e、弹性盒

<style>.box{width: 400px;height: 400px;background-color: red;display: flex;       //父元素开启弹性盒justify-content: center;align-items: center;}.box1{width: 100px;height: 100px;background-color: pink;}
</style>

f、表格法

<style>.box{width: 400px;height: 400px;background-color: red;/* 转换为单元格 */display: table-cell;/* 单元格内容垂直居中 */vertical-align: middle;/* 单元格内容水平居中 */text-align: center;}.box1{width: 100px;height: 100px;background-color: pink;display: inline-block;}
</style>

g、表格法

<style>.box{width: 400px;height: 400px;background-color: red;/* 转换为单元格 */display: table-cell;/* 单元格内容垂直居中 */vertical-align: middle;}.box1{width: 100px;height: 100px;background-color: pink;margin: 0 auto;     //子元素设置水平居中}
</style>

h、绝对定位配合位移

<style>.box{width: 400px;height: 400px;background-color: red;position: relative;}.box1{width: 200px;height: 200px;background-color: pink;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);  //位移}
</style>

②子元素宽高未知

<div class="box"><div class="box1">哈哈哈哈哈哈哈哈</div>
</div>

①弹性盒法

<style>.box{width: 400px;height: 400px;background-color: red;display: flex;      //开启弹性盒justify-content: center;align-items: center;}.box1{background-color: pink;}
</style>

②绝对定位配合位移

<style>.box{width: 400px;height: 400px;background-color: red;position: relative;}.box1{background-color: pink;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
</style>

20、三栏布局
左右两侧固定宽度,中间跟着浏览器缩放
1)弹性盒法

<div class="box"><div class="left"></div><div class="center"></div><div class="right"></div>
</div>
<style>.box{display: flex;}.left{width: 200px;height: 200px;background-color: pink;}.right{width: 200px;height: 200px;background-color: palegoldenrod;}.center{height: 200px;background-color: skyblue;flex-grow: 1;   //弹性盒子元素属性}
</style>

2)绝对定位法

<div class="box"><div class="left"></div><div class="center"></div><div class="right"></div>
</div>
<style>.box{position: relative;}.left{width: 200px;height: 200px;background-color: pink;position: absolute;top: 0;left: 0;}.right{width: 200px;height: 200px;background-color: palegoldenrod;position: absolute;top: 0;right: 0;}.center{height: 200px;background-color: skyblue;margin-left: 200px;margin-right: 200px;}
</style>

3)浮动

<div class="box"><div class="left"></div><div class="right"></div><div class="center"></div>
</div>
<style>.box{}.left{width: 200px;height: 200px;background-color: pink;float: left;}.right{width: 200px;height: 200px;background-color: palegoldenrod;float: right;}.center{height: 200px;background-color: skyblue;}
</style>

4)圣杯布局和双飞翼布局
中间部分最先加载

21、C3新特性
1)选择器
伪对象选择器 属性选择器 伪类选择器

2)弹性盒模型

display:flex;

3)圆角

border-radius: ;
border-radius: 50%;   //变圆

4)盒阴影

box-shadow: 水平方向偏移位置 垂直方向偏移位置 模糊度 阴影尺寸 颜色 位置(outset|inset);

5)字阴影

text-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 颜色;

6)背景渐变
①线性渐变

background: linear-gradient(渐变的方向,颜色1,颜色2,...);

②射线渐变

background: radial-gradient(渐变的中心点,渐变的形状,颜色1,颜色2,...);

7)转换 变型

transform:translate() rotate() scale() skew();

①位移 单位px

transform:translate(x,y);
transform: translateX();
transform: translateY();

②旋转 单位deg
正:顺时针
负:逆时针

transform: rotate(30deg);
transform-origin: right bottom;   //设置旋转中心为右下,默认为中心

③缩放
取值 0-1 缩小, >1 放大 ,默认值1
取一个值==等比例放大/缩小

transform: scale(x,y);
transform: scaleX();
transform: scaleY();

④倾斜 单位deg

transform: skew(x,y);
transform: skewX();
transform: skewY();

8)过渡

transition:过渡的属性 持续时间 速度变化类型 延迟时间;

①过渡的属性——必须

transition-property: all;

可以过渡的属性:


取值为颜色
取值为数值
变形(转换)transform
背景渐变 xxxxx-gradient
阴影 shadow


②过渡的持续时间——必须

transition-duration: 	s|ms;

③过渡的速度变化类型——可选

transition-timing-function: 	;
ease  默认值 先加速后减速
ease-in  加速
ease-out 减速
ease-in-out  先加速后减速
linear  匀速

④延迟时间——可选

transition-delay: s|ms;

9)动画
①定义动画

@keyframes name{0%{}百分比{}100%{}
}

②调用动画

animation: name duration timing-function delay iteration-count direction fill-mode;
animation-name: ;  ——必须   动画名称
animation-duration: ;  ——必须  持续时间
animation-timing-function: ;   速度变化类型
animation-delay: ;  延迟时间
animation-iteration-count: infinite|number;  播放次数
animation-direction: alternate;  播放方向
animation-fill-mode:forwards;   动画停在最后一帧animation-play-state:running| paused;  动画播放状态

10)媒体查询
响应式布局
内部引入:

/* 移动端 */
@media screen and (max-width: 768){}
/* iPad端 */
@media screen and (min-width: 768) and (max-width: 992px){}
/* pc端 */
@media screen and (min-width:992px) {}

外部引入:

<!-- 移动端 --><link rel="stylesheet" href="" media="only screen and (max-width:768px)"><!-- iPad端 --><link rel="stylesheet" href="" media="only screen and (min-width:768px) and (max-width:992px)"><!-- pc端 --><link rel="stylesheet" href="" media="only screen and (min-width:992px)">

11)多列
报纸类型布局:

column-count: ;  列的数量
column-gap: ;    列之间的距离
column-rule: 1px solid red;   列之间的边框

12)厂商前缀
解决c3新特性兼容性问题

浏览器       厂商前缀      内核
谷歌         -webkit-     blink
苹果         -webkit-     webkit
火狐         -moz-        gecko
欧朋         -o-          blink
IE           -ms-         trident

13)css hack
解决IE6 7 8
①条件hack

<!--[if 条件]><![end if]-->

②属性前缀和后缀

前缀 + - * # _
后缀  \0  \9   \9\0  !important

14)iconfont 字体图标
准备:
前往阿里巴巴矢量图标库(iconfont)
选取需要的图标
添加到购物车
下载代码
解压到css文件夹下

使用:
①引入

<link rel="stylesheet" href="css/iconfont.css">

②元素使用
打开相应的iconfont.html 复制代码&#xe64d;

<span class="iconfont">&#xe64d;</span>

本文标签: HTMLCSS学习总结