HTML有关

HTML有关面试知识点

对web标准的理解、浏览器内核差异、兼容性、HTML5

Doctype作用？标准模式与兼容（混杂、怪癖）模式各有什么区别？
1. <!DOCTYPE>声明位于HTML文档中的第一行，处于<html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
2. 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作
HTML5位什么只需要写<!DOCTYPE html>?
1. HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为
2. SGML--标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言；提供异常强大的工具，同时具有极好的扩展性，是所有电子文档标记语言的起源
3. DTD--文档类型定义，一套为了进行程序间的数据交互而建立的关于标记符的语法规则
行内元素有哪些？块级元素有哪些？空元素(在开始标签中进行关闭)有哪些？
1. CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，默认值为block，则为块级元素；默认值为inline，则为行内元素
2. 行内元素：a b span img input select strong
3. 块级元素：div ul ol li dl dt dd p h1...
4. 常见空元素：<br> <hr> <input> <link> <meta>
页面导入样式时，使用link和@import有什么区别？
1. link属于XHTML标签，除了加载CSS外，还能用于rel连接属性等作用；@import是CSS提供的，是一个CSS标签，只能用于加载CSS
2. 页面被加载时，link会同时被加载，@import引用的CSS会等到页面被加载完再加载
```
 <link rel="stylesheet" type="text/css" href="my.css">
 //import 引入
 <style type="text/css">
 	@import url(my.css);
 </style>
```
浏览器内核理解
1. 主要分成两部分：渲染引擎和JS引擎
2. 渲染引擎--负责取得网页的内容（HTML、XML、图像等等）、整理讯息（加入CSS），以及计算网页的显示方式，然后输出至显示器或打印机
3. JS引擎--解析和执行javascript来实现页面的动态效果
浏览器内核
IE--Trident内核、FF--Gecko内核、Opera7及以上--Presto内核、Safari，chrome--Webkit内核
html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
1. 主要是关于图像，位置，存储，多任务等功能的增加
  绘画canvas
  用于媒介回放的video和audio元素
  本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失
  sessionStorage的数据在浏览器关闭后自动删除
  语义化更好的内容元素artical header nav section footer
  表单控件calendar date time email url search
  新的技术webworker websocket Geolocation
2. 移除的元素
  纯表现的元素：basefont big center font s strike tt u
  对可用性产生负面影响的元素：frame frameset noframe
3. 兼容
  IE8/IE7/IE6支持通过document.createElement方法产生的标签
  使用成熟的框架
4. 通过 DOCTYPE声明、新增的结构元素、功能元素区分HTML5

webworker websocket Geolocation

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

cookies sessionStorage localStorage

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>

posted @ 2017-08-23 17:36 YFIFE 阅读(100) 评论(0) 编辑收藏举报

YFIFE

HTML有关

HTML有关面试知识点

公告