14 WEB标准以及W3C标准是什么?
- 标签闭合、标签⼩写、不乱嵌套、使⽤外链 css 和 js 、结构⾏为表现的分离
15 xhtml和html有什么区别?
- ⼀个是功能上的差别
- 主要是 XHTML 可兼容各⼤浏览器、⼿机以及 PDA ，并且浏览器也能快速正确地编译⽹⻚
- 另外是书写习惯的差别
- XHTML 元素必须被正确地嵌套，闭合，区分⼤⼩写，⽂档必须拥有根元素
16 Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?
- ⻚⾯被加载的时， link 会同时被加载，⽽ @imort ⻚⾯被加载的时， link 会同时被加载，⽽ @import 引⽤的 CSS 会等到⻚⾯被加载完再加载 import 只在 IE5 以上才能识别，⽽ link 是 XHTML 标签，⽆兼容问题 link ⽅式的样式的权重 ⾼于 @import 的权重
- 声明位于⽂档中的最前⾯，处于 标签之前。告知浏览器的解析器， ⽤什么⽂档类型 规范来解析这个⽂档
- 严格模式的排版和 JS 运作模式是 以该浏览器⽀持的最⾼标准运⾏
- 在混杂模式中，⻚⾯以宽松的向后兼容的⽅式显示。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。 DOCTYPE 不存在或格式不正确会导致⽂档以混杂模式呈现
17 ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？
- ⾏内元素有： a b span img input select strong
- 块级元素有： div ul ol li dl dt dd h1 h2 h3 h4… p
- 空元素：
- ⾏内元素不可以设置宽⾼，不独占⼀⾏
- 块级元素可以设置宽⾼，独占⼀⾏
18 HTML全局属性(global attribute)有哪些
- class :为元素设置类标识
- data-* : 为元素增加⾃定义属性
- draggable : 设置元素是否可拖拽
- id : 元素 id ，⽂档内唯⼀
- lang : 元素内容的的语⾔
- style : ⾏内 css 样式
- title : 元素相关的建议信息
19 Canvas和SVG有什么区别？
- svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，能够⽅便的绑定事件或⽤来修
改。 canvas 输出的是⼀整幅画布svg 输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。⽽canvas 输出标量画布，就像⼀张图⽚⼀样，放⼤会失真或者锯⻮
20 HTML5 为什么只需要写
- HTML5 不基于 SGML ，因此不需要对 DTD 进⾏引⽤，但是需要 doctype 来规范浏览器
的⾏为 - ⽽ HTML4.01 基于 SGML ,所以需要对 DTD 进⾏引⽤，才能告知浏览器⽂档所使⽤的⽂档
类型
21 如何在⻚⾯上实现⼀个圆形的可点击区域？
- svg
- border-radius
- 纯 js 实现 需要求⼀个点在不在圆上简单算法、获取⿏标坐标等等
22 ⽹⻚验证码是⼲嘛的，是为了解决什么安全问题
- 区分⽤户是计算机还是⼈的公共全⾃动程序。可以防⽌恶意破解密码、刷票、论坛灌⽔
- 有效防⽌⿊客对某⼀个特定注册⽤户⽤特定程序暴⼒破解⽅式进⾏不断的登陆尝试
23 viewport
<meta name=“viewport” content="width=device-width,initial-scale=1.0,minimu
// width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’
// device-width 设备宽度
// height 设置viewport⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置
// initial-scale 默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数
// minimum-scale 允许⽤户最⼩缩放⽐例，为⼀个数字，可以带⼩数
// maximum-scale 允许⽤户最⼤缩放⽐例，为⼀个数字，可以带⼩数
// user-scalable 是否允许⼿动缩放
-
延伸提问
- 怎样处理 移动端 1px 被 渲染成 2px 问题
-
局部处理文章来源：https://www.toymoban.com/news/detail-529920.html
- mate 标签中的 viewport 属性 ， initial-scale 设置为 1
- rem 按照设计稿标准⾛，外加利⽤ transfrome 的 scale(0.5) 缩⼩⼀倍即可；
-
全局处理文章来源地址https://www.toymoban.com/news/detail-529920.html
- mate 标签中的 viewport 属性 ， initial-scale 设置为 0.5
- rem 按照设计稿标准⾛即可
24 渲染优化
- 禁⽌使⽤ iframe （阻塞⽗⽂档 onload 事件）
- iframe 会阻塞主⻚⾯的 Onload 事件
- 搜索引擎的检索程序⽆法解读这种⻚⾯，不利于SEO
- iframe 和主⻚⾯共享连接池，⽽浏览器对相同域的连接有限制，所以会影响⻚⾯的并⾏加载
- 使⽤ iframe 之前需要考虑这两个缺点。如果需要使⽤ iframe ，最好是通过javascript
- 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题
- 禁⽌使⽤ gif 图⽚实现 loading 效果（降低 CPU 消耗，提升渲染性能）
- 使⽤ CSS3 代码代替 JS 动画（尽可能避免重绘重排以及回流）
- 对于⼀些⼩图标，可以使⽤base64位编码，以减少⽹络请求。但不建议⼤图使⽤，⽐较耗费 CPU
- ⼩图标优势在于
- 减少 HTTP 请求
- 避免⽂件跨域
- 修改及时⽣效
- ⼩图标优势在于
- ⻚⾯头部的 会阻塞⻚⾯；（因为 Renderer
- 进程中 JS 线程和渲染线程是互斥的）
- ⻚⾯中空的 href 和 src 会阻塞⻚⾯其他资源的加载 (阻塞下载进程)
- ⽹⻚ gzip ， CDN 托管， data 缓存 ，图⽚服务器
- 前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端⽤变量保存AJAX请求结果，每次操作本地变量，不⽤请求，减少请求次数
- ⽤ innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能
- 当需要设置的样式很多时设置 className ⽽不是直接操作 style
- 少⽤全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作
- 图⽚预加载，将样式表放在顶部，将脚本放在底部 加上时间戳
- 对普通的⽹站有⼀个统⼀的思路，就是尽量向前端优化、减少数据库操作、减少磁盘 IO
25 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″>
到了这里，关于前端面试题-HTML、HTTP、web综合问题（二）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
