前端知识体系架构HTML

45次阅读

共计 1003 个字符,预计需要花费 3 分钟才能阅读完成。

<!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

行内元素、块级元素对比

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

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

正文完
 0