试试吧
HTML、XHTML和HTML5
HTML
HTML是什么
HTML，全称是“Hyper Text Markup Language”（超文本标记语言），简单地说：网页就是用HTML语言制作的。HTML是一门描述性语言，是一门很容易入门的语言。
XHTML
XHTML是什么
可扩展超文本标记语言（英语：eXtensible HyperText Markup Language，XHTML），是一种标记语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用标记语言（SGML）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展标记语言（XML），XML是SGML的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。
XHTML1.1为XHTML最后的独立标准，2.0止于草案阶段。XHTML5则是属于HTML5标准的一部分，且名称已改为“以XML序列化的HTML5”，而非“可扩展的HTML”。在今日(2017年)，XHTML5比起HTML5仍远远并非主流。
XHTML与HTML之间的不同（几个必须）
元素必须被正确地嵌套
XHTML 元素必须被关闭：非空标签必须使用结束标签。
XHTML 元素必须小写：XHTML 规范定义：标签名和属性对大小写敏感。
XHTML 文档必须拥有一个根元素：所有的 XHTML 元素必须被嵌套于 <html> 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。
HTML5
HTML5是什么
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。
HTML5新特性
HTML5将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范。
智能表单
表单是实现用户与页面后台交互主要组成部分，HTML5在表单的设计上功能更加强大。input类型和属性的多样性大大地增强了HTML可表达的表单形式，再加上新增加的一些表单标签，使得原本需要JavaScript来实现的控件，可以直接使用HTML5的表单来实现；一些如内容提示、焦点处理、数据验证等功能，也可以通过HTML5的智能表单属性标签来完成。
绘图画布
HTML5的canvas元素可以实现画布功能，该元素通过自带的API结合使用JavaScript脚本语言在网页上绘制图形和处理，拥有实现绘制线条、弧线以及矩形，用样式和颜色填充区域，书写样式化文本，以及添加图像的方法，且使用JavaScript可以控制其每一个像素。HTML5的canvas元素使得浏览器无需Flash或Silverlight等插件就能直接显示图形或动画图像。
多媒体
HTML5最大特色之一就是支持音频视频，在通过增加了<audio>、<video>两个标签来实现对多媒体中的音频、视频使用的支持，只要在Web网页中嵌入这两个标签，而无需第三方插件（如Flash）就可以实现音视频的播放功能。HTML5对音频、视频文件的支持使得浏览器摆脱了对插件的依赖，加快了页面的加载速度，扩展了互联网多媒体技术的发展空间。
地理定位
现今移动网络备受青睐，用户对实时定位的应用越来，要求也越来越高。HTML5通过引入Geolocation的API可以通过GPS或网络信息实现用户的定位功能，定位更加准确、灵活。通过HTML5进行定位，除了可以定位自己的位置，还可以在他人对你开放信息的情况下获得他人的定位信息。
数据存储
HTML5较之传统的数据存储有自已的存储方式，允许在客户端实现较大规模的数据存储。为了满足不同的需求，HTML5支持DOM Storage和Web SQL Database 两种存储机制。其中，DOM Storage 适用于具有key/value对的基本本地存储；而WebSQLDatabase是适用于关系型数据库的存储方式，开发者可以使用SQL语法对这些数据进行查询、插入等操作。
多线程
HTML5利用Web Worker将Web应用程序从原来的单线程业界中解放出来，通过创建一个Web Worker对象就可以实现多线程操作。JavaScript创建的Web程序处理事务都是在单线程中执行，响应时间较长，而当JavaScript过于复杂时，还有可能出现死锁的局面。HTML5新增加了一个WebWorkerAPI，用户可以创建多个在后台的线程，将耗费较长时间的处理交给后台面不影响用户界面和响应速度，这些处理不会因用户交互而运行中断。使用后台线程不能访问页面和窗口对象，但后台线程可以和页面之间进行数据交互。子线程与子线程之间的数据交互，大致步骤如下：①先创建发送数据的子线程；②执行子线程任务，把要传递的数据发送给主线程；③在主线程接受到子线程传递回的消息时创建接收数据的子线程，然后把发送数据的子线程中返回的消息传递给接收数据的子线程；④执行接收数据子线程中的代码。
div和span
div和span没有任何语义,正是因为没有语义，这两个标签一般都是配合CSS来定义元素 样式的。
div和span区别如下：
1、 div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；span 是行内元素，可以与其他行内元素位于同一行。
2、 div常用于页面中较大块的结构划分，然后配合CSS来操作；span 一般用来包含文字等, 它没有结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用span来配合CSS 操作。
语义化
标题语义化
一个页面只能有一个h1便签
h1~h6之间不要断层
不要用h1~h6来定义样式
不要用div来代替h1~h6
图片语义化
alt属性（必需）：图片描述，给搜索引擎看的，当图片无法显示时，页面会显示alt中的文字
title属性（可选）：图片描述，给用户看的，当鼠标移到图片上时，会显示title中的文字
figure元素：用于包含图片和图注
figcaption元素：用于表示图注文字
表格语义化
thead、tbody、tfoot三个标签的语义:表头、表身、表脚。有了这几个标签，表格语义更加良好，结构更加清晰
表单语义化
label标签:用于显示在输入控件旁边的说明性文字，将表单元素和说明文字关联起来
for属性的2个作用:
语义上绑定了label元素和表单元素
增强了鼠标可用性
fieldset标签给表单进行分组，legend标签定义某一组表单的标题
fieldset标签和legend标签的两个作用:
增强表单的语义
fieldset元素的disabled属性可以禁用整个组中的表单元素
其他语义化
换行符<br/>
<br/>标签只适合用于p标签内部的换行，不能用于其他标签
无序列表ul
为了实现良好的语义，对于列表型的数据，建议使用无序列表
strong标签和em标签
在strong和em内部的文本会被强调为重要文本，为了SEO想要突出某些关键字可以使用这两个标签，一般会先去掉他们的默认样式，再用CSS重新定义，这并不影响他们的语义
显示图片的2种方式:
使用img标签：通过HTML来实现，图片作为HTML的一部分，且被搜索引擎所看到
使用背景图片：通过CSS实现，不作为HTML的一部分，不被搜索引擎所看到，仅起到修饰作用
语义化验证
如何判断一个页面的语义是否良好呢？
去掉CSS样式，再看页面是否还具有可读性