前端知识体系架构-HTML

2019-10-09 admin

<!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引擎越来越独立,内核就倾向于只指渲染引擎。

[转载]原文链接:https://segmentfault.com/a/1190000020624076

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-76924.html

文章标题:前端知识体系架构-HTML

相关文章
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
HTML5凭什么可以代替Flash
本世纪初,全球网络建设仍处于早期阶段,发达国家网民刚刚在从窄带向宽带网络过渡。由于网络带宽、PC运算速度等因素限制,早期的网站基本以静态文字和图片内容为主。但随着宽带网络在全球范围快速普及,网民对内容的需求也不断变化。死板的文字加图片的网站...
2015-11-12
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
HTML5究竟会火到什么地步
这已经是第N次,HTML5火热了起来,这次的火热是否可以延续? H5的最大优势就是可以在网页上直接调试和修改,而且更重要的是,它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统:Android和iOS,一个做应用的团队,怎么...
2015-11-12
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
HTML5这次的火热是否又是昙花一现?
即使你不是技术控,你也应该感受到过去一年时间身边发生的HTML5事件,去年由微信朋友圈引爆的《围住神经猫》以及之后一系列的小游戏,都证明了HTML5的营销价值。 HTML5已经出来很多年了,HTML5是一个基于浏览器的协作标准,可以让各种不...
2015-11-12
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
回到顶部