HTML和CSS知识点总结（包括H5和C3)

本文链接：https://blog.csdn.net/m0_67391518/article/details/123346745

HTML和CSS知识点总结

1.常用的HTML标签

标题标签 <h1></h1>~<h6></h6>
段落标签<p></p>和换行标签<br/>
文本格式化标签
加粗<strong></strong>和<b></b>
倾斜<em></em>和<i></i>
删除线<del></del>和<s></s>
下划线<ins></ins>和<u></u>
div标签<div></div>和span标签<span></span>
图像标签<img src="图片所在的路径" alt="如果图片不显示用什么文字代替" title="图片的标题">
超链接标签<a href="链接地址"></a>(hypertext reference, href)
表格标签<table></table>
表格行标签<tr></tr> （table row, tr）
表格头标签<th></th> (table head, th)
表格数据标签<td></td> (table data, td)
无序列表标签<ul></ul> (unordered list 有序列表)
ul标签下一般包含小li标签<li></li>
有序列表标签<ol></ol>
表单列表标签<form></form>
label标签<label></label>
下拉表单标签<select></select>
文本域标签<textarea></textarea>
以下为HTML5新增标签
语义标签 <header>头部标签</header>，<nav>导航栏标签</nav>， <section>某个区域</section>
视频标签 <video></video>
音频标签 <audio></audio>

2.常用的CSS选择器

标签选择器
类选择器
id选择器
通配符选择器
后代选择器
子选择器
并集选择器
伪类选择器
属性选择器（CSS3)
结构伪类选择器（CSS3)
伪元素选择器（CSS3）

3.块级元素，行内元素，行内块元素

在HTML中，元素可以分为块级元素和行类元素。在CSS规范规定中，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内“元素。

块级元素有<div></div> <h1></h1>~<h6></h6> <p></p> <ul></ul> <ol></ol> <li></li> <dl></dl> <dt><dt> <dd></dd>
行内元素有<span></span> <a></a> <img></img> <input></input> <select></select> <strong></strong>
样式转换：
行内元素转换为块级元素 display:block
块级元素转化为行内元素 display:inline
将元素转化为内联元素 display:inline-block 它既有块级元素可以设置宽高的特点，也有行内元素默认不换行的特点

4.CSS中选择器的优先级

CSS中的选择器越是特殊，它的优先级就越高。也就是说选择器的指向越准确，它的优先级就越高。
！important > id选择器 > class选择器 > 标签选择器=伪类选择器=属性选择器> 标签选择器 = 伪元素选择器 > 继承 > 通配符

5.盒子模型

盒子模型就是将HTML元素看作是一个盒子，它包含：外边距，边框，内边距和内容。
在W3C规定的标准的盒子中，你设定的CSS元素的宽度和高度是内容区域的宽度和高度。要知道完整大小的元素，还需要加上内边距，边框和外边距。 box-sizing: content-box;盒子模型为内容盒模型。box-sizing: border-box;盒子模型为边框盒模型。

6.什么是浮动，为何要清除浮动，清除浮动的方法

什么是浮动：尽可能的使一个元素向左或者向右
为什么要清除浮动：因为父盒子在很多情况下，不方便给高度，但是子盒子浮动又不占位置，最后父盒子高度为0时，就会影响下面的标准流的盒子。清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。
清除浮动的方法：
方法1：额外标签法：在浮动元素的结尾处添加一个空的div兄弟元素，然后利用css中的clear:both（此句代码的意思为：不允许左侧和右侧有浮动对象）清除浮动，让父级div能够自动获取到高度，但是如果浮动的页面多，就要加很多空的div，效率不是很高。
方法2：通过触发BFC方式，实现浮动清除：父级div定义 overflow：hidden
方法3：伪元素清除浮动
首先给要清除浮动的DIV添加一个类名clearfix,然后再输入以下代码

.clearfix :: after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
*zoom: 1;
}

方法4：双伪元素清除浮动
首先给要清除浮动的DIV添加一个类名clearfix,然后再输入以下代码

.clearfix::before,
.clearfix::after {
	content:"";
	display:block
	clear:both;
}
.clearfix {
	zoom: 1;
}

7.display和visibility

display：none 使用该属性后，HTML元素的所有属性值都会”丢失“；
visibility:hidden 使用该属性后，HTML元素的属性都在，只是视觉上看不见了；

8.定位的种类及其特点

position的常见四个属性值：static, relative, absolute, fixed, sticky，分别代表着，静态定位，相对定位，绝对定位，固定定位和粘性定位。

静态定位，它始终会处于页面流给予的位置。
相对定位，可以将其移至相对于其正常位置的地方，意思就是如果设置了relative值，它偏移的top，right，bottom，left的值都以它原来的位置为基准偏移，而不管其它元素会怎么样，且相对定位移动后的元素再原来的位置上仍占据空间。
绝对定位，可定位于相对于包含它的元素的指定坐标。
注意点1：如果它的父容器设置了position属性，并且position的属性为absolute或者relative，那么就会依据父容器进行偏移
注意点2：如果其父容器没有设置position属性，那么偏移以body为依据。
注意点3：绝对定位在标准流中不占位置。
固定定位，可定位于相对于浏览器窗口的指定坐标。
注意点1：固定定位始终以body为依据。
注意点2：固定定位在标准流中不占位置。

9.CSS引入有哪些方式？link和@import的区别

CSS有四种引入方式：

1.内联方式如：<div style="background: red"></div>
2.嵌入方式嵌入方式指的是在HTML头部中的<style></style>标签下书写CSS代码。嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。
3.链接方式链接方式指的是在HTML的<head></head>标签下写下引入链接，示例：

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

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

4.导入方式导入方式指的是使用CSS规则引入外部CSS文件。示例：

<style>
	@import url(style.css);
</style>

link和@import的区别：

link属于HTML，通过<link>标签中的href属性来引入外部文件，而@import 属于CSS，所以导入语句应该写在CSS中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件
@import是CSS2.1才出现的概念，会有兼容性的问题
当HTML文件被加载时，link引用的文件会同时被加载，而@import引入的文件则会等页面全部下载完毕再被加载
小结：我们应该尽量使用<link>标签导入外部CSS文件，避免或者少使用其它三种方式。

10.解释css sprites,如何使用

css精灵图，把一堆小的图片整合到一张大的图片上，以减轻服务器对图片的请求数量。

11.用css画出一个三角形，圆，椭圆

1.圆形

#css3-circle {
	width:150px;
	height:150px;
	border-radius:50%;
	background-color:#232323;
}

2.椭圆

#css3-elipse{
	width:200px;
	height:100px;
	border-radius:50%;
	background-color:#232323;
}

3.三角形

/* 下三角 且三角形不是那么的好看，没有下面的下三角好看，因为边框的上下左右一样宽*/
#css3-triangle {
	width:0;
	height:0;
	border:100px solid transparent;
	border-top-color: pink;
}


/* 上三角 */
#css3-triangle {
	width:0;
	height:0;
	border-left:100px solid transparent;
	border-right:100px solid transparent;
	border-bottom:150px solid #232323;
}

12.复合属性写法

1.字体的复合属性写法

div {
      /* font: font-style font-weight font-size/line-height font-family; */
      font: italic 700 16px 'Microsoft YaHei'；
        }

2.背景属性的复合写法

/* 将背景设置为黑色，并导入一张图片，且不重复 固定定位 位置居中靠上 */
background: black url(images/兔子.jpeg) no-repeat fixed center top;

3.边框的复合型写法

 div {
            /* 边框的简写方法 */
            border: 5px solid pink;
        }

4.盒子内边距的复合型写法

div {
            padding: 5px 10px 20px 30px;
        }

5.css3中动画属性的复合型写法

        @keyframes move {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(1500px, 0);
            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* animation-name: move;
            animation-duration: 2s;
            animation-timing-function: ease;
            animation-delay: 1s; */
            /* animation-iteration-count: infinite; */
            /* animation-direction: alternate; */
            /* animation-fill-mode: forwards; */
            /* 动画简写 前面2个属性一定要写 其它可以省略 */
            animation: move 2s linear 1s 1 alternate forwards;
        }
        div:hover {
            animation-play-state: paused;
        }

13.居中对齐

1.当盒子指定了宽度，如何水平居中对齐

div {
            /* 只用把外边距上下设置一个距离，左右自动调节就可以了 */
            margin: 100px auto;

        }

2.垂直居中对齐

  img {
            vertical-align: middle;
        }

3.水平垂直居中对齐

div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* transform: translateX(50%); */
        }

        P {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            transform: translate(-50%, -50%);
        }

14.CSS3新增函数和属性

1.calc计算函数 calculate v.计算 calculation n.计算 calc为calculation的缩写
2.transition过渡函数 transit n.运输 vt.运送 vi.经过 transition n.过渡；转变
3.transform属性 transform v. 改变，变换
transform属性应用于元素的2D和3D转换，该属性允许你将元素平移（translate v.翻译；转化；平移），旋转（rotate v.旋转），放缩（scale v.放缩），倾斜（skew v.倾斜）等。
4.自定义动画函数animate @keyframe

@keyframes move {
            0% {
                transform: translateX(0px);
            }

            100% {
                transform: translateX(1000px);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            animation-name: move;
            animation-duration: 2s;
        }