HTML全称
HyperText Mark-up Language：超文本标记语言.
本篇基于HTML4，后续会推出HTML5的说明.
HTML文档由四部分组成
- 文档声明:
<!DOCTYPE HTML> - html标签对:
<html></html> - head标签对:
<head></head> - body标签对:
<body></body>
HTML编写规范
- html程序以
<html>开头，同时以</html>结束. -
<html>中包含两个部分：
-
<head><title>标题信息</title>设置html相关的信息</head> -
<body>页面上显示的内容</body>
- html的标签不区分大小写.
- html的标签有开始标签，也要有结束标签：
<title></title>. - 如果想对html中的数据进行样式变化，使用标签封装数据，通过修改标签的属性和属性值实现标签内数据样式的变化[一个标签相当于容器，修改容器的属性值可以实现容器内数据样式的变化]—html的操作思想.
- 个别标签没有结束标签，在标签内结束：
<br/> <hr/>.
HTML常用标签
1.文字标签：<font></font>
- color：字体颜色
- 英文单词：red black green orange white yellow gray.
- 十六进制：#fff RGB 使用工具.
- size：字体大小
- 使用1-7表示大小范围(超过7按7显示).
2.注释标签
- java有三种：单行
//...、多行/*...*/、文档/**...*/ - html、xml一种
<!-- ... --> - css一种：多行
/% ... %/ - js两种：单行、多行
3.水平线标签：<hr/>
- color：颜色
- size：粗细(1-7表范围)
4.特殊字符：
- <：
< - >：
> - &：
& - 空格：
5.标题标签：<h1><h1/>...<h6><h6/> <caption></caption>
- 自动换行：从1-6字体大小递减
6.列表标签
- 层级列表
<dl--列表范围>
<dt--上层内容>
<dd--下层内容><dd/>
<dt/>
<dl/>
- 有序列表
<ol type="1/a/i"--排序显示方式>
<li><li/>
<ol/>
- 无序列表
<ul type="circle/square/disc"--排序显示方式>
<li><li/>
<ul/>
7.图像标签：<img src="img src">
- wigth：图片高度
- height：图片宽度
- alt：图片存在，鼠标悬停显示文字；图片不存在，图片位置上显示文字
8.两种路径
- 绝对路径：图片的完全路径
- 相对路径
- 如果图片和html文件在一个目录下，可以直接写
picture.jpg - 如果图片在html文件所在目录的下层目录，
aa/picture.jpg - 如果图片在html文件所在目录的上层目录，
../picture.jpg - 如果图片在html文件所在目录的上层目录的上层目录，
../../picture.jpg
9.超链接标签
- funcA：链接资源
<a href="" target="_self/_blank/_parent/_top"--打开方式><a/>
- funcB：定位资源
- 定义位置：
<a name="locationName"><a/> - 回到位置：
<a href="#locationName"><a/>
10.表格标签
<table>
<tr/th(居中加粗)--行 align="left/center/right"--位置>
<td--格 align="left/center/right"></td>
</tr/th>
</table>
- border：表格线(1-7)
- bordercolor
- borderspacing：单元格间距
- borderpadding：数据与单元格间距
- width：表格宽度
- height：表格高度
合并单元格思想：首先确定行数及每行内单元格数
– rowspan：跨行
– colspan：跨列
11.其他标签：b u i p(段落) s pre sub(下标) sup(上标) div span(行内元素)
12.头标签
- title：定义文档的标题
- base：定义默认超链接地址
<base href="" target="_blank"></base> - meta：定义HTML文档中的元数据
<meta name="keywords" content="catface, wyh"> - link：引入外部资源文件(如css文件)
- style：定义HTML文档的样式
- script：加载客户端的脚本文件
13.框架标签：不能有body
- frameset：页面划分方式
- rows：上下划分
- cols：左右划分
- frame：具体封装的页面
★表单标签
要求一：每个输入项必须有name属性
要求二：单选框、复选框、下拉框必须有value属性
-
<form>表单范围</form>
- action：设置提交到哪个页面
- enctype：当需上传文件，属性值改为：
multipart/form-data - method：设置表单提交方式：get(默认)、post(提交的数据放到请求体中)
get请求 | post请求 |
地址栏会携带数据 | 地址栏不携带数据 |
安全性很低 | 安全性较高 |
请求数据的大小有限制 | 请求数据的大小无限制 |
- 普通输入项：
<input type="text"/> - 密码输入项：
<input type="password"/> - 单选输入项：
<input type="radio" name=""--必须相同 checked--默认选中/> - 复选输入项：
<input type="checkbox"/ name=""--必须相同> - 文件上传项：
<input type="file"/> - 提交按钮：
<input type="submit"/> - 提交操作使用图片：
<input type="image" src="img src"/> - 重置按钮：
<input type="reset" value=""/> - 隐藏项：
<input type="hidden" name="hidden" value=""/> - 文本域：
<textarea rows=""--行数 cols=""--列数></textarea> - 下拉选择框：不使用input便签，使用select标签
<select>
<option></option>
</select>
HTML标记概览
标记 | 类型 | 译名或意义 | 作用 | 备注 |
文件标记 | ||||
| ● | 文件声明 | 让浏览器知道这是 HTML 文件 | |
| ● | 开头 | 提供文件整体资讯 | |
| ● | 标题 | 定义文件标题，将显示于浏览顶端 | |
| ● | 本文 | 设计文件格式及内文所在 | |
排版标记 | ||||
| ○ | 说明标记 | 为文件加上说明，但不被显示 | |
| ○ | 段落标记 | 为字、画、表格等之间留一空白行 | |
| ○ | 换行标记 | 令字、画、表格等显示于下一行 | |
| ○ | 水平线 | 插入一条水平线 | |
| ● | 居中 | 令字、画、表格等显示于中间 | 反对 |
| ● | 预设格式 | 令文件按照原始码的排列方式显示 | |
| ● | 区隔标记 | 设定字、画、表格等的摆放位置 | |
| ● | 不折行 | 令文字不因太长而绕行 | |
| ● | 建议折行 | 预设折行部位 | |
字体标记 | ||||
| ● | 加重语气 | 产生字体加粗 Bold 的效果 | |
| ● | 粗体标记 | 产生字体加粗的效果 | |
| ● | 强调标记 | 字体出现斜体效果 | |
| ● | 斜体标记 | 字体出现斜体效果 | |
| ● | 打字字体 | Courier字体，字母宽度相同 | |
| ● | 加上底线 | 加上底线 | 反对 |
| ● | 一级标题标记 | 变粗变大加宽，程度与级数反比 | |
| ● | 二级标题标记 | 将字体变粗变大加宽 | |
| ● | 三级标题标记 | 将字体变粗变大加宽 | |
| ● | 四级标题标记 | 将字体变粗变大加宽 | |
| ● | 五级标题标记 | 将字体变粗变大加宽 | |
| ● | 六级标题标记 | 将字体变粗变大加宽 | |
| ● | 字形标记 | 设定字形、大小、颜色 | 反对 |
| ○ | 基准字形标记 | 设定所有字形、大小、颜色 | 反对 |
| ● | 字体加大 | 令字体稍为加大 | |
| ● | 字体缩细 | 令字体稍为缩细 | |
| ● | 画线删除 | 为字体加一删除线 | 反对 |
| ● | 程式码 | 字体稍为加宽如 | |
| ● | 键盘字 | 字体稍为加宽，单一空白 | |
| ● | 范例 | 字体稍为加宽如 | |
| ● | 变数 | 斜体效果 | |
| ● | 传记引述 | 斜体效果 | |
| ● | 引述文字区块 | 缩排字体 | |
| ● | 述语定义 | 斜体效果 | |
| ● | 地址标记 | 斜体效果 | |
| ● | 下标字 | 指数 | |
| ● | 下标字 | 下标字 | |
清单标记 | ||||
| ● | 顺序清单 | 清单项目将以数字、字母顺序排列 | |
| ● | 无序清单 | 清单项目将以圆点排列 | |
| ○ | 清单项目 | 每一标记标示一项清单项目 | |
| ● | 选单清单 | 清单项目将以圆点排列，如 | 反对 |
| ● | 目录清单 | 清单项目将以圆点排列，如 | 反对 |
| ● | 定义清单 | 清单分两层出现 | |
| ○ | 定义条目 | 标示该项定义的标题 | |
| ○ | 定义内容 | 标示定义内容 | |
表格标记 | ||||
| ● | 表格标记 | 设定该表格的各项参数 | |
| ● | 表格标题 | 做成一打通列以填入表格标题 | |
| ● | 表格列 | 设定该表格的列 | |
| ● | 表格栏 | 设定该表格的栏 | |
| ● | 表格标头 | 相等于 | |
表单标记 | ||||
| ● | 表单标记 | 决定单一表单的运作模式 | |
| ● | 文字区块 | 提供文字方盒以输入较大量文字 | |
| ○ | 输入标记 | 决定输入形式 | |
| ● | 选择标记 | 建立 pop-up 卷动清单 | |
| ○ | 选项 | 每一标记标示一个选项 | |
图形标记 | ||||
| ○ | 图形标记 | 用以插入图形及设定图形属性 | |
连结标记 | ||||
| ● | 连结标记 | 加入连结 | |
| ○ | 基准标记 | 可将相对 URL 转绝对及指定连结目标 | |
框架标记 | ||||
| ● | 框架设定 | 设定框架 | |
| ○ | 框窗设定 | 设定框窗 | |
| ○ | 页内框架 | 于网页中间插入框架 | IE |
| ● | 不支援框架 | 设定当浏览器不支援框架时的提示 | |
影像地图 | ||||
| ● | 影像地图名称 | 设定影像地图名称 | |
| ○ | 连结区域 | 设定各连结区域 | |
多媒体 | ||||
| ○ | 背景声音 | 于背景播放声音或音乐 | IE |
| ○ | 多媒体 | 加入声音、音乐或影像 | |
其他标记 | ||||
| ● | 走动文字 | 令文字左右走动 | IE |
| ● | 闪烁文字 | 闪烁文字 | NC |
| ○ | 页内寻找器 | 可输入关键字寻找于该一页 | 反对 |
| ○ | 开头定义 | 让浏览器知道这是 HTML 文件 | |
| ○ | 关系定义 | 定义该文件与其他 URL 的关系 | |
StyleSheet | ||||
| ● | 样式表 | 控制网页版面 | |
| ● | 自订标记 | 独立使用或与样式表同用 |
注：
- ● 表示该标记属围堵标记，即需要关闭标记如
</标记>. - ○ 表示该标记属空标记，即不需要关闭标记.
- IE 表示该标记只适用于 Internet Explorer.
- NC 表示该标记只适用于 Netscape Communicator.
- 反对 表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支 持，只是 HTML 标准中有其它同功能或更好的选择.
- 弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特 性，不用担心新浏览器不支援旧标记.
- 新 表示该标记是 HTML 4.0 中新增的.
