HTML4.01
html特点
- HTML不是编程语言，而是一种标记语言，就是用来描述网页内容的特定符号；
- 用该语言编写的文件，以.html 或者.htm 为后缀；
- 由浏览器解释运行；
- HTML是一种扩展性很强的语言，可以嵌套脚本语言，如：JavaScript；
版本信息
在文档的起始用DOCTYPE声明指定的版本和风格，让浏览器清楚文档的版本和风格。版本信息分为三种：严格型（不包含弃用的元素（比如 font），不允许frameset）、传统型（包含弃用的元素（比如 font），不允许frameset）、框架型（包含弃用的元素（比如 font），允许frameset）；而目前html5统一使用<!DOCTYPE html>
注：<!DOCTYPE> 声明必须在HTML文档的第一行，位于<html>标签之前；DOCTYPE声明是必不可少的,<!DOCTYPE> 声明不是 HTML 标签；它告诉浏览器该页面是使用哪个 HTML 版本编写的；
注：HTML 4.01 与 HTML5 之间的差异：在 HTML 4.01 中有三种 <!DOCTYPE> 声明；而在 HTML5 中只有一种：<!DOCTYPE html>
html标记的语法
标记分为两种：单标记、双标记
<标记符>没有结束的标记 — 单标记
<开始标记符></结束标记符> — 双标记
注：在xhtml中规定，所有html标记都要小写，所有的标记都要有关闭符号。如：<hr /> <br />
meta标记
meta标记是对网页文件的说明，便于搜索引擎查找，放置于<head></head>之间。
设置关键字：<meta name = "keywords" content = "关键字">多个关键字之间用“,”分隔
设置描述： <meta name = "description" content = "对关键字的扩展说明">
设置页面定时跳转：<meta http-equiv = "refresh" content = "2;URL = http://www.baidu.com"/>其中2代表2秒
语义标记
-
普通加粗标记：<b>文字内容</b> 普通倾斜标记：<i>文字内容</i>，二者都没有在语义上突出重点的意思 -
语义加强加粗标记：<strong>文本内容</strong> 语义加强的倾斜标记：<em>文本内容</em>，二者都告诉了浏览器，加粗或倾斜的是重点 下划线<u>文本</u> 删除线<s>文本</s> 上标<sup>文本<sup> 下标<sub>文本<sub> <br />换行标记- 段落标记
<p></p>
注：用适合的html标记，去描述网页内容，这才是网页优化的核心
标题
<hn>标题内容<hn> ，标题标记，n的取值范围是1 – 6，标题标记内的文本会以加粗方式显示。
换行标记
<br />在一个段落内换行。
水平分割线
主要属性：
size属性，像素值和百分比，数值越大，线越粗；
width属性，像素值和百分比，决定线的长度。其中，像素值是一个绝对的值，不会随着窗体大小的改变而改变；
xhtml中的属性值
在xhtml中，所有的标签都必须有属性值，如果没有就用属性名，例如：<input checked = "checked" />
特殊标记
居中：<center>……</center> (在xhtml中已被废弃)；
预格式化：<pre></pre>
特殊字符（转义符）的输入
空格： 或者 
"："
＆：&
＜：<
＞：>
列表
- 无序列表
<ul>...</ul> [Unordered List]
语法：
<ul type = "符号类型">
<li>列表内容1</li>
</ul>
说明：符号类型有三种，disc是实心圆圈，circle是空心圆○，square是正方形
- 有序列表
<ol>...</ol> [Order List]
语法：
<ol type = "符号类型">
<li>列表内容1</li>
</ol>
说明： type属性的值有：1、a、A、i、I。
1 表示编号从阿拉伯数字1开始依次往后
a 表示小写英文字母 a、b、c、d
A 表示大写英文字母 A、B、C、D
i 表示小写的罗马数字 i、ii、iii、iv
I 表示大写的罗马数字 I、II、III、IV
图片
语法：<img src = "图片路径" />
属性：
- src：图片的路径，URL
- alt：图片的替代文本（图片无法显示时）
- title：鼠标悬停时显示的内容
网页布局思想
- 传统的table标记，发展到DIV+CSS；
- 从左到右，从上到下；
table标记
【1】基本结构：
●<table>...</table>定义表格
●<tr>...</tr>定义表行
●<td>...</td>定义单元格
●<th>...</th>定义标题栏（文字加粗）
【2】属性：
●<table cellpadding = "">，单元格边框与内容之间距离的大小，默认为2，内填充。
●<table cellspacing = "">，设置单元格之间空间的大小（单元格间距），外填充。
【3】列（单元格）<td>的属性：
●<td rowspan = "">，设置行合并的数目（垂直合并）。
●<td colspan = "">,设置列合并的数目（水平合并）。
注：当<td></td>之间没有内容时，默认是不显示边框的，如果想看到，可以加上
表格的标题
<caption>...</caption>
表格的结构化
<table>
<thead>...</thead>，表头区。
<tbody>...</tbody>，表体区。
<tfoot>...</tfoot>，表尾区。
</table>
表格案例
实现下图效果：
<tr>
<th colspan="2">a</th><th rowspan="2">b</th>
</tr>
<tr>
<th rowspan="2">c</th><th>d</th>
</tr>
<tr>
<th colspan="2">e</th>
</tr>
超链接
语法：
<a href = 链接到的地址 target = "打开窗口的形式">显示内容</a>
_self在自身窗口中打开（默认值）
_blank在新窗口中打开
超链接的分类：
- 内部链接：
当前文档与目标文档在同一站点内。<a href = "目标文档路径及文件名"></a> - 外部链接：
当前文档与目标文档不再同一站点内。<a href = URL></a> - 局部链接（锚点）：
跳转到同一网页或其他文档中的指定位置。用法：
创建锚点：<a name = "锚点名称">显示内容</a>
链接锚点：<a href = "#锚点名称">显示内容</a> - 脚本链接：
是一种特殊的链接，当单击设置脚本的文本或图像时，就会执行相应的javascript语句。
<a href = javascript:window.open("www.sina.com.cn")>新浪</a>
关闭窗口：<a href = javascript:window.close()>关闭窗口</a>
打开窗口：<a href = javascript:window.open('文件名')>打开窗口</a>
执行自定义函数<a href="javascript:myF()">弹出一句话</a>
HTML表单
【1】form（表单）标记用于创建一个表单，定义表单的开始与结束。所有表单元素必须在<form></form>标记中才有作用。
【2】语法：
<form action = URL method = GET/POST 默认提交方式为GET >
表单元素
</form>
【3】表单元素标记：
●单行文本框：
<input name = "文本框名称" type = "text" placeholder="提示信息" readonly = "readonly"(设置为只读) />
●密码框：type = "password"
●单选框：
<input name = "单选框名称" type = "radio" value = "提交值" checked = "checked"(被选中) />
注意：单选框的name属性要一样，否则无法单选，即可以使用name属性分组
●复选框：
<input name = "复选框名称" type = "checkbox" value = "提交值" checked = "checked" />
●提交按钮：submit
●重置按钮：<input type = "reset" value = "取消" />，重置按钮会清除表单中的所有数据
●列表框：
下拉菜单式：
<select name = "名称">
<option selected = "selected"(定义初始选择) value = "提交值">列表1</option>
<option value = "提交值">列表2</option>
</select>
列表式：
<select name = "名称" size = "显示的行数" multiple="multiple"(写上代表允许多选)>
<option value = "提交值">列表1</option>
<option value = "提交值">列表2</option>
</select>
注：只要加上size属性并且size大于1，即可实现下拉菜单式到列表式的转换。
●文件浏览框：file
●按钮：<input type = "按钮类型（reset重置表单、submit提交表单、button普通按钮、）" value = "按钮显示内容">
●图形按钮：<input type = "image" src = "图片路径" />
●多行文本框：
<textarea name = "文本框名称" cols = "每行中的字符数" rows = "显示的行数">
初始内容
</textarea>
●隐藏域：<input type = "hidden" value = "提交值" />
【4】input标注<label>...</label>：
<label>标注内容</lable>标签为input元素定义标注。lable元素的for属性应与相关元素的id属性相同。
eg: <input type = "radio" name = "sex" value = "男" id = "man"><label for = "man">男</label>
label标记，可以点击里面的“男”而达到选中单选框的效果，改善用户体验度。
html与xhtml 1.0的区别
- xhtml 标签必须被正确的关闭；
- 标签名必须用小写字母；
- 属性名必须小写，必须有值；
