HTML（三）
回顾
- 六级标题
- <h1></h1>一级标题 权重最高
- <h2>：二级标题
- …
- <h6>：六级标题
- 列表
- 有序列表：<ol> 每一项是li
- 默认是以数字为顺序，通过type属性来更改标号的类型（字母，罗马数字）
- 通过start属性设置从第几个数字（字母）开始
- 无序列表：<ul> 每一项是li
- 自定义列表：<dl>
- <dt>自定义列表的标题
- <dd>自定义列表的项
- 有序列表：<ol> 每一项是li
- <!DOCTYPE>文档声明
- 必须放在页面的第一行
- 告知浏览器这个页面按照什么样的标准来解析
- <meta>
- 告知浏览器用什么样的字符编码来解析
- 给搜索引擎搜索
- <img>：插入图片
- <Img src=’路径’ alt=’当图片无法显示的时候显示的内容’ title=’当鼠标移到图片上的时候显示内容’ width=’’ height=’’>
- 热点：带有超链接的区域
- <object>:<object type=”application/x-shockwave-flash” data=”地址” width=”” height=””></object> 插入flash
- 实体：固定的字符串
- < <
- > >
- 空格
- 表格
- 表格作用：排版
- 与表格相关标签
- Table表格
- Tr 行
- Td 单元格
- Th 标题
- 单元格数据对齐
- 水平对齐 align=center left right
- 垂直对齐 valign=top middle bottom
- 单元格间距和单元格填充
- 间距：cellspacing 单元格和单元格的距离，默认2像素
- 填充：cellpadding：单元格的内容和距离单元格的距离，默认1像素
- 合并单元格
- 合并行：rowspan
- 合并列：colspan
标签的通用属性
有的属性是多个标签都具有的
- id：唯一的编号
- class：标签属于哪个类别
- width：宽度
- height：高度
- title：当鼠标移上去的时候显示提示性文字
表单
表单作用：客户端使用表单向服务器提交数据。
表单域
表单域就是表单的区域
标签：<form></form>
表单元素
文本框（单行文本 <input>）
<input type=”text” name=”username” size=”30″ maxlength=”6″ />
- input：输入
- type：类别，类型
- text：文本
- name：必须给每个表单元素取名字，因为服务器是通过名字来获取表单元素的值的。（每一个表单元素都要取名字）
- size=30：单行文本的宽度是30个字符的宽度
- maxlength=6：单行文本中最多只能输入6个字符。
运行结果
密码框（<input>）
<input type=”password” name=”pwd” maxlength=”3″ />
单选按钮（<input>）
<input type=”radio” name=”sex” value=”1″ checked=”checked” />男
<input type=”radio” name=”sex” value=”0″/>女radio：单选按钮
- value：值
- checked：选中
注意：
- 同一组的单选按钮名字必须要一致
- 无法输入的表单元素必须要赋值
- checked属性用来默认选择单选按钮，简写成checked也可以
运行结果
思考：思考如下代码，结果是什么？
分析：程序的执行是从上往下依次执行，当执行的第二个单选按钮的时候会选择第二个单选按钮，由于是单选，在选择第二个的时候会取消对第一个按钮的选择，以此类推，最后选择最后一个单选按钮。
复选框（多选按钮 <input>）
<input type=”checkbox” name=”hobby” value=”读书” checked=”checked” />读书
<input type=”checkbox” name=”hobby” value=”爬山” />爬山
<input type=”checkbox” name=”hobby” value=”游泳” />游泳
<input type=”checkbox” name=”hobby” value=”看报” />看报
- check：选择
- box:盒子
运行结果
下拉菜单（<select>）
<select name=”jiguan”>
<option value=”上海”>上海</option>
<option value=”北京” selected=”selected”>北京</option>
<option value=”天津”>天津</option>
</select>
- select：选择
- option：选项
- selected：已经选中
运行结果
下拉列表（<select>）
下拉菜单和下拉列表的标签是一样的，他们的区别下拉列表一次可以选择多个选项
- size：一次显示的选项个数
- multiple：多选
文本域（多行文本 <textarea>）
<textarea name=”jianyi” cols=”30″ rows=”5″></textarea>
- text：文本
- area：区域
- cols=’30’：文本域的宽度是30个列的宽度
- rows=’5’：文本域的高度是5行的高度
运行结果
提交按钮（<input>）
点击提交按钮将表单元素的数据发送到服务器
<input type=”submit” name=”submit” value=”注册” />
1、submit：提交
运行结果：
脚下留心：按钮上显示什么内容取决于的value的值
重置按钮（<input>）
点击重置按钮，将表单元素的数据恢复到初始值。
<input type=”reset” name=”reset” value=”重置” />
1、reset：重置
运行结果：
普通按钮（<input>）
普通按钮本身不具备任何功能，后面和JS结合起来写自定义功能
<input type=”button” name=”btn” value=”普通按钮” />
1、button：按钮
运行结果：
表单元素总结：
在表单的中我们学的标签有：<form>,<input>,<select>,<option>,<textarea>
input标签的type属性
- text：文本框
- password：密码框
- radio：单选按钮
- checkbox：复选框
- submit：提交按钮
- reset：重置按钮
- button：普通按钮
使用表单
表单的属性
- action：表单元素提交的地址
多学一招：action=””表示将数据提交给当前页面
- method：数据提交的方法，method有两个值，一个是get，一个是post
get和post提交的区别
| get | post | |
| 外观上 | 地址栏上有？，?后面跟的是传输的数据 | 地址栏上看不到数据 |
| 提交原理 | 将表单元素的数据一个一个的提交 | 将所有数据作为一个整体一起提交 |
| 提交的数据量上 | 少量数据（最少255字节） | 大量数据 |
| 安全性上 | 不安全 | 安全 |
| 灵活性 | 很灵活 | 不灵活 |
多学一招：get使用的频率远远大于post，原因是get很灵活。
框架
在同一个浏览器上显示多个多个框架。在每一个框架中放了一个页面。
使用的标签
- <frameset>：框架集
- <frame>：框架
例题一：在浏览器上显示3个框架，他们分成3行
例题二：在浏览器上显示3个框架，他们分成3列，如下格式：
实现：
例题三：实现如下框架结构
分析
实现：
脚下留心：
1、<frameset>不能放在<body>中，放在<html>中
2、<noframes></noframes>，当浏览器不支持框架标签的时候就执行此标签中的内容。
<noframes>此浏览器不支持框架，请升级</noframes>
3、在HTML5中，框架标签现在已经淘汰
例题：实现在一个框架中点击，目标页面在另一个框架中出现
第一步：给目标框架取名字
第二步：将超链接的target属性的值写成目标框架的名字
运行结果：
内嵌框架（<iframe>）
内嵌框架就是页面中嵌套的框架
<iframe src=”1-表单.html” width=”100″ height=”100″ marginwidth=”0″ marginheight=”0″ frameborder=”0″></iframe>
- src：内嵌框架中存放的页面
- width和height：内嵌框架的宽度和高度
- marginwidth：内嵌框架中的页面距离内嵌框架的宽度
- marginheight：内嵌框架中的页面距离内嵌框架的高度
- frameborder：内嵌框架边框
HTML发展史
HTML5的发展
脚下留心：在ie9以上（包含）、crome、火狐支持HTML5，老版本的浏览器不支持。
由于HTML5目前还没有正式发布，所以同一个标签在不同的浏览器上解析可能会不同。
HTML新的特点
- 语法更加简单
- 头部声明
<!doctype html>
-
- 简化了字符集声明
<meta charset=”utf-8″>
- 语法更宽松
- 可以省略结束符的标签
li、dt、dd、p、optgroup、option、tr、td、th
-
- 可以完全省略的标签
html、head、body
- 标签语义化，在原来的拼版过程中，通过<div></div>中来存放内容，在HTML5中添加了很多标签，其实作用和<div>一样，但是它更加具有语义。HTML5增加如下常用新标签
- <header> 标记定义一个页面或一个区域的头部
- <nav> 标记定义导航链接
- <article> 标记定义一篇文章内容
- <section> 标记定义网页中一块区域
- <aside> 标记定义页面内容部分的侧边栏
- <footer> 标记定义一个页面或一个区域的底部
html5新增常用新属性
required：必填
placeholder：默认显示内容
autofocus：自动获取焦点
input标签新增的type属性值
- type=”email”，文本框中只能输入email地址
- 代码
<input type=”email” name=”email”>
-
- 运行结果
- type=”date”（目前只有chrome有效）
- 代码：
<input type=”date” name=”date”>
-
- 运行结果
- type=”time”
- 代码
<input type=”time” name=”time”>
-
- 运行结果
- type=”month”
- 代码
<input type=”month” name=”month”>
-
- 运行结果
- type=”week”
- 代码
<input type=”week” name=”week”>
-
- 运行结果
- type=”number”
- 代码：
<input type=”number” name=”number”>
-
- 运行结果
- type=”range”
- 代码
<input type=”range” name=”range” min=”18″ max=”25″>
-
- 运行结果
- type=”color”
- 代码
<input type=”color” name=”color”>
-
- 运行结果
多媒体标签
<embed>
这个标签不是HTML5的，在HTML4中就已经存在，主要用来播放音频和视频
- 音频
<embed src=”music/music.mp3″ autoplay=’0′></embed>
Autoplay=’0’或者false 表示不自动播放
Autoplay=’1’或者true 表示自动播放
- 视频
<embed src=”video/movie.mp4″ width=”300″ height=”300″></embed>
<audio>
HTML5中专门用来播放音频的
方法一：
<audio src=”music/music.mp3″ controls autoplay=”autoplay”></audio>
- controls表示显示控制面板
- autoplay=”autoplay”：自动播放，也可以就写一个autoplay
方法二：
<audio controls autoplay>
<source src=”music/music.mp3″>
<source src=”music/music.ogg”>
</audio>
如果第一个音频找不到，就会播放第二个音频，如果第一个音频播放了，不会播放第二个音频。
<video>
HTML5中专门用来播放视频的
<video controls autoplay>
<source src=”video/movie.mp4″>
<source src=”video/movie.ogg”>
<source src=”video/movie.webm”>
</video>
原理和<audio>一样。
