HTML+CSSNotes

发表于 2022-10-17 更新于 2022-11-18 阅读次数： Disqus：

HTML+CSS Notes

HTML基础

Web标准

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	页面元素的外观和位置等页面样式（如：颜色、大小等）
行为	JavaScript	网页模型的定义和页面交互

HTML骨架

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>网页标题</title>
</head>

<body>
    <p>段落</p>
</body>
</html>

在VScode中，输入!并按键盘上的Tab键可快速生成Html的骨架代码。

HTML基本语法

注释

浏览器执行代码时会忽略所有的注释
Vscode中快捷键：Ctrl + /

1	<!-- 这是一段注释 -->

Html 标签的结构

1	<strong>加粗文字</strong>

<strong>是开始标签，</strong>是结束标签
少数标签不需要成对出现，称为单标签

标题标签

<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>

只有1~6级标签，重要程度依次递减

段落

<p>
    这里是段落1
</p>
<p>
    这里是段落2
</p>

换行

代码：<br>

可以直接加在段落文字中

水平分割线

代码：<hr>

文本格式化标签

标签	标签(突出重要性的强调语境)	说明
b	strong	加粗
u	ins	下划线
i	em	倾斜
s	del	删除线

图片

代码：<img src="" alt="">

属性注意点：

标签属性写在开始标签内部

属性之间用空格隔开，属性之间没有顺序之分

alt属性

替换文本，当图片无法正常显示时显示alt属性中的内容

title属性

鼠标悬停时显示的文本

width和height属性

宽度和高度（数字）

如果只设置width或height中的一个，另一个属性会自动等比例缩放
如果同时设置了width和height两个，图片可能会变形

音频

代码：

1	<audio src="./music.mp3" controls></audio>

常见属性

属性名	功能
src	音频路径
controls	显示播放的控件
autoplay	自动播放
loop	循环播放

目前支持三种格式：mp3、wav、ogg

视频

代码：

1	<video src="./video.mp4" controls></video>

常见属性

属性名	功能
src	音频路径
controls	显示播放的控件
autoplay	自动播放
loop	循环播放

谷歌浏览器可以让视频自动播放，但必须是静音状态muted

目前支持三种格式：mp4、WebM、ogg

链接

1	<a href="./目标网页.html">这是一个超链接</a>

当网站开发初期不知道跳转地址的时候，href的值书写"#"(空连接)

属性名：target

取值	效果
`_self`	默认值，在当前窗口跳转
`_blank`	在新窗口跳转

1	<a href="./目标网页.html" target="_blank">这是一个超链接</a>

HTML进阶

列表

用于内容比较规整的区域

无序列表

标签组成：

标签名	说明
ul	表示无序列表的的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

注意：ul标签中只允许包含li标签，li标签中可以包含任意内容

有序列表

标签组成：

标签名	说明
ol	表示有序列表的的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

注意：ol标签中只允许包含li标签，li标签中可以包含任意内容

自定义列表

常用在网页底部的导航中

标签名	说明
dl	表示自定义列表的的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

注意：dl标签中只允许包含dt/dd标签，dt/dd标签中可以包含任意内容

在CSS中，list-style: none;可去除li前面的小圆点

表格

建立表格

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹多个td
td	表格单元格

参考代码:

<table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <!--这是表头单元格-->
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
</table>

常用属性：border、width、height

width、height等属性一般在css文件中设置

表格标题&表头单元格

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

表格结构标签

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

合并单元格

保留数据原则：左上原则

给保留的单元格td设置属性：跨行合并(rowspan)或跨列合并(colspan)，参数是合并的行数/列数

表单（重要）

input系列(单标签)

input标签通过设置不同的type值展示不同的效果

type属性值

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

input占位符

type属性：text

常用属性：

placeholder占位符。提示用户输入内容的文本

单选功能和默认选中

type属性：radio

常用属性：

属性名	说明
name	分组。*有相同name属性值的单选框为一组，一组中只能被选中一个
checked	默认选中

参考代码：

1	性别<input type="radio" name="gender" checked>男 <input type="radio" name="gender">女

多文件上传

type属性：file

常用属性

mutiple：实现多文件选择

input按钮

标签名	type属性值	说明
input	submit	提交按钮。点击之后提交数据给后端服务器
input	reset	重置按钮。点击之后恢复表单默认值
input	button	普通按钮。默认无功能，之后配合js添加功能

*要实现提交和重置功能，需要一个表单域标签<form action=""></form>

action参数表示提交地址

按钮显示文字：使用value参数

1 2	<input type="button" value="普通按钮"> <input type="submit" value="注册">

button按钮标签（双标签）

type属性值

标签名	type属性值	说明
button	submit	提交按钮。点击之后提交数据给后端服务器
button	reset	重置按钮，点击之后恢复表单默认值
button	button	普通按钮。默认无功能，之后配合js添加功能

button按钮是双标签，更便于包裹其他文字图片内容

select下拉菜单

标签组成：

标签	说明
select	下拉菜单的整体
option	下拉菜单的每一项

常见属性

selected：下拉菜单的默认选中

<select>
    <option>北京</option>
    <option>上海</option>
</select>

textarea文本域

标签名：textarea

常见属性：

cols：规定文本域可见宽度
rows：规定了文本域内可见行数

Label标签

常用于绑定内容与表单标签的关系

两种使用方法：

性别：
<input type="radio" name="gender" id="nan"> <label for="nan">男</label>
<label><input type="radio" name="gender">女</label>

语义标签

没有语义的布局标签div、span

div标签：一行只显示一个，独占一行
span标签：一行可显示多个

<div>div标签1</div>
<div>div标签2</div>
<!-- 两个标签会分行显示 -->
<span>span标签1</span>
<span>span标签2</span>
<!-- 两个标签会在同一行显示 -->

这两个标签使用频率非常高

有语义的标签布局

HTML5新版本

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

显示特点和div一致，但是比div多了不同的语义
常用于做手机端 3

字符实体

通过字符实体在网页中显示特殊符号

HTML会将多个空格吞为一个空格，要显示多个空格就字符实体

结构：&英文

显示结果	描述	实体名称
	空格	&nbsp
<	小于号	&lt
>	大于号	&gt

其他字符可查HTML 字符实体 (w3school.com.cn)

CSS基础

CSS基本语法

CSS写在哪里

css写在style标签中，style标签一般写在head标签里面，title标签下面

注释

1	/* 这是css的注释方式 */

CSS基本形式

1
2
3

p{
    color: red;
}

p是选择器，red是color参数的值

CSS引入方式

内联式：将CSS（层叠样式表）写在style标签中

外联式：将CSS写在单独的.css文件中，需要通过link标签在网页中引入

<head>
    <!-- 关系为样式表 -->
    <link rel="stylesheet" href="./style.css">
</head>

行内式：将CSS写在标签的style属性中
1
<div style="color: red;"></div>
- 只需将css文件中大括号里面的内容写入双引号内

常见使用场景

引入方式	书写位置	作用范围	使用场景
内嵌式	CSS写在style标签中	当前页面	小案例
外联式	CSS写在单独的css文件中，通过link标签引入	多个页面	项目中
行内式	CSS写在标签的style属性中	当前标签	配合js使用

选择器

标签选择器

结构：标签名{css属性名: 属性值;}

选择一类标签，无论嵌套关系有多深

类选择器

结构：.类名{css属性名: 属性值;}

所有标签都有class属性，其属性值为类名
类名由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
一个标签可以同时拥有多个类名，类名之间用空格隔开

例如：<p class="red size"></p>
类名可重复，一个类选择器可以同时选中多个标签

id选择器

结构：#id属性值{css属性名: 属性值;}

所有标签上都有id属性
id属性在一个页面中是唯一的、不重复的
一个标签上只能由一个id属性值，一个id选择器只能选中一个标签
常配合js寻找标签

1	<div id = "blue"></div>

1
2
3

#blue {
    color: blue;
}

通配符选择器

结构：*{css属性名: 属性值;}

作用：找到页面中所有的标签，设置样式

文本样式

字体粗细

属性名：font-weight

取值：

关键字：normal（正常）、bold（加粗）
纯数字：100~900的整百数，400（正常）、700（加粗）
不是所有字体都提供了九种粗细

字体样式

属性名：font-style

取值：

正常（默认值）：normal
倾斜：italic

字体

Windows中默认字体是微软雅黑
macOS中默认字体是苹方

属性名：font-family

div {
    font-family: 宋体,黑体,sans-serif;
    /*如果电脑没有安装宋体，就使用黑体*/
    /*sans-serif表示无衬线字体*/
}

样式的层叠问题

如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

font复合属性

属性名：font

取值：font:style weight size family

省略要求：只能省略前两个（相当于设置为默认值）

文本缩进

属性名：text-indent

取值：

数字+px
数字+em（推荐：1em = 当前标签的font-size的大小）

文本水平对齐方式

属性名：text-align

取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

text-align: center 能让哪些元素水平居中

文本
span标签、a标签
input标签、img标签

注意：要让元素水平居中，text-align: center需要给以上元素的父元素设置

文本修饰线

属性名：text-decoration

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无装饰线

开发中常常会使用text-decoration: none;清楚a标签默认的下划线

行高

属性名：line-height

作用：控制一行的上下行间距

取值：

数字+px
倍数（当前标签font-size的倍数）

与font连写：font: style size/line-height familt;

颜色

文字颜色：color

背景颜色：background-color

常用表示法：

关键词：red、green
rgb表示法：红绿蓝（0-255）
十六进制表示法：#开头，#000000表示纯黑色（RGB），可简写#000（两位相同）
rgba写法：红绿蓝（0-255）+透明度（0-1）

标签水平居中

实现让div、p、h（大盒子）水平居中

通过对 当前元素本身 设置margin: 0 auto;实现。
如果当前盒子没有设置宽度，此时会默认占满父元素的宽度

CSS进阶

选择器

复合选择器

后代选择器

作用：根据HTML标签的嵌套关系，选择父元素 后代中 满足条件的元素

语法：选择器1 选择器2 {css}

子代选择器

作用：根据HTML标签的嵌套关系，选择父元素 子代中 满足条件的元素（子代只包括儿子）

语法：选择器1 > 选择器2 {css}

并集选择器

作用：同时选择多组标签，设置相同的样式

语法：选择器1, 选择器2 {css}

推荐每一个选择器逗号后换行

交集选择器

作用：选择同时满足多个选择器的标签

语法：选择器1选择器2 {css}

参考代码

1
2
3

p.box{
    color: red;
}

hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式

语法：选择器:hover{ css }

任何标签都可以添加伪类
:与hover之间不能有空格！

背景

背景颜色

属性名：background-color(bgc)

背景颜色默认是透明的

背景图片

属性名：background-image(bgi)

属性值：background-image: url('图片的路径');

若背景图片小于当前盒子的大小，则默认重复平铺

背景平铺

属性名：background-repeat(bgr)

属性值：

取值	效果
repeat	（默认）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

背景位置

属性名：background-position(bgp)

属性值：background-postion: 水平方向位置垂直方向位置;

取值可以为负，但背景色和背景图只显示在盒子里面

背景相关属性连写

属性名：backgound

推荐书写顺序：background: color image repeat position

元素显示模式

块级元素

显示特点：

独占一行
宽度默认是父元素的宽度，高度默认由内容撑开，可以设置宽高

例如：div、p、h、form

行内元素

显示特点：

一行可以显示多个
宽度和高度默认由内容撑开，不可以设置宽高

例如：a、span、b、u

行内块元素

显示特点：

一行可以显示多个
可以设置宽高

例如：input、textarea、button、select

img标签由行内块元素的特点，但是Chrome调试器显示为inline

元素显示模式转换

改变元素的显示特点：

属性	效果	使用频率
display: block	转换成块级元素	较多
display: inline-block	转换成行内块元素	较多
display: inline	转换成行内元素	较少

HTML元素嵌套注意点

p标签中不要嵌套div、p、h等块级元素
a标签不能嵌套a标签

CSS特性

继承性

子元素默认继承父元素样式的特点，如color,font,text-indent,line-height（文字控制属性都可以继承）

特殊情况：

a标签的color会继承失效
h系列标签的font-size会继承失效

层叠性

属性层层叠加（不同属性）或覆盖（相同属性）

只用选择器优先级相同时，才通过层叠性判断结果

CSS盒子模型

优先级

优先级高的选择器样式会覆盖优先级低选择器样式

优先级：

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 <!important

!important使用说明

!important写在属性值的后面，分号的前面
!important不能提升继承的优先级
实际开发中不建议使用!important

盒子模型

CSS中规定每个盒子分别由：内容区域(content)、内边距区域（padding）、边框区域（border）、外边框区域（margin）构成，这就是 盒子模型

box

边框(border)

border连写形式

1 2	border: 10px solid red; /solid 表示实线/

单方向设置

属性名：border-方位名词(left)

要注意border会撑大盒子的尺寸，写代码时要注意减去边框的尺寸

圆角设置

1	border-radius: 25px;

盒子模型的布局顺序：从外到内、从上到下

内边距(padding)

padding：上右下左四个方向的内边距

padding属性可以当作复合属性使用，单独设置某个方向的内边距（上右下左顺时针方向）
若取三个值：上、左右、下
若取两个值：上下、左右

使用padding: 0 16px;替换 width 可提高网页修改的灵活性

CSS3自动内减

给盒子设置属性：box-sizing: border-box;即可

优点：浏览器会自动计算多余大小，自动在内容中减去

外边距(margin)

1 2	margin: 50px; margin-left: 20px;

margin只设置两个值、三个值的用法与padding相同。

默认的内外间距：

清除默认间距：

* {
    margin: 0;
    padding: 0;
}

版心：网页的有效内容，一般居中

1	margin: 0 auto;

外间距的合并现象：

垂直布局的块级元素，上下的margin会合并，最终两者距离为margin的最大值

外间距的塌陷现象：

互相嵌套的块级元素，子元素的margin-top会作用在父元素上

可以改为设置父元素的padding-top
也可以给父元素设置overflow: hidden

注意：无法用padding和margin修改行内元素的位置，可以使用line-height

CSS浮动

结构伪类选择器

选择器	说明
E:first-child {}	匹配父元素中的第一个子元素，并且是E元素
E:last-child {}	匹配父元素中的最后一个子元素，并且是E元素
E:nth-child(n) {}	匹配父元素中的第n个子元素，并且是E元素
E:nth-last-child(n) {}	匹配父元素中的倒数第n个子元素，并且是E元素

括号中的n还可以填even、odd、2n、4n

-n+3表示前3个，n+3表示从第3个后开始

伪元素

一般网页中的非主体元素可以使用伪元素，伪元素是由CSS模拟出的标签效果

伪元素	作用
`::before`	在父元素内容的最前添加一个伪元素
`::after`	在父元素内容的最后添加一个伪元素

注意必须要加content，默认是行内标签，使用示例：

1
2
3

.father::before {
    content: '内容';
}

标准流

规则：

块级元素：从上往下，垂直布局，独占一行
行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

浮动

浏览器解析行内块或行内标签时，浏览器会产生一个空格的距离

图文环绕

1
2
3

img {
    float: left;
}

块布局

.one {
    float: left;
}

.two {
    float: right;
}
/*两个div会在同一行显示，并一个在最左，一个在最右*/

浮动的特点：

浮动元素会脱离标准流，在标准流中不占位置
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动标签具备行内块特点
浮动的元素不能通过text-align:center或者margin: 0 auto

清除浮动：

直接给父元素设置overflow: hidden

CSS书写顺序

浮动 / display
盒子模型相关属性：margin border padding 宽高背景色
文字样式

按照这样的顺序写，这样浏览器的执行顺序更快

CSS定位装饰

三种布局方式：标准流、浮动、定位

定位

可以让元素自由地摆放在网页的任意位置
一般用于 盒子之间的层叠情况，也可以让盒子始终固定在屏幕中的某个位置

设置定位方式

定位方式	属性值
相对定位	relative
绝对定位	absolute
固定定位	fixed

设置偏移值

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

相对定位

相对定位：相对于自己之前的位置进行移动

postion:relative;

.box {
    postion:relative;
    left:100px;
}

注意：

占有原来的位置，没有脱标（标准流）
仍然具有标签原有的显示模式
如果由多个属性，以left与top为准

绝对定位

绝对定位：相对于非静态定位的父元素进行定位移动

postion:absolute;

有父级但父级元素没有定位，以浏览器窗口为参照进行定位。

注意：

不占有原有的位置，脱标
一般子级用绝对定位，父级用相对定位
绝对定位的盒子不能使用margin: auto实现左右居中
绝对定位的盒子显示模式具备行内块的特点，加宽度高度生效，若无宽高，则为0

参考代码

.box .content li {
    position: relative;
}

.box .content li .hot {
    position: absolute;
    right: -4px;
    top: 4px;
}

实现居中效果

.box {
    position: absolute;
    left: 50%;
    margin-left: -150px;
    
    width: 300px;
    height: 300px;
}

提高可修改性

.box {
    position: absolute;
    left: 50%;
    
    transform: translate(-50%, -50%);
    /*位移，移动自己的50%*/
    width: 300px;
    height: 300px;
}

固定定位

固定定位：相对于浏览器进行定位移动

代码：position: fixed;

脱标，不占位置，具备行内块特点

元素层级关系

标准流 < 浮动 < 定位
默认情况下，定位的盒子后来者居上
z-index整数，取值越大显示顺序越靠上，默认值为0

装饰

vertival-align

属性名：vertival-align

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

浏览器遇到行内和行内块标签当作文字处理，默认文字按基线对齐

光标类型

属性名：cursor

设置鼠标光标在元素上时显示的样式

常见属性值：

属性值	效果
default	默认值，通常时箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

圆角边框

属性名：border-radius

常见取值：数字+px，百分比

赋值规则：从左上角开始顺时针赋值，没有赋值的看对角

一个值表示四个角相同

应用：

画一个正圆
- 盒子必须是正方形
- 设置边框圆角为盒子宽高的一半border-radius:50%
胶囊按钮
- 盒子要求是长方形
- 设置边框圆角为盒子高度的一半

溢出部分显示效果

溢出部分指盒子内容部分超出盒子范围的区域

属性值	效果
visble	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

元素本身的隐藏

visibility:hidden占位隐藏
display: none一般用这个，不占位隐藏

元素整体透明度

属性名：opacity

1为完全不透明
0为完全透明

快速开发指南

VScode

emmet语法

记忆	示例	效果
标签名	`div`	`<div></div>`
类选择器	`.red`	`<div class="red"></div>`
id选择器	`#one`	`<div id="one"></div>`
创建多个li	`ul>li*3`	`<ul><li></li><li></li><li></li></ul>`

快捷开发按键

Alt+Shift+鼠标左键单击

PxCook

好用的设计/生成前端代码工具

PxCook - 高效易用的自动标注工具,生成前端代码,设计研发协作利器 (fancynode.com.cn)

HTML+CSS Notes

HTML基础

Web标准

HTML骨架

HTML基本语法

注释

Html 标签的结构

标题标签

段落

换行

水平分割线

文本格式化标签

图片

音频

视频

链接

HTML进阶

列表

无序列表

有序列表

自定义列表

表格

建立表格

表格标题&表头单元格

表格结构标签

合并单元格

表单（重要）

input系列(单标签)

button按钮标签（双标签）

select下拉菜单

textarea文本域

Label标签

语义标签

没有语义的布局标签div、span

有语义的标签布局

字符实体

CSS基础

CSS基本语法

注释

CSS基本形式

CSS引入方式

选择器

标签选择器

类选择器

id选择器

通配符选择器

文本样式

字体大小

字体粗细

字体样式

字体

样式的层叠问题

font复合属性

文本缩进

文本水平对齐方式

文本修饰线

行高

颜色

标签水平居中

CSS进阶

选择器

复合选择器

并集选择器

交集选择器

hover伪类选择器

背景

背景颜色

背景图片

背景平铺

背景位置

背景相关属性连写

元素显示模式

块级元素

行内元素

行内块元素

元素显示模式转换

HTML元素嵌套注意点

CSS特性

继承性

层叠性