HTML、CSS有关知识

知识汇总（1）（2）

---

(大部分知识搬运于百度前端学院小可爱学员的问答)

一.

1.HTML是什么，HTML5是什么?
HTML 指的是超文本标记语言 (Hyper Text Markup Language)。
HTML5是最新的HTML标准，拥有更丰富的语义、图形以及多媒体元素等内容。

2.HTML元素标签、属性都是什么概念？
HTML不是编程语言，是标记语言，所以要使用标记标签来描述网页。
属性是用来提供HTML标签更多的信息。

3.文档类型是什么概念，起什么作用？
世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

4.meta标签都用来做什么的？
定义关于 HTML 文档的元信息。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。

5.Web语义化是什么，是为了解决什么问题？
HTML的每个标签都有其特定含义(语义),Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。

6.链接是什么概念，对应什么标签？
HTML 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
有两种使用 标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签。

7.常用标签都有哪些，都适合用在什么场景

标签	场景
body	在网页上要展示出来的页面内容一定要放在body标签中
p	如果想在网页上显示文章，这时就需要p标签了，把文章的段落放到p标签中。标签的默认样式，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。
span	标签是没有语义的，它的作用就是为了设置单独的样式用的。
br	在需要加回车换行的地方加入br，br标签作用相当于word文档中的回车。在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入br。没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有br、hr和img
div	在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个div标签中，这个div标签的作用就相当于一个容器。什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。用id属性来为div提供唯一的名称，必须唯一。
img	:插入图片,img src=”图片地址” alt=”下载失败时的替换文本” title = “提示文本” src：标识图像的位置；alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；图像可以是GIF，PNG，JPEG格式的图像文件。

8.表单标签都有哪些，对应着什么功能，都有哪些属性

标签	功能、属性
body	在网页上要展示出来的页面内容一定要放在body标签中
form	可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。form method=”传送方式” action=”服务器文件” . form标签是成对出现的，以form开始，以/form结束
action	浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。method ： 数据传送的方式（get/post）。所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在标签之间
input	当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。input type=”text/password” name=”名称” value=”文本” / 当type=”text”时，输入框为文本输入框;当type=”password”时, 输入框为密码输入框。name：为文本框命名，以备后台程序ASP 、PHP使用。value：为文本输入框设置默认值。(一般起到提示作用)
textarea	当用户需要在表单中输入大段文字时，需要用到文本输入域。textarea rows=”行数” cols=”列数” 文本 /textarea rows ：多行输入域的行数。cols ：多行输入域的列数。在textarea /textarea 标签之间可以输入默认值。
radio/checkbox	使用单选框、复选框，让用户选择,input type=”radio/checkbox” value=”值” name=”名称” checked=”checked”/> 当 type=”radio” 时，控件为单选框,当 type=”checkbox” 时，控件为复选框,value：提交数据到服务器的值（后台程序PHP使用）,name：为控件命名，以备后台程序 ASP、PHP 使用,checked：当设置 checked=”checked” 时，该选项被默认选中,同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。
submit	使用提交按钮，提交数据,input type=”submit” value=”提交”> type：只有当type值设置为submit时，按钮才有提交作用,value：按钮上显示的文字

9.ol, ul, li, dl, dd, dt等这些标签都适合用在什么地方，举个例子。
ol、ul、li适用无描述的列表。例如：新闻展示页面，一共N条新闻，点进去可浏览详情。
dl、dd、dt适用有描述的列表 例如：简历页面，介绍自己的信息等。

二.

---

1.什么是CSS，CSS是如何工作的
CSS 指层叠样式表 (Cascading Style Sheets),
浏览器将css的规则应用在html;前置条件html中引用了css.
(1)浏览器加载html
(2)浏览器解析html,同时加载css
(3)浏览器解析css,并使css结合html,生成DOM(Document Object Model,文档对象模型)
(4)浏览器展示DOM

2.CSS的基本语法是怎样的
(1)声明:(属性:值)
(2).css规则:选择器 {声明块};多个声明用";分隔构成声明块.(ps:p#id01 {xx属性:xx值});
(3).css语句:@规则和嵌套语句

3.CSS选择器是什么概念，简单选择器和属性选择器是什么?
选择器是一种模式，匹配页面元素;
简单选择器:
1.类型选择器(p,div)
2.类选择器(.)
3.ID选择器(#)
4.通用选择器(*)

属性选择器:
1.存在和值（Presence and value）属性选择器
2.子串值（Substring value）属性选择器

4.文本样式都有哪些相关属性，对应哪些值?
字体样式
1.color:red; #FFFFFF;rgb(0,125,246);rgb(100%,100%,100%);#fff;网络安全色;
2.font-family ：字体样式
3.font-size ：字体大小
4.font-style ：字体风格（该属性有三个值：normal - 文本正常显示，italic - 文本斜体显示，oblique - 文本倾斜显示）
5.font-weight ：文字体粗细
6.text-transform ：控制文本的大小写。
7.text-descoration ：规定添加到文本的装饰效果。（值为none，取消下划线）
8.text-shadow ：向文本添加阴影。
9.font-variant ：设定小型大写字母。

文本布局风格
1.text-align ：规定文本的水平对齐方式。
2.line-height ：设置行高。
3.word-spacing： 设置单词间距。
4.letter-spacing ：字符间距

---

知识汇总（3）（4）

三.

1.背景，边框，列表，链接相关属性

背景 background

属性	说明	值	备注
background-color	背景色		建议加上，作为后备，以防背景图像无法加载
background-image	背景图像	url(…)、渐变: linear-gradient(to 渐变的方向,开始的颜色,结尾的颜色)	渐变可以在中途选择其他的点
background-repeat	背景重复	repeat(默认)、repeat-x、repeat-y、no-repeat
background-position	背景定位 关键字、百分数值、长度值 坐标系为x坐标从左到右,y坐标从上到下;可以用于雪碧图
background-attachment	背景附着	scroll(默认)、fixed
background-size	背景图像	大小 长度值、百分数值、cover、contain
background	背景简写		可按任意顺序放置

2.CSS 各种选择器的概念，使用方法及使用场景
边框 border

属性	说明	值	备注
border	边框简写	[border-width border-style border-color /inherit]	三角形和梯形可以使用border+transparent来做
border-style	边框样式	none、hidden、dotted、dashed、solid、double、(groove、ridge、inset、outset、)inherit	样式预览
border-width	边框宽度		不支持百分比、默认为medium(3px)
border-color	边框颜色	透明:transparent	默认颜色同color
border-radius	边界圆角

列表 list

属性	说明	值	备注
list-style-type	列表标志	标志值
list-style-image	列表项图像	url()	可用background代替
list-style-position	列表项位置	inside(文本内文本环绕)、outside(默认)、inherit
list-style	列表简写	顺序:list-style-type list-style-position list-style-image(可省略某个值)

链接 a
根据所处状态决定样式

a:link {color:#FF0000;}        /* 未被访问的链接 */
a:visited {color:#00FF00;}    /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}    /* 正在被点击的链接 */
注意: 一定要按照LVHA的顺序指定！

可用background为连接增加小图标
制作导航条的放法：https://www.runoob.com/css/css-navbar.html.

3.CSS 选择器的优先级
(1)分组和继承

分组: 选择器用逗号分开，被分组的选择器可以分享相同的声明
继承: 正常情况下，子元素从父元素继承属性
但也会出现特殊情况，只能通过组选择器来对待

(2)伪类选择器
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

两者区别在于: 伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到
(3)组合器

Combinators	Select
A,B	匹配满足A（和/或）B的任意元素（参见下方 同一规则集上的多个选择器）.
A B	匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
A > B	匹配任意元素，满足条件：B是A的直接子节点
A + B	匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A ~ B	匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A)

(4)层叠
①找出所有相关的规则，这些规则包含于一个给定元素匹配的选择器
②对显式权重对所有声明排序。标志!important的规则的权重要高于没有!important标志的规则。创作人员的样式>读者的样式。有!important的读者样式强于其他所有样式（读者的重要声明>创作人员的重要声明>创作人员的普通声明>读者的普通声明>用户代理声明）
③按特殊性排序，特殊性高的优先
④按出现顺序排序，越后出现的权重就越大。

重要性:
!important总是优先于其他规则

特殊性:

内联样式1000;
ID属性100;
类属性/属性选择/伪类010;
元素/伪元素001

---

知识汇总（5）（6）

五.

1.盒子模型
盒子的宽度 = margin-left + border-left + padding-left +width + padding-right + border-right + margin-right.
1.1 内容区
width和height是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其他框
也可以使用min-width、max-width、min-height、max-height来设置最低/最高限度的width和height
默认情况下，width和height只包括内容区域的宽和高，不包括border、padding、margin。
使用box-sizing可以使其包含content、padding、border

box-sizing的值:

/* 默认值，标准盒子模型，只含内容区 */ 
box-sizing:content-box;
/* width 和 height 属性包括内容，内边距和边框，但不包括外边距 */ 
box-sizing:border-box;

1.2 内边距
padding

1.3 边框
border 详见day4的笔记

1.4 外边框
margin
外边距塌陷: 块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者

相邻兄弟元素margin合并
父级和第一个/最后一个子元素
空块级元素的margin合并

1.5 注意点
框的高度不能使用百分比长度
border不能使用百分比长度
如果内容区过大，将会溢出，此时可使用overflow.
overflow的值:

/* 默认值。内容不会被修剪，会呈现在元素框之外  */
overflow: visible;
/* 内容会被修剪，并且其余内容不可见  */
overflow: hidden;
/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容  */
overflow: scroll;
/* 由浏览器定夺，如果内容被修剪，就会显示滚动条  */
overflow: auto;

1.6 框类型 display

值	说明
block	块框（ block box）是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框 （ block box）
inline	行内框（ inline box）与块框是相反的，它随着文档的文字（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。
inline-block	行内块状框（inline-block box） 像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。
table	像处理table布局那样处理非table元素，而不是滥用HTML的;标签来达到同样的目的。
flex	处理一些困扰CSS已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。
grid	给出一种简单实现CSS网格系统的方式，而在传统上它依赖于一些棘手难以处理的CSS网格框架

2.浮动 float
2.1 浮动的背景和工作原理
浮动的最初是用来让文字环绕图片, 所以我能能推出:
浮动会脱离正常的文档流，并吸附到其父容器左边，正常布局中位于浮动元素下的内容会围绕着浮动元素

2.2 浮动的包裹性
包裹性指的是元素尺寸刚好容纳内容, 表现得就像diaplay:inline-block一样

具有包裹性的其他属性:

display:inline-block
position:absolute/fixed/sticky
overflow:hidden/scroll

2.3 浮动的破坏性
会使父元素高度塌陷——为了实现文字环绕效果

具有破坏性的其他属性:

display:none
position:absolute/fixed/sticky

2.4 清除浮动 (clearfix hack)
2.4.1 投机取巧法
在父元素底部加上
<div style="clear:both;"></div>
虽说兼容性好，但是浪费一个标签，违反了语义化，不推荐
2.4.2 overflow + zoom法
补充知识: BFC(Block Formatting Context)

BFC:块级格式化上下文【在css3中叫Flow Root】是一个独立布局环境，相邻盒子margin垂直方向会重叠。

什么样的元素会为其内容生成一个BFC呢？

浮动元素，即float:left/right
绝对定位元素，即position:absolute/fixed
块容器，即display:table-cell/table-caption/inline-block
设置了除visible外的overflow值的块盒子，即overflow:hidden/scroll/auto

BFC特性：

创建了BFC的元素中，子浮动元素也会参与高度计算
与浮动元素相邻的、创建了BFC的元素，都不能与浮动元素相互覆盖
创建了BFC的元素不会与它们的子元素margin重叠

2.4.3 after + zoom法
看一下2.4.1，虽然不错，但是违反语义化; 所以就想到了通过CSS来添加子元素，不修改HTML代码 —— :after选择符

.clearfix:after {
    content: " ";  //content可以任意发挥
    display: block;
    line-height: 0;  //height: 0也行
    clear: both;
}
.clearfix {
    zoom: 1; 
}

2.5 浮动布局
转发自 CSS深入理解之float浮动(张鑫旭)

2.5.1 单侧尺寸固定的流体布局
法一: 改变DOM位置:

1.width+float
2.margin-left/padding-left
法二: 不改变DOM位置:

2嵌在1中

width:100%+float:left（自适应的容器外）
padding-right/margin-right
width+float+margin(负)

2.5.2 两侧都适应的流体布局
原理是左栏浮动，右栏生成BFC，根据BFC特性与浮动元素相邻的、创建了BFC的元素，都不能与浮动元素相互覆盖。

1.float
2.display:table-cell/inline-block

—(自百度前端学院搬运)