HTML有关面试知识点
对web标准的理解、浏览器内核差异、兼容性、HTML5
-
Doctype作用？标准模式与兼容（混杂、怪癖）模式各有什么区别？<!DOCTYPE>声明位于HTML文档中的第一行，处于<html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。- 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作
-
HTML5位什么只需要写
<!DOCTYPE html>?- HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为
- SGML--标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言；提供异常强大的工具，同时具有极好的扩展性，是所有电子文档标记语言的起源
- DTD--文档类型定义，一套为了进行程序间的数据交互而建立的关于标记符的语法规则
-
行内元素有哪些？块级元素有哪些？空元素(在开始标签中进行关闭)有哪些？
- CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，默认值为
block，则为块级元素；默认值为inline，则为行内元素 - 行内元素：
abspanimginputselectstrong - 块级元素：
divulollidldtddph1... - 常见空元素：
<br><hr><input><link><meta>
- CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，默认值为
-
页面导入样式时，使用
link和@import有什么区别？-
link属于XHTML标签，除了加载CSS外，还能用于rel连接属性等作用；@import是CSS提供的，是一个CSS标签，只能用于加载CSS -
页面被加载时，
link会同时被加载，@import引用的CSS会等到页面被加载完再加载<link rel="stylesheet" type="text/css" href="my.css"> //import 引入 <style type="text/css"> @import url(my.css); </style>
-
-
浏览器内核理解
- 主要分成两部分：渲染引擎和JS引擎
- 渲染引擎--负责取得网页的内容（HTML、XML、图像等等）、整理讯息（加入CSS），以及计算网页的显示方式，然后输出至显示器或打印机
- JS引擎--解析和执行javascript来实现页面的动态效果
-
浏览器内核
IE--Trident内核、FF--Gecko内核、Opera7及以上--Presto内核、Safari，chrome--Webkit内核 -
html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
-
主要是关于图像，位置，存储，多任务等功能的增加
绘画canvas
用于媒介回放的video和audio元素
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失
sessionStorage的数据在浏览器关闭后自动删除
语义化更好的内容元素articalheadernavsectionfooter
表单控件calendardatetimeemailurlsearch
新的技术webworkerwebsocketGeolocation -
移除的元素
纯表现的元素：basefontbigcenterfontsstrikettu
对可用性产生负面影响的元素：frameframesetnoframe -
兼容
IE8/IE7/IE6支持通过document.createElement方法产生的标签
使用成熟的框架 -
通过 DOCTYPE声明、新增的结构元素、功能元素 区分HTML5
-
-
webworkerwebsocketGeolocation-
webworker--运行在后台的JavaScript，独立于其他脚本，不会影响页面性能// html文件 <p>计数：<output id="result"></output></p> <button onclick="startWorker()">开始工作</button> <button onclick="stopWorker()">停止工作</button> //js文件 var w; function startWorker() { //判断浏览器是否支持webWorker if(typeof(Worker) !== "undefined") { if(typeof(w) == "undefined") { //创建webWorker对象 w = new Worker("demo_workers.js"); } //绑定`onmessage`事件监听 w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "浏览器不支持"; } } function stopWorker() { //创建webWorker对象后，它会继续监听消息，直到其被终止 //使用 `terminate()`方法终止webworker，并释放浏览器、计算机资源 w.terminate(); w = undefined; } // demo_workers.js文件 var i = 0; function timedCount() { i = i+1; postMessage(i); setTimeout("timedCount()", 500); } timedCount(); -
websocket--一种在单个TCP连接上进行全双工通讯的协议
浏览器通过JavaScript向服务器发出建立webSocket连接的请求，连接建立后，客户端和服务端就可以通过TCP连接直接交换数据
获取WebSocket连接后，可以通过send()方法来向服务器发送数据，并通过onmessage事件来接收服务器返回的数据//创建WebSocket对象 var Socket = new WebSocket(url, [protocal]); //WebSocket属性 //只读 0-连接未建立 1-连接已建立 2-连接正在关闭 3-已关闭或无法打来 Socket.readyState //只读 已被`send()`放入正在队列中等待传输，但是还没发出的UTF-8文本字节数 Socket.bufferedAmount // WebSocket 事件 Socket.onopen //连接建立时触发 Socket.onmessage //客户端接收到服务端数据时触发 Socket.onerror //通信发生错误时触发 Socket.onclose //连接关闭时触发 // WebSocket 方法 Socket.send() //使用连接发送数据 Socket.close() // 关闭连接
实例
// js文件 function WebSocketTest() { if ("WebSocket" in window) { alert("浏览器支持WebSocket"); // 打开一个 web socket var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function(){ // web socket 已连接上，使用 send()方法发送数据 ws.send("发送数据"); alert("数据发送中..."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("数据已接收..."); }; ws.onclose = function() { //关闭 websocket alert("连接已关闭..."); }; } else { alert("浏览器不支持websocket")； } } // html文件 <div id = "sse"> <a herf="javascript:WebSocketTest()">运行 WebSocket</a> </div>-
Geolocation--用于定位用户的位置var x = document.getElementById("demo"); function getLoction() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPositon); } else { x.innerHTML = "浏览器不支持" } } function showPosition(position){ x.innerHTML = "维度：" + position.coords.latitude + "<br>经度：" + position.coords.longitude; }
-
-
HTML语义化理解
用正确的标签做正确的事；html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；搜索引擎的爬虫也依赖于html标记来确定上下文和各个关键字的权重，利于SEO
SEO--搜索引擎优化，通过对网站进行站内优化和修复和站外优化，从而提高网站的网站关键词排名以及公司产品的曝光度 -
HTML5的离线存储
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储下来；之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示具体解释//页面头部加入`manifest`的属性 <html manifest = "cache.manifest"> ... </html> //在`cache.manifest`文件中编写离线存储资源 CACHE MANIFEST #v0.11 // 表示需要离线存储的资源列表，包含`manifest`的页面自动存储，不用包含 CACHE: js/app.js css/style.css // 在它下面列出的资源只有在线的情况下才能访问，不会离线存储 NETWORK: resourse/logo.png // 如果访问第一个资源失败，那么就用第二个资源池替换 FALLBACK: // offline.html -
cookiessessionStoragelocalStorage-
cookie是网站为了标识用户身份而存储在用户本地终端上的数据（通常经过加密） -
cookie数据始终在同源的http请求中携带，标记会在浏览器和服务器间来回传递 -
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存 -
存储大小：
cookie数据大小不能超过4k；sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 -
有效时间：
localStorage--存储持久数据，浏览器关闭后数据不丢失，除非主动删除数据sessionStorage--数据在当前浏览器窗口关闭后自动删除cookie--设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭//创建和访问 `localStorage` localStorage.lastname = "smith"; document.write(localStorage.lastname); // 创建和访问`sessionStorage` sessionStorage.lastname = "smith"; document.write(sessionStorage.lastname); // 创建和存储`cookie` function setCookie(c_name,value,expiredays) { var exdate = new Date(); exdate.setDate(exdate.getDate()+expiredays) document.cookie = c_name + "=" + escape(value) + ((expiredays==null)?"" : ";expires =" + exdate.toGMTString()) } //jquery设置cookie $.cookie("cookie", "foo");//设置名为cookie，值为foo的cookie $.cookie("cookie", "foo", {expires:10});//过期时间10天 $.cookie("cookie", "foo", {path:"/"});// 设置保存路径为根目录 $.cookie("cookie");//获取 $.cookie("cookie", null);//删除
-
-
label的作用及使用方式// 定义表单控件间的关系，当用户选择改标签时，浏览器自动聚焦到相关元素 <label for = "Name">Number:</label> <input type = "text" name = "Name" id = "Some"/> <label>Date:<input type = "text" name="otherName"/></label> -
HTML5--form的自动完成功能
<form action="/example/html5/demo_form.asp" method="get" autocomplete="on"> First name:<input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br /> <input type="submit" /> </form>