HMLT学习笔记
1. HTML说明
1.1 文档声明
用于告诉浏览器文档版本。1.引入样式，2.自身样式，3.使用框架（html与xhtml同样）
<!-- 引入CSS的文档 -->
<!-- HTML文档 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML文档 -->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- 自身样式的HTML文档 -->
<!-- HTML文档 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<!-- XHTML文档 -->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 使用框架的HTML文档 -->
<!-- HTML文档 -->
<!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 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!-- XHTML5文档 -->
<!DOCTYPE html>
<html>
</html>1.2 XTHML差异
1.XHTML必须有根标签。2.XHTML标签必须小写。3. XHTML必须有正确结束。4. XHTML必须正确嵌套。5. XHTML属性必须有双引号。6.XHTML属性不能简写(readonly,selected,checked...)
<!-- 1.XHTML 必须有根标签 -->
<html>
<body>
<!-- 2.XHTML 必须小写 -->
<DIV></DIV> <!-- HTML -->
<div></div> <!-- XHTML -->
<!-- 3.XHTML 必须正确结束 -->
<DIV> <br> <!-- HTML -->
<div></div> <br /> <!-- XHTML -->
<!-- 4.XHTML 必须正确嵌套 -->
<div><b> </div> </b> <!-- HTML -->
<div> <b></b> </div> <!-- XHTML -->
<!-- 5.XHTML 属性必须加双引号 -->
<div width=100px ></div> <!-- HTML -->
<div width="100px"></div> <!-- XHTML -->
<!-- 6.XHTML 属性不能简写 -->
<input type="text" readonly> <!-- HTML-->
<input type="text" readonly="readonly"> <!-- XHTML-->
</body>
</html>1.3 头部信息（head）
1. base 页面默认链接。2.title 页面标题。3. link 外部资源。4. style 文档样式。5. script 脚本。6. meta 元数据（1.keywords关键词 2.description描述 3. author作者 4.charset 字符集 5. http-equiv=content-type content=text/html;charst=utf-8）。
<head>
<base href="http://www.xxx.com/xxx/" target="_blank">
<!-- _self 当前窗口 -->
<!-- _blank 新窗口打开 -->
<!-- _parent 父级iframe窗口 -->
<!-- _top 最外层iframe窗口 -->
<title>页面标题</title>
<!-- 引用外部文件 -->
<link rel="stylesheet" type="text/css" href="../xx/xx.css" />
<!-- 内部样式 -->
<style type="text/css">
</style>
<!-- 指定src 属性中间不能写内容-->
<script src="/xx.js" ></script>
<!-- html4.0 type属性必须, html5type属性可选-->
<script type="text/javascript">
</script>
<!-- 搜索关键词 -->
<meta name="keywords" content="HTML学习, HTML笔记">
<!-- 网页描述 -->
<meta name="description" content="这是学习笔记">
<!-- 作者 -->
<meta name="author" content="ZJR">
<!-- 网页字符集, 告知浏览器当前文本编码格式 -->
<!-- 浏览器一定按照当前编码格式读取文档 -->
<!-- 必须与保存时编码一致，否则会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
2. 常用标签
1.标题 h1~h6
2.换行 br
3.水平线 hr
4.布局 div 独占一行
5.跨距 span
6.段落 p 独占一行
3. 文本格式化
1.加粗： b, strong
2.下划线：u, ins
3.倾斜： i, em
4.删除线：s, del
5.下标： sub
6.上标： sup
4. 列表
无序列表： <ul> <li></li>... </ul> 显示黑点
有序列表： <ol> <li></li>... </ol> 显示编号
自定义列表：<dl> <dt></dt><dd></dd><dd></dd>... </dl>
5. 表格（table）
1.属性：1.align(left center rigth) 对齐方式。2.border('','1') 边框。3.width 宽。4.heigth 高。 5.cellpadding 内边距。6.cellspacing 单元格间距。HTML5不支持属性。
2.头部：<thead> </thead>
3.内容部：<tbody> </tbody>
4.行：<tr> </tr>
5.表格头：<tr> <th></th><th></th> </tr>
6.单元格：<tr> <td></td><td></td> </tr> 合并行rowspan 合并列colspan
<table align="left" border="" width="100px" height="20%"
cellpadding="5px" cellspacing="2px">
<!-- align 内容对齐方式 left right center html5不支持-->
<!-- border 边框 ""无 "1"有 -->
<!-- width,height 像素或百分比 html5不支持 -->
<!-- cellpadding 内容距离边框距离 html5不支持 -->
<!-- cellspacing 单元格之间距离 html5不支持 -->
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2"></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>6. 图片 超链接 音频 视频
1. 图片 img
属性：1 src路径 2.alt 显示异常文字 3.title 鼠标指示名 4. width 5.height 6.border
<img src="./xx.jpg" alt="找不到图片" title="xx图"
width="200px" height="300px" border="1" />
<!-- 宽，高 设定一个等比缩放，设定2个 图像拉抻 -->
<!-- src绝对路径 -->
<!-- 1. http://x.com/xx/xx.jpg -->
<!-- 2. C:\\xx\xx.jpg -->
<!-- src相对路径-->
<!-- html同级文件（同级） "xx.jpg" "./xx.jpg"-->
<!-- html同级文件夹下文件（子级） "xx/xx.jpg" "./xx/xx.jpg" -->
<!-- html父级文件夹下文件（父级） "../xx.jpg" -->
<!-- 项目根目录文件不含项目名 "/xx.jpg" -->2. 超链接 a
1. href 目标链接地址 2.target打开方式 3.download 下载的文件名
<a href="../xx.html" target="_self" >超链接文本</a>
<a href="/xxx.jpg" download="yyy.jpg">下载图片</a>
<!-- href -->
<!-- 外部链接 http:\\xx.com\xx.html -->
<!-- 内部链接 ../xx/xx.html -->
<!-- 文件下载 ../xx.jpg/ xx.zip 指定文件会进行下载 download指定下载后文件名 -->
<!-- target -->
<!-- _self 默认 -->
<!-- _blank 新窗口打开 -->
<!-- _parent 父窗口(iframe)打开 -->
<!-- _top 根窗口(iframe)打开 -->
<a href="#元素id" >锚点链接，定位到指定Id的元素</a>3. 音频 audio（HTML5元素）
<!-- HTML5 元素 -->
<audio src="./xx.mp3" contros loop></audio>
<!-- contros 显示播放控件 -->
<!-- loop 循环播放 -->4. 视频 video（HTML5元素）
<!-- HTML5 元素 -->
<video src="./xx.mp4" contros loop></video>
<!-- contros 显示播放控件 -->
<!-- loop 循环播放 -->7. 表单 form
1. 属性
1.name 2.action 3.method 4.encType="multipart/form-data"
<form name="form1" action="xx.do" method="post" encType="multipart/form-data">
</form>
<!-- name : 表单名称 -->
<!-- action: 表单提交请求 get post -->
<!-- method: 表单提交方式-->
<!-- encType: 必须post, 文件上传类型-->2. 表单元素 input
1.text。2.password。3.hidden 隐藏。4.radio 单选。5.checkbox 复选。6.reset 重置。7.submit 提交。8.button 按钮。9.file 文件。
<form>
<input type="text" name="输入框" value="默认值或输入值" />
<input type="password" name="密码框" value="密码显示为点" />
<input type="hidden" name="隐藏" value="页面不显示数据" />
<input type="radio" name="单选框组" value="1" checked />
<input type="radio" name="单选框组" value="2" />
<!-- 一组单选框指定相同名称，同时只能选中1个。通过名称获取选中的值，可指定默认选中 -->
<input type="checkbox" name="复选框组" value="1" checked />
<input type="checkbox" name="复选框组" value="2" checked />
<!-- 一组复选框指定相同名称，同时可选多个。通过名称获取选中的值素组，可指定多个默认选中 -->
<input type="reset" value="按钮名(默认重置)重置页面表单数据" />
<input type="submit" value="按钮名(默认提交)提交表单数据" />
<input type="button" value="按钮名,常用表单事件处理" />
<input type="file" />
<!-- 用于选择文件做上传 -->
<!-- 表单元素共用属性 id disabled readonly -->
</form>3. 下拉列表
1. 父标签 select
multiple 可多选（ctrl+左键）
size 同时显示列表数量（非多选默认1）
disabled 不可用（没有readonly属性）
2. 子标签 option
selected 默认选中（非多选只能设定一个，设定多个会选中最后1个）
<select multiple size="3">
<option>1</option>
<option selected>2</option>
<option selected>3</option>
</select>4. 文本框 textarea
1. rows 行数 2.cols 每行字符数 3.id 4.name, 5. readonly 只读 6.disabled 不可用
<textarea rows="2" cols="20" >内容，标签内多个空格正确显示</textarea>5. 标注标签 label
不属于form表单，经常与表单元素同时使用
<input type="text" id="id1" />
<label for="id1">文本信息</label>
<!-- 入力框会获取光标。单选会选中（选中不会取消）。多选会选择（选中的会取消）-->6. 按钮 button
内部可放文本图片
type属性：1. reset 2.submit 3.button
表单外默认button, 表单内默认submit
8. 框架
1.iframe（嵌入另一个文档）
<iframe src="./subhtml.html" width="20px" height="30px"></iframe>
<iframe src="./subhtml.html" width="20%" height="30%" frameborder="0"></iframe>
<!-- frameborder="0" 移除边框 -->2. frameset（HTML5不支持）
代替body不能出现在body里
frameset属性：rows 行百分比, cols 列百分比，
frame属性：src 文件地址，noresize="true" 不允许改大小，scrolling="no" 不显示滚动条
<html>
<head>
<title>学习</title>
</head>
<frameset rows="120,*" name="first">
<frame src="上标题.html" name="me" noresize="true" scrolling="no"/>
<frameset rows="*" cols="19%,*">
<frame src="左菜单.html" name="nhead" />
<frame src="右主体.html" name="nhand" />
</frameset>
</frameset>
</html>9. 事件
窗口事件：onload 页面加载完
表单事件：onblur 失去焦点，onfocus 获取焦点，onchange 元素值变更， onsubmit 提交表单
键盘事件：onkeydown 按下按键，onkeyup 释放按键，onkeypress 敲击按键
鼠标事件：
onclick 单击，ondblclick 双击，
onmousedown 按下，onmouseup 释放，
moursemove(移动)，
mouseover(移入)，mouseout(移出)，
mouseenter(移入HTML5无冒泡)，mouseleave(移出HTML5无冒泡),