欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Html和CSS总结

程序员文章站 2022-06-22 11:53:57
1、HTML介绍超文本标记语言后缀 .html 或者 .htm作用:写网页结构内容2、DOCTYPE的作用文档类型声明告诉浏览器按当前标准解析代码HTML4.01 过渡 框架 严格XHTML:严格的HTML3、标签、标记双标记 封闭类型标记h1-h6,p,div,span,a,b,i,u,del,s,sup,sub,em,strong,ul,ol,li,dl,dt,dd,table,tr,td,th,form,button,header,nav,footer,sect...

1、HTML介绍
超文本标记语言
后缀 .html 或者 .htm
作用:写网页结构内容

2、DOCTYPE的作用
文档类型声明
告诉浏览器按当前标准解析代码
HTML4.01 过渡 框架 严格
XHTML:严格的HTML

3、标签、标记
双标记 封闭类型标记
h1-h6,p,div,span,a,b,i,u,del,s,sup,sub,em,strong,ul,ol,li,dl,dt,dd,table,tr,td,th,form,button,header,nav,footer,section,aside,article,video,audio…
单标记 非封闭类型标记 空标记
br,hr,img,input,link,meta,source…

4、元素
块级元素和行内元素的区别:
1)块级元素独占一行,行内元素在同一行显示
2)块级元素默认宽度为100%,行内元素默认宽度由内容撑开
3)块级元素可以设置宽高,行内元素设置宽高不生效
4)块级元素可以margin和padding的四周,行内元素只能设置margin和padding的左右
5)布局时,块级元素可以包含块级元素和行内元素,行内元素一般不要包含块级元素
6)块级元素默认display:block;行内元素默认display:inline;
7)块级元素
div,hn,p,ul,ol,li,dl,dt,dd,table,tr,td,th,form,header,nav,footer,section,aside,article…
8)行内元素
a,span,img,video,audio,b,i,u,s,del,sup,sub,em,strong,input,button…

5、表单
1)作用
提交数据,使页面具有交互性
2)标签

get和post的区别:
①get提交数据不安全,post安全
②get提交数据大小有限制,post理论上没有限制
3)表单元素
Html和CSS总结
4)属性
value 当前值
name 名称
checked 默认被选中,配合单选按钮和多选按钮使用
selected 默认显示,配合option使用
readonly 只读
disabled 禁用

5)HTML5新增type类型(了解)
Html和CSS总结
6)属性
placeholder="" 默认提示
required 必填项
autofocus 自动获取焦点
multiple 可以输入多个,用逗号隔开,一般配合邮箱和网址使用
min和max 最小值和最大值,配合数字和范围使用
minlength和maxlength 最小长度和最大长度

6、HTML5新增语义化布局标签
Html和CSS总结
7、视频和音频
1)视频

<video src="">
<video src="路径" autoplay loop controls muted width="" height="" poster="">
    您的浏览器不支持视频
</video>

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

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

8、语义化
正确的标签干正确的事情,看到标签知道表示的意义
优点:
1)有利于搜索引擎取收录
2)有利于屏幕阅读者去读取
3)有利于开发与维护

1、css介绍
层叠样式表 级联样式表 简称样式表
文件后缀 .css
作用:实现了内容与表现的分离,提高了代码的可重用性和可维护性

2、引入css的方式
1)行内样式 内联样式 只对当前元素生效

<div style="css样式"></div>

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

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

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

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

4)导入式

<head>
    <style>
        @import "";
    </style>
</head>

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

3、选择器
1)基础选择器
1、全局选择器
*{}
选中页面所有元素

2、元素选择器
div{}
a{}
img{}
选中所有指定的元素

3、类选择器
.className{}
类名可以重复,一个class可以起多个名字,用空格隔开

4、ID选择器
#IdName{}
ID名字唯一

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

5、合并选择器
选择器1,选择器2,…{}
2)关系选择器
1、后代选择器
选择器1 选择器2{}
选中所有后代

2、子代选择器
选择器1>选择器2{}
选中所有直接子代

3、相邻兄弟选择器
选择器1+选择器2{}
平级 挨着 后面的一个兄弟

4、通用兄弟选择器
选择器1~选择器2{}
平级 后面 的所有兄弟

3)伪类选择器
:link 点击之前
:visited 点击之后
:hover 鼠标悬停
:active 鼠标按下
先爱后恨的顺序

:fist-child 第一个子元素是…
:last-child 最后一个子元素是…
:nth-child(number|even|odd|倍数) 第几个子元素是…

:only-child 唯一一个子元素是…
:empty 空的子元素是…
:not(选择器) 否定

表单:
:focus 获取焦点
:checked 被选中时

4)伪元素选择器

:before|::before{
    content:"";l
}

:after|::after{
    content:"";
}

5)属性选择器(了解)
[属性]
[属性=属性值]
元素[属性 = “属性值”]
元素[属性 ^= “值”] 以什么开头
元素[属性 &= “值”] 以什么结尾
元素[属性 *= “值”] 包含

4、背景属性
1)背景颜色
background-color: transparent;

2)背景图片
background-image: url("");

3)背景图片是否平铺
background-repeat: no-repeat;

4)背景图片的大小
baseline-shift: x y;

5)背景图片定位
background-position: x y;

6)背景图片固定
background-attachment: fixed;

7)简写
background: ;

5、雪碧图
1)原理
background: url("") no-repeat;
background-position: ;

2)优点
1、减少页面的http请求
2、减少图片的字节数
3、减少命名的困扰

6、字体
1)字体颜色
color: ;
2)字体是否加粗
font-weight: 100-900|normal|bold;

3)字体大小
font-size: 16px;

4)字体样式
font-style: normal|italic;

5)字体
font-family: ;
7、文本属性
1)元素内容的水平对齐方式
text-align:left|center|right;

2)文本装饰
text-decoration:underline|none;

3)英文字母大小写转换
text-transform:uppercase|lowercase|capitalize;

4)首行缩进
text-indent:;
单位:
px 绝对单位
em 相对单位 相对当前字体大小 默认 1em = 16px

8、列表属性
1)设置项目符号
list-style-type:none ;
2)设置项目符号为图片
list-style-image:url() ;
3)设置项目符号位置
list-style-position:outside| inside;
4)简写
list-style: ;

9、表格属性
1)设置边框
border:1px solid red;

2)设置边框折叠
border-collapse:collapse;

3)设置内容距边框的距离
padding:;

4)设置表格的大小
width:;
height:;

5)表格水平居中
margin:0 auto;

6)表格内容水平对齐
text-align:left|center|right;

7)表格内容垂直对齐
vertical-align:middle|top|bottom;

8)表格的背景颜色
background-color:;

9)表格的背景图片
background-image:url();

10、内容溢出
overflow:hidden(溢出部分隐藏)|auto|scroll;

11、一行文字溢出省略号显示
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

12、盒模型
1)标准盒模型 w3c盒模型
1、组成部分
content+padding+border+margin

2、实际宽度
width+padding+border+margin

3、content 内容区域
width:; 元素的宽度 px %(相对于父元素)
height:; 元素的高度 px %(相对于父元素)

min-width:; 最小宽度
max-width:; 最大宽度
min-height:; 最小高度
max-height:; 最大高度

默认情况下,块级元素宽度为100%,行内元素宽度由内容撑开
默认高度都由内容撑开

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

4、border 边框
border-style:solid(实线)|dashed(虚线)|dotted(点线)|double(双实线,要求边框至少为3px)|none(不显示); 必须属性 默认边框为黑色 3px
border-color:; 边框的颜色
border-width:; 边框的宽度

简写:border:边框的宽度 边框的样式 边框的颜色; 设置四周的边框
例子:border:1px solid red;

单边的边框:

border-top:1px solid red;
    border-top-width:;
    border-top-style:;
    border-top-color:;
border-bottom:1px solid red;
    border-bottom-width:;
    border-bottom-style:;
    border-bottom-color:;
border-left:1px solid red;
    border-left-width:;
    border-left-style:;
    border-left-color:;
border-right:1px solid red;
    border-right-width:;
    border-right-style:;
    border-right-color:;

5、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会撑大容器

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

margin:value; 四周
margin:value value; 上下 左右
margin:value value value; 上 左右 下
margin:value value value value; 上 右 下 左

margin-top:;
margin-bottom:;
margin-left:;
margin-right:;

注意:
1)块级元素水平居中
div{
width:;
margin:0 auto;
}
2)垂直方向上外边距合并问题
当垂直方向上外边距相撞时,取较大值
浮动元素不合并

3)margin-top问题
第一个块级子元素设置margin-top,父元素会一起下来
解决:
1、父元素加overflow:hidden;
2、父元素或者子元素浮动
3、父元素加border:1px solid transparent;
4、父元素加padding-top:1px;

2)怪异盒模型 IE盒模型
1、组成部分
content+padding+border+margin

2、实际宽度
width+margin
width包含了padding和border

3、盒模型相互转换
box-sizing:content-box; 默认值,标准盒模型
box-sizing:border-box; 怪异盒模型

3)弹性盒模型 伸缩盒模型 flexbox
1)父元素上的属性
①开启弹性盒模型
display:flex;
子元素默认水平排列

②设置弹性盒的方向
flex-direction:;
row:默认值 子元素水平排列
column:子元素垂直排列
row-reverse:子元素水平方向倒序排列
column-reverse:子元素垂直方向上倒序排列

③设置子元素在主轴的对齐方式
默认,x轴为主轴,y轴为侧轴
当flex-direction:column;,y轴为主轴,x轴为侧周

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

④设置子元素在侧轴的对齐方式
align-items:;
flex-start:默认值 弹性盒的开始
flex-end:弹性盒的结束
center:居中

2)子元素上的属性
flex-grow:number;
设置子元素宽度之间的比例(分配父元素剩下的距离)

9、定位
1)普通流定位
2)浮动定位
3)相对定位
4)绝对定位
5)固定定位

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

2)语法
float:left|right|none;

3)清除浮动的影响
1、浮动元素的父元素加overflow:hidden;
2、浮动元素的父元素设置高度
3、受影响的元素加clear:both;
4、空div法
浮动元素后面加空div
给空div clear:both;
5、伪对象法
浮动元素的父元素::after{
content:"";
display:block;
clear:both;
}

11、元素定位 position
1)静态定位 static 默认值
2)相对定位 relative
相对于自己原位置定位
定位后原位置保留
配合left、right、top、bottom移动

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

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

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

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

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

5)z-index:;
取值越大,层级越往上
可以取负值,不推荐
必须配合定位使用

12、居中问题
1)元素内容水平居中
text-align:center;

2)块级元素水平居中
margin:0 auto;

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

4)多行内容垂直居中
padding:20px 0;

5)子元素在父元素中水平垂直居中

<div class="parent">
    <div class="child"></div>
</div>

1、弹性盒法

<style>
    .parent{
        width: 500px;
        height: 500px;
        background-color: red;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>

2、margin计算法

<style>
    .parent{
        width: 500px;
        height: 500px;
        background-color: red;
        overflow: hidden;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: green;
        margin-top: 150px;
        margin-left: 150px;
    }
</style>

3、padding计算

<style>
    .parent{
        width: 500px;
        height: 500px;
        background-color: red;
        padding-top: 150px;
        padding-left: 150px;
        box-sizing: border-box;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>

4、margin

<style>
    .parent{
        width: 500px;
        height: 500px;
        background-color: red;
        overflow: hidden;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: green;
        margin: 150px auto;
    }
</style>

5、绝对定位计算法

<style>
    .parent{
        width: 500px;
        height: 500px;
        background-color: red;
        position: relative;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: green;
        position: absolute;
        top: 150px;
        left: 150px;
    }
</style>

6、绝对定位

<style>
    .parent{
        width: 500px;
        height: 500px;
        background-color: red;
        position: relative;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: green;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
    }
</style>

7、translate

<style>
    .parent{
        width: 500px;
        height: 500px;
        background-color: red;
        position: relative;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: green;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>

13、三栏布局

<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

1)弹性盒

<style>
    .box{
        display: flex;
    }
    .left{
        width: 200px;
        height: 200px;
        background-color: palegreen;
    }
    .right{
        width: 200px;
        height: 200px;
        background-color: palegoldenrod;
    }
    .center{
        height: 200px;
        background-color: paleturquoise;
        flex-grow: 1;
    }
</style>

2)绝对定位

<style>
    .box{
        position: relative;
    }
    .left{
        width: 200px;
        height: 200px;
        background-color: palegreen;
        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: paleturquoise;
        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{
        position: relative;
    }
    .left{
        width: 200px;
        height: 200px;
        background-color: palegreen;
        float: left;
    }
    .right{
        width: 200px;
        height: 200px;
        background-color: palegoldenrod;
        float: right;
    }
    .center{
        height: 200px;
        background-color: paleturquoise;
    }
</style>

14、css3新特性
1)选择器(伪类选择器、伪对象选择器、属性选择器)
2)弹性盒
3)圆角
border-radius: ;
4)盒阴影
box-shadow: 水平方向偏移位置 垂直方向偏移位置 模糊度 扩展值 颜色 位置;
5)字阴影
text-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 颜色 ;
6)背景渐变
①线性渐变
background: linear-gradient(to right,red,yellow,green);
②射线渐变
background: radial-gradient(top,circle,red,yellow,green);
7)转换 transform
1)作用
使元素在位置或者形状上发生一定的改变
2)属性
transform:translate() rotate() scale() skew();
3)属性值
①位移 单位px %
transform:translate(x,y);
当只取一个值,表示水平方向
当取两个值,表示水平和垂直方向

transform:translateX();
transform:translateY();

取正值,右下走
取负值,左上走

②旋转 单位deg(弧度)
transform:rotate();
取正值,顺时针旋转
取负值,逆时针旋转

注意:
a、默认旋转的中心点为宽高的一般
transform-origin:; 修改元素的中心点
b、旋转会旋转整个坐标轴,当位移和旋转同时存在,推荐位移写在旋转的前面
③缩放 取值为number 0-1 缩小 , >1 放大 , 默认为1
transform:scale(x,y);
当只取一个值,等比例缩放
当取两个值,表示水平方向和垂直方向

transform:scaleX();
transform:scaleY();

④倾斜 单位deg
transform:skew(xdeg,ydeg);
当只取一个值,表示水平方向
当取两个值,表示水平和垂直方向

注意:
倾斜的弧度不要是直角

transform:skewX();
transform:skewY();

8)过渡
①属性
transition:all 持续时间 速度变化类型 延迟时间;

②属性值
1、过渡的属性
取值为数值
取值为颜色
阴影
转换
背景渐变

简写all

2、持续时间 单位s|ms

3、速度变化类型
ease 默认值 先加速后减速
ease-in 加速
ease-out 减少
ease-in-out 先加速后减速
linear 匀速

4、延迟时间 s|ms

9)动画
①动画和过渡的区别
a、过渡只能制作简单的动画,动画可以制作复杂的动画
(过渡是从一个样式变化到另外一个样式,动画可以控制过程)
b、过渡必须有触发事件,动画可以没有
c、动画可以控制播放次数

②定义动画
@keyframes name{
0%|from{
cs样式
}
任意百分比{
css样式
}
100%|to{
css样式
}
}

@-webkit-keyframes
@-moz-keyframes
@-o-keyframes
@-ms-keyframes
③调用动画
animation:name 持续时间 速度变化类型 延迟时间 播放次数(numbeinfinite) 播放方向(alternate) 动画停在最后一帧(forwards);

animation: name duration timing-function delay iteration-coundirection fill-mode;

④动画的属性(了解)
animation-name: ; 动画的名称 必选
animation-duration: 0s|0ms; 必选
animation-timing-function:ease|ease-in|ease-out|ease-in-out|linear ; 可选
animation-delay:0s|0ms ; 可选 可以取负值
animation-iteration-count:number|infinite(无限播放) ; 可选
animation-direction: alternate(偶数次倒着播放); 可选
animation-fill-mode: forwards(动画停在最后一帧); 可选

animation-play-state: running(默认值)|paused(暂停); 动画的播放状态

10)媒体查询
①作用
实现响应式布局
响应式布局:写一次样式适用所有的终端

②viewport 视口
为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元数据标签。

禁用其缩放(zooming)功能:

③语法
宽度>=992 pc端
宽度<992并且宽度>=768 ipad端
宽度<768 移动端

内联:(写在统一css文件内)
@media screen and (max-width:768px){
移动端的样式
}
@media screen and (min-width:768px) and (max-width:992px){
iPad端的样式
}
@media screen and (min-width:992px){
pc端的样式
}

外部:(写在不同的css文件内)

<link rel="stylesheet" href="" media="only screen and (max-width:768px)">
<link rel="stylesheet" href="" media="only screen and (min-width:768px) and (max-width:992px)">
<link rel="stylesheet" href="" media="only screen and (min-width:992px)">

11)厂商前缀
浏览器对css3新特性的支持

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

12)css hack
解决IE6 7 8
①条件注释

<!--[if IE 7]>

<![endif]-->

②属性前缀和后缀
前缀 + - _ * #
后缀 \0 \9 \9\0 !important

13)多列
把一个元素内的文本分成多列
column-count:number; 设置列的数量
column-gap:; 设置列之间的距离
column-rule:; 设置列之间的边框

本文地址:https://blog.csdn.net/Yanxiaona111/article/details/107525520

相关标签: html html5 css