HTML 总结

一：认识 HTML

1.HTML 简介

HyperText Markup Language 简称为HTML
HyperText:超文本（文本+图片+视频+音频+链接）
Makup Language:标记语言
由SGML（标准通用标记语言）发展而来
写给浏览器的语言

2. 版本及历史
超文本标记语言（第一版）1993年6月（IETF制定）
HTML 2.0——1995年11 月
HTML 3.0——1996年1 月
HTML 4.0——1997年
HTML 5.0——2014年10月29日(W3C和WHATWG合作发布)

注明：

W3C: World Wide Web Consortium (W3C理事会或万维网联盟)
WHATWG (Web超文本应用技术工作组)
3. 关于新的HTML5标准

HTML5的设计目的是为了在移动设备上支持多媒体。
新的语法特征被引进以支持这一点，如video、audio和canvas 标记。
HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括： a,新的解析规则增强了灵活性 b,新属性c,淘汰过时的或冗余的属性

4,一个HTML5文档到另一个文档间的拖放功能
5,离线编辑等等支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；
国内的遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能
力。

6，HTML 的基本结构：

　　　　　　　　　　　　　　　　　　　　　　　　　　　<html>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<head>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<title>我的第一个网页</title>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</head>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　 <body>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　欢迎来到HTML世界
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</body>
　　　　　　　　　　　　　　　　　　　　　　　　　　　</html>

7. HTML标签元素

HTML元素由开始标签和结束标签组成
位于开始标签和结束标签中的文本是元素的内容。
HTML 标签有开始必须有结束。如果是没有内容的标签（空标签），用 />来结束。标签名推荐用小写。标签具有属性，属性用来表示标签的性质和特征。属性要在开始标签中指定

8，定义一个合格的HTML页面

a，html5文档声明
<!DOCTYPE HTML>
说明：位于<html>标签之前，不区分大小写。告知浏览器该文档遵循HTML规范。

b，设置页面标题
<title>...</title>

c,设置页面编码
<meta charset="utf-8"/>

说明：
utf-8 多国语言编码
gb2312 中文简体编码

c，设置页面关键字，内容介绍
<meta name="keywords" content="关键字1，关键字2，..."/>
<meta name="description" content="内容介绍"

二：HTML 常用元素
1，换行符 <br/>

2,段落 <p>这是一个段落</p>

说明：
属性说明
align 行对齐方式(left,right,center）

3，标题
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

4，文本格式化
<b>定义粗体文字</b>
<i>定义斜体文本</i>
<del>定义删除文本</del>
<sup>定义上标字</sup>
<sub>定义下标字</sub>

5，链接
<a href="http//:www.baidu.com" target="_blank">百度一下</a>
<a href="about.html">内部链接</a>

6，瞄点
瞄点标签用于使用户“跳”到文档的某个部分。
<a href="#位置名">...</a>
<a name="位置名">...</a>

7,图像
<img src="url" width="100" height="100" alt="替代文字/">

说明:
src 定义图像的url alt 定义图像的替代文本 width 设置图像的宽度
height 设置图像的高度
8, 图片相对地址的定义
说明：
./ 当前目录
../ 回到上一层目录
images/ 进入一层目录
../images/ 回到上一层目录，然后再进入images目录
9. 图像热区
<img src="URL" usemap="# map 名称" /> <map name="map 名称">
<area shape="形状" coords="坐标值" href="URL" /> </map>

说明：
shape 热区形状(rect、circle、poly ) coords 形状的坐标值
10. audio(音频)
带控制器的音频播放器
语法：
<audio src="song.ogg" controls="controls"></audio>
如果考虑到不同浏览器对视频文件的兼容性
<audio width="320" height="240" controls="controls">
　　<source src="song.ogg" type="audio/ogg">
　　<source src="song.mp3" type="audio/mpeg">
　　<p>Your browser does not support the audio tag.</p>
</audio >
属性说明：

autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。

11. video(视频)
带控制器的视频播放器
语法：
<video src=“movie.mp4” controls="controls"></video>
如果考虑到不同浏览器对视频文件的兼容性
<video width="320" height="240" controls="controls">
　　<source src="movie.ogg" type="video/ogg">
　　<source src="movie.mp4" type="video/mp4">
　　<p>Your browser does not support the video tag.</p>
</video>
属性说明:

autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
height pixels 设置视频播放器的高度。

12. HTML 实体字符
实体字符字符实体

大于号 (>) >
小于号 (<) <
引号 (") "
注册商标(?) ®
版权(? ) ©
& 号 &

13. 无序列表

列表用来在网页上组织信息，HTML能够创建三种类型的列表：无序列表、有序列表和定义列表。
说明：
属性属性值说明
Type disc 用来设置项目前面的标记
Circle
square

代码结构：
　　　　<ul>
　　　　　　<li>……</li>
　　　　　　<li>……</li>
　　　　　　<li>……</li>
　　　　</ul>

14. 有序列表
有序列表使用数字或字母系统来组织列表里包含的信息。有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目。
说明：
属性　　　　　　属性值　　　　　　　　说明
type 　　　　　　1、 a 、 A、i、I 　　　用来设置项目前面的标记
start 　　　　　　数值　　　　　　　　排序的起点数值

代码结构：
　　<ol >

15. 定义列表
定义列表用来组织术语和它们的定义。任何信息如果包含多个术语和相对应的解释，都可以使用定义列表进行组织。

代码结构：
<dl>
<dt>HTML</dt>
<dd>html 是超文本标记语言</dd>

<dt>XHTML</dt>
<dd>可扩展超文本置标语言 </dd>
<dd>表现方式与超文本置标语言（HTML）类似，不过语法上更加严格 </dd>
</dl>

16. HTML 表格

表格由 <table> 标签以及一个或多个 tr、th或td 元素组成。
单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

基本结构：
<table border="1">
<tr>
　　<td>row 1, cell 1</td>
　　<td>row 1, cell 2</td>
</tr>
<tr>
　　<td>row 2, cell 1</td>
　　<td>row 2, cell 2</td>
</tr>
</table>
<table> 定义表格
<th> 定义表头
<tr> 定义表格的行
<td> 定义表格单元

说明：
属性　　　　　值　　　　　　说明
width 　　　　 px、 % 　　　　指定表格的宽度
height 　　　 px、% 　　　　表格的高度
border 　　　 px 　　　　　　指定表格边框的宽度
cellpadding 　 px　　　　　　指定边框与内容之间的空白
cellspacing 　　px、 % 　　　　指定单元格之间的空白
align left、 right 、 center 指定对齐方式
valign top、 middle 、 bottom 垂直排列方式
colspan 　　　　　　　　　　　合并列单元格
rowspan 　　　　　　　　　　　合并行单元格

例：
<table berder="1" wigth="600" height="60" align="center">
　　<tr>
　　　　<td></td><td></td><td></td><td></td><td></td><td></td>
　　</tr>
　　<tr>
　　　　<td></td><td></td><td></td><td></td><td></td><td></td>
　　</tr>
　　<tr>
　　　　<td></td><td></td><td></td><td></td><td></td><td></td>
　　</tr>
　　<tr>
　　　　<td></td><td></td><td></td><td></td><td></td><td></td>
　　</tr>
　　<tr>
　　　　<td></td><td></td><td></td><td></td><td></td><td></td>
　　</tr>
　　<tr>
　　　　<td></td><td></td><td></td><td></td><td></td><td></td>
　　</tr>
　　<tr>
　　　　<td></td><td></td><td></td><td></td><td></td><td></td>
　　</tr>
</table>

17. <iframe> 内嵌框架
说明：
属性属性值说明
width px , % 指定框架的宽度
height px , % 指定框架的高度
scrolling yes,no,auto 是否显示滚动条
frameborder 1, 0 是否显示边框

语法：
<iframe src="URL" name="框架名"> ~ </iframe>

18. form(表单)

表单是一个包含表单元素的区域。
表单能够包含 input 元素，textarea、select、fieldset、legend 和 label 元素。
表单使用标签（<form>）定义。
表单用于向服务器传输数据。

表单的基本结构：
<form name="form1" action="URL" method="get">
用户名：<input type="text" name="uname" />
密码：<input type="password" name="passwd" />
</form>

说明：
属性说明
name 表单的名称
action 表单提交地址
method 表单数据提交的方式（get ,post）
enctype MIME类型
target 打开方式

19. <input>(表单元素：输入框)

说明：
属性　　　　说明
type 　　　　input元素类型
name　　　 input 元素的名称
value　　　　input 元素的值
size　　　 input 元素的宽度
readonly 　　是否只读
maxlength 　输入字符的最大长度
disabled　　是否禁用

文本框

密码框

单选按钮
<input type="radio"name="sex"value="1"checked="checked" />男
<input type="radio"name="sex"value="0"/>女

复选框
<input type="checkbox"name="love"value="music" checked="checked"/> 听音乐
<input type="checkbox"name="love" value="movie"/> 看电影
<input type="checkbox"name="love" value="game"/> 玩游戏按钮
<input type="button" name="btn" value="确定"/>

隐藏域隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。

上传文件

注意：利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

说明：
multiple 控制是否上传多文件

20. textarea(表单元素：多行文本域)

说明：
属性说明
name 元素的名称
rows 指定文本框的高度
cols 指定文本框的宽度

例：
<textarea name="content" rows="5" cols="50"> </textarea>

21. select(表单元素：下拉框

说明：
属性说明
name 下拉列表框的名称
size 下拉列表框的显示行数
multiple 是否多选 disabled 是否禁用
selected 设置默认选中的选项
value 选项的值
例：
<select name="city">
　　<option value="0">请选择</option >
　　<option value="bj">北京</option>
　　<option value="gz">广州</option>
</select>

22,optgroup(表单元素：下拉框分组)
optgroup 元素用于组合选项

说明：
属性说明
label 指定组合选项名称

例：

23. label
lable 标签的作用是将输入项或选项及其标签文字关联起来。

例:
<input type="radio" name="sex" value="1" id="male" />
　　<label for="male">男</label>
<input type="radio" name="sex" value="0" id="female" />
　　<label for="female">女</label>

最后注意事项及建议:
凡是标签都应该闭合！
凡是标签都应该小写！
文件编码跟设置的编码保持一致！
标签属性加引号(英文输入法下的引号) HTML 缩进统一使用tab键