前端知识体系架构-HTML

2019-10-09

<!DOCTYPE>

定义

document type 用来说明所使用的html版本

作用

使浏览器获知用哪个版本的HTML规范来渲染文档 请始终向html文档中添加doctype声明,doctype不存在或形式不正确会导致页面以混杂模式呈现

注意

<!DOCTYPE>

声明必须是 HTML 文档的第一行,位于 <html> 标签之前。 <!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 <!DOCTYPE> 声明没有结束标签。 <!DOCTYPE> 声明对大小写不敏感。

<!DOCTYPE html>

是h5标准,原先的是一串很长的字符串,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明。

Doctype可声明三种DTD(document type definition)类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 HTML5不基于SGML,所以不需要对DTD进行引用 没有严格模式与宽松模式的区别,html5有相对宽松的语法,事实上,已经尽可能大的实现了向后兼容。

HTML4.01基于SGML,所以需要引用DTD。才能告知浏览器文档所使用的文档类型,如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

SGML:(Standard Generalized Markup Language 标准通用标记语言)

混杂模式&标准模式

标准模式(Standards mode):以浏览器支持的最高标准运行 混杂模式(Quirks mode):页面以一种比较宽松的向后兼容的方式显示。 混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

console.log(document.compatMode)//可观测浏览器处于那种模式

行内元素、块级元素、空元素

行内元素:

a span img input select

块级元素:

div h1 p ul ol li dl dd dt table fieldset form

空元素:

br link meta hr

行内元素、块级元素对比

内容 一般情况下,行内元素只能包含数据和其他行内元素。 而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

格式 默认情况下,行内元素不会以新行开始,而块级元素会新起一行。

页面导入使用link和@import的区别

<link rel="stylesheet" type="text/css" href="newstyles.css">
@import "newstyles.css";

都是外部引用CSS的方式 区别如下: 1.link是xhtml标签、@import属于css范畴 2.link无兼容问题,@import在CSS2.1提出,不支持低版本浏览器 3.link支持JavaScript控制改变样式,@import不支持 4.link的样式权重 > @import权重 5.link引用CSS时候,页面载入时同时加载; @import需要在页面完全加载以后加载,而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载

总之推荐使用link ,@import局限性太大且会导致FOUC(Flash of unstyle content)无样式内容闪烁

浏览器内核

理解

浏览器内核 = 渲染引擎 + JS引擎 渲染引擎: 取得网页内容(html、xml、图像)、整理信息(导入css)、计算网页的显示方式、输出到显示器。 浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。 JS引擎:解析和执行javascript来实现网页的动态效果 最初渲染引擎和JS引擎没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

原文链接:segmentfault.com

上一篇:从 ECMA 规范看 JavaScript 类型转换
下一篇:Vue 中 css scoped 样式穿透 ( stylus[>>>] / sass / less[/deep/] )
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部