最全 HTML + CSS 笔记

最新推荐文章于 2023-04-20 10:46:49 发布

The_RedMaple

最新推荐文章于 2023-04-20 10:46:49 发布

阅读量810

点赞数 2

分类专栏：前端文章标签： html java css

本文链接：https://blog.csdn.net/The_RedMaple/article/details/118606752

版权

前端专栏收录该内容

13 篇文章 2 订阅

订阅专栏

W3C标准
控制浏览器三要素
——控制浏览器发送的请求地址
 ——控制浏览器发送请求方式
 ——控制浏览器发送请求的携带参数
HTML编程语言
——HTML标签属性分类
 ——html标签
 ————meta 标签
 ————a 标签
 ————图片类型
 ————webp图片格式
 ————base64
————内联框架
 ————引入音频
 ————转义符
CSS编程语言
——css文件
 ——CSS选择器
 ——伪类
 ————超链接的伪类
 ——伪元素
布局
——盒子模型
 ——边框三样式
 ——内边距
 ——外边距
 ——外边距折叠
 ——溢出处理
 ——盒子大小
 ——行内元素的盒模型
 ——轮廓和阴影
 ——圆角
 ——浮动
 ————高度塌陷
 ————clear属性
 ——定位
 ——字体
 ————图标字体
 ————行高
 ——文本
 ——背景图片
 ————渐变
 ————径向渐变
 ——表格
 ——表单
 ——transition
————动画
 ————transform
————旋转
 ——变量设置
 ——弹性盒
 ——移动端
 ——响应式布局
less语言
——变量
零散笔记

W3C标准

HTML 对应结构
CSS 对应表现
JavaScript 对应行为

控制浏览器三要素

1、控制浏览器发送的请求地址

<a href='请求地址'></a>:超链接标签命令，标签中间写上提示信息
<form action='请求地址'><input type=submit value="新浪"><form>:
表单标签submit意为提交按钮

2、控制浏览器发送请求方式

GET请求方式

携带的请求参数数量不超过4K

请求参数一定会在地址栏上展示出来

必须将参数信息保存在Http请求协议包的请求头中

必须要求浏览器将服务器返回的资源文件进行保存

POST请求方式

可以携带任意数量的请求参数

地址栏会隐藏参数信息，安全性高

必须将参数信息保存在Http请求协议包的请求体中

禁止浏览器将服务器返回的资源文件进行保存

POST请求方式，就意味着可以上传自己的文件进入网站

超链接标签命令对应的一定是GET方式

<form action='请求地址' method='GET/POST'>:可以控制请求方式

必须使用POST方式的场景：

1.需要文件上传

2.发起登录验证请求，防止信息泄露

3.实时数据需要刷新

3、控制浏览器发送请求的携带参数

请求参数格式：请求地址?请求参数1=值&请求参数2=值

请求参数来源：

超链接
不灵活

<a href='http://www.4399.com'?username=mike&password=123></a>

表单格式
提示用户填写相关的内容，更为灵活

<form action='请求地址' method='GET/POST'>
	<input type='text' name='userName'>
	<input type='submit'>
</form>

作为请求参数的要求：

必须要name属性，否则提交无效
必须要在 <form> </form> 标签栏中

HTML编程语言

超文本标记式编译语言，不区分大小写

HTML标签属性分类

基本属性
样式属性
工作状态属性（只存在在表单标签中）
disabled：不能修改内容，并且不发送请求参数
readonly：只读，不能修改内容
checked：表示被选中
selected：表示在option标签中，被选中
监听属性

html标签

meta 标签

<meta charset=utf-8> <meta>			  用来设置网页的元数据
<meta name=keyword content=网上购物,网上吃饭>
					设置了该网页的关键字为网上购物和网上吃饭
<meta name=description content=''> 
									   		网页的描述信息
<meta http-equiv=“refresh” content="3;url=http://www.baidu.com">
								该网页3秒后自动跳转到url网址

a 标签

<a target='_blank'>		超链接在新的标签页打开
<a href='#'>			超链接回到页面顶部
<a href='#id'>			超链接到到达id所在的标签,id必须以字母开头

图片类型

<img src=''>	src可以写网页上的链接，这样就可以引入网上的图片
				img标签是替换元素，介于块元素和行内元素之间

<img alt=''>	默认情况下不显示，但是有些浏览器会在图片无法加载时显示
				搜索引擎会根据alt来识别图片
				
<img title=img_name>		光标停留图片上会返回文字在光标上

webp图片格式

颜色丰富，支持动图，支持透明，占空间小
致命缺点，兼容性不好，老版本浏览器不能用

base64
对图片进行编码，转化成字符，减少空间占用

优点：可以和网站同时加载出来，速度快

内联框架
向当前界面引入一个 外部页面

<iframe src="" width="" height="" frameborder="0">
									引入src网址,设置高宽，不显示边界

引入音频

<audio src=' ' controls autoplay loop></audio>

controls表示允许用户来控制播放，autoplay表示自动播放,loop循环播放

<audio controls>
	对不起，您的浏览器不支持该播放器
	<source src="">
</audio>

这种写法，在浏览器不支持的情况下会自动忽略aduio标签，但是文字不能被忽略
所有会返回一段文字给用户

<video src=""></video>属性和audio相同的

转义符

&nbsp		转义为空格
&gt			转义为小于号
&lt			转义为大于号

CSS编程语言

用于定位浏览器中HTML标签并对定位的HTML标签中的样式属性进行统一管理

css文件

外部的css文件，可以使用到浏览器缓存机制，从而加快网页的加载速度

1.写一个.css文件
2.在 head 标签中引入 <link rel = “stylesheet” href=" ">

其中 stylesheet 意为样式表

CSS语法

CSS的注释符号 : /* 注释内容*/
声明块里的语句需要以 " ; " 结尾

CSS选择器

实际上就是一组HTML定位条件

元素选择器

标签名{}

id选择器

#id{}

类选择器

.class{}

class 也是一个属性标签，与 id 相似，但是 class 可以重复
并且一个标签可以有多个class，如：class=“abc bcd”

通配选择器

*{}

交集选择器

div.red{}

必须以元素选择器开头

选择器分组

h1,span{}

同时使用多个选择器，给相同的赋值

父子选择器

div > span{}

span是直接子标签

div span{}

span是后代元素

p * span{}

span是兄弟

p ~ span{}

p的所有的span兄弟

属性选择器

p[属性名]{}

p中有该属性的元素

p[属性名 ^= abc]{}

^= 意思是以 abc 为开头，同样 $= 意为以 abc 结尾， *= 意为包含 abc 就可以了

伪类

li:first-child{}					第一个子元素
li:last-child{}						最后一个子元素
li:nth-child(i)						第i个子元素
li:nth-child(2n)					偶数元素
li:first-of-type					只在type类型里的第一个
li:not()								否定伪类

超链接的伪类

a:link{}			link表示正常的链接

a:visitied{}		visited表示访问过的链接
					由于隐私问题，visited只能设置颜色

a:hover{}			表示光标停留的链接

a:active{}			表示点击那一时刻的链接

伪元素

表示页面中一些并不真实存在的元素，即特殊的位置

p::first-letter{}			首字母

p::first-line{}				首行

p::selection{}				选中的内容

p::before{}					元素开始前的位置

p::after{}					元素结尾的位置

布局

盒子模型

边框三样式（宽度，颜色，样式）

border-width:10px,20px,30px,40px;	边框为上，右，下，左
border-color:red;
border-style:solid; 				实线

dotted 点状虚线
dashed 虚线
double 双线

border: 10px red solid; 简写

border-right:none; 右边不需要边框

内边距

padding:10px,10px,10px,10px;

外边距

margin:10px,10px,10px,10px;

外边距折叠

兄弟关系的div垂直方向的margin会重叠
子标签的margin大于父标签的，则取子标签的margin，这叫做外边距的折叠现象

溢出处理

overflow:visible/hidden/scroll/auto;
		默认可视，隐藏，生成滚动条（两条），自动生成滚动条

overflow-x,overflow-y		  水平和垂直方向上的溢出处理

盒子大小

box-sizing:border-box/content-box;	
设置盒子大小由（内容区+边缘）/（内容区）来决定

行内元素的盒模型

display:inline / block/inline-block/table/none
		行内元素，块元素，行内块元素,表格，隐藏

visibility:visible/hidden;	
		设置为显示，隐藏（这个隐藏，位置还是会保留）

轮廓和阴影

outline:10px red solid;		轮廓不会影响到可见框的大小

box-shadow:20px 20px 10px 10px rgba(0,0,0,.5);
阴影水平偏移量 垂直偏移量 水平阴影模糊半径 垂直阴影模糊半径 颜色

圆角

boerder-top-left-radius:50px 20px;		圆角水平半径 垂直半径
boerder-radius: 50px 50px 50px 50px;	简写

浮动

网页的最下面一层就是文档流，是网页的基础

float:left/right/none;

图片浮动之后，文字不会被覆盖（脱离文档流），而是文字环绕图片的效果

浮动之后，不需要再区分块元素和行内元素

高度塌陷

父元素中子元素浮动后，导致父元素没有子元素撑开，导致高度塌陷

BFC ( Block Formatting Context ) 块级格式化环境

开启BFC的元素不会被浮动元素覆盖
子元素和父元素外边距不会重叠
可以包含浮动的子元素

开启BFC的方法

设置浮动
将元素设置为行内块
overflow设置为非visible（最常用）

clear属性

清除浮动元素对当前元素的影响

clear:left/right/both;

both清除两侧中大的那一侧的影响

.clearfix::before,
.clearfix::after{
	content:'';
	display:table;
	clear:both;
}

可以 同时解决高度塌陷和外边距重叠 的问题

定位

position:static/relative/absolute/fixed/sticky;
	未开启定位/相对定位/绝对定位/固定定位/粘滞定位

relative

坐标原点是元素本身，即参照物是元素未移动前的位置

absolute

开启后，元素会脱离文档流，并且不分块和行内元素

参照物 是开启了定位的 最近的祖先元素

fixed

与绝对定位唯一区别是参照物是网页本身

固定定位元素不会随滚动条移动

sticky

较新的定义方式，兼容性不高

和相对定位基本一样，区别在元素到达某一固定位置后就不动了

层级

z-index:i;

i越大，层级越大

字体

网页中字体大小最小为12px，除非大小是0

font-family：serif 衬线字体/sans-serif 非衬线字体/monospace 等宽字体

@font-face{
	font-family:' ';
	src:url(' ')；
}
可以引入服务器中的字体，其中font-family为字体取的名字，src为字体的路径

图标字体

引入 css 和 webfonts 文件夹到项目下
<link rel=“stylesheet” href="">
<i class=“fas Img_Name”> 或者 <i class=‘fas’>&#x编码</i>

行高

line-height:2; 	如果直接填写数字，意为当前字体大小的整数倍

font-style:italic/normal;	斜体/正常

font:字体大小/行高 字体族	 	简写

默认行高1.3333

文本

text-align:center/justify;		居中对齐/两端对齐

vertical-align:baseline/top/bottom/middle;
vertical-align:100px;				垂直调整

text-decoration:none/underline/line-through/overline color;
						无、下划线、删除线、上划线  颜色

white-space:nowrap/pre;			不换行、保留空白

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;			打出省略号（三个属性缺一不可）

背景图片

background-image:url('');

background-repeat:repeat-x/repeat-y/no-repeat;
									背景图片横向重复，纵向重复，不重复

background-position:top center;					背景图片位置
background-position:10px 30px;

background-clip:border-box/padding-box/content-box;
					(默认)背景出现在边框下/背景在内容区和内边距/背景只出现在内容区

background-origin:padding-box/content-box/border-box;
									背景图片的原点在内边距(默认)/内容区/边界

background-size:10px 10px/cover/contain;
								设置背景图片大小/比例不变平铺/比例不变下完全显示

background-attachment:scroll/fixed;
										背景图片跟随元素移动/不跟随移动

渐变

background-image:linear-gradient(to right,red,yellow);		向右线性渐变
background-image:linear-gradient(45deg,red,yellow);			45度线性渐变
background-image:linear-gradient(red,yellow,green,blue);	多色线性渐变
background-image:linear-gradient(red 50px,yellow);			从50px位置开始渐变

background-image:repeating-linear-gradient(red,yellow);		平铺渐变

径向渐变

background-image:radial-gradient(100px 100px at 0 0,red,yellow);
											径向渐变,100px为渐变半径,(0,0)是原点

background-image:radial-gradient(farthest-side at 0 0,red,yellow);
											渐变到最远的一条边为半径

background-image:radial-gradient(closest-side at 0 0,red,yellow);
											渐变到最近的一条边为半径

background-image:radial-gradient(closest-corner at 0 0,red,yellow);
											渐变到最近的角为半径

表格

<tr>					表格行
<td>					单元格
<td rowspan=n>			单元格占n行
<td colspan=n>			单元格占n列

表格可以分为三个部分：thead头部 / tbody主体 / tfoot底部

<tr>不是<table>的子元素，而是<tbody>的子元素

border-spacing:0px;				指定边框之间的距离
border-collapse：collapse;		边框合并

tr:nth-child(2n+1){
	background-color:green;
}								控制表格单数行的颜色

display:table-cell;
vertical-align:middle;			将元素设置为单元格，可以直接设置垂直居中

表单

<form action=''></form>				action为表单提交的地址
<input type="submit" value="">		value中为按钮显示的文字
<form method="post">				指定发送请求方式
<form disalbled="disabled">			设置表单项为不可用

<button type=""></button>	
双目的按钮标签，功能更加的多，可以在里面放入图片作为标签样式

autocomplete='off'/'on'	开启/关闭自动补全
autofocus			自动获取光标焦点(不常用)

表单域标签分类

第一种
<input type=text>								文本框
<input type=submit>								提交按钮
<input type=password>							密码框
<input type=radio name=NAME value='value'>		一组单选框，单选框以name来识别分组
<input type=checkbox name=NAME value='value'>	多选框
<input type=file name=NAME>						文件选择框
<input type=reset>								重置按钮

第二种
<select></select>								下拉标签
<select name=NAME>
	<option value='bj'>北京</option>
	<option value='sh'>上海</option>
</select>

第三种
<textarea name=NAME rows=10 cols=10></textarea>	多行文本框

transition

transition-property:all/width/height;					   变换的部位
transition-duration:1000ms/1s;

transition-timing-function:ease/linear/ease-in/ease-out/ease-in-out;
					先加速后减速/匀速运动/加速运动/减速运动/先加速后减速

transition-timing-function:cubic-bezier();
https://cubic-bezier.com								  时序函数网址

transition-timing-function:steps(3,end/start);
										  分步执行,在时段结束/开始是执行
										  	
transition-delay:2s;											  延时

transition:margin-left 3s;										  简写
overflow:hidden;										  可以一起联用

动画

@keyframes test{	
	from{
		margin-left:0;
	}
	to{
		margin-left:100;	
	}
}							定义动画

animation-name:test;		调用动画
animation-duration:2s;

独特属性

animation-iteration-count:20/infinite;		循环20/无限次
animation-direction:reverse/alternate/alternate-reverse;
					倒播/正反来回播放/开始先反，后正反循环

animation-play-state:paused/running;		    暂停/运行
animation-fill-mode:forwards/backwards/both;
动画播放完毕停止在to位置/在延时等待是就进入from状态/结合两者

transform

transition:transform 0.3s;			开启平移变化
transform:translateX();				x轴平移

html{
	perspective:800px;
}
transform:translateZ();				z轴平移

旋转

transform:rotateZ(360deg);			沿着Z轴旋转
backface-visibility:hidden;			背面不显示

transform-style:preserve-3d;		开启3D效果

transform:scaleY(2);				沿Y轴放大两倍
transform:scale(2);					XY轴都放大两倍
transform:scaleZ();					必须开启3D效果
transform-origin:20px 20px;			变形原点

变量设置（兼容性不高）

html{
	--color:red;
}					定义变量
var(--color);		调用变量

clac(220px*2);		自动计算

弹性盒(flex)

主轴：元素排列的方向

弹性容器的直接子元素才是弹性元素

display:flex/inline-flex;									设置弹性容器
flex-direction:column/column-reverse/row/row-reverse
			设置弹性元素在容器中的排列方式(自上向下、自下向上、默认、自右向左)

主轴元素

flex-basis:100px;			元素基础长度
flex-grow:m;				当父元素有剩余空间时，将空间分到m/n,n为元素个数
flex-shrink:m;				当父元素空间不足是，按m的比例进行收缩
flex-wrap:wrap;				沿辅轴自动换行
flex-wrap:wrap-reverse;		沿辅轴反向换行

主轴空白

justify-content:flex-start/			靠着开始位置
				flex-end/center/	靠着结束位置
				space-around/		居中
				space-evenly/		平均分配到两侧
				space-between;		平均分配到每一个元素两侧，平均分配在两元素之间

辅轴元素

align-items:stretch/flex-start/center/baseline;
所有元素设置为一样长，不会拉长并且沿开始位置对齐，居中对齐，基线对齐

辅轴空白

align-content:和主轴相同
align-self:用来设置当前元素的align属性

order:1;		当前元素在元素中排第一个

flex-flow:是wrap 和 direction 的简写属性

移动端

移动端的CSS像素都默认为980px

<meta name='viewport' content='width=100px'>				设置像素比
<meta name='viewport' content='device-width,initial-scale=1.0'>
					device-width设备完美视口，initial-scale初始化缩放为1倍

vw单位

100vw=视口宽度
永远相对于视口宽度来计算，而不是父元素

响应式布局

媒体查询

@media all,print,screen,speech{
	//所有设备,打印机,显示器,屏幕阅读器
}
@media (width:500px){
	//当视口宽度为500px时
}
@media (min-width:100px) and (max-width:200px){}

less语言

// 这种注释不会被放入css源文件中
/**/ 这种注释会被解析到css文件中
数值(像素)可以直接运算

变量

@a:100px;
@c:box1;
$width;	可以直接对属性进行应用
&	表示外层的父元素本身
.p2:extend(.p1){}	继承p1的属性样式

.p3{
	.p1();	
}		对p1的样式进行复制

.p(@w){
	width:@w;	//创建一个mixins(通用样式模块)
}			//可以给w传值

.@{c}{
	//类变量调用
}

average(red,yellow,bule);		算颜色的平均值，颜色混合
darken(yellow,20%);			颜色加深20%

@import "syntax2.less"		引入模块

零散笔记

ul{
	list-style:none
}							可以把点去掉

text-decoration:none;		去除下划线

min-width:100px;		最小宽度，当视口小于该宽度，网页内容不会再被缩小

opacity:0.7;				透明度

<link rel='icon' href='./favicon.ico'>		链接网页图标

! important 加在样式后面，会获得最高优先权

em 是相对于 字体大小 来计算的
rem 根据 根的字体 大小来确定的

RGBA可以用来调透明度

(0,0,0,1)为完全不透明 (0,0,0,0)为完全透明 (0,0,0,.5)为半透明

The_RedMaple

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
最全 HTML + CSS 笔记

HTML编程语言超文本标记式编译语言HTML语言不区分大小写双目标签命令： <></>单目标签命令： </>单目标签中/可以省略属性和属性之间用空格隔开，引号可写可不写常见的html标签<html></html>:包含两个子标签<head></head>:设置基础参数信息<body></body>:负责通知浏览器将指定内容以指定方式显示出来：注解&l
复制链接

扫一扫