?
0、文章结构____________________________________________________________
?
?
1、html4.0
2、xhmtl
3、HTML5
?
?
1、html4.0____________________________________________________________
?
HTML定义：Hyper Text Markup Language
? ? ? ?不是一种编程语言，不可进行编程，而是一种标记语言 (markup language) ，标记语言是一套标记标签 (markup tag) ，如<body></body>
? ? ? ?Web 浏览器的作用是读取HTML文档，并以网页的形式显示（渲染）出它们。
? ? ? ?HTML 4 是SGML (Standard Generalized Markup Language) 的一个应用
HTML标签
? ? ? ?对大小写不敏感：<P> 等同于 <p>。未来 (X)HTML 版本中强制使用小写。不允许省略结束标签。
? ? ? ?
HTML元素
? ? ? ?指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
HTML属性
? ? ? ?属性总是在 HTML 元素的开始标签中规定
? ? ? ?
表格
? ? ? ?<table>,<caption>,<tr>,<th>,<td>,<thead>,<tbody>,<tfoot>。目前浏览器对后三个标签支持的不好。
列表
? ? ? ?<ul><li></li></ul> ? ? ? ?无序列表
? ? ? ?<ol><li></li></ol> ? ? ? ?有序列表也是一列项目，列表项目使用数字或字母进行标记（可选择）。
? ? ? ?<dl><dt><dd></dd></dt></dl> ? ? ? ? ? ? ? ?自定义列表，可嵌套复杂的。
? ? ? ? ? ? ? ?<dl>定义定义列表。 <dt> 定义定义项目。 <dd> 定义定义的描述。?
? ? ? ? ? ? ? ?
表单
? ? ? ?定义域-会有一个边框 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ?<fieldset>
? ? ? ? ? ? ? ? ? ? ? ?<legend>健康信息：</legend>
? ? ? ? ? ? ? ? ? ? ? ?<form>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<label>身高：<input type="text" /></label>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<label>体重：<input type="text" /></label>
? ? ? ? ? ? ? ? ? ? ? ?</form>
? ? ? ? ? ? ? ?</fieldset>
? ? ? ?
? ? ? ?定义select选项组 ? ? ? ?
? ? ? ? ? ? ? ?<select>
? ? ? ? ? ? ? ? ? ? ? ?<optgroup label="Swedish Cars">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<option value="volvo">Volvo</option>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<option value="saab">Saab</option>
? ? ? ? ? ? ? ? ? ? ? ?</optgroup>
? ? ? ? ? ? ? ? ? ? ? ?<optgroup label="German Cars">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<option value="mercedes">Mercedes</option>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<option value="audi">Audi</option>
? ? ? ? ? ? ? ? ? ? ? ?</optgroup>
? ? ? ? ? ? ? ?</select>
框架结构：frameset、frame
? ? ? ?嵌套框架结构
? ? ? ? ? ? ? ?<html>
? ? ? ? ? ? ? ? ? ? ? ?<frameset rows="20%,80%">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<frame noresize="noresize" src="./frame_a.html">//属性 noresize="noresize" 表示不可拖动
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<frameset cols="20%,80%">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<frame src="./frame_b.html">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<frame src="./frame_c.html">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</frameset>
? ? ? ? ? ? ? ? ? ? ? ?</frameset> ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?</html>
? ? ? ?导航跳转
? ? ? ? ? ? ? ?<frameset cols="120,*">
? ? ? ? ? ? ? ? ? ? ? ?<frame src="../example/html/html_contents.html"">
? ? ? ? ? ? ? ? ? ? ? ?<frame src="../example/html/frame_a.html" name="showframe">
? ? ? ? ? ? ? ?</frameset>
? ? ? ? ? ? ? ?html_contents.html内容
? ? ? ? ? ? ? ? ? ? ? ?<a href ="frame_a.html" target ="showframe">Frame a</a><br>
? ? ? ? ? ? ? ? ? ? ? ?<a href ="frame_b.html" target ="showframe">Frame b</a><br>
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?
内联框架：iframe ? ? ??
? ? ? ?<body>
? ? ? ? ? ? ? ?<iframe src="./frame_a.html"></iframe>//内联框架
? ? ? ?</body>
? ? ? ?
HTML4.0开始剥离出CSS样式表
? ? ? ?关于CSS，详见本章1.1 CSS文档
? ? ? ?
字符实体：需要转义的、特殊显示的字符
? ? ? ?有三部分：一个和号 (&)，一个实体名称，或者 # 和一个实体编号(#60)，以及一个分号 (;)。
? ? ? ?< 小于号 < <?
? ? ? ?? 版权 © ©?
? ? ? ?
meta标签
? ? ? ?属性：http-equiv ? ? ? ?。值：content-type、expires 、refresh 、set-cookie。描述：把 content 属性关联到 HTTP 头部。
? ? ? ?如：<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
? ? ? ?属性：name。值：author、description 、keywords 、generator 、revised 、others?
? ? ? ?<meta name="keywords" content="HTML,ASP,PHP,SQL">
? ? ? ?content 属性始终要和 name 属性或 http-equiv 属性一起使用。
DOCTYPE标签：必须在第一行与xml不同（xml的在第二行）
? ? ? ?该标签可声明三种 DTD 类型，分别表示严格版本strict、过渡版本transitional以及基于框架的 HTML 文档frameset。
? ? ? ?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
? ? ? ?声明了文档的根元素是 html，它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进行了定义，浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。
? ? ? ?HTML4.01和XHTML1.0类似也有三种 DTD 类型
URL
? ? ? ?scheme://host.domain:port/path/filename
? ? ? ? ? ? ? ?Scheme 定义因特网服务的类型。最流行的类型是 http。
? ? ? ? ? ? ? ?domain（域）定义因特网域名，比如：w3school.com.cn。
? ? ? ? ? ? ? ?host（主机）定义此域中的主机。如果被省略，缺省的支持 http 的主机是 www。
? ? ? ? ? ? ? ?:port(端口)定义主机的端口号。端口号通常是被省略的。缺省的端口号是 80。
? ? ? ? ? ? ? ?path（路径）定义服务器上的路径（一个辅助的路径）。如果路径被省略，资源（文档）会被定位到网站的根目录。
? ? ? ? ? ? ? ?filename（文件名）定义文档的名称。缺省的文件名一般会是 default.asp 或者 index.html，或者依据 WEB 服务器设置的其他文件名。
? ? ? ?常见的scheme：
? ? ? ? ? ? ? ?file 本地 PC 上的文件。?
? ? ? ? ? ? ? ?ftp FTP 服务器上的文件。?
? ? ? ? ? ? ? ?http World Wide Web 服务器上的文件。?
? ? ? ? ? ? ? ?gopher Gopher 服务器上的文件。?
? ? ? ? ? ? ? ?news Usenet 新闻组。?
? ? ? ? ? ? ? ?telnet Telnet 连接。?
<!--...--> 标签
? ? ? ?注释，会被浏览器忽略掉 ? ? ? ?
? ? ? ?
2、XHTML____________________________________________________________
?
? ? ? ? EXtensibleHTML于2000年的1月26日成为 W3C 标准。作为一种 XML 应用被重新定义的 HTML。 XHTML 现在已经大部分取代 HTML
?
更严格XHTML语法规则：
? ? ? ?标签开始结束必须匹配?
? ? ? ?属性名称必须小写?
? ? ? ?属性值必须加引号?
? ? ? ?属性不能简写?
? ? ? ? ? ? ? ?错误:<input checked>,<input readonly>,<input disabled>,<option selected>,<frame noresize>
? ? ? ? ? ? ? ?正确：<input checked="checked" />,<input readonly="readonly" />,<input disabled="disabled" />,<option selected="selected" />,<frame noresize="noresize" />
? ? ? ?用 Id 属性代替 name 属性?
? ? ? ? ? ? ? ? 但是servlet、struts只能从表单中的name中取数据啊
? ? ? ?比HTML多一个声明
? ? ? ? ? ? ? ?<html xmlns=”http://www.w3.org/1999/xhtml”>
? ? ? ? ? ? ? ?XHTML做为HTML向XML过渡的一种语言，并不能实现XML语言中的用户自定义标签，所以XHMTL文档中的命名空间都是相同的
? ? ? ?HTML和XHTML共有的声明
? ? ? ? ? ? ? ?DOCTYPE：告诉浏览器用那种规范，解析渲染此HTML文档，只有将正确的 DTD 添加到文件的首行，XHTML 文件才会被正确地验证。
? ? ? ? ? ? ? ?<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
?
3、HTML5____________________________________________________________
?
HTML5
? ? ? ?下一代的HTML。将成为HTML、XHTML 以及 HTML DOM 的新标准。
TML5 中的一些有趣的新特性：
? ? ? ?用于绘画的 canvas 元素?
? ? ? ?用于媒介回放的 video 和 audio 元素?
? ? ? ?对本地离线存储的更好的支持?
? ? ? ?新的特殊内容元素，比如 article、footer、header、nav、section?
? ? ? ?新的表单控件，比如 calendar、date、time、email、url、search?
浏览器支持
? ? ? ?最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性 ? ? ? ??