The_RedMaple

最全 HTML + CSS 笔记

目录

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>

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

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

作为请求参数的要求：

必须要name属性，否则提交无效
必须要在

标签栏中

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相同的

转义符

 		转义为空格
>			转义为小于号
<			转义为大于号

CSS编程语言

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

css文件

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

1.写一个.css文件
2.在 head 标签中引入

其中 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 文件夹到项目下