【阿甘】Web前端学习Ⅷ

HTML与CSS的知识点总结。

---

一：HTML知识点

基本结构标签总结

HTML常用标签（一）

标签名字	标签	标签语义
标题标签	<h1>- <h6>	作为标题使用，并且依据重要性递减
段落标签	<p>	突出重要性,比普通文字更重要.
换行标签	<br />	强制换行
文本格式化标签	<h1>- <h6>	作为标题使用，并且依据重要性递减
–	<div>	作为一个大盒子用来布局，一行只能放一个<div>。
–	<span>	作为一个小盒子用来布局，一行上可以多个<span>。
图像标签	<img src="图像URI”/>	定义HTML页面中的图像
超链接标签	<a href="#">	从一个页面链接到另一个页面

文本格式化标签

语义	标签	说明
加粗	<strong></strong>或<b></b>	更推荐使用<strong></strong> 标签加粗，语义更强烈
倾斜	<em></em>或<i></i>	更推荐使用<em></em> 标签加粗，语义更强烈
删除线	<del></del>或<s></s>	更推荐使用<del></del> 标签加粗，语义更强烈
下划线	<ins></ins>或<u></u>	更推荐使用<ins></ins> 标签加粗，语义更强烈

特殊字符

HTML常用标签（二）

1. 表格标签
   语法：
   

• 这些属性要写到表格标签table里面去

属性名	属性值	描述
align	left 、center、right	规定表格相对周围元素的对齐方式。
border	1或“ ”	规定表格单元是否拥有边框，默认为””，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度。

2. 列表标签
   分类：
   
   语法：
   • (1)无序列表：
   • (2)有序列表
     
   • (3)自定义列表
     
3. 表单标签
   语法：
   
   常用属性：
   元素：
   （1）<input>表单元素
   

属性值	描述	注释
button	定义可点击按钮 (多数情况下，用于通过JavaScript 启动脚本)	后期结合js搭配使用
checkbox	定义复选框。	复选框 可以实现多选
file	定义输入字段和“浏览”按钮，供文件上传	使用场景 上传文件使用的
hidden	定义隐藏的输入字段。	-
image	定义图像形式的提交按钮	-
password	定义密码字段。该字段中的字符被掩码。	密码框 用户看不见输入的密码
radio	定义单选按钮。	单选按钮 可以实现多选一 要具有统一的name属性
reset	定义重置按钮。重置按钮会清除表单中的所有数据.	可以还原表单元素初始的默认状态
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。	点击了提交按钮submit，可以把 表单城 form 里面的表单元素 里面的值 提交给后台服务器
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符	文本框 用户可以里面输入任何文字

除type属性外，<input>标签还有其他很多属性，其常用属性如下：
（2）<label> 标签

语法:

（3）<select> 表单元素

语法：

（4）<textarea> 表单元素
语法：

二：CSS知识点

CSS基础选择器

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签比如p	不能差异化选择	较多	p { color: red;)
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color:red; )
id选择器	一次只能选择1个标签	ID属性只能在每个HTML文档中出现一次	一般和is搭配	#nav { color:red; )
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	*{color: red;)

CSS字体属性

属性	表示	注意点
font-size	字号	我们通常用的单位是px 像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal
font	字体连写	1.字体连写是有顺序的 不能随意换位置 2.其中字号和 字体 必须同时出现位

CSS文本属性

属性	表示	注意点
color	文本颜色	我们通常用 十六进制比如 而且是简写形式 #fff
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常我们用于段落首行缩进2个字的距鸣 text-indent: 2em;
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none
line-height	行高	控制行与行之间的距离

CSS的引入方式

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多	控制多个页面

CSS的复合选择器

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格.nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号.nav,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住 a{} 和 a:hover 实际开发的写法
:focus 选择器	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个写法

CSS的元素显示模式

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元索	可以设置宽度和高度	它本身内容的宽度

CSS的背景

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标
background-attachment	背景附着	scroll (背景滚动) /fixed (背景固定)
背景简写	书写更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置；
背景色半透明	背景颜色半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值

盒子模型

1. 边框( border )

   border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)边框样式边框颜色
   语法：
   
   属性值：
   

2. 内边距(padding)
   padding 属性用于设置内边距，即边框与内容之间的距离

3. 外边距（margin）
   外边距可以让块级盒子水平居中，但是必须满足两个条件
   盒子必须指定了宽度( width)
   盒子左右的外边距都设最为auto。
   语法：
   

4. 圆角边框
   语法：
   
   radius 半径(圆的半径) 原理: 圆与边框的交集形成圆角效果

5. 盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow 属性为盒子添加阴影
语法:

属性：

6. 文字阴影
   语法:

   属性：

浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：

属性：

浮动特性：
1.浮动元素会脱离标准流(脱标)
2.浮动的元素会一行内显示并且元素顶部对齐
3.浮动的元素会具有行内块元素的特性

定位

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	很少
relative 相对定位	否(占有位置)	相对于自身位置移动	常用
absolute绝对定位	是 (不占有位置)	带有定位的父级	常用
fixed 固定定位	是 (不占有位置)	浏览器可视区	常用
sticky 粘性定位	否(占有位置)	浏览器可视区	比较少

元素的显示与隐藏

1. display 属性
   display属性用于设置一个元素应如何显示
   语法：
   display:none;隐藏对象
2. visibility 可见性
   visibility 属性用于指定一个元素应可见还是隐藏
   
   如果隐藏元素想要原来位置，就用visibility:hidden
   如果隐藏元素不想要原来位置，就用display:none(用处更多)
3. overflow 溢出
   overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时，会发生什么

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

CSS用户界面样式

1. 鼠标样式 cursor
   设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。.
   语法：
   

   属性值	描述
   default	小白 默认
   pointer	小手
   move	移动
   text	文本
   not-allowed	禁止

2. 轮廓线 outline

   给表单添加outline:0;或者 outline:none;样式之后，就可以去掉默认的蓝色边框
   

3. 防止拖拽文本域resize
   实际开发中，我们文本域右下角是不可以拖拽的
   语法：
   

2D转换

实现效果	语法
转换	transform: translate(x,y);
旋转	transform:rotate(度数)
转换中心点	transform-origin: x y;
缩放	transform:scale(x,y);

动画

1. 用keyframes（关键帧）定义动画

   语法：

   

2. 元素使用动画
   语法：
   

3. 动画常用属性

4. 动画简写属性
   语法：
   

5. 速度曲线细节

3D转换

1. 3D移动 translate3d

• translform:translateX(100px):仅仅是在x轴上移动
• translform:translateY(100px):仅仅是在Y轴上移动
• translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)

2. 透视 perspective
   语法：

perspective：500px；

后面的值为视距，即离屏幕的距离，距离越小，显示图像越大。

3. translateZ

translform:translateZ(100px):仅仅是在Z轴上移动。有了透视，就能看到translatez引起的变化了

4. 3D旋转rotate3d

• transform:rotateX(45deg):沿着x轴正方向旋转45度
• transform:rotateY(45deg):沿着y轴正方向旋转45deg
• transform:rotateZ(45deg):沿着Z轴正方向旋转45deg
• transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转deg为角度

5. 3D呈现 transfrom-style

• transfornh-style:flat子元素不开启3d立体空间 默认的
• transform-style:preserve-3d;子元素开启立体空间

这篇文章将HTML与CSS的关键知识点进行了一次总结，目的是为了不用翻看杂乱的笔记能尽快找到对应想查阅的知识点，但是内容则不会那么细致。2023年6月22号本人现在的学习进度为JS的内置对象，JS的知识点在后面的博客也会进行说明总结。