HTML学习（一）html、xhtml、html5
一、基本概念
html：超文本标记语言 (Hyper Text Markup Language)
xhtml：可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。
html5：最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言，随后和W3C的xhtml2.0(标准)相结合，产生现在最新一代的超文本标记语言。可以简单点理解成：h5≈ html+CSS 3+js+API。
标题html特性：
- 标识文本。例如：定义标题文本、段落文本、列表文本、预定义文本。
- 建立超链接，便于页面链接的跳转。
- 创建列表，把信息有序组织在一起以方便浏览。
- 在网页中显示图像、声音、视频、动画等多媒体信息，把网页设计得更富冲击力。
- 可以制作表格，以便显示大量数据。
- 可以制作表单，允许在网页内输入文本信息，执行其他用户操作，方便信息互动。
h5的认识：
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
h5新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
二、文档类型声明方式
html:
过渡型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
严格型:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
框架型:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
xhtml:
过渡型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
html5:
<!DOCTYPE html>
三、语义
html：没有体现结构语义化的标签，我们通常都是这样来命名的<div id="header"></div>.这样表示网站的头部。
html5：在语义上却有很大的优势。提供了一些新的标签，比如:<header><article><footer>
提供了语义化标签可以更好地支持搜索引擎的读取便于seo的蜘蛛的爬行。
四、XHTML和HTML 最主要区别（规范）
XHTML作为HTML的升级版。当然会有很多其它的规范。详细例如以下：
-
(1) 全部的标记都必需要有一个相应的结束标记。
曾经在HTML中。你能够打开很多标签，比如和<li>而不一定写相应的和</li>来关闭它们。但在XHTML中这是不合法的。
XHTML要求有严谨的结构，全部标签必须关闭。
假设是单独不成对的标签。在标签最后加一个"/"来关闭它。
比如：<img height="80" alt="网页设计师" src="../images/logo_w3cn_200x80.gif" width="200" />。 -
(2) 全部标签的元素和属性的名字都必须使用小写。
与HTML不一样，XHTML对大写和小写是敏感的。
<title>和<TITLE>是不同的标签。XHTML要求全部的标签和属性的名字都必须使用小写。比如：<BODY>必须写成<body>。大写和小写夹杂也是不被认可的。
通常dreamweaver自己主动生成的属性名字"onMouseOver"也必须改动成"onmouseover"。 -
(3) 全部的XML标记都必须合理嵌套。
相同由于XHTML要求有严谨的结构。因此全部的嵌套都必须按顺序。
曾经我们这样写的代码：<p><b></p></b>必须改动为：<p><b></b></p>。
就是说。一层一层的嵌套必须是严格对称。 -
(4) 全部的属性必须用引号""括起来。
在HTML中。你能够不须要给属性值加引号，可是在XHTML中，它们必须被加引號。
比如：<height=80>必须改动为：<height="80">。
特殊情况，你须要在属性值里使用双引号，你能够用"，单引號能够使用’，
比如：<alt="say'hello'"> -
(5) 把全部<和&特殊符号用编码表示。
不论什么小于号（<）。不是标签的一部分，都必须被编码为& l t ；不论什么大于号（>），不是标签的一部分，都必须被编码为>。不论什么与号（&），不是实体的一部分的，都必须被编码为&；注：以上字符之间无空格。 -
(6) 给全部属性赋一个值。
XHTML规定全部属性都必须有一个值，没有值的就反复本身。
比如：<input type="checkbox" name="shirt" value="medium" checked>
必须改动为：<input type="checkbox" name="shirt" value="medium" checked="checked" /> -
(7) 不要在凝视内容中使“–”。“–”仅仅能发生在XHTML凝视的开头和结束，也就是说，在内容中它们不再有效。
比如以下的代码是无效的：<!--这里是凝视-----------这里是凝视-->：用等号或者空格替换内部的虚线。
<!--这里是凝视============这里是凝视-->：以上这些规范有的看上去比較奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。 -
(8) 图片必须有说明文字。每一个图片标签都必须有ALT说明文字。
<img src="ball.jpg" alt="large red ball" title="large red ball"/>//为了兼容火狐和IE浏览器，对于图片标签，尽量採用 alt和title双标签，单纯的alt标签在火狐下没有图片说明。
五、HTML5基本语法
（一）链接
<html>
<head>
<meta charset="utf-8" />
<title>The First</title>
<!-- title自带换行 -->
</head>
<body>
<!-- 这是注释 -->
<h1>HELLO</h1>
<h2>HELLO</h2>
<h6>HELLO</h6>
<!-- 1为最小 6为最大 -->
<font size="6">6号字体</font>
<!-- 字号与h字号相反，1最大 -->
<hr width="200" />
<!-- 水平分割线 -->
<a href="">假链接</a>
<br /><a href="#">Top</a>
<!-- 点击跳至页面顶端 -->
<a href="#maodian">点击前往</a>
<!-- 设点本页超链接锚点，点击即跳转 -->
<p id="maodian">It's me</p>
<!-- 跳转至此处 -->
<p>
我的博客<br />
<a href="http://xyyhub.github.io/" target="_black">点击跳转</a><br />
</p>
<!--
href：你要跳转的地址
target: 控制新的页面打开模式
_blank新打开一个页面显示
_self覆盖原网页打开 【默认值】
-->
<img src="img/avatar.jpg" width="200" height="200" alt="图片不存在" title="我的头像" />
<!-- 插入图片，alt设定图片错误时显示的文字，title设定鼠标悬停显示的文字 -->
<h4>无序列表</h4>
<ul type="dise">
<!-- 默认即为dise实心圆点，还有circle空心圆，square实心方 -->
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<!--
快捷键：
ul>li*n 一个ul下面有n个li
ctrl+d 复制当前行
-->
<h4>有序列表</h4>
<ol type="dise">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<!-- 图片加列表实例 -->
<img src="img/tall.png" alt="图片不存在" title="上海" width="400" height="300" align="left" hspace="90" />
<!-- align设置对齐方式，hspace设置间隔 -->
<h3>
<font color="red">陆家嘴</font>
</h3>
<ul type="disc">
<li>上海大厦</li>
<li>国贸大厦</li>
<li>金融中心</li>
</ul>
</body>
</html>
（二）表格 Table
<html>
<head>
<title>Table</title>
<meta charset="utf-8">
</head>
<body height="7800">
<table border="1" align="center" bgcolor="pink">
<!-- 建立表格 -->
<tr>
<!-- tr建立行 -->
<td>
<!-- td建立列 -->
html
</td>
</tr>
</table>
<table border="1" align="center">
<!-- 设定表标题 -->
<caption>Table Title</caption>
<!-- 设定表头 -->
<thead bgcolor="pink">
<tr>
<td>List Name 1</td>
<td>List Name 2</td>
<td>List Name 3</td>
</tr>
</thead>
<!-- 建立表身体 -->
<tbody>
<tr>
<td rowspan="2" bgcolor="pink">1</td><!-- rowspan合并行 -->
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2" bgcolor="pink">2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" bgcolor="pink">3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
<!-- 设定表尾 -->
<tfoot>
<tr align="center" bgcolor="pink">
<td colspan="3">Table Foot 1 & 2 & 3 .</td><!-- colspan合并列 -->
</tr>
</tfoot>
</table>
<!--
border:表格中的边框 默认情况下0 取值代表边框的粗细
cellspacing:单元格与单元格之间的间距 默认为2个像素的
cellspadding:单元格与内容之间的距离 默认1个像素
width: 表格的宽度 默认情况下为内容的宽度
height:表格的高度 默认情况下为内容的高度
align: 水平对齐的方式： left center right 默认left
在table中设置 表格在浏览器中为 居左 居中 居右
在tr中设置 当前行的内容在表格中 居左 居中 居右
在td中设置 当前列【当前单元格】的内容在表格中 居左 居中 居右
valign 垂直对齐方式 ： top middle bottom
在table中设置 无效
在tr中设置 当前行的内容在表格中 居上 居中 居下
在td中设置 当前列【当前单元格】的内容在表格中 居上 居中 居下
<tr valign="bottom" height="100">
<td valign="bottom" height="100">用户名</td>
<td>密码</td>
<td>手机号</td>
</tr>
-->
</body>
</html>
（三）表单 Form
<html>
<head>
<title>
用户登录界面
</title>
<meta charset="utf-8">
</head>
<body>
<form action="text01.html" method="post" align="center">
<p>账号：<input name="username" maxlength="10" placeholder="请输入用户名" size="100"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>确认：<input type="password" name="rpwd"></p>
<p>性别：
男<input type="radio" name="sex" value="男" checked>
女<input type="radio" name="sex" value="女"></p>
<p>
爱好：
游泳<input type="checkbox" name="hobby" value="游泳">
健身<input type="checkbox" name="hobby" value="健身">
篮球<input type="checkbox" name="hobby" value="篮球">
足球<input type="checkbox" name="hobby" value="足球">
</p>
<p>
出生日期：
<select>
<option selected="selected">一月</option>
<option>二月</option>
<option>三月</option>
<option>四月</option>
<option>五月</option>
<option>六月</option>
<option>七月</option>
<option>八月</option>
<option>九月</option>
<option>十月</option>
<option>十一月</option>
<option>十二月</option>
</select>
</p>
<p>
文件上传：<input type="file">
</p>
<p>
<textarea cols="20" rows="10">hello word</textarea>
<p>
<input type="submit" value="登录">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
<input type="hidden" name="id" value="100">
<!--
submit:会直接提交Form表单
reset:重置
button:不提交
hidden:隐藏域传递信息
-->
</p>
</form>
<!--
<form>内
action:提交路径
method:
form表单常用的两种提交方式
get:默认参数，提交的参数会在地址栏中显示不安全，
有字符限制，常用于查询
post:安全，提交的参数不会在地址栏中显示，
基本上无字符限制
文本框: <input type=”text”/>
name 控件的名称 (一组控件的名称)
value 控件的值
size 控件的长度
maxlength控件中文字的最大数量
readonly控件设置为只读的
密码框：<input type=”password”/>
单选按钮：<input type=”radio”/>
复选框：<input type=”checkbox”/>
Checked：默认选中
下拉列表框：<select><option></option></select>
Selected：默认选中
Multiple：全部显示
文件上传项：<input type=”file” name=”file”/>
文本域：<textarea name=”” cols=”” rows=””></textarea>
提交按钮：<input type=”submit” value=”注册”>
重置按钮：<input type=”reset” value=”重置”>
普通按钮：<input type=”button” value=”普通按钮”>
隐藏字段：<input type=”hidden” name=”id”/>
-->
</body>
</html>
（四）框架 Frame
使用了frameset标签，不需要使用body. 属性： rows：横向切分页面 cols：纵向切分页面 frameborder :是否显示框架边框 0 、 1、 yes、 no 标签代表切分每个部分的页面 src：引入页面的路径 name 框架页面的名称 noresize :禁止调整大小 scrolling : 是否显示滚动条
<html>
<head>
<title>Frameset</title>
<meta charset="utf-8">
</head>
<frameset rows="20%,*">
<frame src="shop.html"></frame>
<frameset cols="20%,*">
<frame src="left.html"></frame>
<frame src="用户管理.html" name="rightFrame"></frame>
</frameset>
</frameset>
</html>