前端知识普及之HTML_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

前端知识普及之HTML_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:56 AM

本文采用问答模式,目的是深入HTML内部，去学习一些我们不经常关注，但却实实在在存在的problem. 文章内容略显装逼，如果大家受不了，请带好护目镜。

什么是Doctype?能吃吗？

我想使用过sublime的同学，应该会有一个snippets。

!+[TAB]

结果就是:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    </body></html>

没错，不知不觉中，!DOCTYPE html已经变为标准了。没错，就是因为H5的出现。

Doctype就是用来告诉browser用什么文档标准来解析这个文档. 而!DOCTYPE html就是告诉浏览器使用h5的标准来解析文档。

说起DocType的内容，这应该算是一段血泪史。一开始HTML是基于SGML来进行编译的，通过指定DTD，我们告诉浏览器使用哪一种DTD来对文档进行解析。在HTML5以前的title上，我们都需要指定某一个DTD。

以前比较流行的有:HTML 4.01/XHTML. 分别各有3中。

常见的就是比较宽松的DTD：

比如:HTML4.01 Transtional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

使用上述的DOCTYPE，就可以告诉浏览器用什么文档格式进行解析。

通常来说，我们前端宝宝并不懂什么意思啊喂。其实选择不同的文档类型，会表示你的HTML中的标签的支持数 .

比如已经废弃的标签.

DOCTYPE	dir
H5	X
XHTML1.1	X
HTML 4.01 Transitional	Y

说白了，DTD就是制定你文档中的标签能够被浏览器识别。但是，奇葩的是H5现在并不依赖于SGML了，也就是说，你可以已定义一些tag, 而不需要对内部进行更改了。

<jimmy>My name is jimmy</jimmy> //H5正常显示

由于各大浏览器厂商已经对H5有了完美的支持，所以，上文介绍的都已经成为历史，此致缅怀我们已经逝去的SGML。

扒扒浏览器内核

What's make of browser?

browser = shell + kernel

也就是，我们现在所有所见的browsers都是由着两部分构成，shell就是我们的GUI界面，让我们能够所见即所得的操作浏览器，而内部shell就是调用kernel来进行相关的操作的。其实，这个就和我们前端宝宝，和后台宝宝是一样的。我们前端要什么东西，任性的告诉后台.

前端: 帅哥，我要做这个，你帮我执行一下后台命令哦

后台: 好的~

也就是，shell给kernel穿了一件美丽的clothers让他的交互变得更加容易。

但说到底，浏览器本身的注重点就是在kernel上。

在前几年的浏览器中，由于js并没有得到充分的利用，所以，大部分的时候，浏览器的内核是有两部分构成:渲染引擎和JS引擎。这时候，前端到了蒸汽时代，js快速发展，碾压了世界上其他的语言。

php是世界上最好的语言，但是js将统治全宇宙

而且得力于Chrome的V8, 使得js变得奇快无比。现在，浏览器的内核，只能包括渲染引擎。 JS引擎已经独立出来了(最著名的就属V8)。所以，现在，我们经常所说的浏览器的引擎，就是渲染引擎。当今比较流行的引擎有(2015-2-17)

内核	浏览器
Trident	IE系列
Gecko	firefox
Webkit	Safari,Android
blink	Chrome,Opera

大致就这几种。壮士，莫慌，我这里还有小道消息。如果知道webview的同学一定会想要追着微信，QQ打。

tm,我怎么调试，md...你这又不支持。你的文档嘞~ flex你支持不全面，出bug了呀~

上述，仅供意淫。因为腾讯在前端时间出了 X5的内核。结果，业界一片哗然，本着支持国产的心态去试一试。结果，蠢哭了~ X5原来是基于android 4.2的webkit. 其实就相当于早期的IE。不过好像已经换掉了，忽略掉吧。

另外,Mozilla公司最近正在开发一个新的引擎 Servo ，听风好像很好用的，可以多核哟~

好了，基本情况就说到这，关于浏览器内核的风风雨雨都是浮云，我们来看一看，内核的基本运作吧。

当浏览器就收到你的HTML文件和CSS文件时，触发过程是这样的.

首先Parse对文件进行解析

然后将对应的HTML生成为DOM

CSS解析为CSS Object Model.

然后两者合并进行render

最后绘制到页面上

上述就是内核的核心部分. 内核还有其他的很多部分，比如连接显示器，打印机，电子邮件系统等模块。这里由于和前端宝宝们的关系不太大，我就不过多赘述了。

JS引擎怎么工作的？

首先，通过上文，我们已经明白了. 浏览器的引擎是指渲染引擎，JS引擎是独立出来的一部分。那JS引擎是怎么和浏览器引擎相互工作的呢？实际上，JS引擎要比浏览器引擎高一级。

获得文件时，浏览器开始解析文档
解析到script标签时，则会暂停解析，将控制权给JS引擎
如果script引用的是外部资源，则会发起请求进行加载，然后执行
执行完毕后再将控制权还给渲染引擎，然后继续解析。

但，就是由于浏览器会将控制权交给JS引擎，所以如果你的加载的资源过长，网页就死在哪里，一动也不动，直到你加载好为止。所以，通用的做法就是将js文件放到body底部，保证DOM树的完整渲染。

但是，实事情况并不是这么简单，源于JS优化加载这一块，也是有很多优化的点的。大家有兴趣，可以参阅js文件加载优化

另外，我们还需要掌握一个小tip. 浏览器最多能同时下载几个文件呢？

答案是，不确定，通常来说是6个，而IE11则是13个。这里的文件，不仅仅指js和css而是指，一切通过请求发送的，都算一份文件。所以，通常的做法就是，合并脚本，CDN优化，资源分布防止。

什么是重流||重绘？

通常页面在加载你的js,css,img等文件时，引擎会对文件加以解析，最终生成两颗树，渲染树和DOM树. DOM树中的需要显示节点在渲染树中都会存在,但是display:none的则不会存在。可以说，渲染树是指定DOM显示的真实节点，而DOM树则是页面显示的HTML结构。在渲染树中，常常将节点成为帧或者盒子。这里，也可以理解为渲染树，其实就是css文件指定节点的样式表。

当渲染树和DOM树都已经完成的时候，则开始将页面显示到桌面上了。

这时候，如果你改变页面的DOM结构，浏览器则会重新改动涉及到的DOM. 此时你的渲染树和DOM树就会发生改变。

浏览器会重新计算出渲染树这一过程叫做重流(重排).

将更新后的结构重新渲染到页面这一过程叫做重绘。

整个流程就是这个图

对于重流重绘，这里也有非常多的优化点可以参阅。如果有兴趣的同学，可以看看我的另一篇，优化你的DOM。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML中的布爾屬性是什麼？舉一些例子。Apr 25, 2025 am 12:01 AM

布爾屬性是HTML中的特殊屬性，不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為，如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性，高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值，正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔，合理使用布爾屬性以優化網頁性能和用戶體驗。

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

See all articles