HTML相关知识之文档声明标签-HTML学习之路（2）

篇文章介绍了 注释标签，我个人感觉很容易理解，在日常编码中，大多数编辑器都有注释标签的快捷键，如sublime或VS code里在html代码里，选中想要注释掉的代码后，直接按ctrl+/即可。几乎不用手动输入了。还是很方便的。

这篇我写<!DOCTYPE>标签，说起来这个标签，很常见，因为它会出现在每一个httml文档的最开头，然而，我们很少去重视它，为什么呢？

说到这个标签，我不得不说起html的版本历史了。

在大约10年前吧，html5应用还不如今天这么广泛吧，于是当时的文档类型声明如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

很长，也很难记，由于我入行晚，懂得这玩意就只是一个声明了，比如strict表示严格模式。其他的我也不想知道了。

当然html版本的规范从4到5的过渡经历了太多年，因为要考虑老浏览器的兼容性，再加上前期移动设备配置低，不支持较为复杂的媒体元素。于是，一些资历深的前端开发人员，面对这么长的代码还是有很长一段时间。

当然，9102年都快过完了，我们这边已经不需要再考虑这些了，于是，我直接就用html5了。

然后声明文档给格式，就变得很简单了。

<!DOCTYPE html>

最开始我是使用sublime生成的模板练习的，然后，犯懒，直接输入了<html>就出来下面的代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
</body>
</html>

然后就开始进行填充了。

直到今天我才注意到原来<!DOCTYPE html>是单独的一行，与下方<html></html>是两码事。

所以，我重新看了下书上的强调内容：

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前，没有结束标签，对大小写不敏感。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD(文档类型定义)，因为 HTML 4.01 基于 SGML（标准通用标记语言)）。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。

关于SGML，参见https://wiki.mbalib.com/wiki/SGML

常用的 DOCTYPE 声明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。

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

最后，虽然上方的html4和xml的文档类型声明这么麻烦了，但是这里没什么知识点了，因为如今，html5应用这么普及了，我们只需在文档开头写<!DOCTYPE html>即可，当然html4的严格模式和传统模式大概知道就行了。

TML我们也学了那么久了，是时候看一些面试题了，毕竟学习完找工作要面试，你工作能力再强，面试这一关还是要过得。所以面试题占了很重要的成分。下面我来总结一部分，尽量全面一些，既要接近我们所学，又要满足真实面试场景。

1、请说出XHTML和HTML的区别

答： 1、文档顶部doctype声明不同，xhtml的doctype顶部声明中明确规定了xhtml DTD的写法；

2、html元素必须正确嵌套，不能乱；

3、属性必须是小写的；

4、属性值必须加引号；

5、标签必须有结束，单标签也应该用 “/” 来结束掉；

2、请写出至少5个HTML块元素标签

答： div p ul li table h1 h2 h3 ... h6 form 等

3、请写出至少5个HTML行内元素标签

答：span a i label img input button textarea select 等

4、请写出table标签下面会包含哪些标签元素

答： tr th td thead tbody tfoot 等

5、很多网站不常用table iframe这两个元素，知道原因吗？

答：因为浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。

6、jpg和png格式的图片有什么区别？

答： jpg是有损压缩格式，png是无损压缩格式。所以，相同的图片，jpg体积会小。比如我们一些官网的banner图，一般都很大，所以适合用jpg类型的图片。但png分8位的和24位的，8位的体积会小很多，但在某些浏览器下8位的png图片会有锯齿。

7、请用html知识解决seo优化问题

答：网站上线应该设置TDK

TDK就是：

然后就是html语义化标签，要简洁，合理，这样可以在css和js加载不全的时候，使我们的html文档尽量清晰的展示出来，而不会特别乱；

8、常用浏览器有哪些，内核都是什么？

答：常用浏览器有 IE 火狐(firefox) chrome safari 360 搜狗等

内核：IE的是 Trident

火狐的是 Gecko

chrome和safari 用的是 Webkit

360和搜狗这些分极速模式和兼容模式，极速模式用的Webkit的内核，兼容模式用的Trident内核。

9、请至少写出5个H5的新标签

答： header nav footer canvas datalist article mark

10、a标签在新窗口打开链接怎么加属性？

答： <a target="_blank">链接</a>

11、写了2个<a>标签，两个标签之间有空格的情况遇到过吗？

答：遇到过，一般换行写的时候会出现这种情况。代码：

这样“我们”和“你们”之间就会有明显的空格，如图：

怎么样，是不是空格挺明显的。

解决办法就是不换行写，把两个a标签写在一行里。

12、form标签上定义请求类型的是哪个属性？定义请求地址的是哪个属性？

答：form表单定义请求类型的是 method 属性，定义请求地址的是 action属性

好啦，基本上html这部分面试题就这么多，肯定还有没有总结到的，这些面试题一定要会，甚至比我总结的多了更好。喜欢文章的小伙伴记得关注公众号：书软

TD(文档类型定义)的作用是定义XML文档的合法构建模块。

DTD主要用处是约束XML文件, 也可去约束HTML XHTML...

DTD不要有太深的了解, 要求大家可以看懂, 可以根据别人提供的dtd文件, 写出对于的XML文件即可;

内部的DOCTYPE声明

假如DTD被包含在您的XML源文件中, 它应当通过下面的语法包装在一个DOCTYPE声明中：

<!DOCTYPE 根元素 [元素声明]>

带有 DTD 的 XML 文档实例:(选择"查看源代码"命令。)

<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

以上DTD解释如下：

!DOCTYPE note(第二行)定义此文档是note类型的文档。

!ELEMENT note(第三行)定义note元素有四个元素："to、from、heading,、body"

!ELEMENT to(第四行)定义to元素为"#PCDATA"类型

!ELEMENT from(第五行)定义frome元素为"#PCDATA"类型

!ELEMENT heading(第六行)定义heading元素为"#PCDATA"类型

!ELEMENT body(第七行)定义body元素为"#PCDATA"类型

外部文档声明

假如DTD位于XML源文件的外部, 那么它应通过下面的语法被封装在一个DOCTYPE定义中：

<!DOCTYPE 根元素 SYSTEM "文件名">这个XML文档和上面的XML文档相同, 但是拥有一个外部的DTD:(选择"查看源代码"命令。)

<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

这是包含DTD的"note.dtd"文件：

<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>

通过XML解析器进行验证

当您试图打开某个XML文档时, XML解析器有可能会产生错误。通过访问parseError对象, 就可以取回引起错误的确切代码、文本甚至所在的行。

注释：load( )方法用于文件, 而loadXML( )方法用于字符串。

//创建一个xml解析器
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); //只能用于IE浏览器
//是否异步加载xml文件, 最新版的IE9浏览器必须添加此语句, 并且属性值设为false(同步), 否则浏览器不能正确解析验证
xmlDoc.async="false"; //双引号可要可不要
//开启校验功能
xmlDoc.validateOnParse="true"; //双引号可要可不要
//装载xml文档
xmlDoc.load("wangye.xml");
//如果有错误信息,则输出
document.write("<br>Error Code: ");
document.write(xmlDoc.parseError.errorCode);
document.write("<br>Error Reason: ");
document.write(xmlDoc.parseError.reason); //reason: 理由, 原因
document.write("<br>Error Line: ");
document.write(xmlDoc.parseError.line);

内外部DTD文档结合

<!DOCTYPE 根元素 SYSTEM "DTD文件路径"[定义内容]>

XML文件使用DOCTYPE声明语句来指明它所遵循的DTD文件, DOCTYPE声明语句有两种形式：

当引用的文件在本地时, 采用如下方式：

<!DOCTYPE 文档根结点 SYSTEM "DTD文件的URL">

当引用的文件时一个公共的文件时, 采用如下形式：

<!DOCTYPE 文档根结点 PUBLIC "DTD名称" "DTD文件的URL">

在线咨询

上一篇：前端多个 Tab 页点击切换时当前页面显示成别的页面的数据
下一篇：JavaScript 事件监听函数及其兼容性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML相关知识之文档声明标签-HTML学习之路（2）

常用的 DOCTYPE 声明

您的项目需求