HTML 知识

HTML、XML、XHTML 的区别

** html，xhtml和xml的定义： **
　1、html即是超文本标记语言（Hyper Text Markup Language），是最早写网页的语言，但是由于时间早，规范不是很好，大小写混写且编码不规范；
　2、xhtml即是升级版的html（Extensible Hyper Text Markup Language），对html进行了规范，编码更加严谨纯洁，也是一种过渡语言，html向xml过渡的语言；
　3、xml即时可扩展标记语言（Extensible Markup Language），是一种跨平台语言，编码更自由，可以自由创建标签。
　4、网页编码从html>>xhtml>>xml这个过程发展。
** html，xhtml和xml的区别： **
　1、xhtml对比与html，xhtml文档具有良好完整的排版，体现在两方面：a、元素必须要有结束标签；b、元素必须嵌套；
　2、对于html的元素和属性，xhtml必须小写，因为xml是严格区分大小写的，<li>和<LI>是不同的标签；
　3、xhtml的属性值必须在引号之中；
　4、xhtml不支持属性最小化，什么是属性最小化了？
　　正确:非最小化属性(unminimized attributes)
　　<input checked="checked">
　　不正确:最小化属性(minimized attributes)
　　<input checked>
　5、 在xhtml中，name属性是不赞成使用的，在以后的版本中将被删除。
** 再说说为什么网页编码要从html>>xhtml>>xml这么发展？ **
早期的网页使用html语言编写的，但是它拥有三个严重的缺点：
　1、 编码不规范，结构混乱臃肿，需要智能的终端才能很好的显示；
　2、表现和结构混乱，不利于开发和维护；
　3、不能使用更多的网络设备，比如手机、PDA等；
因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML 过度的一个桥梁。而xml是web发展的趋势。

HTML 语义化

什么是HTML语义化？
　1、基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等
　2、根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
为什么要语义化？
　1、为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
　2、用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
　3、有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
　4、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
　5、便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
写HTML代码时应注意什么？
　1、尽可能少的使用无语义的标签div和span；
　2、在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
　3、不要使用纯样式标签，如：b、font、u等，改用css设置。
　4、需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
　5、使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
　6、表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
　7、每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

内容与样式分离的原则

1、写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上，让HTML 能体现页面结构或者内容。之后再去写样式。
　3、写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化
　4、HTML 内不允许出现属性样式，尽量不要出现行内样式

常见的meta标签

关键字，搜所引擎 SEO
<meta http-equiv="keywords" content="关键字1,关键字2,...">
页面描述
<meta http-equiv="description" content="网页描述">
content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。
<meta name="renderer" content="webkit|ie-comp|ie-stand">
若页面需默认用极速核，增加标签：
<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核，增加标签：
<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核，增加标签：
<meta name="renderer" content="ie-stand">
如果安装了GCF，则使用GCF来渲染页面，如果没有安装GCF，则使用最高版本的IE内核进行渲染。
X-UA-Compatible：这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式(比如人见人烦的IE6)，以此来解决部分兼容问题。
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
强制页面在当前窗口以独立页面显示。
<meta http-equiv="Window-target" content="_top">
自动刷新，并指向新的页面
<meta http-equiv="Refresh" content="2；URL=http://">
禁止浏览器缓存
是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
用法：
<meta http-equiv="pragram" content="no-cache">
清除缓存（再访问这个网站要重新下载！）
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
设定网页的到期时间
<meta http-equiv="expires" content="0">
手机端
<meta name="format-detection" content="telphone=no, email=no"/>
忽略页面中的数字识别为电话，忽略email识别
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
设置苹果工具栏颜色
不让百度转码
<meta http-equiv="Cache-Control" content="no-siteapp" />
不缓存
<meta http-equiv="cache-control" content="no-cache" />
初始化设备
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
网站开启对iphone私有 web app 程序的支持
<meta content="yes" name="apple-mobile-web-app-capable" />
改变顶部状态条的颜色 iphone私有的属性
<meta content="black" name="apple-mobile-web-app-status-bar-style" />

Doctype作用、严格模式与混杂模式区分以及它们的差异

** 一、Doctype作用是什么？ **
<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
** 二、严格模式与混杂模式如何区分？它们有何意义？ **
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式） 
2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式） 
3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

浏览器乱码的原因

乱码造成原因
1、比如网页是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
2、html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
3、浏览器不能自动检测网页编码，造成网页乱码。
解决办法
1、改变浏览器的编码。点击编码后，选择uft-8。
2、在设置header charset解决这个问题。

常见浏览器内核

1，使用Trident的是internet explorer，国产的绝大部分浏览器。Trident是就是ie内核。
2，使用Gecko的是Mozilla Firefox，使用 Gecko 内核的浏览器也有不少，如 Netscape MozillaSuite/SeaMonkey 等。
3，使用Presto的是opera，这是目前公认网页浏览速度最快的浏览器内核。
4，使用WebKit的有苹果的safari，谷歌的chrome，还有国产的大部分双核浏览器其中一核就是WebKit。

【注】版权归 Lucifer 所有，转载请联系作者。