HTML和CSS笔记

wangkay88

已于 2022-10-10 15:22:43 修改

阅读量571

点赞数

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

于 2022-09-14 22:57:43 首次发布

本文链接：https://blog.csdn.net/qq_54351538/article/details/126861356

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、HTML基础

1、语义化标签

HTML标签语义化，简单来说，就是让标签有含义，给某块内容用上一个最恰当的标签，使页面有良好的结构，页面元素有含义，更利于开发者、程序和其他设备对于标签的理解。语义化在盲人软件、机器翻译等方面发挥着重要作用、同时搜索引擎通过语义化标签增强文章的SEO搜索（自然搜索结果下获得网站流量的技术）

元素	说明
article	定义独立的来自外部的文档，如新闻投稿、博客
aside	一般用于网页中的侧边栏或者文章内部的标注框
header	页面的头部区域，通常包括网站logo、链接导航、搜索框、banner
nav	页面的导航链接区域
main	定义文档的主要内容
section	定义文档的区域
footer	文档的页脚
mark	标记、突出显示文本
ul	无序列表
form	创建HTML表单
button	定义按钮
i	用于表示区分普通文本的其他文本，浏览器通常会将其内容显示为斜体

2、表单标签

HTML表单用于收集用户输入。表单元素指的不是不同类型的input元素、复选框、单选按钮、提交按钮等。

1、 <form></form>标签

 <form  method="传送方式"  action="提交表单的请求路径"></form>

用于创建HTML表单，常用属性有：

action：规定表单提时，表单数据提交给URL
method：规定用于发送form-data的HTTP方法，常用属性值为get、post
<form>：<form>标签是成对出现的，以<form>开始，以</form>结束。

2、<input/>元素

<input/>元素是最重要的表单元素、根据input元素的不同type类型、表现形式也不一样

类型	描述
text	普通文本框，一般默认20个字符宽度
textarea	多行文本框
button	普通按钮
radio	单选框
CheckBox	多选框
reset	表单重置按钮
submit	表单提交按钮
password	密码输入框，密码字段使用圆点或星号代替

3、<label></label>标签

用于为input标签提供标注
点击label文本，浏览器会自动将焦点转到和标签相关的表单控件上
label标签的for属性值应当与相关元素的ID属性值相同

4、<select></select>标签

用于创建下拉列表
select元素中的<option></option>标签用于定义列表的可选项

5、<button></button>元素

用于定义普通按钮

3、转义字符

在HTML中,<,>,& （<,>用于区分标签，&用于转义）等特殊字符由于有特殊含义，在页面上可能无法正常显示，就需要在HTML文档中使用特殊转义字符来表示。

显示	实体名称	实体编号	说明
空格	` `	` `	半角不换行的空格，相当于按下键盘space键产生的空格，受字体影响，不同字体表现一致
空格	&ensp；	&#8194；	半角空格，占1/2个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
空格	&emsp；	&#8195；	全角空格，占1个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
<	<	<	小于号
>	>	>	大于号
&	&	&	&符号
"	"	"	双引号
’	------	'	单引号

4、Head头

标签用于定义文档的头部，它是所有头部元素的容器。其中的元素可以引用脚本、指示浏览器在哪找到样式表、提供元素信息等。

1、<title></title>

用于定义文档的标题
改标题会出现在浏览器窗口的标题栏或状态栏上
把该页面加入收藏夹或书签列表时，该标题为页面链接的默认名称

2、<link/>
用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标

<link rel = "icon" type = "image/png" sizes = "144x144" herf = "./image/favicon.ico"/>

<link/>是空元素，仅包含属性，只能存在于head部分

属性	属性值	描述
`href`	URL	设置目标链接的文件路径
`rel`	stylesheet、icon、sidebar、prev等	规定当前文档与链接文档之间的关系
`type`	MIME_type	目标连接文档的MIME类型

3、<style></sstyle>
用于给文档引入CSS样式信息，将样式表包含在style开始与结束标签之间

4、<script></script>
用于给页面添加脚本
可以直接在script开始和结束标签之间包含JavaScript脚本
也可以通过script的src属性连接外部脚本文件

5、<meta />
提供有关页面的元信息，比如针对搜索引擎和更新频度的描述关键词
name和content属性通常一起使用，以键值对的方式给文档提供元数据，其中name的属性值作为元数据的名称，content作为元数据的值
keywords和description这两个名称使用频率最高，是搜索引擎优化的主要方式之一

名称	值	描述
keywords	关键字描述网页关键字，使用逗号分隔
description	描述内容	网站主要内容的简短描述
author	作者	描述网站作者
viewport	width：viewport视口宽度，设置为devicewidth表示为设备的宽度

二、CSS基础

1、CSS引入方式

1.1、行内样式

直接使用HTML元素的style属性引入CSS样式
例：<p style=" font-size: 16px; color: #333;">CSS引入方式</p>

1.2、内嵌样式

使用<style></style>标签引入样式

<style>
	p{
		color : #333;
		font-size:16px;
	}
</style>

1.3、外部样式

(1）链接样式【常用】

在<head></head>标签中，使用<link />标签链接外部的CSS文件
link标签的href属性设置为目标链接的CSS文件路径，rel属性设置为stylesheet表示链接样式表，type属性设置为text/css
例：<link rel = "stylesheet" href="style.css" type="text/css" />

(2)导入样式

使用@import URL（）引入CSS文件

在CSS文件中直接使用@import URL（）
在HTML文件中需要在<style></style>标签中使用@import URL（）

在HTML初始化时，@import URL（）导入的CSS会被直接导入到HTML或CSS文件中，成为文件的一部分。

//在HTML文件中导入
<style>
	@import URL(style.css);
</style>
//在CSS文件中导入
@import url(style.css);

2、CSS背景属性

在前端开发过程中，为了页面的美观，往往都会给HTML元素添加背景，使用CSS（层叠样式）背景属性能够在页面美化的同时，实现页面的表现与内容的分离。

属性	属性值	说明
background-color	颜色值，如rgb，rgba，十六进制表示等，设置为transparent表示背景透明	设置背景颜色
background-image	url（filepath）或none	设置背景图像
background-size	repeat/repeat-x/repeat-y	设置背景图片重复方式
background-position	top left/top center/center等	设置背景图片的位置

2.1background-size属性

（1）contain

保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示
有可能出现图片无法完全覆盖背景区域

（2）cover

保持图片纵横比不变，最大程度覆盖背景区域
有可能导致背景图片部分区域无法显示

2.2 background-repeat

repeat（默认）

允许水平和垂直方向重复（平铺）背景图片

repeat-x

只允许水平方向重复（平铺）背景图片

repeat-y

只允许垂直方向重复（平铺）背景图片

2.3background

简写属性可以在一个属性声明中设置一个或多个背景属性，常用的属性设置如上表
background：#ff0000 url（‘smiley.gif’）no-repeat cover;

4、CSS文本属性

通过CSS文本属性可以给文本设置颜色、字符、行间距、对齐、段落缩进、等样式，将页面的正文与标题区分开，同时能够丰富整个页面布局。

1、color属性
用于文本的颜色，可设置的值有：颜色名、十六进制、RGB值、rgba值

2、font-size属性

用于设置文本的字体大小，可以设置绝对到小，单位px，也可以设置为相对大小。单位rem、em等

字体大小未设置时默认大小为16px

3、font-weight属性
用于设置文本的粗细，可设置的值有：

属性值	说明
normal	标准字符（默认）
bold	粗体字符
bolder	更粗的字符
lighter	更细的字符
100、200、300、400、500、600、700、800、900	400相当于normal、700相当于bold、数值越大字体越粗

4、font-family属性

用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。如果浏览器不支持第一个字体，则会尝试下一个，以此类推

font-family：“第一个名字”，“第二个名字”，“第三个名字”；

5、text-align属性
用于设置文本的水平对齐方式，可设置的值有：

center（居中对齐）
left（左对齐）
right（右对齐）

文本方向是从左到右则默认左对齐，文本方向是从右至左则默认右对齐

6、line-height属性

用于设置行间距，可设置的值如下

数字：行间距为当前字体大小乘此数字
固定值：设置固定的行间距，如20px
百分比：行间距为当前字体大小乘百分比

7、text-indent属性

用于指定首行缩进值，可设置的值如下

固定值：设置固定首行缩进，如20px
百分比：首行缩进值为父元素宽度乘此百分比

8、letter-spacing属性
用于设置字间距，设置固定值为字间距，如10px

9、world-spacing属性
用于指定文本中单词之间的间距，设置固定值为单词间距。
10、text-decoration

用于设置文本的装饰线，是下表属性的简写

text-decoration
11、text-transform
用于设置文本大小写字母，常用属性有

uppercase：全部文本均为大写字母
lowercase：全部文本为小写字母
capitalize：文本的每个单词首字母为大写字母

12、writing-mode
设置文本在水平或垂直方向的排布方式

horizontal-tb：文本流在水平方向从上到下排列，文字方向为水平方向
sideways-lr：文本流垂直方向，从上至下、从右至左排列（该属性值不兼容webkit内核浏览器）
vertical-lr：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向
vertical-rl：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致

13、white-space

用于设置文本的空白符处理方式，属性值如下

属性值	描述
normal	合并空格，换行符转化为一个空格，允许自动换行
nowrap	合并空格，换行符转化为一个空格，不允许自动换行
pre	保留空格，保留换行符，不允许自动换行
pre-line	合并空格，保留换行符，不允许自动换行
pre-wrap	保留空格，保留换行符，允许自动换行
break-spaces	保留空格，保留换行符，允许自动换行，行尾空格保留，空白符占用空间

5、基础选择器

CSS（层叠样式表）选择器是CSS规则的一部分，用来指定需要设置样式的HTML元素。通过选择器可以实现CSS对HTML元素的一对一，一对多，多对一的控制。

选择器类型	描述	示例
通配选择器	通配选择器使用一个星号``表示，``会匹配所有元素	`*{color：red;}`
标签选择器	通过标签名匹配，匹配文档中所有为此标签名的元素	`p{color:red;}`
id选择器	通过井号`#`来定义id选择器，根据元素的id属性匹配（精确匹配）元素	`#box{width:300px;}`
类选择器	通过点.来定义类选择器，根据元素的class属性匹配（精确匹配）元素	`.container{height:100px;}`
组合选择器	包括四种组合方式：后代选择器、子代选择器、相邻选择器、兄弟选择器	`#box>.nav p{color:blue;}

1、通配符选择器

可以与其他选择器相结合，选择某元素下的所有元素

//选择类名为box元素的所有后代，添加一个黑色的字体颜色
.box * {color:#000;}

由于每个浏览器对元素的默认边距不一致，通配选择器常用于rest样式文件中，覆盖浏览器的默认样式

*{
	margin: 0 ;
	padding : 0;
	border: 0;
}

2、标签选择器
标签选择器也常用于reset样式文件中，用于清除元素的默认样式，如li标签的小圆点、a标签的下划线等

3、id选择器
id属性的属性值应当是当前文档唯一

4、类选择器
class属性值在文档中可以重复

5、组合选择器
通过间隔符将其基础选择器连接起来，实现组合选择的效果

选择器	间隔符	描述
后代选择器	空格	选取该元素的后代元素
子代选择器	>大于号	选择该元素的第一级子元素
相邻选择器	+加号	选择该元素之后相邻第一个元素，且两者具有相同的父元素
兄弟选择器	~波浪号	选择该元素之后的同级元素

6、伪类选择器

将伪类与选择器相结合，可以指定选择元素的特殊状态，也可以根据元素所处的状态应用不同的样式，掌握伪类选择器可以帮助我们实现更加丰富的样式。

1、常用伪类

伪类	描述
`:hover`	用于设置鼠标悬停在元素上方时的样式
`:focus`	用于设置元素获得焦点时的样式
`:active`	用于设置元素被激活时（按下按键时、松开按键时）的样式
`:link`	用于设置被访问的元素的样式（仅可用于a标签）
`visited`	用于设置被访问的元素的样式（仅可用于a标签）
`first-child`	用于选取属于父元素的第一个子元素，且满足冒号前的基础选择器要求
`:first-of-type`	用于选取属于其父元素的最后一个特定类型的子元素
`nth-child(N)`	选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，N可以为数字、关键字（odd/even）、公式
`:nth-last-child(N)`	选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，从最后一个子元素开始计数，N可以为数字、关键字（odd / even）、公式
`:nth-last-of-type(N)`	选择匹配属于其父元素的第N个指定类型的子元素，从最后一个子元素开始计数，N可以为数字、关键字（odd / even）、公式

2、示例

<style>
	p:first-child {
		color: red;
	}
</style>
<div>
	<span>第一个</span>
	<p>第二个</p>
	<p>第三个</p>
	<p>第四个</p>
</div>

上述所有内容字体都不会变红色

对于选择器p:first-child，需要同时满足两个要求：

该元素为p元素
该元素为该元素父级元素的第一个子元素

对于first-child、last-child、nth-child(n)、nth-last-child都存在此类情况，注意区分

7、伪元素选择器

伪元素选择器通过选择元素的某个部分，对元素的特定部分单独设置样式。伪元素是某个元素的子元素，是逻辑上存在的虚拟元素，但是实际并不存在与DOM树中。

一个选择器只能使用一个伪元素，伪元素必须在基础选择器语句后使用
为了便于区分伪类选与伪元素，使用双冒号【::】作为伪元素选择符

伪元素	描述
`::after`	用于创建伪元素，在元素内容之后插入内容，该伪元素默认为行内元素
`::before`	用于创建伪元素，在元素内容之前插入内容，该伪元素默认为行内元素
`::first-line`	向文本的首行添加样式，只能应用于块级元素
`::first-letter`	向文本的首字母添加样式，只能应用于块级元素
`::marker`	用于改变li元素的数字或符号的样式，只能作用于display属性值为list-item的元素
`::placeholder`	用于设置表单元素占位符文本的样式

8、CSS优先级

【内联样式】 > 【ID选择器】 > 【类选择器、属性选择器、伪类选择器】 > 【标签选择器、伪元素选择器】

通配符选择器【*】和关系选择符【+（相邻选择符）、>（子代选择符）、~（兄弟选择符）、" "（后代选择符）等】对优先级没有影响

在选择器使用较多的情况下，使用CSS优先级判断元素的属性值显示很容易出错且不利于排错，可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级

选择器	权重
内联样式	1000
ID选择器	100
类选择器、属性选择器、伪类选择器	10
标签选择器、伪元素选择器	1
相邻选择符、子代选择符、兄弟选择符、后代选择符	0

选择器权重计算

选择器的权重可以相加

#header .nav li { list-style: none; }

该选择器的权重 = ID选择器100 + 类选择器10 + 标签选择器1 = 111
对于同一个元素的两种选择器均声明了同一个属性情况
权重相同时，根据HTML代码从上往下执行的特点，后面选择器会覆盖前面选择器中相同的属性
权重不同时，权重大的选择器生效

!important规则

当你在一个样式声明中使用!important规则时，这个样式将覆盖其他的任何声明
!important规则与优先级无关，但是会直接影响样式的最终显示结果

9、块级元素与行内元素

1、块级元素

在浏览器显示时总是独占一行
宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响
可以包含内容、行内元素和其他块级元素
宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度
常见块级元素：div、form、footer、h1-h6、ol、ul、p、video
设置display属性为display: block可将元素转换为块级元素

2、行内元素

不独占一行，默认不自动换行
宽高、上下边距不可以控制，仅有左右边距可以控制且会对周围元素产生影响
一般只能包含内容和其他行内元素，不可包含块级元素
设置宽高无效，宽高默认为内容的宽高
常见行内元素：span、label、a、em、strong、img
设置display属性为display: inline可将元素转换为行内元素
ps: img元素为可替换元素，宽高是由其加载的内容决定的，可以使用CSS覆盖其宽高等样式

3、行内块级元素

综合块级元素与行内元素的特性
不独占一行
元素宽高、内外边距均可设置，上下左右边距均会对周围元素产生影响
宽高未设置时默认为内容宽高
常见行内块级元素：button、input、textarea、select
设置display属性为display: inline-block可将元素设置为行内块级元素

八、盒子模型

所有的HTML元素都可以看做一个盒子模型，每个盒子模型包含外边距、内边距、边框、实际内容四个部分，通过对以上四个部分的属性设置可以极大的丰富盒模型乃至整个HTML文档的表现效果和布局结构。

1、概念

当对一个页面进行布局的时候，浏览器会将所有元素表示一个个矩形的盒子，HTML页面可以理解为将多个盒子堆叠累加而成。

2、盒子模型的组成部分

盒模型由里到外包括四个部分：内容部分，padding（内边距），border（边框）、margin（外边框）

内容部分一般用来显示图像或者文字，在标准盒模型中，内容部分的宽高可以通过width、height属性设置
padding（内边距） 是包围在内容区域外的空白区域，代表的是盒子边框与实际内容之间的距离、通过【padding】相关属性设置大小
border指的是盒子的边框，border除了可以使用border-width设置边框大小外，可以使用border-style设置边框的样式，如实线、虚线，使用border-color设置边框的颜色
margin（外边框） 指的是盒子和其他元素之间的空白部分，代表的是盒子的边框与其他相邻盒子边框之间的距离，通过【margin】相关属性设置大小

3、标准盒模型与怪异盒模型的区别

1、标准盒模型

在标准盒模型中，给盒模型设置width和height，实际上是给内容区域设置大小
标准盒模型的盒子实际宽高=内容区域的宽高+border大小+padding大小

2、怪异盒模型

在怪异盒模型中，给盒模型设置的width和height就是盒模型的实际大小，宽高已经包含了border和padding。
怪异盒模型的实际的大小=盒模型设置的width、height（包含border和padding）
在怪异盒模型中，内容部分的实际宽高是盒模型的宽度减去padding和border

3、不管是标准盒模型还是怪异盒模型，margin都不计入盒子的实际大小。但margin会影响盒模型所占空间，即影响的盒模型的外部空间。在计算盒子模型的实际占位大小时才会将margin计入其中

九、定位

1、脱离文档流

文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，称为文档流
元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流的上方，此时元素层级发生变化

2、position定位