1.了解什么是Web
web即全球广域网，也称万维网。它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。它有三种表现形式：超文本、超媒体、超文本协议。
2.HTML是什么，HTML5是什么
HTML 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。它用来构造一个网页的基本骨架，由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。
html5是html的最新标准。
3.HTML元素标签、属性都是什么概念？
一：标签
标签用来标记内容块，也用来标明元素内容的意义，标签使用尖括号包围，如和，这两个标签表示一个HTML文档。
标签有两种形式：成对出现的标签和单独出现的标签
1、成对出现的标签
成对出现的标签包括开始标签和结束标签，<开始标签>内容</结束标签>
所谓开始标签，及标志一段内容的开始，例如：
<html>表示HTML文档开始了；到</html>结束，从而形成一个HTML文档。
<head>和</head>标签描述HTML文档的相关信息，之间的内容不会在浏览器窗口上显示出来
<body>和</body>标签包含所有要在浏览器窗口上显示的内容，也就是HTML文件的主体部分。
所谓结束标签，是指和开始标签相对的标签。结束标签比开始标签多一个斜杠”/“。
2、单独出现的标签
虽然并不是所有的开始标签都必须有结束标签对应<br><hr><img><input><link><meta>等
3、标签的嵌套
标签可以放在另外一个标签所能影响的片段中，以实现对某一段文档的多重标签效果，但是要注意必须要正确嵌套。
二：元素
标签是为一个元素的开始和结束做标记，网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。
如<head>和</head>是标签，但是下面的就是一个head元素：
<head><title>HTML中的几个基本概念------标签、元素、属性</title></head>
其中<title></title>是标签，但
<title>HTML中的几个基本概念------标签、元素、属性</title>
又是一个title元素，同时这个title元素又是嵌套在head元素中的另一个元素。
三：属性
与元素相关的特性叫做属性，可以为属性赋值，属性包含元素的额外信息，这些信息不会出现在实际的内容中
①：不定义属性值
HTML规定属性也可以没有值
浏览器会使用compact属性的默认值，但有的属性没有默认值，因此不能省略属性值。
4.文档类型doctype是什么概念，起什么作用？
!DOCTYPE ,是用来声明并帮助浏览器正确识别网页的最短有效声明。因为HTML发展至今有许多的不同版本，所以声明不同的文档类型可以让浏览器完全正确地显示出 HTML 页面。
DOCTYPE是docunment type（文档定义）的简写，用来说明web设计中所用的html或xhtml的类型，指出浏览器或者其他阅读程序按照什么样的规则集去解释文档中的标记.
5.meta标签都用来做什么的？
meta标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
meta标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
6.Web语义化是什么，是为了解决什么问题
简单说来就是让机器可以读懂内容。由编写者对网页内容进行语义化主要可以让不同的人和机器对这段内容的作用和所属有清晰的认识，从而查看或者找到自己需要的内容
Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。如果可以在合适的位置使用恰当的标签，那么写出来的页面语义明确，结构清晰，搜索引擎也可以认出哪些是页面重要内容，予以较高的权值。
web语义化的好处
去掉或者丢失样式的时候能够让页面呈现出清晰的结构
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
7.链接是什么概念，对应什么标签？
HTML 使用超级链接与网络上的另一个文档相连。对应a标签。
超链接使互联网成为互联的网络。超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分，我们可以在一个简单的网址上提供应用程序（与必须先安装的本地应用程序或其他东西相比）。几乎任何网络内容都可以转换为链接，点击（或激活）超链接将使网络浏览器转到另一个网址（URL）
8.常用标签都有哪些，都适合用在什么场景
1 | <a> 用于超链接。< a href="">some text</ a> |
9.表单标签都有哪些，对应着什么功能，都有哪些属性
表单元素是允许用户在表单中(比如:文本域,下拉列表,单选框,复选框等等)输入信息的元素，最主要的作用就是收集信息。表单元素是页面中不可缺少的元素。一般来说，表单包含如下几个部分：
提示信息：表单中包含的说明性文字
表单控件：包含了具体的表单功能项
表单域：容纳所有表单控件和提示信息
常用的表单元素，包括：
form: 定义供用户输入的表单。
fieldset: 定义域。即输入区加有文字的边框。
legend：定义域的标题，即边框上的文字。
label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。
input: 定义输入域，常用。可设置type属性，从而具有不同功能。
textarea: 定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。
button: 定义一个按钮。
select: 定义一个选择列表，即下拉列表。
option: 定义下拉列表中的选项。
接下来是对这些表单元素的具体分析。
<form name="" action="" method="get">……</form>
name : 表单名称；action : 用来指定表单处理程序的位置（url）；method : 定义表单结果从浏览器传送到服务器的方式，默认为”get”（也可以是post）<input type="" name="" value="" size="">
name:控件名称；value:input控件默认文本值；size:input控件在页面中的显示宽度（必须是正整数）
input常用type属性如下：text：单行文本输入框，可以通过正整数的size控制框长度。
password：密码输入框。
radio：单选按钮，同一组的单选按钮必须要有相同的name。
checkbox：复选框，同一组的单选按钮必须要有相同的name。
button：普通按钮。
submit：提交按钮，每出现一次，一个 Submit 对象就会被创建。
reset：重置按钮，会重置当前表单中全部的内容。
image：图像形式的提交按钮，写法是“”。
hidden：隐藏域，隐藏字段对于用户是不可见的。
file：文件域，用于文件上传。
<selectt size="" multiple="multiple"><option hidden>选项1</option>
size：下拉菜单的可见选项数；multiple：多选。
在最新的html5中，有一些表单的新增属性，多用于js，如
datalist : 定义填写一个input时，提示几个option用于提示。可通过input的list特性与此元素作关联。
output : 表示计算的结果。可通过for特性与其它能够影响运算的元素（如input）作关联。
还有一些新增的type属性：search：input会呈现为搜索框（与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容）。
url：编辑url的控件，提交时换行符与首位的空格都将自动去除。
email：可输入一个邮件地址。
color : 选择颜色的控件。
date : 选择年月日的控件。
此外，还有time、datetime、datetime-local、month、week、number、range类型
10.ol, ul, li, dl, dd, dt等这些标签都适合用在什么地方，举个例子
ol为有序列表,即为一个需要排序的列表内容进行排列; （问路）
ul为无序列表,即为一个需要列表但不需要排顺序的内容排列; （早点清单）
li为列表的内容;
dl为定义列表;
dt为定义列表内的标题或项目名称;
dd为定义定义列表中项目的描述(独白旁白)CSS
1.CSS选择器类型、优先级
1.标签选择器(如：body,div,p,ul,li)
2.类选择器(如：class=”head”,class=”head_logo”)
3.ID选择器(如：id=”name”,id=”name_txt”)
4.全局选择器(如：*号)
5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)
6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)
7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
8.继承选择器(如：div p,注意两选择器用空格键分开)
9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)
10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
11.子选择器 (如：div>p ,带大于号>)
12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
2.CSS继承，层叠，样式优先级机制
当多个相互冲突的CSS声明应用于同一个元素时，CSS层叠算法会根据一定的机制，从最高权重到最低权重的顺序列出
在CSS中，每个CSS属性定义的概述都指出了这个属性是默认继承的还是默认不继承的。这决定了当你没有为元素的属性指定值时该如何计算值。当元素的一个
继承属性没有指定值时，则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值；当元素的一个非继承属性没有指定值时，则取属性的初始值。
3.文本，边框，背景，行高等相关属性
border:1px solid red;
background-color: cornflowerblue;
background-image: url(‘1.jpg’);
background-repeat: no-repeat;(repeat:平铺满)
background-position: right(左右距离) top（上下距离）（20px 20px）;(横向：left center right)(纵向：top center bottom)
简写：< body style=”background: 20px 20px no-repeat #ff4 url(‘1.jpg’)”>
< div style=”width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url(‘1.jpg’)”>
4.块状元素，内联元素和内联块状元素的概念
块级元素特点：
1 | <div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> |
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）。默认高度等于子元素高度。父子均是块级元素时，子块的高度可能冲破父级的限制
内联元素特点：
1 | <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> |
1.和其他内联元素都在一行上；
2.可以通过margin、padding来改变左右的距离，但不可以改变上下的距离，导致width、height、line-height失效或。可以使用border。
3.内联元素之间有空白区域，空白区域的形成是因为之间有回车，在html中，空格、制表符、回车都属于空白符，多个空白符都会视为一个空格，空格的大小由父级
inline-block 元素特点：
1 | <img>、<input> |
1.和其他元素都在一行上；
2.元素的高度、宽度、行高以及顶和底边距都可设置。
3.它也会有元素间出现空白区域的问题
5.盒模型的所有概念，学习如何计算各种盒模型
IE盒子：宽高包括padding和border
W3C盒子：宽高为content的宽高
如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性
box-sizing: content-box是W3C盒子模型box-sizing: border-box是IE盒子模型
6.position的相关知识，position有几种，absolute和relative的区别
position: static | relative | absolute | fixed | sticky
static该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时
top,right,bottom,left和z-index属性无效relative 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移，未脱离文档流。（其他元素的位置不会受该元素的影响发生位置改变来弥补该元素偏移后剩下的空隙）
absolute不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并，脱离了文档流。
fixed固定定位与绝对定位相似，但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。
fixed属性会创建新的层叠上下文。当元素祖先的transform属性非none时，容器由视口改为该祖先。sticky盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为
table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky对table元素的效果与position: relative相同。粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
7.float的相关知识
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。
当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
对于浮动，需要了解的是：
*浮动会将元素从文档流中删除，他的空间会被其它元素补上。
*浮动的参数物是父元素，是在父元素这个容器中飘。
*为了清除浮动造成的对浮动元素之后元素的影响，我们在浮动元素之后加一个div，并将这个div的clear设置为both。
*如果两个元素都设置了浮动，则两个元素并不会重叠，第一个元素占据一定空间，第二个元素紧跟其后。如果不想让第二个元素紧跟其后，可以对第二个浮动的元素使用clear。
浮动元素是 float 的计算值非 none 的元素。
8.基本的布局方式
固定布局、流式（百分比）布局、弹性布局、浮动布局、定位布局
9.Grid,Flexbox等布局方式
弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。
这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。flex主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针对大规模的布局。
Flex 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
10.神马圣杯布局、双飞翼布局都是些什么东西
11.强大的负外边距都能干嘛
1 | 影响元素在文档流中的位置、增加元素宽度、对浮动元素的影响、对居中的影响 |
12.display的几个属性，及其区别
- inline:
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
- 不能更改元素的height，width的值，大小由内容撑开.
- 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.
- block:
- 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
- 能够改变元素的height，width的值.
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
- inline-block:
- 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
13.display:none与visibility:hidden的区别
1 | display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素； |
14.浏览器清除浮动的方式及其原理
1》添加额外的标签：在浮动元素末尾添加一个空的标签例如 < div style=”clear:both”>，其他标签br等亦可
2》使用 br标签和其自身的 html属性：< br clear=”all” />
3》父元素设置 overflow：hidden
4》父元素设置 overflow：auto 属性
5》父元素也设置浮动
6》父元素设置display:table
7》使用 :after 伪元素
1 | `.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }.clearfix { *zoom:1; }` |
15.BFC
(1).BFC的特性:
①块级格式化上下文会阻止外边距叠加
②块级格式化上下文不会重叠浮动元素
③块级格式化上下文通常可以包含浮动
创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。
2.触发BFC的条件
1、float 除了none以外的值
2、overflow 除了visible 以外的值（hidden，auto，scroll ）
3、display (table-cell，table-caption，inline-block)
4、position（absolute，fixed）
5、fieldset元素
16.src与href的区别
href表示超文本引用。用来建立当前文档和引用资源之间的链接。常用的有：link、a。
src是source的缩写，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe
简而言之，src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。17.px、em、rem的区别
都是用于设置字体的大小以及盒子的宽高，但是px不会因为浏览器尺寸的改变而改变，而em和rem会因为浏览器尺寸的变化而变化
像素是相对于显示器屏幕分辨率而言的
em是一个相对长度的单位，是相对于当前对象内文本的字体尺寸。如过我们未设置当前文本的字体尺寸，那么em就会相对于浏览器的默认字体尺寸， em大小不是固定的，会继承父级元素的字体大小。
rem相对的只是HTML根元素，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。18.为什么要使用css sprites
CSS Sprites其实就是把网页中一些[背景图片]整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出[背景图片]的位置。
当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了[HTTP请求]的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
缺点：就是在拼图时，比较麻烦，还有后期维护也比较麻烦，比如做好的图，然后一个图标改了大小，但是图标之间留的位置不够，那你就要重写很多css。因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐19.什么是CSS及CSS怎么运作
CSS (Cascading Style Sheets) 是用来样式化和排版你的网页的
—— 例如更改网页内容的字体、颜色、大小和间距，将内容分割成多列或者加入动画以及别的装饰型效果。是一种用于向用户指定文档如何呈现的语言。
Web浏览器将CSS规则应用于文档以影响它们的显示方式。