内容简介：最近关注winter的“重学前端”系列文章，也想把已知的前端知识体系梳理一遍，夯实基础的同时，总结提升。接下来会从HTML、CSS、JS、性能、网络安全、框架通识进行分类总结。在 HTML 4.01 中，总体上应该分为三类：
最近关注winter的“重学前端”系列文章，也想把已知的前端知识体系梳理一遍，夯实基础的同时，总结提升。接下来会从HTML、CSS、JS、性能、网络安全、框架通识进行分类总结。
Doctype作用？标准模式与兼容模式各有什么区别?
-
<!DOCTYPE>声明位于HTML文档的第一行，处于<html>之前。 -
<!DOCTYPE>声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。Doctype不存在或者格式不正确都会导致文档以兼容模式/混杂模式呈现。 - 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
HTML5 为什么只需要写 <!DOCTYPE HTML>
？
在 HTML 4.01 中， <!DOCTYPE>
声明引用 DTD，因为 HTML 4.01 基于 SGML
。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML
，所以不需要引用 DTD。
Doctype的类型有哪些？
总体上应该分为三类： HTML5
， HTML4.0.1
， XHTML
。
HTML5
HTML5模式是目前最常用的模式。直接在DOCTYPE后面添加html即可。
<!DOCTYPE html>
HTML4.0.1 模式
分为三种模式：严格模式(strict)、过度模式(transitional)、Frameset模式。区别在于是否允许使用展示性和弃用元素，以及是否允许使用框架集。
- 严格模式：不允许展示型、弃用元素和框架集。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-
过度模式：允许使用展示性元素、弃用元素（比如
font、color等），不允许使用框架集。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- Frameset模式：允许展示性元素、弃用元素，允许框架集。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 模式
XHTML是一种比较严格的模式，所有元素必须以XML格式编写。分类和HTML4.0.1比较类似，分为严格模式、过渡模式、Frameset模式，同时添加了1.1模式。
- 严格模式：不允许展示性、弃用元素和框架集
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 过渡模式：允许展示性、弃用元素（比如font，color等）,不允许框架集
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- Frameset模式：允许展示性、弃用元素，允许框架集
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- XHTML 1.1：该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
最后附上各种文档类型支持的元素列表： HTML5/HTML 4.01/XHTML 元素和有效的 DTD
HTML和XHTML编写区别
XHTML要求编写符合XML的语法。主要区别在于：
-
XML区分大小写：以前很多
<html>、<body>等都用大写或大小写混用如<HTML>、<BODY>或<Html>、<Body>”排版，但是XHTML统一要求需要用<html>、<body>小写。 - XML标签必须闭合，单元素需要以/作为闭合结尾，嵌套不能出错。比如：“<meta name="keywords" content="关键字" > ”像这个标签在html是可行的，但是为了xhtml的标准所以必须关闭如“<meta name="keywords" content="关键字" /> ”
- XML属性必须放在引号中。
-
XML属性必须有属性值，不能省略。比如：网页里显示图片
img标签里都可加可不加alt属性，但是现在xhtml要求必须加上alt属性,不然xhtml验证将提示错误，哪怕alt的值为空都可以。 - XML中空格不会被自动删除。
<meta>
<meta>
元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta>
标签位于文档的头部，不包含任何内容。 <meta>
标签的属性定义了与文档相关联的名称/值对。
常用列表如下:
<!DOCTYPE html> <!-- H5标准声明，使用 HTML5 doctype，不区分大小写 --> <head lang="en"> <!-- 标准的 lang 属性写法 --> <meta charset="utf-8"> <!-- 声明文档使用的字符编码 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!-- 优先使用 IE 最新版本和 Chrome --> <meta name="description" content="不超过150个字符"/> <!-- 页面描述 --> <meta name="keywords" content=""/> <!-- 页面关键词 --> <meta name="author" content="name, email@gmail.com"/> <!-- 网页作者 --> <meta name="robots" content="index,follow"/> <!-- 搜索引擎抓取 --> <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- 为移动设备添加 viewport --> <!-- 设置页面不缓存 --> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0">
meta viewport
在移动端开发，最常看到head里面设置了下面这个属性：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" >
常用的6个属性：
"width-device"
特殊说明：（IE6,7,8）支持，需要使用css3mediaqueries.js
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]>
深入了解，移步至： 移动前端开发之viewport的深入理解
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
