目录
前言：
系统的总结了一下HTML+CSS+JS知识，本篇博客为HTML和XHTML，其中的具体方法和属性可以去w3cshool查看。
直通车：
硬核归纳HTML+CSS+JS系列之CSS部分（W3C标准）
硬核归纳HTML+CSS+JS系列之JavaScript部分（W3C标准）
一、了解最基本的格式和注释，之后往后扩展
一般的格式都是这样的：
<!DOCTYPE html>
<html>
<head>
<!--我们设置为中文，因为可能有些浏览器默认GBK-->
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>用DOCTYPE html开头规范浏览器解析，然后是成对出现的head，body,title和其它标签。注释格式是这样的<!-- -->
二、标签
标签是用来标记HTML元素的，简单来说，看到的<>括号例如<b>就是标签，它们一般成对出现。而元素就是<b>好啊</b>这样的，始于标签，结束语标签。
为了之后更好的学习和代码规范，我们都用小写。
1、标题
首先我们使用的就是<h1></h1>这些作为标题，数字就代表几级标题（1~6）。
2、段落
段落使用<p></p>标签定义
3、换行符
换行符在常用不过了，这里我们就使用<br>，这个是一个空白标签，按理说没有关闭标签，但是为了规范，我们对于空白标签使用<br/>来关闭。
如果你有markdown的经验，你会发现HTML会裁掉文本中所有的空格，任何数量的空格都会被按一个空格计数。所以不要不要通过添加空格和空行来在编辑器中格式化文本。
4、水平线
写博客的时候也经常用到水平线来分隔文章的小节，<hr><hr/>也是一个空白标签。
三、属性
我们经常用到上面的标签，对于word也是这样，但是很少用到里面的属性，这里我们就来熟悉属性。
HTML标签拥有属性，属性为HTML提供附加信息，以键值对的（名称/值）的形式出现，这个很好理解的，例如name = "value"，并且它总是在HTML元素的开始标签中规定。我们一般都用双引号，如果属性值含有双引号，那么必须使用单引号。
1、居中排列标题
那么我们直接在开始标签这里使用，例如<h1 align="center">
2、背景颜色
使用<body bgcolor="yellow">。
四、文本格式化
上面简单的提及了标签和属性，如果仅仅是这个是不足够支持我们编写一个合格的文本的。所以我们这里列出各种标签，用到的时候可以提取。
| 标签 | 描述 |
|---|---|
<b> |
定义粗字文本 |
<big> |
定义大字号 |
<em> |
定义着重字 |
<small> |
定义小字号 |
<sub> |
定义下标字 |
<sup> |
定义上标字 |
<strong> |
定义加重语气 |
<ins> |
定义插入字 |
<del> |
定义删除字 |
当然，上面的标签其实已经够用了，只是有些时候我们可能使用到计算输出或者引用术语定义，所以接下来给出定义
<code> |
定义代码 |
|---|---|
<kbd> |
定义键盘码 |
<samp> |
定义计算机代码样本 |
<tt> |
定义打字机代码 |
<var> |
定义变量 |
<pre> |
定义预格式文本 |
<abbr> |
定义缩写 |
<acronvm> |
定义首字母缩写 |
<address> |
定义地址 |
<bdo> |
定义文字方向 |
<blockquote> |
定义长引用 |
<q> |
定义短引用 |
<cite> |
定义引用、引证 |
<dfn> |
定义一个定义项目 |
五、字符实体
即使有了上面的标签，我们也不能万事大吉，因为相对于平时所用的文本，我们还是需要一些字符实体的，例如大于小于符号等。
字符实体有三部分：一个和号&，一个实体名称或#和一个实体编号，以及一个分号（;）。
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | |
|
| < | 小于 | < |
| > | 大于 | > |
| & | 和号 | & |
| '' | 引号 | " |
| ' | 撇号 | &apos |
| ￠ | 分 | ¢ |
| £ | 镑 | £ |
| ¥ | 日元 | ¥ |
| § | 节 | § |
| © | 版权 | © |
| ® | 注册商标 | ® |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
六、链接
当然，在网上冲浪的你肯定会在不同网页之间跳转，这里就有锚标签和Href属性。HTML使用<a>来创建另一个文档的链接，可以是一张HTML页面，一幅图像，一个声音或视频文件等等。
例如：<a href="http://www.baidu.com/" target="_blank">百度！</a>
当然我们这里来介绍一些属性。
1、Target属性，定义被链接的文档在何处显示。例如当前页面或者创建一个空白页面。
2、Name属性
我们有<a name="tipes">Useful Tips Section</a>，之后我们将#符合和锚名称添加到URL的末端，就可以直接链接到tips这个 节，就像这样：
<a href="http://www.w3school.com.cn/html_links.asp#tips"Jump to the Useful Tips Section </a>
这样做我们可以创建直接跳转到页面的某个节的链接，不需要滑动页面来寻求信息。注意，我们书写链接的时候，总是将正斜杠添加到子文件夹，不然服务器会产生两次HTTP请求。
七、框架
上面我们已经可以构成一个很好的文本了，但是宏观上的布局我们还是没办法实现的，这里我们就介绍框架知识。
这里给出一个简单的例子：
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>上面是垂直框架，通过使用框架，可以在同一个浏览器中显示不止一个页面，每份HTML文档被称为一个框架，每个框架都独立于其他的框架。
这里也给出水平框架的例子：
<html>
<frameset rows="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
八、表格
表格列表表单的重要性就不需要我多说了，我们也总是以此收集用户的数据。这里我们来看看如何创建表格，当然，除了最基本的表格之外，我们也需要属性去调整。
定义表格之前，我们需要想一下，如果我们现在设计一个表格，要怎么去画，我们可能需要对表格有一个命名，需要知道一共几行几列，需要知道每个单元格大概多宽，是否有边框等等。那么我们就从总体的几行几列开始：
表格由<table></table>来定义，每个表格有若干行<tr>定义，每行分为若干单元格，由<td>定义。所以有例子为：
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>一看就知道是两行两列的格子
1、表格和边框属性
如果不定义边框属性，表格将不显示边框。需要显示，我们只需要在开始标签那里用border来定义即可。
2、表格的表头
我们使用<th>来定义表头：
至于如果有空白单元格，我们可以使用空格占位符来填充空白单元格，这样看起来比较友好。
3、跨行或跨列的表格单元格
我们总是有着合并行或者列的要求，那么也是可以实现的，看下面的例子：
<html>
<body>
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>你会发现我们是使用colspan和rowspan来实现的。当然，我们还有caption带标题，Cell padding单元格边距，Cell spacing单元格间距
4、其它有用的标签
| 表格 | 描述 |
|---|---|
<caption> |
定义表格标题 |
<th> |
定义表格的表头 |
<thead> |
定义表格的页眉 |
<tbody> |
定义表格的主体 |
<tfoot> |
定义表格的页脚 |
<col> |
定义用于表格列的属性 |
<colqroup> |
定义表格列的组 |
九、列表
对于我来说，word里面除了各种标题和文字之外，列表是必不可少的。我们这里就有无序列表、有序列表和自定义列表。
1、无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>2、有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>3、定义列表
我们使用<dl><dt><dd>开始，分别是定义列表、定义项目、定义的描述；
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>十、表单
这部分我认为是很重要的，可以结合后端开发来使用。我们见过太多的格式，例如按钮、单选、复选、文本域等等。这里我们介绍一下：
首先我们是使用<form></form>来定义此区域的。
1、文本域
我们用<input>标签定义，输入类型由type定义，例如：
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>2、单选按钮
<form>
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female
</form>3、复选框
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>4、表单的动作属性（Action）和确认按钮
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>这个就及其的重要，上面的意思是方法为get（我们一般有get、post)，上面代码的意思为，填入信息点击Submit之后，信息会发送到html_form_action.asp页面上。
十一、图像
当然，有些时候我们总是会插入一些图片来美化页面。
1、图像标签和源属性
定义图像的语法是：<img src="url"
2、替换文本属性
alt属性用来为图像定义一串预备的可替换的文本。
<img src="boat.gif" alt="Big Boat">
3、其它标签
当然我们还有<map><area>等标签，定义图形地图、定义图像地图中可点击的区域。
十二、HTML样式
你可能想使用背景或者定义字体，是的HTML是可以的，但是我们将使用CSS来进行定义。所以首先我们需要知道如何使用样式：
1、外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>2、内部样式表
当单个文件需要特别样式时，可以使用内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>3、内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>我们上面用到了几个标签，这里介绍一下：
| 标签 | 描述 |
|---|---|
<style> |
定义样式定义 |
<link> |
定义资源引用 |
<div> |
定义文档中的一个节 |
<span> |
定义文档中的一个节 |
十三、脚本和事件
但是你又知道了，有些时候我们需要让页面相应我们，让它动起来。所以这里我们展会上如何插入脚本。
比如这样的：
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html> 为了应对老式的浏览器，我们可以将脚本嵌套在注释中。这样新的浏览器是可以支持的，老的浏览器可以忽略，或者用<noscript>来代替，意味在脚本无法执行的情况下替代的文本。
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
更多的事件就可以去JS中学习使用。
十四、标准属性
下面的提供除了base,head,html,meta,param,script,style,title元素，其它标签都有的属性。
| 属性 | 值 | 描述 |
|---|---|---|
| class | class_rule或style_rule | 元素的类 |
| id | id_name | 元素的特定id |
| style | 样式定义 | 内联样式定义 |
| title | 提示文本 | 显示于提示工具中的文本 |
XHTML
以上部分就完成了HTML的学习，但是我们应该去了解XHTML，它是更严谨更纯净的HTML版本，我们主要针对差异来学习。
一、XHTML
我们知道HTML是超文本标记语言，那么对XHTML也要了解，它是可扩展超文本标签语言，因为存在着一些很糟糕的HTML，所以我们需要更严格的语法。最主要的不同在于：
1.XHTML元素必须被正确的嵌套
2.XHTML元素必须被关闭
3.标签名必须用小写字母
4.XHTML文档必须拥有根元素。
这一个可以解释一下，意思是所有的元素都必须被嵌套与<html>根元素中。
二、XHTML语法
1、XHTML除了我们知道的属性名称等必须小写，属性值必须加引号外（这个我们在HTML中已经规范了），还要知道，XHTML中使用id属性替代name属性。
2、强制使用XHTML元素
例如：
<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>
<body>
</body>
</html>3、语言属性
Lang属性应用于几乎所有的XHTML元素。它定义元素内部的内容所用语言的类型。如果在某元素中使用lang属性，就必须添加额外的xml:lang像这样：
<div lang="no" xml:lang="no"> Heia Norge!</div>
4、文件类型说明
-
STRICT（严格类型）
-
TRANSITIONAL（过渡类型）
-
FRAMESET（框架类型）
1）XHTML 1.0 Strict
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">2)XHTML 1.0 Transitional
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">3)XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/`xhtml1-frameset.dtd">三、升级HTML至XHTML
1、添加文件类型声明：
这里使用严格DTD：
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2、注意小写属性
3、空标签替换为这样的形式，例如：<hr>用<hr />替换
4、验证站点
5、至于其中的事件我们在JavaScript再学习。
后记：
HTML和XHTML部分就结束了，如果对你有帮助的话点个赞哦，谢谢~