前端知识普及之HTML_html/css_WEB-ITnose
本文采用问答模式,目的是深入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中的 标签的支持数 .
比如已经废弃的< dir>标签.
| 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。
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
