前端基础技能之HTML

[wolfdu]

最近正在准备找工作，作为野路子前端个人认为很有必要梳理一下前端相关基础知识，所以分三大块HTML、CSS和JavaScript来进行整理记录。
其中很多知识点并不是一两句话就能聊清楚的，所以很多内容都是粗鄙浅显的，更加深入的讨论需要单独开坑，所以引入了其他大牛整理好的相关内容以供翻阅参考。
切记不可急于求成，也不能妄自菲薄。

浏览器内核

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于单指渲染引擎。

常见的浏览器内核

常见的浏览器内核可以分这四种：Trident、Gecko、Webkit、Blink。

Trident：IE内核。
Gecko： Mozilla FireFox(火狐浏览器)使用该内核，开源内核。
Webkit：Safari 使用该内核，拥有清晰的源码结构和极快的渲染速度。
Blink：使用的内核被命名为 chromium，chromium fork 自开源引擎 webkit，却把 WebKit 的代码优化了很多。谷歌公司还研发了自己的 Javascript 引擎，V8，极大地提高了 Javascript 的运算速度。而Blink 其实是 WebKit 的分支，并且在不断的优化。

浏览器内核
各主流浏览器内核介绍

Doctype作用

声明位于位于HTML文档中的第一行，处于 `` 标签之前。告知浏览器的解析器用什么**文档标准**解析这个文档。DOCTYPE不存在或格式不正确会导致文档以**兼容模式**呈现。

文档标准有那些？

Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页。
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。

Quirks （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

HTML5 为什么只需要写 ？

HTML5 不基于 SGML，因此不需要对DTD(文档类型定义)进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

SGML (Standard Generalized Markup Language)标准通用标记语言
SGML是一种指示文档标准语言或标记集的标准。这种说明本身就是一种文档标准定义。

而HTML4.01基于SGML,所以需要对DTD(文档类型定义)进行引用，才能告知浏览器文档所使用的文档类型。

html元素，行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

• 行内元素有：a b span img input select strong（强调的语气）
• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 form p
• 常见的空元素：
  <br> <hr> <img> <input> <link> <meta>
  鲜为人知的是：
  <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

页面导入样式link和@import区别

link标签：<link> 标签定义文档与外部资源的关系，最常见的用途是链接样式表。
@import：@import CSS@规则，用于从其他样式表导入样式规则。

区别：

• link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

• 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

• import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

总体来说：link优于@import

html5有哪些新特性、移除了那些元素？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

• 绘画 canvas;
• 用于媒介回放的 video 和 audio 元素;
• 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
• sessionStorage 的数据在浏览器关闭后自动删除;
• 语意化更好的内容元素，比如 article、footer、header、nav、section;
• 表单控件，calendar、date、time、email、url、search;
• 新的技术webworker, websocket, Geolocation;

移除的元素：

• 纯表现的元素：basefont，big，center，font, s，strike，tt，u;
• 对可用性产生负面影响的元素：frame，frameset，noframes；

HTML全局属性(global attribute)有哪些

全局属性是所有HTML元素共有的属性; 它们可以用于所有元素，尽管属性可能对某些元素没有影响。

常见的有：

• class：为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素。
• hidden：这个布尔（Boolean）属性表示element还没有或是不再存在，当然这都是相对的。
• id：元素id，文档内唯一
• lang：元素内容的的语言
• style：行内css样式
• title：元素相关的建议信息

如何处理HTML5新标签的浏览器兼容问题？

支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式。

当然也可以直接使用成熟的框架、比如html5shiv;

如何区分 HTML 和 HTML5？

如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素

对HTML语义化的理解？*****

用正确的标签做正确的事情。

• html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
• 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
• 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

html5语义化标签使用规范

浏览器怎么对h5的离线存储资源进行管理和加载的？

h5离线存储功能：
离线存储可以将站点的一些文件存储在本地，在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文件可以包括html，js，css，img等等文件，但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；

	CACHE MANIFEST
	#v0.11
	CACHE:
	js/app.js
	css/style.css
	NETWORK:
	resourse/logo.png
	FALLBACK:
	/ /offline.html

3、在离线状态时，操作window.applicationCache进行需求实现。

离线存储资源管理：需要有一个缓存文件清单，这个文件是一个manifest后缀名的文件。

h5的离线存储
HTML5 离线缓存-manifest简介

iframe有那些缺点？

• iframe会阻塞主页面的Onload事件
• 搜索引擎的检索程序无法解读这种页面，不利于SEO
• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

但是好像有很多黑魔法，只是没有用到过。。。

Iframe 有什么好处，有什么坏处？国内还有哪些知名网站仍用Iframe，为什么？有哪些原来用的现在抛弃了？又是为什么？

Label的作用是什么？是怎么用的？

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

  <label for="Name">Number:</label>
  <input type=“text“name="Name" id="Name"/>

  <label>Date:<input type="text" name="B"/></label>

Number:
<input type=“text“name="Name" id="Name"/>

Date:

HTML5的form如何关闭自动完成功能？

autocomplete 属性规定表单是否应该启用自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

给不想要提示的 form 或某个 input 设置为 autocomplete=off。

HTML 5 form autocomplete 属性

如何实现浏览器内多个标签页之间的通信?

WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；

localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信；

页面A发送事件

function sendMsg(text) {
    window.localStorage.setItem('msg',text);
}

页面B接收事件

window.addEventListener('storage', function (evt) {
    if(evt.key==='msg')
       console.log(evt.newValue);
});

注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

页面可见性（Page Visibility API） 可以有哪些用途？

Document.visibilityState （只读属性）, 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.可用的值如下：

• 'visible' : 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化。
• 'hidden' : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态' 。
• 'prerender' : 页面此时正在渲染中, 因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始，永远不能从其他值变为此状态.注意: 浏览器支持是可选的。
• 'unloaded' : 页面从内存中卸载清除. 注意: 浏览器支持是可选的。

当此属性的值改变时, 会递交 visibilitychange 事件给Document。

通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等；
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；

如何在页面上实现一个圆形的可点击区域？

1. map+area或者svg
2. border-radius

// css
.disc{  
        width:100px;  
        height:100px;  
        background-color:dimgray;  
        border-radius: 50%;  
        cursor: pointer;  
        position: absolute;  
        left:150px;  
        top:150px;    
        line-height: 100px;  
        text-align: center;  
        color: white;  
    }  

// html
<div class="disc">我是圆形</div>  
	

3.纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

// 假设圆心为（100,100）,半径为50，在圆内点击弹出相应的信息，在圆外显示不在圆内的信息
document.onclick = function(e) {    
        var r = 50;   
        var x1 = 100;  
        var y1 = 100;  
        var x2= e.clientX;  
        var y2= e.clientY;    
        var distance = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));    
        if (distance <= 50)  
            alert("Ok!");    
}  

实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"></div>

网页验证码是干嘛的，是为了解决什么安全问题？

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

title与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义只表示是个标题,用于为元素提供附加的advisory information,
H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展示强调内容。

i内容展示为斜体，em表示强调的文本；

Physical Style Elements -- 自然样式标签
b, i, u, s, pre
Semantic Style Elements -- 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

DOM target 属性

• _blank - 在一个新的未命名的窗口载入文档
• _self - 在相同的框架或窗口中载入目标文档
• _parent - 把文档载入父窗口或包含了超链接引用的框架的框架集
• _top - 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架

前端需要注意哪些SEO

1. 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
2. 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
3. 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
4. 重要内容不要用js输出：爬虫不会执行js获取内容
5. 少用iframe：搜索引擎不会抓取iframe中的内容
6. 非装饰性图片必须加alt
7. 提高网站速度：网站速度是搜索引擎排序的一个重要指标

参考文章：
markyun-FEDQ