前端基础知识汇总 -- html and css

最新推荐文章于 2022-08-05 08:14:02 发布

StoneVivi

最新推荐文章于 2022-08-05 08:14:02 发布

阅读量290

点赞数

本文链接：https://blog.csdn.net/StoneVivi/article/details/105885459

版权

前端基础知识汇总 – html and css

web标准三大组成部分： html(结果)、css(表现)、js(行为)
浏览器的作用：将代码解析成网页，给用户访问。
网页：包含文字、图片、超链接、视频、音频等。

HTML(Hyper Text Markup Language)超文本标记语言

（说明：在浏览器上的一种标记语言，给文本加上有含义的标签）

html骨架结构 (编译器的快捷键： html:5 + tab 或 html!)

<html>
	<head>
		<title>我是标题</title>
	</head>
	<body>
		// 我是内容
	</body>
</html>

a标签：

<a href="#"  target="_blank">我是a标签</a>

href 值为跳转的路径， # 表示不跳转；
target 值为跳转后页面是进行页内跳转还是新开页面跳转，有_blank 新开页面， _self 页内跳转，即当前页，a标签的默认值。
相关：base 为页面所有的a标签设置跳转方式

<base target="_blank"></base>  // 全文

提升网站排名方式：

a.花钱；简单粗暴，缺点：烧钱；优点：效果明显；
b…html 静态页面
c.发外链
d.页面的友好性(编写有语义化的结构代码，在合适的地方使用合适的标签)

搜索引擎
本质上是百度的一个程序（爬虫）
任务：不停的爬取不同的网站，查看网站的内容
语义化标签的优点
a.对搜索引擎友好；
b.提升用户体验；
c.利于代码的可读性，维护，提升开发效率。

6.表格

<table>
	<tr>   // 行
		<td></td>   // 单元格
	</tr>
</table>

属性
border: 边框
width:
height:
cellspacing: 单元格之间的空白
cellpadding: 边框、内容之间的空白
align: 居中

其他标签
th: 表头(居中加粗)
thead: 存放表头
tbody:
tfoot:
caption: 表格题

合并单元格
左上原则：最左、最上
纵行： rowspan 跨行
横行： colspan 跨列

input 框

<input type="checkbox" value name>
// 下拉框
<select>
	<options selected> 2020年 </options>  // selected 默认
	<options> 2020年 </options>
</select>
// 文件框
<input type="file">
// 文本域
<textarea cols="30" rows="10">
</textarea>
<input type="submit">
<input type="reset">
<input type="button">

label 标签

<label> 标注 </label>

作用：让文本绑定到一个表单元素上
有以下两种方式：
法一: 使用for

<input type="radio"  id="nan">
<label for="nan">男</label>

法二：默认绑定label内的表单控件

<label>
	<input type="checkbox"> 学习
</label>

Html 5 新增语义标签
a. header、nav、footer、article、section、aside
b. type属性：
date
time
week
number
search
color
range
其他表单新属性： placeholder 提示信息； autofocus：自动获得焦点； multiple：多文件上传
c.音频标签

<audio src autoplay controls loop></audio>
 // 多浏览器的支持方案
 <audio src autoplay controls loop>
 	<source src></source>
 	<source src>不支持请下载 <a>跳转</a>
   </source>
 </audio>

视频标签

<video></video>

宽高指定一个即可，一般以小的为基准

CSS (cascading Style Sheets) 层叠样式表 => 默认多个样式之间会相互层叠

注意：
如果{} 内有; 没加，那么该{} 内后面的下一个样式都不会起作用。

font 字体

font-size
font-weight  // 粗细 （1-900， bold）
font-style  //  字体样式 italic oblique normal
font-family // 字体类型
font: font-size font-weight font-size font-family

选择器

(1)类选择器
a. 一个类可以作用于多个标签
b.一个标签可以设置多个类
c. 多个类名间用空格隔开

(2)id选择器与类选择器的命名规则：
命名的组成部分：字母、数字、下划线组成，且不能以数字开头。
css引入的三种情况
(1)嵌套样式
存放位置：head标签内，title标签下面
作用范围：当前整个页面
(2)行内样式
存放位置：直接写在标签style属性里面
作用范围：只能作用于当前元素
应用：比较有限，当作需将样式只作用于当前标签使用
(3)外联样式
存放位置：另一个css文件中，通过link引入
作用范围：可以作用于多个页面
应用：存放一些公共通用样式
text属性

text-indent  // 首行缩进 取值2em 表示两个字距离
text-aign  // 用于设置容器内容的对齐方式 left center right
text-decoration // 设置a标签的文本装饰 none under line-through

CSS的三大特性
(1)继承
(2)层叠
(3)优先级

(1)继承
作用
子元素可以继承父元素的属性样式
特殊性
a. a标签的颜色不能通过继承修改，若非要修改a标签的颜色，需直接作用于a标签
b.h标签的大小不能通过继承设置，必须设置
c. div的高度若不设置，由内容决定，若没有内容，高度为0；宽度默认继承父元素的宽度

(2)层叠性：浏览器处理冲突的一个特性
作用
若两个选择作用于同一个元素，并且设置同一个属性，其中一个属性被层叠，作用于同一个元素的不同属性，则不会；

(3) 优先级
！import < 行内样式 < ID选择器 < 类选择器 < 标签选择器 < 通配符 < 继承

权重计算
公式：(0,0,0,0) --> (!import, ID选择器, 类选择器, 标签选择器)

选择器的工作原理：从右往左找

伪类
与选择器相似，但又不同
(1)锚伪类
a:link 给a标签设置未访问过的样式
a:visited 给a标签设置访问过的样式
a:hover 鼠标悬停的颜色
a:active 被点击激活时饿样式

注意
书写时顺序要求：:link :visited :hover :active
hover 也可给其他元素设置

行高的分析
应用只要设置行高和容器高度一致，让一个容器中的文字垂直居中
行高 w3c中定义，文字基线与基线的距离为行高；上边距等于下边距；所以文本会在当前行中居中
总结只需要设置文字的行高和容器高度一致，就可以让文本在容器中垂直居中
盒模型的基本思想
border 边框
padding 内边框
content 内容
border-color border-style border-width
border-top-style: solid; 实线；dashed 虚线
border-collapse: collapse 设置表格边框是否被合并为一条线

特殊情况
当一个大盒子包含一个小盒子，且都是块级元素，小盒子的宽度会继承父元素，这个时候给小盒子加padding 不会撑大小盒子的大小。

margin 的两种特殊情况
(1)外边距合并现象
两个盒子上下排布，给上面的盒子设置margin-bottom，下面的盒子设置margin-top 会发生外边距合并现象，最终合并成最大的那个。

(2)margin塌陷
大盒子包含一个小盒子，给小盒子设置一个margin-top 父盒子会一起掉下来
解决方案
a. 给大盒子加上border:1px solid blue;
b.给父盒子加点 padding-top
c.给父盒子设置 overflow:hidden; 本质上触发了BFC，块级格式上下文
d. 浮动也可解决塌陷，给子元素加float: left;

浮动
作用为了解决一行中显示多个盒子的问题（并且这些盒子是可控的）
特点
标准流：浏览器默认摆放盒子的顺序：从左往右，从上往下
(1)脱标：浮动的元素会脱离标准流，在页面不占位置了
(2)浮动以后的元素会覆盖在标准流的元素之上
(3)浮动的规则：浮动找浮动，不浮动找不浮动
(4) 浮动之后的位置与不浮动之前的位置是对应的
(5)浮动的重点：浮动的元素只会影响下面的元素
(6)浮动的元素会改变显示的方式，不管是行内元素还是块级元素，都会在一行显示，而且可以设置宽高跟行内块的显示方式很像。

清除浮动
(1)浮动的负面影响
若一个大盒子里有一个小盒子，大盒子没有高度，默认应该是被内容撑开，但这个唯一的小盒子浮动了，不占位置，大盒子高度为0，下面的盒子都补位上来了。所以我们需要清除浮动。

float: left;
float:right;
clear:both;

(2) 额外标签法
步骤
给浮动的父元素添加一个新的块级子元素，给这个子元素设置clear: both 就可以清除浮动啦~
缺点
使用这种方式，每次清除浮动都要添加一个额外的标签，会让页面变得冗余。

(3) overflow: hidden
步骤
给浮动的父元素添加一个属性 overflow:hidden;
缺点
overflow: hidden; 溢出隐藏，若将来有子元素跑到了父元素区域范围之外，就会隐藏掉。

(4) 伪元素法
伪元素法：页面中不存在的元素，可以通过css设置
注意
a. 伪元素是行内元素，可以通过display更改显示方式
b.伪元素必须设置content属性

.clearfix {
	content: '';
	clear: both;
	display: block;
	height: 0;
	line-height: 0;
	visibility: hidden;
}

(5) 设置宽高，也可以解决浮动的影响
缺点父元素高度定死了，若子元素的高度是不定的，最终的效果是不好的。

(6)定位
作用解决盒子与盒子之间层叠的问题
小细节 定位的元素，后面的元素层级比前面的元素要高。

vertical-algin属性设置垂直对齐的方式
行内块，默认会和文本的基线对齐
vertical-align 的取值 baseline 基线对齐(默认值) bottom 底部对齐
top 顶部对齐 middle 中线对齐
注意块级元素对vertical-align无感，所以没有下边的间隙问题
overflow
(1) 溢出隐藏：overflow: hidden; 溢出部分隐藏
(2) visibility: hidden; 让元素隐藏，但占位置
(3) display: none; 元素隐藏且不占位置
布局原则
布局原则 宽高的稳定性 > padding的稳定性 > margin的稳定性
其他规则
(1)行内元素里面只放行内元素(a标签除外)
(2)块级元素里面只能放块级元素和行内元素 (p/h/dt等)
(3)p/h 系列 dt一般用于存放文本内容，里面不适合放块
(4) a标签里不能放a标签

14.CSS扩展
(1)属性选择器 (用于表单控件)
a.选中所有有 ** 属性的li属性

li[skill] {}

[...] 只有有 ... 属性即可
[=] 完全等于
[^=] 只要以 ... 开头即可
[*=] 只要包含
[$=] 只要以 ... 结尾即可

(2)text-shadow 盒子阴影
text-shadow: x, y, >0 x:水平偏移； y: 垂直偏移；模糊度： > 0；外延值；颜色

(3)双伪元素
after 用于清除浮动； before 防塌陷

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

animation 动画
animation: name, duration, iteration-count, direction
direction 动画方向交替 alternate
delay 延时
animation-fill-mode 停止的效果 forwards
animation-timing-function 动画效果 ease --> 缓动， linear --> 匀速
animation-play-state 动画状态，动画停止 paused
background-size
作用可以设置背景图片大小
contain 包含
优点图片能够显示全，不会失真；
缺点可能会留白

cover 覆盖，填满
优点没有失真，不留白
缺点图片可能显示不全

线性渐变 linear-gradiant
(1)方向 to right to left to bottom to top
(2)颜色
(3)范围
eg: backgroung-image: linear-gradiant(to right, blue, 0%, red, 100%)
径向渐变 radial-gradient
(1) 圆心
(2)半径
(3)颜色范围
eg: background-image: radial-gradien (半径at, 圆心位置，颜色范围，颜色范围)
特点没有作用到的范围，用最外面的颜色填充
opacity 和 rgba的区别
rgba 透明的背景色，里面的盒子不透明
opacity 整个盒子的透明度，里面的盒子也会透明