HTML的知识点
1、！doctype html的作用
声明文档类型
2、网页的三大组成部分
结构层（html）、表现层（css）、行为层（js）
3、什么是html?
超文本标记语言（Hyper Text Markup Language）
4、什么是xhtml？
可扩展的超文本标记语言
5、文件名规范
小写英文字母、数字、下划线的组合，其中不得包含汉子、空格和特殊字符；必须与英文开头
6、站点的作用
整合网站资源，规划网站的内容和代码
7、html的注释
<!-- -->
8、html的三种列表及基本写法
无序列表：
<ul>
<li></li>
</ul>
有序列表：
<ol>
<li></li>
</ol>
自定义列表：
<dl>
<dt></dt>
<dd></dd>
</dl>
9、alt和title的区别
它们分别是img标签中的属性;
title：鼠标在图片上提示的信息
alt：图片载入失败的提示信息
10、如何设置单元格与内容之间的距离
cellspacing="0"
11、如何设置单元格与内容之间的距离
cellpadding="0"
12、设置单元格的几个必要条件
宽度（width）、高度（height）、边框（border）
13、单元格的行合并和列合并
行合并：rowspan; 列合并：colspan
14、target打开页面的两种方式
target="_self"：在本页面打开另一个页面
_blank：新开一个页面
15、input的type类型
文本输入框：text
密码输入框：password
空按钮：botton
提交按钮：submit
重置按钮：reset
单选按钮：radio
复选按钮：checkbox
16、如何禁止表单或输入框输入
disabled
17、如何让checkbox默认状态被选中？
checked
18、css的基本语法
选择符{属性：属性值}
19、css的引入方式？
内部引入、外部引入、行间引入
20、css的选择符及其权重
id、class、标签、伪类、全局、包含、群组
100、10、1 10、1、相加 无
21、伪类选择器的几种状态
：link 默认状态
：visited 已经访问的状态
：hover 鼠标滑过的状态
：active 鼠标按下去的状态
22、字体的属性都有那些？
font-size 字体大小
font-style 字体倾斜
font-family 字体类型
font-weight 字体加粗
color 字体颜色
line-height 行高
23、文本属性都有那些？
text-transform
text-align 对齐方式
text-decoration 下划线等类型
text-indent 首行缩进
letter-spacing 小写
Word-spacing 大写
24、列表属性
list-style-type
list-style-image
list-style-position
25、background-repeat有哪些属性？
no-repeat 不平铺
repeat 平铺
repeat-X 横向平铺
repeat-Y 纵向平铺
26、实现人本三个点的条件
1、容器宽度：width
2、强制文本在一行显示：white-space：nowrap
3、溢出内容隐藏：overflow：hidden
4、溢出文本显示省略号：text-overflow：ellipsis
27、简述jpg、png、gif的区别及特点
jpg：有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图片
png：有损压缩格式，靠损失图片的色彩数量来减少图片的体积，支持透明，不支持动画，是fireworks的源文件格式；适用于颜色数量较少的图像
gif：有损压缩格式，靠损失图片色彩的数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图片
28、常见的内联元素和块级元素有那些
块：div、form、h1~h6、hr、ol、ul、p
内：a、br、i、em、img、input、span、strong、select
29、简述块级元素与内联元素的特点
1、块级元素独占一行，会顺序自上而下排列
2、块级元素可以定义自己的高度
3、块级元素可以作为其他元素的容器
30、vertical-align的用法
1、必须给父级元素加上text-align：center
2、必须给当前元素转化成内联元素（display：inline-block）；再给当前元素加上vertical-align:middle
3、在当前元素后（没有回车）加上同级元素span，并对span进行vertical-align：middle;width：0;height：100%；display：inline-block;
31、非置换元素（空元素）
具有内联元素的特征，但可以直接设置宽度和高度
常见的空元素有：input、img、select、textarea
32、position定位的属性值都有哪些？每个值得意思是什么？
static：默认值。它始终处于文档流所给予的位置，此元素会忽略任何top、bottom、left或right的声明
absolute：相对于父级元素的绝对定位，它会脱离文档流，层叠的顺序可用z-index设置
relative：相对于默认位置的偏移定位，相对于自己的初始位置发生移动，不会破坏文档流
fixed：相对于浏览器的绝对定位，不论窗口滚动到哪个位置都会留在那个位置，它有z-index属性
33、如何让元素消失
display:none;
height:0
overflow:hidden
position为负值
margin为负值
34、如何给一个元素透明度，使元素的内容不发生透明度的变化
1、rgba（0,0,0,0.1）
2、定位脱离文档流
35、什么是精灵图（雪碧图）？原理是什么？有那些优点？
1、将导航背景图片、按钮背景图片等有规则的合并成一张背景图，即多张图片合并成一张整图，用background-position来实现背景图片的定位技术
2、优点：通过图片的整合来减少对服务器的请求次数，从而提高页面的加载速度；并且减少图片的体积
37、伪对象选择符有哪些？
：：after与content属性一起使用，定义对象后的内容
：：before与content属性一起使用，定义对前的内容
：：first-letter定义对象内第一个字符的样式
：：first-line定义对象内第一行的样式
：：selection定义对象选中后高亮的效果
38、清楚浮动的几种方式及其优缺点
1、给父级元素添加声明overflow：hidden
优点：简单、代码少、浏览器支持好
缺点：和position一起使用需谨慎，超出部分会隐藏
2、给父级元素设置height
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
3、在浮动元素下方加空盒子，并给该元素添加声明div{clear:both}
优点：简单、代码少、容易掌握
缺点：若浮动过多，会导致代码累赘
4、万能清除浮动法；声明clearfix：after{content：‘’；clear：both；display：block；height：0；overflow：hidden；visibility：hidden；}
优点：支持性好、各大网站都在用此方法
缺点：代码多、不易理解、不适合初学者理解原理
39、visibility：hidden和display：none的区别
前者会使对象不可见，但是该对象在网页所占的空间不变
后者会使对象消失，不占位置
40、什么是css样式表？优先级算法如何计算？
层叠样式表
重要性和来源的优先级排序从低到高是：
1、浏览器默认样式
2、class、id、全局等选择器
3、内部和外部
4、行间样式
5、！important
41、IE浏览器的过滤器及兼容性
1、"_" IE6以下
2、！important IE6不识别此方法
3、* IE7以下
4、\9 IE10以下 IE版本识别，其他版本不识别
5、\0 IE8----IE10
42、五大浏览器内核及代表作品
1、Trident：IE、Maxthon（遨游）、腾讯、Theworld（世界之窗）、360浏览器
2、Gecko：Mozilla Firefox（火狐）
3、webkit：Safari（苹果）、Chrome（谷歌）
4、presto：Opera（欧鹏）
5、Blink：有谷歌和欧鹏、苹果开发的浏览器排版引擎
43、哪些属性是可以继承的？
文字相关、列表相关、颜色、透明度
44、表格的行分组
表头：<thead></thead>
表体：<tbody></tbody>
表尾：<tfoot></tfoot>
45、表单字段级与字段级标题的用法
<fieldset>
<legend></legend>
<label><label>
</fieldset>
46、什么是BFC？如何产生？作用是什么？
1、块级格式化上下文，他是一块独立的渲染区域，也可以理解为一个独立的容器
2、根元素；float不为none；position不为absolute或fixed；display为inline-block；overflow不为visible；
3、自适应两栏布局；清楚内部浮动；防止垂直margin重叠
47、IE6的兼容问题
1、图片有边框BUG
当图片外加上标签时，会出现边框
办法：border：0
2、图片间隙
在div中插入图片中，图片会将div下方撑大，大约3px
方法：将img和div写在一行；给img加上display：block
3、dt、li中的图片间隙
方法：给img加上display：block
4、双倍浮向（双倍边距）
当IE6及更低版本解析浮动时，会错误的把浮向边边界（margin）加倍
方法：给浮动元素加上display：inline-block
5、默认高度
在IE6中部分元素拥有默认高度（大约16px左右）
方法：给元素添加声明：font-size：0；或height：0；overflow：hidden
6、表单元素行高对齐不一致
方法：给表单元素添加声明float：left；
7、按钮元素默认大小不一
方法：用a标签模拟以统一大小；input外边套一个标签，在标签中写按钮样式，把input边框去掉；如果按钮时图片，那么就用背景图
8、百分比BUG
在IE6及以下版本中在解析百分比时，会四舍五入从而导致50%+50%>100%
方法：清除右浮动clear：right；清除左浮动：clear：left；清除两边浮动clear：both
9、鼠标指针BUG
方法：手型时添加声明cursor：pointer
10、透明属性
兼容其他浏览器写法：opacity：（0-1）
IE浏览器写法：filter：alpha（opacity=（1-100））
11、li的列表BUG
子元素（a）设置浮动，li没有设置浮动的情况下，会出现垂直BUG
方法：给父元素li和子元素a都加上浮动
给li中的a标签转成block；并且有height和float时，li中设置浮动时会出现阶梯显示
方法：同时给li添加浮动
12、当前元素（父元素中第一个子元素）与父元素没有设置任何浮动的情况下，设置margin-top后，会错误的把margin-top加在父元素身上
方法：在父元素上加overflow：hidden；给父元素或子元素加上浮动
13、margin的BUG
margin上下都有值，会取大的而不会叠加
48、为什么要用css的reset文件
定义：css的reset指重置浏览器的默认样式
作用：每个浏览器都有自己的默认样式，因此我们需要做一些处理使每个浏览器下展示一致，故而需要css的reset文件
49、在css中如何合并单元格与单元格之间的距离以及边框线？如何变成1px？如何让没有内容的元素消失？
border-spacing；border-collapse：collapse；empty-cells：hide
50、video和audio的常用属性
controls 向用户显示控件
autoplay 自动播放
loop 重复播放
muted 静音
poster 视频正在下载时显示的图像
type属性值：用于视频：video/ogg video/mp4 video/webm
用于音频：audio/ogg audio/mpeg
51、设置文本框处于未输入状态时，文本框中显示的输入提示内容
placeholder
52、如何为文本框、选择框自动获得焦点？
autofocus="autofocus"
53、设置表单内容不能为空
required="required"
54、如何取消表单验证？
novalidate="novalidate"
55、渐进增强：
针对低版本浏览器进行构建页面，保证最基本的功能，然后针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验
56、优雅降级：
一开始就构建完整的功能，然后在针对低版本浏览器进行兼容
57、简述一下对html语义化的理解
简单来说就是用正确的标签做正确的事情
1、让页面结构化，结构更清晰，便于对浏览器、搜索引擎解析
2、即使没有css样式的情况下，也以一种文档格式显示，并且是容易阅读的
3、搜索引擎的爬虫也依赖于HTML标记来确定上下文和关键字的权重，利于SEO
4、使阅读源代码的人更容易将网页分块，便于阅读、维护与理解
58、层级选择器有哪些？
E+F、E~F、E>F
59、主流浏览器的前缀有哪些？
-ms-：IE、-moz-：火狐、-webkit-：谷歌、-o-：Opera
60、background-size有哪几个值，每个值得意思是什么？
1、以半分比设置背景图大小
2、cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
3、contain：把图片扩展至最大尺寸，以使其宽度完全适应内容区域
61、px、em、rem、pt、ppi
px：实际上就是像素，用px设置字体大小时，比较稳定和精确，但这种方法存在一个问题，当用户在浏览器中浏览我们制作的WEB页面时，如果对浏览器进行了缩放，这时会使我们的WEB页面布局被打破，因此这时就提出了使用em来定义web页面的字体
em:它是根据基准来缩放的字体大小；它是相对于父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他的父级元素的字体大小（注：一般我们把它加在body上）
rem:它是相对于根元素的字体大小来显示的，一般应用于移动端
pt:1pt=1/72英寸，它是一种计量单位，这种度量方式来源于打印一设计背景，最适合于媒体，但同样广泛应用于显示器
ppi:它是图像分辨率的单位，图像的ppi值越高，画面细节就越丰富，因为单位面积的像素数量更多
62、html+css的经典布局
悬挂式布局：左列定宽、右列自适应
圣杯布局：两列定宽、中间自适应
63、css的选择符有哪些？
通配选择符：*
类型选择器/元素选择器：a
属性选择器：input[type="button"]
包含选择器：div .code a{...}
子对象选择器：ul>li
id选择器：#
类选择器：.
群组选择器：html,body
伪类及伪对象选择符：div:first-letter a:hover
相邻选择器：li+li
64、标准盒模型与怪异盒模型
标：box-sizing：content-box
标：content+border+padding
怪：box-sizing：border-box
怪：conent
65、弹性盒
1、使用弹性盒，必须给父级元素加上声明：display：flex
2、设置主轴方式：flex-direction；主轴默认为row（X轴），可设置column（Y轴）
3、设置主轴对齐方式：justify-content
4、设置侧轴的对齐方式：align-item
5、使用多行对齐用align-content，并且必须使用flex-wrap：wrap；
6、flex：wrap用来设置换行，值主要是wrap
7、flex：1；这个是将剩余的部分全部占用
8、order：排列顺序，和z-index相似；值越大，越靠后，默认为0
9、align-self：这个是用来控制某一个元素的对齐方式
66、移动端meat标签的解释
<meta name="viewport" content="width=device-width,initial-scale=1.0,minmum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
width=device-width 宽度等于当前设备的宽度
initial-scale 初始的缩放比例（默认值为1.0）
minimum-scale 允许用户缩放的最小比例（默认为1.0）
maximum-scale 允许用户缩放的最大比例（默认为1.0）
user-scalable 用户是否可以手动缩放（默认值为no）
67、响应式布局的特点
设计特点：
面对不同的分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
1、兼容各种设备工作量大，效率低下
2、代码累赘，会出现隐藏无用的元素，加载时间加长
3、其实这是一种折中性质的设计解决方案，多方面因素影响而无法达到最佳效果
4、一定程度上改变网站原有的结构，会出现用户混淆的情况
73、移动端的布局方式
1、vw、vh
2、%
3、rem
74、rem布局的缺点
1、做出来的效果图有些许偏差
2、雪碧图的定位问题
3、rem单位最好不要用在PC端
75、渐变属性
线性渐变：linear-gradient
径向渐变：radio-gradient
重复性渐变：repeating-linear-gradient、repeating-radial-gradient
76、2d中常用的属性和属性值
transform：translate 位移
transform：rotate 旋转
transform：skew 变形（倾斜）
transform：scale 放大缩小
77、如何控制2d和3d中的原点
transform-origin
78、animation动画由哪几部分组成？它的简写
1、keyframes和animation
2、animation：动画名称、持续时间、动画类型、延迟时间、定义是否循环、动画运动方向
79、animation和transition的区别
相同点：都是随着时间改变元素的属性值
不同点：transition需要出发一个事件，才会随事件改变元素的css属性值；animation不需要触发事件也可以显示，随着时间变化来改变css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值
