HTML基本结构


HTML基本结构

文章插图
 
一、html基本结构
HTML基本结构

文章插图
 
1、doctype的作用
DOCTYPE是document type (文档类型) 的缩写 。<!DOCTYPE >声明位于文档的最前面,处于标签之前,它不是html标签 。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面 。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分
2、删除<!DOCTYPE>会发生什么
在W3C标准出来之前,不同的浏览器对页面渲染有不同的标准,产生了一定的差异 。这种渲染方式叫做混杂模式 。在W3C标准出来之后,浏览器对页面的渲染有了统一的标准,这种渲染方式叫做标准模式 。不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现,就是把如何渲染html页面的权利交给了浏览器,有多少种浏览器就有多少种展示方式 。因此要提高浏览器兼容性就必须重视
3、严格模式和混杂模式
严格模式和混杂模式都是浏览器的呈现模式,浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD(文件类型定义)有关 。
严格模式:又称标准模式,是指浏览器按照W3C标准来解析代码,呈现页面
混杂模式:又称为怪异模式或者兼容模式,是指浏览器按照自己的方式来解析代码,使用一种比较宽松的向后兼容的方式来显示页面 。
我们写好一份HTML文档,这时候全是代码,用户看不懂,是不是得用浏览器里的引擎给翻译一下?用户才看得到界面 。关键是HTML有好多个版本,浏览器怎么知道按哪个版本解释?你老爸让你去扫地,你老妈让你去洗碗,你是听谁的,都是长辈,这时候如果你们家规定好了,凡事都听你老爸的,这个就很好解决了,去扫地 。这个DTD文档模型就是这个意思,管它多少个HTML版本,我规定好我写的这个HTML文档以哪个为准就行,那我就知道我最终页面会被解释成一个什么样子 。
DTD文档模型=DOCTYPE=DOCTYPE文档声明
4、常见的DOCTYPE声明
HTML5
HTML基本结构

文章插图
 
HTML 4.01 Strict 该DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font) 。不允许框架集(Framesets) 。
HTML基本结构

文章插图
 
HTML 4.01 Transitional
该DTD包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font) 。不允许框架集(Framesets) 。
HTML基本结构

文章插图
 
HTML 4.01 Frameset
该DTD 等同于 HTML 4.01 Transitional,但允许框架集内容 。
HTML基本结构

文章插图
【HTML基本结构】 
XHTML 1.0 Strict
该DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font) 。不允许框架集(Framesets) 。必须以格式正确的 XML 来编写标记 。
HTML基本结构

文章插图
 
XHTML 1.0 Transitional
该DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font) 。不允许框架集(Framesets) 。必须以格式正确的 XML 来编写标记 。
HTML基本结构

文章插图
 
XHTML 1.0 Frameset
该DTD 等同于 XHTML 1.0 Transitional,但允许框架集内容 。
HTML基本结构

文章插图
 
4、HTML标签
定义HTML 文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体 。
HTML基本结构

文章插图
 
5、head标签
Head标签用于定义文档的头部,它是所有头部元素的容器 。中的元素可以引用脚本、指示浏览器在哪里找到样式表 。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等 。绝大多数文档头部包含的数据都不会真正作为内容显示给读者 。
下面这些标签可用在head 部分:
<title>、<meta>、<link>、<style>、 <script> 。


推荐阅读