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

1.常用的HTML标签

1. 标题标签 <h1></h1>~<h6></h6>
2. 段落标签<p></p>和换行标签<br/>
3. 文本格式化标签
   加粗<strong></strong>和<b></b>
   倾斜<em></em>和<i></i>
   删除线<del></del>和<s></s>
   下划线<ins></ins>和<u></u>
4. div标签<div></div>和span标签<span></span>
5. 图像标签<img src="图片所在的路径" alt="如果图片不显示用什么文字代替" title="图片的标题">
6. 超链接标签<a href="链接地址"></a>(hypertext reference, href)
   <a>标签默认有下划线，而Bootstrap只有在hover状态下才加下划线。
7. 表格标签<table></table>
   表格行标签<tr></tr> （table row, tr）
   表格头标签<th></th> (table head, th)
   表格数据标签<td></td> (table data, td)
8. 无序列表标签<ul></ul> (unordered list 有序列表)
   ul标签下一般包含小li标签<li></li>
9. 有序列表标签<ol></ol>
10. 表单列表标签<form></form>
11. label标签<label></label>
12. 下拉表单标签<select></select>
13. 文本域标签<textarea></textarea>
14. input标签

属性	值	描述
value	text	指定元素的值
name	text	name属性规定元素的名称
alt	text	定义图像输入的替代文本
src	URL	src属性规定显示为提交按钮的图像的URL
checked	checked	checked属性规定在页面加载时应该被预先选定的元素。（只针对type="checked"或者type=“radio”)
type	button	定义为一个提交按钮
type	submit	定义为一个提交按钮。提交按钮会把表单数据发送到服务器。
type	radio	单选框
type	checkout	多选框
type	select option	下拉框

16. 语义标签 <header>头部标签</header>，<nav>导航栏标签</nav>， <section>某个区域</section> （h5）
17. 视频标签 <video></video> （h5)
18. 音频标签 <audio></audio> (h5)

2.常用的CSS选择器

选择器的具体用法

选择器	例子	例子描述
.class	.intro	选择class="intro“的所有元素
.class1.class2	.name1.name2	选择class属性中同时有name1和name2的所有元素
.class1 .class2	.name1 .name2	选择作为类名name1元素后代的所有类名name2元素
#id	#firstname	选择id="firstname"的元素
*	*	选择所有元素
element	p	选择所有<p>元素
element.class	p.intro	选择class="intro"的所以<p>元素
element,element	div,p	选择所有<div>元素和所有<p>元素
element element	div p	选择<div>元素内的所有<p>元素
element>element	div > p	选择父元素是<div>的所有<p>元素
element+element	.div+p	选择紧跟<div>元素的首个<p>元素
element1~element2	p~ul	选择前面有<p>元素的每个<ul>元素
[attribute]	[target]	选择带有target属性的所有元素
:active	a:active	选择活动链接
::after	p::after	在每个<p>的内容之后插入内容
::before	p::before	在每个<p>的内容之前插入内容
:checked	input:checked	选择每个被选中的<input>元素
:disabled	input:disabled	选择每个被禁用的<input>元素
:first-child	p:first-child	选择属于父元素的第一个子元素的每个<p>元素
:last-child	p:last-child	选择属于其父元素最后一个子元素每个<p>元素
:nth-child(n)	p:nth-child(-n + 2)	选择属于其父元素的前两个子元素的每个<p>元素

3.CSS中选择器的优先级

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

4.伪类和伪元素的区别

伪类的操作对象是文档树（HTML文档树被解析之后，转化为DOM树）中已有的元素，而伪类元素创建了一个文档树之外的元素。因此伪类和伪元素的区别在于：是否创建了一个文档树之外的元素。`

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

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

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

6.盒子模型

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

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

1. 什么是浮动：尽可能的使一个元素向左或者向右
2. 为什么要清除浮动：因为父盒子在很多情况下，不方便给高度，但是子盒子浮动又不占位置，最后父盒子高度为0时，就会影响下面的标准流的盒子。清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。
3. 清除浮动的方法：
   方法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;
}

8.display和visibility

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

9.定位的种类及其特点

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

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

10.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文件，避免或者少使用其它三种方式。

11.解释css sprites,如何使用?

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

12.用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;
}

13.复合属性写法

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;
        }

14.居中对齐

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%);
        }

15.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;
        }