HTML CSS 知识点总结

最新推荐文章于 2025-03-06 22:57:07 发布

wsy`

最新推荐文章于 2025-03-06 22:57:07 发布

阅读量984

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_61000863/article/details/125419944

版权

HTML CSS 专栏收录该内容

2 篇文章

订阅专栏

本文详细总结了HTML和CSS的基础知识，涵盖动画简写属性、居中布局、盒子阴影、文字居中、行内元素处理、浮动清除、CSS3盒子模型、选择器类型、定位特性、元素显示隐藏等内容，旨在帮助读者深入理解网页制作的关键概念和技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页

1.1什么是HTML

HTML指的是一种超文本标记语言，它是用来描述网页的一种语言。

HTML不是编程语言，而是一种标记语言，标记语言是一套标记标签。

（什么是超文本：①它可以加入图片，声音等超出了文本的限制②它可以从一个文件跳转到另一个文件，与各地的文件链接即超级链接文本）

1.2网页的形成

网页是由网页元素组成（其实就是一个HTML文件），这些元素利用HTML标签描述出来，然后通过浏览器解析显示给用户。

1.3web标准

web标准是由w3c组织和其他标准化组织制定的一系列标准化集合

1.3.1web标准的构成

主要包括结构，表现和行为

一：动画简写属性

animation:动画名称* 持续时间* 运动曲线何时开始播放次数是否反方向播放动画起始或者结束的状态；

animation: name duration timing-function(速度曲线) delay iteration-count direction fill-mode;

animation:name* 5s* linear(匀速) 2s infinite(循环) forwards(停在结束位置)

二：居中

left:50%;

transform:translateX(-50%);

三：盒子阴影

box-shadow: h-shadow*(水平阴影) v-shadow*(垂直阴影) blur(模糊距离) spread(尺寸) color inset(将默认的外部阴影改成内部阴影);

阴影不占用盒子，不会影响其他盒子排列！

四：想让文字在盒子正中间就不要设置盒子宽高，让文字把盒子撑开

五：a是行内元素，不能直接设置宽高和内外边距

六：清除浮动的方法

①最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。

②给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。

③给父盒子添加overflow属性。

overflow:auto; 有可能出现滚动条，影响美观。

overflow:hidden; 可能会带来内容不可见的问题。

④父盒子里最下方引入清除浮动块。最简单的有：

有很多人是这么解决的，但是我们并不推荐，因为其引入了不必要的冗余元素。

⑤after伪类清除浮动。

外部盒子的after伪元素设置clear属性。

#parent:after{

clear: both;

content: "";

width: 0;

height: 0;

display: block;

visibility: hidden;

}

这是一种纯CSS的解决浮动造成盒子塌陷方法，没有引入任何冗余元素，推荐使用此方法来解决CSS盒子塌陷。

备注：第五种方法虽好，但是低版本IE不兼容，具体选择哪种解决方法，可根据实际情况决定。

七：CSS3盒子模型

1.box-sizing：content-box盒子大小为width+border+margin

2.box-sizing：border-box盒子大小为width

如果我们把盒子模型改成了box-sizing：border-box那么padding和margin就不会撑大盒子了

八：.box:hover img和.box img:hover的区别

.box:hover img：意思为鼠标经过.box里面的img发生变化

.box img:hover：意思为经过box里面的img时发生变化

九：浮动给ul里的li加，不能给li里面的a加

十：position

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

十一：opacity属性

1.opacity习惯上说“透明度”，其实应该叫“不透明度”。opacity 意思：不透明，而背景色的默认值：transparent意思才是“透明的”。所以opacity用来设置不透明度，取值从[0.0~1.0]，代表从完全透明到完全不透明。

十二：什么是HTML语义化标签：

语义化的标签，旨在让标签有自己的含义。

<span>一行文字</span>12

如上代码，p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签责没有独特的含义。

十三：margin-left：auto左对齐

十四：css单位

绝对长度

绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。

相对长度

相对长度单位规定相对于另一个长度属性的长度。

十五：子盒子在父盒子水平垂直方向居中方法总结

①定位：子绝父相（加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中）

子：top:50%;

left:50%;

margin-top:-50%;

margin-left:-50%;

②子：transform:translate(-50%，-50%);

③子：top:0;

left:0;

bottom:0;

right:0;

margin:auto;

④：flex布局

父：display：flex;

justify-content:center;

alingn-items:center;

十六：span不能设高，应该设行高

十七：溢出的文字用省略号，必须满足以下三个条件

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

十八：background-size： contain 与cover的区别：

作用：都是将图片以**相同宽高比**缩放以适应整个容器的宽高。

不同之处在于：1. 在no-repeat情况下，如果容器宽高比与图片宽高比不同，

　　cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；

　　contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；

十九：让li里面的字体图标和文字对齐

给需要对齐的内容添加 vertical-align: middle;针对行内元素来设置的，对于块级元素是没有用的

二十：要使我们的超链接用新窗口打开,我们一般使用 target="_blank"

二十一：em斜体样式：我们对对象em设置font-style:normal样式即可

二十二：添加删除线 text-decoration: line-through

二十三：去掉盒子边框border：none

二十四：文字链接、搜索框、按钮等的外面会有一个虚线框（或高亮框），outline: none;可以清除他们

二十五: meta charset="UTF-8">

“utf-8”是一种字符编码。charset=”utf-8”是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作。国外的用户如果使用Windows XP英文版，浏览UTF-8编码的任何网页，无论是中文、还是日文、韩文、阿拉伯文，都可以正常显示。

html中的meta标签是在head区域中的一个辅助性标签，一般用于页面的说明，关键字和其他元数据，这些数据将服务于浏览器，搜索引擎等，它有4个属性分别是name属性、http-equiv属性、content 属性、scheme 属性。

<!DOCTYPE html>让浏览器获知文档类型，让浏览器知道用哪个HTML版本进行编写
<html lang="en">这个主要是给搜索引擎看的，搜索引擎去判断该站点是中文站还是英文站，中文的话是zh-CH
<head>
    <meta charset="UTF-8">告知浏览器此页面属于什么字符编码格式，为下一步浏览器做好“翻译”工作
    <meta http-equiv="X-UA-Compatible" content="IE=edge">告诉IE8采用何种IE版本去渲染网页
    <meta name="viewport" content="width=device-width, initial-scale=1.0">网页的宽度自动适应手机屏幕的宽度
    <title>Document</title>
    <link rel="stylesheet" href="todo.css">
    <script src="font/iconfont.js"></script>
    <script src="../jQuery.min.js"></script>
    <script src="todo.js"></script>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>

二十六：文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页

lang 用来定义当前文档显示的语言。

1. en定义语言为英语

2. zh-CN定义语言为中文

二十七. 链接的语法格式

文本或图像

两个属性的作用如下：

二十八：

二十九：

三十：

三十一：选择器分为基础选择器和复合选择器两个大类

 基础选择器是由单个选择器组成的

 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器（链接伪类选择器注意事项

1. 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active）等等

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

1. 属性选择器

2. 结构伪类选择器

3. 伪元素选择器

注意：类选择器、属性选择器、伪类选择器，权重为 10，伪元素选择器和标签选择器一样，权重为 1

三十二：text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

三十三：按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：

外联样式表：在head便签中用link标签的href属性来引用后缀名为.css的css样式文件

内联样式表：在head标签下的style标签中，选择器 + 样式声明

内部样式表：在标签的style属性中添加css样式声明

三十四：

三十五：嵌套块元素垂直外边距的塌陷解决方案：

① 可以为父元素定义边框。

② 可以为父元素定义内边距。

③ 可以为父元素添加 overflow:hidden。

三十六：，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，所以用浮动比较合适

三十七：清除浮动方法：

1. 额外标签法也称为隔墙法，是 W3C 推荐的做法。：额外标签法会在浮动元素末尾添加一个空的标签。例如，或者其他标签（如
等）注意：要求这个新的空标签必须是块级元素。

2. 父级添加 overflow 属性：可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

3. 父级添加after伪元素：

4. 父级添加双伪元素：

三十八：定位特殊特性

绝对定位和固定定位也和浮动类似。

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

三十九：元素的显示与隐藏

1. display 显示隐藏： display: none ；隐藏对象

 display：block ；除了转换为块级元素之外，同时还有显示元素的意思display 隐藏元素后，不再占有原来的位置。 2. visibility 显示隐藏 visibility 隐藏元素后，继续占有原来的位置。 3. overflow 溢出显示隐藏

四十：更改用户页面样式

鼠标样式 cursor 例 li {cursor: pointer; }

轮廓线 outline

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

防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的。

textarea{ resize: none;}

四十一： HTML5 新增的语义化标签

四十二： HTML5 新增的表单属性

placeholder:提示文本

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder {

color: pink;

}

四十三：src和href的区别

href(Hypertext Reference超文本引用)属性通过指定Web资源的位置，来定义当前元素或者当前文档与目标资源之间的链接或关系。当我们引入CSS文件时：

<link href="style.css" rel="stylesheet" />

src(Source)属性会将资源嵌入到当前文档中元素所在位置。当我们引入JavaScript文件时：

<script src="script.js"></script>

四十四：CSS三大特性

css有三个重要的特性：层叠性，继承性，优先级

四十五：bgc属性的书写顺序

background属性的值的书写顺序官方并没有强制标准的。为了可读性，定一个CSS书写规范，规则2.1：background的值的顺序是background-color，background-image，background-repeat，background-attachment，background-position。

四十六：

用来布局的标签

和，没有语义，只用来装内容

division的缩写，一个占一行。大盒子

span跨距，跨度。小盒子

四十七：图像标签

src是标签的必须属性，用来指定图像文件的路径和图像名

四十八：

表单标签

表单域

四十九：

块级元素

行内元素

行内块元素：

三者之间的转换

五十：表单元素

出了type属性外还有其他的常用属性

1.name和value是每个表单元素都有的属性值，主要提供给后台人员使用

2.name表单元素的名字，要求单选按钮和复选框都要有相同的name名字

3.checked主要针对单选按钮和复选框，主要作用是一打开页面就默认显示某个表单元素（注意要和下拉列表区分开）

实操

<label>标签

当点击标签内的文本时，浏览器会自动讲光标转移到对应的表单元素上，增加用户体验

下拉表单元素

在中定义selected="selected"时当前项为默认选中项

考核问题总结

一：网页中的绝对路径(注意区分JAVA)

绝对路径：在网站的应用中，通常我们使用"/"来表示根目录，/img/photo.jpg就表示photo.jpg文件在这个网站的根目录上的img目录里。如果源文件和引用文件在同一个目录里，直接写引用文件名即可。

二：表单标签名

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签来设置

<form>.
input 元素.
</form>

三：盒子模型包含哪些

盒子模型包括：边距，边框，填充，和实际内容。

四：去掉li里的小圆点

list-style: none;

五：css中外边距合并和塌陷的问题

一、什么是外边距塌陷

两个嵌套关系的（父子关系）块元素，当父元素有上外边距或者没有上外边距（margin-top），子元素也有上外边距的时候。两个上外边距会合成一个上外边距，以值相对较大的上外边距值为准。这种现象就是外边距的塌陷问题。这个时候你就会发现你给父元素设置的margin-top：50px是没有效果的。或者在你需要调整子元素的上边距相对于父元素产生一定的距离的时候也是没有效果的。这种外边距塌陷的问题可以说是css中的一个bug。

解决方法：

1.给父元素设置外边框（border）或者内边距（padding）(不建议)

2.子元素或者父元素的float不为none

3.子元素或者父元素的position不为relative或static

4.父元素的overflow为auto或scroll或hidden

5.父盒子的display的值为table-cell或inline-block

二、什么是外边距合并

这种现象发生在两个并列的元素之间。给一个元素设置下外边距（margin-bottom），并同时给一个元素设置上外边距（margin-top）。两个元素之间的距离不等于这两个外边距之和，而是等于其中最大的一个外边距。

解决方法：

1.只设置其中一个元素的margin值即可（推荐）

2.给每一个元素添加父元素，然后触发BFC规则（不推荐）

六：粘性定位

简介：position:sticky是css定位新增属性；可以说是static（没有定位）和固定定位fixed 的结合，简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置

七：精灵图怎样用

css精灵图（sprite）其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。

八：新增H5标签有哪些

1、结构标签

（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；

（2）article：特殊独立区块，表示这篇页眉中的核心内容；

（3）aside：标签内容之外与标签内容相关的辅助信息；

（4）header：某个区块的头部信息/标题；

（5）hgroup：头部信息/标题的补充内容；

（6）footer：底部信息；

（7）nav：导航条部分信息

（8）figure：独立的单元，例如某个有图片与内容的新闻块。

2、表单标签

（1）email：必须输入邮件；

（2）url：必须输入url地址；

（3）number：必须输入数值；

（4）range：必须输入一定范围内的数值；

（5）Date Pickers：日期选择器

（6）search：搜索常规的文本域；

（7）color：颜色；

3、媒体标签

（1）video：视频

（2）audio：音频

（3）embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。

九：语义化标签的优点

一、什么是HTML语义化标签