快速上手系列：HTML
一 HTML 基本元素
基本结构
<html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312” /> <title>这是标题</title> </head> <body> HTML 文档正文内容 </body> </html>
1、头部元素 head
作用范围整篇文档。包含以下元素：
1 标题: <title>...</title>
2 基本设置: <base href=”http://www.baidu.com” target=”_blank”/> 用来定义相对路径的根目录
3 元信息:
<meta http-equiv=”Content-Type” content=”text/html; charset=文字编码” > <meta name=”keywords” content=”关键字 1,关键字 2”> <meta name=”description” content=”简介”> <meta name=”Copyright” content=”版权”> <meta name=”author” content=”作者”>
4 样式 style ：例：
<style type=”text/css”> #div table tr td{ text-align:center;（把所有表格内数据居中了） } </style>
5 链接 link：调用其它文档内容
6 脚本 script : 也能放在<body>内
2、主体元素 body
<body bgcolor=” 背 景 色 ” background=” 背 景 图 ” text=” 文 字 颜 色 ” link=”blue” alink=”red” vlink=”red”（三种链接颜色） leftmargin=”” topmargin=”” （页面与浏览器之间距离）>...</body>
3、内容
1 注释 ： <!-- ...-->
2 标题 ： <h1>...</h1> 从 1 到 6，由大到小。
3 字体 ： <font face=”字体” size=”字号” color=”颜色”>...</font>
4 格式化：
<strong>加强 <b>加粗 <i> <em> <cite> 斜体 <sup> 上标 <sub> 下标 <big> 加大 <small> 缩小 <u> 下划线
5 段落： <p>段落 <br>换行
6 图像：格式包括 PNG,GIF,JPEG
<img src=”图像文件的路径” alt=”加载失败” title=”鼠标悬停显示文本” width=”图像的宽度” height=”图像的高度” border=”图像边框的宽度”
align=”水平对齐方式” hspace=”水平边距”>
7 超链接：可设置任意文字或任意位置的图片
① 普通超链接
<a href=”绝对路径或相对路径” target=”目标窗口的打开方式（一般用_blank 或_self）” accesskey=”键盘上的键值（同时按 ALT 和定义的热键激活，按 ENTER 打开）” tabindex=”激活顺序数字值（数字小的优先，没有值得排最后）” >...</a>
② 页面中的超链接：
同页跳转<a href=”#锚点的名称”>...</a> 需要和<p id=”锚点的名称”>...</p> 配合使用；
跨页跳转<a href=”路径.html#锚点的名称”>...其他一样。
③ 图像中的超链接
(1)图像整体：<a href=”链接路径”><img src=”图片路径” alt=”图片说明”>...</a>
(2)图像局部：
<img src=”图片路径” usermap=”#map 中定义的 name 或 id”> <map name=”名称” id=”标记”> <area sharp=”形状” coords=”区域坐标组” href=”链接路径” alt=”文本说明” target=”链接目标窗口”/> </map>
附：
sharp 取值
circle 圆，对应 coords 值 x,y,r
coly 多边形
rect 矩形
x1,y1,x2,y2,...每个顶点坐标
x1,y1,x2,y2 左上角、右下角坐标
二 HTML 表格
基本结构
<table> <tr> <td>单元格内容</td> </tr> </table>
1、表格构成
1 定义表格：<table>...</table>
2 行：<tr>...</tr>
3 单元格：<td>...</td>
4 标题：<caption>...</caption> 指定唯一标题。在<table>下<tr>上。
5 头部：<th>...</th> 定义表头。一般在第一行第一列，在<tr>替代<td>。
6 定义表首：<thead >...</thead> 在<table>里唯一。包住<th>。
7 定义表尾：<tfoot>...</tfoot> 类似 Word 中的页脚。
8 表体：<tbody>...</tbody> 将表格内容分割成各个独立部分，在每个独立的部分定义特定的表现效果。
2、表格属性
< table width=”表格宽” height=”表格高” align=”对齐方式” bgcolor=”背景色” background=”背景图片路径” border=”表格边框值” bordercolor=”边框颜色” bordercolorlight=”边框亮边线（影响左、顶的边线）” bordercolordark=”边框暗边线（影响右、底的边线）” cellspacing=”每个单元格之间的间距值”
cellpadding=”各个单元格与其中的内容之间的间距值” frame=”具体显示哪条表格外边框（和border 一起使用，常用取值：box 显示所有、void 不显示边框）” rules=”单元格之间的边框显示方式（和 border 一起使用，常用取值：all 显示所有、none 不显示边框）”
3、行属性
<tr height=”” align=”” valign=”” bgcolor=”” bordercolor=”” bordercolorlight=”” bprdercolordark=””>...</tr>
4、格属性
<td width=”” height=”” align=”” valign=”” bgcolor=”” background=”” bordercolor=”” bordercolorlight=”” rowspan=”合并行” >...</td>
注意：小单位的属性能覆盖大单位的
bordercolordark=””
colspan=” 合 并 列 ”
三 HTML 表单
基本结构
<form>表单控件和其他常规元素</form>
1、表单属性
<form action=”处理表单的程序的路径” method=”向服务器发送数据的方式（包括 post 和 get 两种）” name=”标记某个表单，方便程序处理（id 也能替代）”
enctype=”对发送前的数据编码” target=”目标窗口打开方式”>...</form>
注意：name 相当于名字，id 相当于身份证号。id 是后来出现的，具有唯一性。
2、控件
1 文本框：
<input name=”控件名称” type=”text” value=”默认取值” size=”控件长度” maxlength=”最大字符数”/>
2 密码：
<input name=”控件名称” type=”password” value=”默认取值” size=”控件长度” maxlength=”最大字符数”/>
3 单选：
<input name=”控件名称” type=”radio” value=”默认取值” checked（设置该属性时，单选按钮以选中状态显示）/>
4 复选：
<input name=”控件名称” type=”checkbox” value=”默认取值” checked（同上）/>
5 提交：
<input name=”控件名称” type=”submit” value=”按钮的字”/>
6 重置：
<input name=”控件名称” type=”reset” value=”按钮的字”/>
7 图像：
<input name=”控件名称” type=”image” src=”图像路径”/>
8 隐藏域：
<input name=”控件名称” type=”hidden” value=”隐藏域的取值”/>
9 文 件 ：
<input name=” 控 件 名 称 ” type=”file” size=” 控 件 长 度 ” maxlength=”最大字符数” />
（要上传，表单的 enctype 属性必须为 multipart/form-data）
3、文本
<textarea name=”名称” cols=”列数” rows=”行数”></textarea>
4、选择
<select name=”下拉菜单名称” size=”下拉出的文本行数目” multiple（多选）> <option value=”选项值” selected（同 checked）>选择列表内容</option> </select>
四 HTML 框架
1、使用<frameset>框架实现多窗口页面
它写在<body>外面。
步骤：
1 如下写好框架
实例：
<frameset cols=”25%,50%” border=”5”> <frame src=”….html” name=””> …… </frameset>
注意：cols 和 rows 与<table>里的同理，它们不能同时出现在一条标签里。但 这个是分割，<table>里的是合并。
2 给需要实现跳转的页面设置 name。
3 在导航页里，设置链接：
<a href=” 目 的 地 页 面 ” target=” 要 实 现 跳 转 的 页 面 的name”>...</a>
2、使用<iframe/>内嵌复用页面
它写在<body>里面。
格式：
<iframe src=” 引 用 页 面 的 地 址 ” width=”” height=”” name=”” frameborder=”边框（可有可无）” scrolling=”滚动条（no 的话页面会被截断）”/>
五 课堂笔记
1 常用的 4 种块状结构：
div-ul(ol)-li 用于分类导航和菜单
div-dl-dt-dd 用于图文混编
table-tr-td 用于图文布局或显示数据
form-table-tr-td 用于布局表单
2 w3c 的基本规范：
内容（结构）和表现（样式）分离；
HTML 内容结构要求语义化。
3 HTML 基本规范：
标签名和属性名闭合；
属性值用引号括起来；
标签正确嵌套；
