HTML、HTTP、Web综合面试题（三）
1.⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？
- ⾏内元素有：
a b span img input select strong - 块级元素有：
div ul ol li dl dt dd h1 h2 h3 h4… p - 空元素：
- ⾏内元素不可以设置宽⾼，不独占⼀⾏
- 块级元素可以设置宽⾼，独占⼀⾏
2.HTML全局属性(global attribute)有哪些
class:为元素设置类标识data-*: 为元素增加⾃定义属性draggable: 设置元素是否可拖拽id: 元素 id ，⽂档内唯⼀lang: 元素内容的的语⾔style: ⾏内 css 样式title: 元素相关的建议信息
3.Canvas和SVG有什么区别？
svg绘制出来的每⼀个图形的元素都是独⽴的DOM节点，能够⽅便的绑定事件或⽤来修 改。canvas输出的是⼀整幅画布svg输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。⽽
canvas输出标量画布，就像⼀张图⽚⼀样，放⼤会失真或者锯⻮
4.HTML5 为什么只需要写
HTML5不基于SGML，因此不需要对DTD进⾏引⽤，但是需要doctype来规范浏览器 的⾏为- ⽽
HTML4.01基于SGML,所以需要对DTD进⾏引⽤，才能告知浏览器⽂档所使⽤的⽂档 类型
5.如何在⻚⾯上实现⼀个圆形的可点击区域？
svgborder-radius- 纯
js实现 需要求⼀个点在不在圆上简单算法、获取⿏标坐标等等
6.viewport
怎样处理 移动端 1px 被 渲染成 2px 问题?
- 局部处理
mate标签中的viewport属性 ，initial-scale设置为 1rem按照设计稿标准⾛，外加利⽤transfrome的scale(0.5)缩⼩⼀倍即可；
- 全局处理
mate标签中的viewport属性 ，initial-scale设置为 0.5rem按照设计稿标准⾛即可
7.meta viewport相关
<!DOCTYPE html> <!--H5标准声明，使⽤ HTML5 doctype，不区分⼤⼩写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8′> <!--声明⽂档使⽤的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--优先使 <meta name=”description” content=”不超过150个字符”/> <!--⻚⾯描述-->
<meta name=”keywords” content=””/> <!-- ⻚⾯关键词-->
<meta name=”author” content=”name, email@gmail.com”/> <!--⽹⻚作者-->
<meta name=”robots” content=”index,follow”/> <!--搜索引擎抓取-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-sc
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/> <!--添加到主屏后的标 是否启⽤ WebApp 全屏模式，删除苹果默认的⼯具栏和菜单栏-->
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=
<!--添加智能 App ⼴告条 Smart App Banner（iOS 6+ Safari）-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/> <!--设置苹果 <meta name=”renderer” content=”webkit”> <!-- 启⽤360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <!--避免IE使⽤兼容模 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> <!--不让百度转码- <meta name=”HandheldFriendly” content=”true”> <!--针对⼿持设备优化，主要是针 <meta name=”MobileOptimized” content=”320″> <!--微软的⽼式浏览器-->
<meta name=”screen-orientation” content=”portrait”> <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”> <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”> <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”> <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”> <!--UC应⽤模式-->
<meta name=”x5-page-mode” content=”app”> <!-- QQ应⽤模式-->
<meta name=”msapplication-tap-highlight” content=”no”> <!--windows phone
设置⻚⾯不缓存-->
<meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″>
8.渲染优化
- 禁⽌使⽤
iframe（阻塞⽗⽂档onload事件）iframe会阻塞主⻚⾯的Onload事件- 搜索引擎的检索程序⽆法解读这种⻚⾯，不利于
SEO iframe和主⻚⾯共享连接池，⽽浏览器对相同域的连接有限制，所以会影响⻚⾯的并 ⾏加载- 使⽤
iframe之前需要考虑这两个缺点。如果需要使⽤iframe，最好是通过
javascript - 动态给
iframe添加src属性值，这样可以绕开以上两个问题
- 禁⽌使⽤
gif图⽚实现loading效果（降低CPU消耗，提升渲染性能） - 使⽤
CSS3代码代替JS动画（尽可能避免重绘重排以及回流） - 对于⼀些⼩图标，可以使⽤
base64位编码，以减少⽹络请求。但不建议⼤图使⽤，⽐较耗 费 CPU - ⻚⾯头部的
- ⻚⾯中空的
href和src会阻塞⻚⾯其他资源的加载 (阻塞下载进程) - ⽹⻚
gzip ， CDN托管， data 缓存 ，图⽚服务器 - 前端模板
JS+数据，减少由于HTML标签导致的带宽浪费，前端⽤变量保存AJAX请求结 果，每次操作本地变量，不⽤请求，减少请求次数 - ⽤
innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能 - 当需要设置的样式很多时设置
className⽽不是直接操作style - 少⽤全局变量、缓存
DOM节点查找的结果。减少IO读取操作 - 图⽚预加载，将样式表放在顶部，将脚本放在底部 加上时间戳
- 对普通的⽹站有⼀个统⼀的思路，就是尽量向前端优化、减少数据库操作、减少磁盘 IO