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 htmlPUBLIC "-//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 htmlPUBLIC "-//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 htmlPUBLIC "-//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>