HTML5学习内容总结
HTML5学习总结：
一、结构说明：
HTML5文档声明（不区分大小写）：<!DOCTYPE HTML>
<title>这里是标题</title>
中文网页声明，否则会出现乱码：<meta charset=”utf-8”>
二、常用元素：
1．换行符：</br>
是一个空标签，只起到将接下来的内容换下一行显示。
2.段落：<p>
如：<p align=””>这是一个段落</p>
属性align的值有左对齐left、右对齐right、居中center。
3.标题：<hx>
如：<h1>标题一</h1>
X的值为1~6，标题大小依次减小。
4.文本格式化：
<b>定义粗体文本</b>
效果：定义粗体文本
<i> 定义斜体文本 </i>
效果：定义斜体文本
<del>定义删除文本</del>
效果为：定义删除文本
<sup>定义上标字</sup>
如显示X2+Y2=Z：X<sup>2</sup>+Y<sup>2</sup>=Z
<sub>定义下标字</sub>
如显示H2O: H<sup>2</sup>O
5.超链接:<a>
结构：<a href=“URL”> ~ </a>
说明：
href 定义链接地址
title 链接提示信息
target 链接打开方式(_blank 新的空白页,_self 当前页,_top)
常规应用：
<a href=“http://www.163.com” title="点击进入外部链接" target="_blank">外部链接</a>
<a href=“about.html”>内部链接 </a>
其他应用：
<a href=“mailto:邮箱地址”>邮件链接</a>
<a href=“tel:电话号码”>一键拨打</a>
<a href="sms:139xxxxxxx">一键发送短信</a>
6.锚点：
<a href="#位置名"> 跳到第四段</a>
<a name="位置名"> 第四段</a>
7图像：<img>
结构：<img src="URL" width="100" height="100" alt="替代文字" />
说明：
src 定义图像的url
alt 定义图像的替代文本
width 设置图像的宽度
height 设置图像的高度
注意：最好只设定宽度或高度，因为设置了其中的一个属性，图片就会等比例缩放，这样图片才不会被压缩。
8. 图片相对地址的定义
|
情形 |
html文件位置 |
图片位置 |
写法 |
|
|
|
同一个目录 |
F:/html/01.html |
F:/html/01.jpg |
<img src="01.jpg" /> <img src="./01.jpg" /> |
|
|
|
下一层目录 |
F:/html/01.html |
F:/html/images/01.jpg |
<img src="images/01.jpg"/> |
|
|
|
上一层目录 |
F:/html/01.html |
F:/01.jpg |
<img src="../01.jpg"/> |
|
|
|
同一层不同目录 |
F:/html/01.html |
F:/images/01.jpg |
<img src="../images/01.jpg"/> |
|
|
说明：
./ 当前目录
../ 回到上一层目录
images/ 进入一层目录
../images/ 回到上一层目录，然后再进入images目录
9．图像热区：
<img src="URL" usemap="# map 名称" />
<map name="map 名称">
<area shape="形状" coords="坐标值" href="URL" />
</map>
说明：
shape 热区形状(rect、circle、poly )
coords 形状的坐标值
写法：
Rect:矩形 左上角坐标与右下角坐标（x1，y1，x2，y2）
Circle:圆形 圆心坐标，半径 （x，y ，r）
Poly:多边形 多个点的坐标 （x1，y1，x2，y2，x3，y3。。。）
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. 无序列表<ul>
结构:
<ul>
<li>无序列表一</li>
<li>无序列表二</li>
<li>无序列表三</li>
</ul>
14. 有序列表 <ol>
结构：
<ol >
<li>有序列表一</li>
<li>有序列表二</li>
<li>有序列表三</li>
</ol>
15. 定义列表
结构：
<dl>
<dt>HTML</dt>
<dd>html 是超文本标记语言</dd>
<dt>XHTML</dt>
<dd>可扩展超文本置标语言 </dd>
<dd>表现方式与超文本置标语言（HTML）类似，不过语法上更加严格 </dd>
</dl>
16. HTML 表格
结构：
<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>
说明：
属性 值 说明
width px、 % 指定表格的宽度
height px、% 表格的高度
border px 指定表格边框的宽度
cellpadding px 指定边框与内容之间的空白
cellspacing px、 % 指定单元格之间的空白
align left、 right 、 center 指定对齐方式
valign top、 middle 、 bottom 垂直排列方式
colspan 合并列单元格
rowspan 合并行单元格
17. <iframe> 内嵌框架
<iframe src="htttp://www.baidu.com" name="frrame1" width=”500px” height=”400px” scrolling=”auto” frameboder=”1”>百度</iframe>
说明：
属性 属性值 说明
width px , % 指定框架的宽度
height px , % 指定框架的高度
scrolling yes,no,auto 是否显示滚动条
frameborder 1, 0 是否显示边框
18. 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="text" name="username" value="" />
密码框：
<input type="password"name="passwd"/>
单选按钮：
<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="确定"/>
<input type="submit" name="comit" value="提交"/>
<input type="reset" name="reset" value="重写"/>
<input type="image"name="img_btn" src="btn.gif"/>
隐藏域：
隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。
<input type="hidden" name="uid" value="10"/>
上传文件：
<input type=“file” name=“photo”/>
注意：
利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。
说明：
multiple 控制是否上传多文件
20.HTML5的表单所有type类型
|
button |
定义可点击的按钮（大多与 JavaScript 使用来启动脚本） |
|
checkbox |
定义复选框。 |
|
color |
定义拾色器。 |
|
date |
定义日期字段（带有 calendar 控件） |
|
datetime |
定义日期字段（带有 calendar 和 time 控件） |
|
datetime-local |
定义日期字段（带有 calendar 和 time 控件） |
|
month |
定义日期字段的月（带有 calendar 控件） |
|
week |
定义日期字段的周（带有 calendar 控件） |
|
time |
定义日期字段的时、分、秒（带有 time 控件） |
|
|
定义用于 e-mail 地址的文本字段 |
|
file |
定义输入字段和 "浏览..." 按钮，供文件上传 |
|
hidden |
定义隐藏输入字段 |
|
image |
定义图像作为提交按钮 |
|
number |
定义带有 spinner 控件的数字字段 |
|
password |
定义密码字段。字段中的字符会被遮蔽。 |
|
radio |
定义单选按钮。 |
|
range |
定义带有 slider 控件的数字字段。 |
|
reset |
定义重置按钮。重置按钮会将所有表单字段重置为初始值。 |
|
search |
定义用于搜索的文本字段。 |
|
submit |
定义提交按钮。提交按钮向服务器发送数据。 |
|
tel |
定义用于电话号码的文本字段。 |
|
text |
默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。 |
|
url |
定义用于 URL 的文本字段。 |
21. HTML5的表单新属性(扩展)
新的 form 属性：
autocomplete
novalidate
新的 input 属性：
Autocomplete：即搜索的得内容，下次打入前面相关的关键字时会自动索引。
- <form>
- <input type="search" name="keywords" autofocus="autofocus" autocomplete="on" />
- <input type="submit" value="搜索"/>
- </form>
autofocus:进入网页时自动焦点。
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)：正则表达式，如：Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />
placeholder：提示作用，如：<input type="text" name="username" placeholder="请输入你的用户名..." />
required：必填项，如：<input type="text" name="username" required/>
22. select(表单元素：下拉框)
说明：
属性 说明
name 下拉列表框的名称
size 下拉列表框的显示行数
multiple 是否多选
disabled 是否禁用
selected 设置默认选中的选项
value 选项的值
例：
<select name="city">
<option value="0">请选择</option
<option value="bj">北京</option>
<option value="gz">广州</option>
</select>
23. optgroup(表单元素：下拉框分组)
optgroup 元素用于组合选项
说明：
属性 说明
label 指定组合选项名称
例： <select name="city" multiple>
<optgroup label="广东">
<option value="1">广州</option>
<option value="2">深圳</option>
</optgroup>
<optgroup label="其他">
<option value="3">长沙</option>
<option value="4">香港</option>
</optgroup>
</select>
24. 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>
