(大部分知识搬运于百度前端学院小可爱学员的问答)
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和imgdiv在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个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 ：字符间距
1.背景，边框，列表，链接相关属性
背景 background
属性说明值备注background-color背景色建议加上，作为后备，以防背景图像无法加载background-image背景图像url(…)、渐变: linear-gradient(to 渐变的方向,开始的颜色,结尾的颜色)渐变可以在中途选择其他的点background-repeat背景重复repeat(默认)、repeat-x、repeat-y、no-repeatbackground-position背景定位 关键字、百分数值、长度值 坐标系为x坐标从左到右,y坐标从上到下;可以用于雪碧图background-attachment背景附着scroll(默认)、fixedbackground-size背景图像大小 长度值、百分数值、cover、containbackground背景简写可按任意顺序放置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默认颜色同colorborder-radius边界圆角列表 list
属性说明值备注list-style-type列表标志标志值list-style-image列表项图像url()可用background代替list-style-position列表项位置inside(文本内文本环绕)、outside(默认)、inheritlist-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)组合器
CombinatorsSelectA,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
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/scroll2.3 浮动的破坏性 会使父元素高度塌陷——为了实现文字环绕效果
具有破坏性的其他属性:
display:none position:absolute/fixed/sticky2.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
—(自百度前端学院搬运)
