HTML,XML和XHTML的区别和联系
XHTML产生的原因，一方面是为了和未来的XML大规模的应用接轨，一方面还要兼容目前的数以万计的用HTML编写的网页以及他们的设计者，开发者相兼容，于是便出现了这个东西。以HTML编写的网页中，标记使用有些混乱。由于许多浏览器都有自己的私有标签，而私有标签的大规模应用，就导致了不同浏览器上访问同一个网页的结果不同。举个例子iframe标签，就是IE的私有标签。
而XHTML产生的原因，正是为了统一这种标记使用混乱的局面，浏览器厂商将联合采用"严格的错误防御标准"，如果XML代码不兼容，浏览器将拒绝显示。
这可以说也是对浏览器的一个改变，目前的浏览器，为了最大限度的容错，把网页中的内容，最大限度的显示出来。而改变之后，变成，只要不标准，就不显示。感觉就好像代码编译中的警告信息一样，目前，是忽略有可能导致问题的警告，而将来，将会把警告也作为错误来处理。
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。
2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。下面是W3C的HTML工作组主席Steven Pemberton回答的关于XHTML的常见基础问题。
- XHTML解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存在三个主要缺点：不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML；由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML；数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML过度的一个桥梁。
- XML是web发展的趋势，所以人们急切的希望加入XML的潮流中。XHTML是当前替代HTML4标记语言的标准，使用XHTML1.0，只要你小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，你可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到XML。
- 使用XHTML的另一个优势是：它非常严密。当前网络上的HTML的糟糕情况让人震惊，早期的浏览器接受私有的HTML标签，所以人们在页面设计完毕后必须使用各种浏览器来检测页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览器。
- XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。
- XHTML是Web标准家族的一部分，能很好在无线设备等其它用户代理上。
- 在网站设计方面，XHTML可助你去掉表现层代码的恶习，帮助你养成标记校验来测试页面工作的习惯。
HTML语义化
什么是HTML语义化
HTML标签可分为有语义的标签和无语义的标签。比如有语义的标签中table表示表格，form表示表单，a标签表示超链接，strong标签表强调。无语义标签典型的有<div>和<span>。
HTML语义化就是根据页面内容的结构（结构语义化），选择合适的语义标签（标签语义化）来书写html页面
为什么要语义化
- 裸奔时好看：为了在去掉或丢失CSS样式的情况下,页面也能呈现出很好地内容结构、代码结构
- 有利于SEO：爬虫依赖于语义标签来确定上下文和各个关键字的权重，有助于爬虫抓取更多的有效信息
- 方便其他设备解析：使屏幕阅读器、盲人阅读器、移动设备等以一种有意义的方式来渲染网页
- 便于团队开发和维护：语义化代码更具可读性，遵循这个标准可以减少差异化。
写HTML代码时应注意什么？
- 尽量使用有语义的标，如标题（H1~H6）、列表（ul、ol、li、dd、dl、dt）、强调（strong、em）、段落（p）等2、尽可能少使用无语义的标签div和span；
- 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；不要使用纯样式标签，如：b、font、u等，改用css设置。
- 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
- 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
- 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
内容与样式分离
将样式和内容写在一起，也就是直接将样式写在html标签中，会使整个html文档很乱，可读性变差，不利于维护。
将样式与内容分离有很多的好处：
- 利用CSS中的重用、组合、继承等特性减少样式的代码量，样式结构上非常清晰；
- 页面视觉有变动只需要修改相应的CSS文件，不用或者基本上不用改动html文档中的标签结构；
- 方便JavaScript脚本编写，比如用js控制标签的className来方便的、动态的改变元素的样式，而不是直接修改其具体样式
- 适合产品级、模块化的开发
但是在网站需要部分更改的时候需要同时修改html和css，这时候并不能体现出这种写法易于维护的特性？
常见meta标签
-
Keywords (关键字)
说明：告诉搜索引擎你网页的关键字是什么。
用法：<meta name="keywords" content=""> -
Description (网页描述)
说明：Description用来告诉搜索引擎你的网页主要内容。
用法：<meta name="description" content="学习研究搜索引擎优化网提供专业的SEO优化教程，收集整理SEO优化文章、SEO优化工具，为网络营销贡献出自己的一份力量。" /> -
Robots (机器人向导)
说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
用法：<meta name="robots" content="All|None|Index|Noindex|Follow|Nofollow">
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；(和 "noindex, no follow" 起相同作用)
index：文件将被检索；（让robot/spider登录）
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找) -
Author (作者)
说明：标注网页的作者或制作组
用法：<meta name="author" content="">
注意：Content可以是：你或你的制作组的名字,或Email -
Copyright (版权)
说明：标注版权
用法：<meta name="copyright" content=""> -
Generator (编辑器)
说明：编辑器的说明
用法：<meta name="generator" content="PCDATA|FrontPage|">
注意：Content="你所用编辑器" -
Revisit-after (重访)
说明：通知搜索引擎多少天访问一次
用法：<meta name="revisit-after" content="7 days">
从IE9开始引入了固定网站功能，对用户来说这是一种只需在任务栏上单击图标即可直接访问网站的简单方式。固定网站还易于实现，仅需要非常少的代码。以下的元数据标签只在IE9+生效。如Windows Vista,Windows 7系统上。官方文档地址http://msdn.microsoft.com/zh-cn/library/ie/gg491732%28v=vs.85%29.aspx 。所有元素都是可选的。 -
移动端viewport标签
含义如下：
width
控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
文档声明及<!DOCTYPE html>的作用 严格模式和混杂模式
- doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是W3C所发布的一个文档类型定义（DTD）中包含的规则。每个DTD都包括一系列标记、attributes和properties，它们用于标记Web文档的内容；此外还包括一些规则，它们规定了哪些标记能出现在其他哪些标记中。每个Web建议标准（比如HTML 4 Frameset和XHTML 1.0 Transitional）都有自己的DTD。假如文档中的标记不遵循doctype声明所指定的DTD，这个文档除了不能通过代码校验之外，还有可能无法在浏览器中正确显示。对于标记不一致的问题，浏览器相较于校验器来说更宽容。但是，不正确的doctype声明经常导致网页不正确显示，或者导致它们根本不能显示。
- 现代浏览器包括不同的呈现模式，目的是既支持遵循标准的网页，也支持为老式浏览器而设计的网页。其中， Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。另外，注意Mozilla/Netscape 6新增了一种 Almost Standards（近似标准）模式，用于支持为标准的某个老版本而设计的网页。
浏览器乱码的产生和问题解决
原因
产生乱码的主要原因是在保存html文档时采用的编码方式和浏览器解析时采用的编码方式不一致导致的，未声明编码方式的文档会由浏览器以默认的方式解码。（英文在不用的编码方式中采用相同的码字，纯英文网页不会因为此原因乱码）
解决方法
在html中声明保存文档的编码方式，如使用UTF-8保存时，在文档中声明<meta charset="utf-8">，这样浏览器解析时会采用相同的方式解码，避免乱码
常用浏览器及其内核
浏览器用的内核，一般不外乎微软的IE 内核和webkit内核。所谓内核，就是常驻内存、能够快速响应的那一部分核心代码，非内核代码都是要用到时再调入内存并执行的。webkit内核更小巧快速，但兼容性不如IE内核。所以有些浏览器是用的双内核，可以在高速模式和兼容模式间切换。
- Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、Avant、Netscape8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
- Gecko内核代表作品MozillaFirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
- WebKit内核代表作品Safari、Chromewebkit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
- Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。
国产浏览器如搜狗浏览器，360安全浏览器，猎豹浏览器都采用trident和webkit双内核设计
常用HTML标签
- html标题
<h1>to<h6> - html水平线
<hr/> - html注释``
注释不会在网页上显示 - html段落
<p>以及段落换行<br/> - html超链接
<a> - html的图像
<img> - html的表格
<table> - html列表
<ul><ol> - html表单
<form> - 换行
<br> - 声明html
<html> - 文档内容
<body> - 文档标题
<head>
网友评论