回顾

1. 六级标题
   1. <h1></h1>一级标题 权重最高
   2. <h2>：二级标题
   3. …
   4. <h6>：六级标题
2. 列表
   1. 有序列表：<ol> 每一项是li
      1. 默认是以数字为顺序，通过type属性来更改标号的类型（字母，罗马数字）
      2. 通过start属性设置从第几个数字（字母）开始
   2. 无序列表：<ul> 每一项是li
   3. 自定义列表：<dl>
      1. <dt>自定义列表的标题
      2. <dd>自定义列表的项
3. <!DOCTYPE>文档声明
   1. 必须放在页面的第一行
   2. 告知浏览器这个页面按照什么样的标准来解析
4. <meta>
   1. 告知浏览器用什么样的字符编码来解析
   2. 给搜索引擎搜索
5. <img>：插入图片
   1. <Img src=’路径’ alt=’当图片无法显示的时候显示的内容’ title=’当鼠标移到图片上的时候显示内容’ width=’’ height=’’>
6. 热点：带有超链接的区域
7. <object>:<object type=”application/x-shockwave-flash” data=”地址” width=”” height=””></object> 插入flash
8. 实体：固定的字符串
   1. &lt; <
   2. &gt; >
   3. &nbsp; 空格
9. 表格
   1. 表格作用：排版
   2. 与表格相关标签
      1. Table表格
      2. Tr 行
      3. Td 单元格
      4. Th 标题
   3. 单元格数据对齐
      1. 水平对齐 align=center left right
      2. 垂直对齐 valign=top middle bottom
   4. 单元格间距和单元格填充
      1. 间距：cellspacing 单元格和单元格的距离，默认2像素
      2. 填充：cellpadding：单元格的内容和距离单元格的距离，默认1像素
   5. 合并单元格
      1. 合并行：rowspan
      2. 合并列：colspan

标签的通用属性

有的属性是多个标签都具有的

1. id：唯一的编号
2. class：标签属于哪个类别
3. width：宽度
4. height：高度
5. title：当鼠标移上去的时候显示提示性文字

表单

表单作用：客户端使用表单向服务器提交数据。

表单域

表单域就是表单的区域

标签：<form></form>

表单元素

文本框（单行文本 <input>）

<input type=”text” name=”username” size=”30″ maxlength=”6″ />

1. input：输入
2. type：类别，类型
3. text：文本
4. name：必须给每个表单元素取名字，因为服务器是通过名字来获取表单元素的值的。（每一个表单元素都要取名字）
5. size=30：单行文本的宽度是30个字符的宽度
6. 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：单选按钮

1. value：值
2. checked：选中

注意：

1. 同一组的单选按钮名字必须要一致
2. 无法输入的表单元素必须要赋值
3. 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=”看报” />看报

1. check：选择
2. box:盒子

运行结果

下拉菜单（<select>）

<select name=”jiguan”>

<option value=”上海”>上海</option>

<option value=”北京” selected=”selected”>北京</option>

<option value=”天津”>天津</option>

</select>

1. select：选择
2. option：选项
3. selected：已经选中

运行结果

下拉列表（<select>）

下拉菜单和下拉列表的标签是一样的，他们的区别下拉列表一次可以选择多个选项

1. size：一次显示的选项个数
2. multiple：多选

文本域（多行文本 <textarea>）

<textarea name=”jianyi” cols=”30″ rows=”5″></textarea>

1. text：文本
2. area：区域
3. cols=’30’：文本域的宽度是30个列的宽度
4. 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属性

1. text：文本框
2. password：密码框
3. radio：单选按钮
4. checkbox：复选框
5. submit：提交按钮
6. reset：重置按钮
7. button：普通按钮

使用表单

表单的属性

1. action：表单元素提交的地址

多学一招：action=””表示将数据提交给当前页面

1. method：数据提交的方法，method有两个值，一个是get，一个是post

get和post提交的区别

多学一招：get使用的频率远远大于post，原因是get很灵活。

框架

在同一个浏览器上显示多个多个框架。在每一个框架中放了一个页面。

使用的标签

1. <frameset>：框架集
2. <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>

1. src：内嵌框架中存放的页面
2. width和height：内嵌框架的宽度和高度
3. marginwidth：内嵌框架中的页面距离内嵌框架的宽度
4. marginheight：内嵌框架中的页面距离内嵌框架的高度
5. frameborder：内嵌框架边框

HTML发展史

HTML5的发展

脚下留心：在ie9以上（包含）、crome、火狐支持HTML5，老版本的浏览器不支持。

由于HTML5目前还没有正式发布，所以同一个标签在不同的浏览器上解析可能会不同。

HTML新的特点

1. 语法更加简单
   1. 头部声明

<!doctype html>

• 1. 简化了字符集声明

<meta charset=”utf-8″>

1. 语法更宽松
   1. 可以省略结束符的标签

li、dt、dd、p、optgroup、option、tr、td、th

• 1. 可以完全省略的标签

html、head、body

1. 标签语义化，在原来的拼版过程中，通过<div></div>中来存放内容，在HTML5中添加了很多标签，其实作用和<div>一样，但是它更加具有语义。HTML5增加如下常用新标签
   1. <header> 标记定义一个页面或一个区域的头部
   2. <nav> 标记定义导航链接
   3. <article> 标记定义一篇文章内容
   4. <section> 标记定义网页中一块区域
   5. <aside> 标记定义页面内容部分的侧边栏
   6. <footer> 标记定义一个页面或一个区域的底部

html5新增常用新属性

required：必填

placeholder：默认显示内容

autofocus：自动获取焦点

input标签新增的type属性值

1. type=”email”，文本框中只能输入email地址
   1. 代码

<input type=”email” name=”email”>

• 1. 运行结果

1. type=”date”（目前只有chrome有效）
   1. 代码：

<input type=”date” name=”date”>

• 1. 运行结果

1. type=”time”
   1. 代码

<input type=”time” name=”time”>

• 1. 运行结果

1. type=”month”
   1. 代码

<input type=”month” name=”month”>

• 1. 运行结果

1. type=”week”
   1. 代码

<input type=”week” name=”week”>

• 1. 运行结果

1. type=”number”
   1. 代码：

<input type=”number” name=”number”>

• 1. 运行结果

1. type=”range”
   1. 代码

<input type=”range” name=”range” min=”18″ max=”25″>

• 1. 运行结果

1. type=”color”
   1. 代码

<input type=”color” name=”color”>

• 1. 运行结果

多媒体标签

<embed>

这个标签不是HTML5的，在HTML4中就已经存在，主要用来播放音频和视频

1. 音频

<embed src=”music/music.mp3″ autoplay=’0′></embed>

Autoplay=’0’或者false 表示不自动播放

Autoplay=’1’或者true 表示自动播放

1. 视频

<embed src=”video/movie.mp4″ width=”300″ height=”300″></embed>

<audio>

HTML5中专门用来播放音频的

方法一：

<audio src=”music/music.mp3″ controls autoplay=”autoplay”></audio>

1. controls表示显示控制面板
2. 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>一样。