前端理论知识（1）
html
-
doctype 的作用是什么？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型
DOCTYPE的作用是告知浏览器的解析器用什么文档标准解析这个文档。
标准模式的以该浏览器支持的最高标准运行。
在兼容模式中，模拟老式浏览器的行为以防止站点无法工作。
简单的说，就是尽可能的显示能显示的东西给用户看。
XHTML 1.0中有3种文档类型定义分别是过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。 -
html5为什么只需要写<!doctype html>?
需要doctype来规范浏览器的行为 -
行内元素有哪些？块级元素有哪些？ 行内块元素有那些？
行内元素有: a b span strong i
块级元素有:div ul ol li h1…h6 hr form p td th
行内块元素有：img, input, textarea -
请说出五种html5的特性
特性一：语义标签
特性二：本地存储
特性三：canvas画布
特性四：视频音频
特性五: 定位 -
请写出至少5个HTML块元素标签。
块级元素有:div ul ol li h1…h6 hr form p td th -
a标签在新窗口打开链接怎么加属性？
给a标签添加target=_blank属性 -
请列举几个html新增的标签？
html5新增的标签: audio音频，video视频，mark突出显示，nav某一部分，time时间
8.如何定义一个单选按钮？
9.标签上的title属性与alt属性的区别是什么?
title对链接起注释作用，图片正常显示使鼠标划上去会显示他的值。
alt对图片起注释作用，图片无法加载的时候会显示它的值。
10.如何处理html5新标签的浏览器兼容问题?
使用静态资源的html5shiv包
初始化新标签的css
11.分别写出以下几个HTML标签:文字加粗、下标、居中、字体。
文字加粗:、
下标:
居中:
字体: 、
12.对WEB标准以及W3C的理解与认识
web标准一般是将html，css，js独立分开，使其更具有模块化。
W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范。
-
前端页面有哪三层构成，分别是什么，作用是什么？
有结构层，表示层，行为层。
结构层：HTML 创建网页基本结构
表示层：CSS 美化网页布局
行为层：JS 添加动态效果 -
请讲述一下iframe框架的优缺点？
优点：iframe能够原封不动的把嵌入的网页展现出来。
缺点：会产生很多页面，不容易管理。设备兼容性差。 -
form表单实现上传文件必不可少的属性是什么？
是multipart/form-data -
src和href的区别是什么？
src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。 -
input不可编辑，必填属性分别是什么？
readonly required -
请写出input常用的13种type类型，并写出每种类型的应用场景
Text：定义单行的输入字段。
submit：定义提交按钮
reset：定义重置按钮。
radio：定义单选按钮。
password：定义密码字段。
image：定义图像形式的提交按钮。
hidden：定义隐藏的输入字段。
checkbox：定义复选框。
button：定义可点击按钮
color：用来选择颜色
tel：表示语义上的电话输入域
email：表示语义上的电子邮件地址输入域，在手机端会唤出英文键盘
。
number：用于处理数字输入，在手机端会唤出数字键盘 -
请简述一下你对语义化标签的理解
便于开发者阅读和写出更优雅的代码，同时让浏览器更好的解析。 -
如何区分html和html5
文档声明区别
HTML：超文本标记语言，一种纯文本类型的语言。
HTML5.0：文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发。
结构语义区别
html：没有体现结构语义化的标签
html5：添加了许多具有语义化的标签
绘图区别
HTML：指可伸缩矢量图形，用于定义网络的基于矢量的图形。
HTML5：HTML5的canvas元素使用脚本在网页上绘制图像，可以控制画布每一个像素。
canvas画布
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var c=document.getElementById("myCanvas");//先声明变量获取到画布
var cxt=c.getContext("2d");
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
画布中fillRect 方法拥有参数 (0（x轴）,0（y轴）,150（宽）,75（高）)
如果只是文字的话参数只有两个 一个是x轴一个是y轴
可以使用fillStyle来调文字的样式 font调文字的大小
css
- css性能优化的方法
内联首屏关键css，异步加载css，文件压缩，去除无用css
2.Css选择器有几种?选择器的优先级是怎样的
元素选择器，id 选择器，calss 选择器，后代选择器，子代选择器，伪类选择器，通配符
内联样式>id>class>元素>通配符>继承样式
可设置优先级是！important
3.浮动的原理
浮动的框可以左右移动，直到它的外边缘遇到包含框或者另
一个浮动框的边缘。浮动框不属于文档流，是脱离了文档流。
4.定位有几种，他们的特点分别是什么?
有四种。
position: absolute;（绝对定位）
生成绝对定位的元素，相对第一个父元素进行定位。
position: fixed;（固定定位）
生成绝对定位的元素，相对于浏览器窗口进行定位。
position: relative;（相对定位）
生成相对定位的元素，相对于其正常位置进行定位。
position：sticky；（粘性定位）
生成粘性的
position: static;（静态定位）
默认值。没有定位，元素出现在正常的文本流中。
- position的值relative和absolute的定位原点是什么？
relative（相对定位）相对于其它正常位置进行定位。
absolute（绝对定位）相对第一个父元素进行定位。
6.如何设置背景透明
Backgroung-color：rgba (0，0，0，0.5)
7.请列举几种布局方式，并列举各自优点
1.流式布局（又称自然布局）
特点：没有任何修饰的布局，也就是元素在排版过程中，元素从上到下，从左到右的流式排列，遇到块级标签换行等
2.浮动布局（float）
特点：给元素设置浮动（float）属性后，元素脱离文档流，进行左右浮动，紧贴着父级元素的左右框。此浮动以按时留出来的位置，由后面的非浮动元素进行填充
3.定位布局（position）
特点：定位分为相对定位，绝对定位和固定定位，也就是给元素设置了一个位置属性，我们可以通过left,top,bottom,right四个属性来确定元素的一个排版位置
4.弹性布局（flex）
特点：它是css3提出来的一种新的布局方式，该布局的目的是提供一中更加高效的方式来对容器中的条目进行布局，对齐和分配空间
-
css引入方式有几种？link和@import有什么区别？
有内部引入、外部引入、行内引入
link指的是链接方式，是使用HTML头部的标签引入外部的css文件。
@import指的是导入方式，是使用css规则引入外部css文件。 -
在css样式中使用em和px。各有什么优势，在表现上有什么区别？
px表示像素，绝对单位，不会因为其他元素的尺寸变化而变化，设置字体大小时，比较稳定和精确。
em表示相当于父元素的字体大小，相对单位，没有一个固定的度量值，设置字体大小时，会根据其他元素尺寸来决定的相对值。 -
请列举几种隐藏元素的方法？
答：overflow:hidden; opacity: 0 display: none
transform: scale(0)； position: absolute； -
css3中有哪些新属性？
答：CSS3实现圆角（border-radius），阴影（box-shadow），文字阴影（text-shadow），线性渐变（gradient），变形（transform）
Border-color：边框颜色、Border-image：图片边框、Background-size：背景图片尺寸、Transition 过渡、Box-shadow：盒子阴影 -
请写出清除浮动有几种方式，分别是什么.
答： 五种。分别是：
添加额外标签，例如
父元素设置display:table
父元素设置 overflow：auto 属性
父元素设置 overflow：hidden；
父元素也设置浮动
12.如何初始化css样式？为什么要初始化css样式？
答：不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异。
最简单的初始化方法就是： * {padding: 0; margin: 0;} 。
-
如何让一段文本中的所有英文单词的首字母大写？
答：使用 text-transform:capitalize; -
rgba()和opacity的透明效果有什么不同？
答：不同的是 opacity 作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。 -
行内，块状，行内块元素之间如何进行转换？
答：块状至行内是display：inline；
行内至块状是display：block；
行内，块状至行内块是display：inline-block； -
如何设置一个元素，固定到网页的底部
答：使用固定定位 position：fixed； bottom : 0 ;
17.如何使用css将多出范围的字体变为…
答：使用text-overflow:ellipsis;
18.如何解决浮动引起的高度坍塌
答：给父元素加上高度（height）
-
margin和padding的区别
答：margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。
padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。 -
如何取消a链接点击时的背景颜色
答：给a标签加style=“color: #000000;” -
display：none；和visibility：hidden；的区别是什么？
答：visibility: hidden将元素隐藏，但是在网页中该占的位置还是占着。
display: none将元素的显示设为无，即在网页中不占任何的位置。
22.css3新增伪类有哪些？
p:last-of-type p:last-child p:first-of-type p:first-child
p:only-child p:only-of-type p:nth-child(n) p:nth-last-child(n)
-
请描述一下渐进增强与优雅降级
答：渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 -
请简述你所了解的css中z-index的权重问题
z-index属性指定了元素及其子元素的[z顺序]，而[z顺序]可以决定
当元素发生覆盖的时候，哪个元素在上面。通常一个较大z-index值的元素会覆盖较低的那一个。 -
对WEB标准以及W3C的理解与认识？
答：web标准一般是将网页的结构层、表现层、行为层独立分开，使其更具有模块化。
W3C是对web标准提出了规范化的要求。
26.给某一个溺出的元素添加滚轮
.div{
overflow-y: scroll;//根据y轴进行滚轮
min-height: 70px;//y轴的高度
}
26. 超链接访问过后hover样式就不出现的问题是什么？如何解决？
被点击访问过的超链接样式不在具有hover和active了,
解决方法是改变CSS属性的排列顺序L-V-H-A（link,visited,hover,active）
27.介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同？
CSS盒子模型: 外边距(margin) 内边距(padding) 边框(border) 内容区(width、height)
CSS盒子模型与低版本IE的盒子模型的区别主要在于：宽和高不一样
标准的CSS的盒子模型的宽高：内容区的宽高
低版本IE的盒子模型的宽高：内容区+内边距+边框
28.CSS中哪些属性可以继承？
字体系列属性 ：字体的大小 字体的粗细 字体的风格
文本系列属性 ：文本水平对齐 行高 文本颜色
元素可见性 ：控制元素显示隐藏
列表布局属性：列表的风格
光标属性 ： 光标显示为何种形态
29.width: auto 和 width: 100% 的区别？
width: 100%的大小不包括外边距、边框
width: auto包括外边距和边框
-
什么是FOUC？你如何来避免FOUC
FOUC即无样式内容闪烁（Flash Of Unstyled Content），是在IE下通过@import导入css文件引起的。
IE会首先加载整个HTML文档的DOM，然后再导入外部的css文件。
因此，在页面DOM加载完成到css导入完成之间，有一段时间页面上的内容是没有样式的，
这段时间的长短跟网速和电脑速度都有关系。
解决方法：使用link标签将样式表放在文档head中 -
content-box和border-box，为什么看起来content-box更合理，但还是经常使用border-box
使用content-box时元素的width和height决定元素的内容，但是padding和border的改变不能改变width和height的值。
而使用border-box时元素的width和height、paddign和border的改变都可以让元素内容的宽高会发生相应的改变。
1187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
