三组概念

客户端、服务器端

客户端：用来访问服务器的计算机（后面还会细化这个概念）

服务器端：用来存放数据的计算机

在WEB（网页）技术中，客户端和服务器端的通讯是通过http协议进行的

网页的执行过程

客户端给服务器发送一个请求，服务器将代码（HTML,CSS,JS）到送到客户端，这些代码通过浏览器解析执行，就形成了我们看到界面。

浏览器（浏览器的种类，浏览器的内核）

浏览器就是一个软件，这个软件用来解析服务器发送到客户端的代码。

浏览器的种类：

1、IE（微软公司）

2、火狐（firefox）

3、Chrome（谷歌）

4、Opera

5、Safari（苹果）

浏览器的内核：浏览器中的核心代码，360的核心代码就是ie

文件名、基本名、扩展名

文件名由基本名和扩展名组成，比如face.jpg，文件名：face.jpg文件基本名face，扩展名是jpg

扩展名：扩展名是表示文件的类别

Jpg：图片

Txt:文本

Doc：word文档

HTML介绍

什么是HTML

HyperText Mark-up Language（超文本标记语言）

HTML的作用

HTML是组成服务器发送到客户端内容的一门语言，

HTML：做网页页面结构的

查看网页的HTML

IE浏览器——查看——源

站点介绍

一个网站有很多网页页面组成，还有图片等等资源，我们为了便于管理，要将这些资源放到一个文件夹下，这个文件夹就叫站点

做网站的第一步想建站点。

站点就是文件夹。

HTML语言的规则

1. 所有的标记都要放在<>里面
2. 大部分标记成对出现
3. 语法：<标记> </标记>
4. HTML语言不区分大小写

多学一招：虽然HTML不区分大小写，但是W3C（万维网联盟）定义了一套标准，在这套标准中建议区分大小写。

World Wide Web Consortium ——（wwwc）——（3wc）——（w3c）

其中与我们有关的标准

1. 区分大小写
2. 所有的标记都成对出现

网页的基本框架

<html>：表示HTML页面的开始

<head>：页面的头

<body>：页面的身体

<title>：页面的标题

第一个网页

网页的扩展名是html或htm

第一步：创建站点文件夹

第二步：在站点文件夹中，右键—创建记事本

第三步：打开记事本，写入HTML框架结构

第四步：将扩展名改成html

第五步：双击打开此文件，默认通过浏览器打开，浏览器打开此页面的时候就会执行页面中的HTML代码，解析后就会生成我们的看到的界面

脚下留心：HTML语言是不认空格，不认回车。也就说HTML语言对空白字符不敏感。

脚下留心：右键创建文件的时候如果看不到文件的扩展名，肯定是扩展名被隐藏了，我们更改设置将扩展名显示出来即可。

Window宽口——查看——文件扩展名

注释

在代码中我们需要对代码进行备注，以便于多个程序员之间的交流和后期的文件更改。

语法：<!– 注释的内容 –>

浏览器不执行注释中的内容

常见的标记

1. 排版标记
   1. <p></p> ：段落，排版标签
   2. <br>：换行

注意一下换段和换行的区别

• 1. <hr>：水平线

1. 字体标记
   1. <b>：粗体
   2. <i>：斜体
   3. <u>：下划线

1. 强调标记
   1. <strong>：强调标记，通过加粗来强调
   2. <em>：强调标记，通过倾斜来强调
   3. <ins>：强调标记，通过下划线来强调

脚下留心：<b>和<strong>，<i>和<em>，<u>和<ins>外表看是一样的，但是他们的含义是有区别的，<b><i><u>表示是字体，<strong>，<em>,<ins>表示强调。推荐使用强调标记，从SEO（搜索引擎优化）的角度来说，强调标记的权重会更高。

1. 上标（sup）、下标（sub）

p：top b:bottom

1. 预格式化文本<pre>

标记的分类

HTML标记分成两类：

1. 成对出现，我们称为容器标记，也叫围堵标记，也叫双标记
2. 不成对出现：称为空标记，也叫单标记

属性

1. 一个标签就是一个对象，每个对象都有自己的属性（特性）
2. 一个对象可以有多个属性
3. 每个属性都有对应的值，属性值要用单引号或者双引号引起来。
4. 属性和属性之间用空格分开
5. 属性是没有顺序的

使用属性

<标签 属性=’属性的值’ 属性=’属性的值’> </标签>

编辑器介绍

1. dreamweaver
   1. 优点：写HTML和CSS比较方便
   2. 缺点：体积大，打开速度稍微优点慢，需要花钱买

1. editplus：
   1. 优点：体积小，打开速度快，开源
   2. 缺点：提示需要自己去配置

1. Sublime，写JS很方便
   1. 优点:体积小，打开速度快，开源，有提示

1. Netbeans和PHPstrom：对PHP提示比较好

上面5个工具，在后面学习中会一一带大家使用，在HTML+CSS阶段我们学习DW。

Dreamweaver介绍

在使用DW软件来管理文件的时候，需要建立软件和站点文件夹的关联

在DW中新建站点

在DW中新建站点是创建的软件和文件夹的关联

思考一：dw是否可以创建多个站点（多个关联）

答：可以

思考二：删除DW站点的时候会不会将文件夹中的文件删除？

答：不会，只是删除的是软件和文件夹的关联。

DW的使用

打开DW软件——点击HTML——在代码模式中写代码

多学一招：DW中F12是预览的快捷键

滚动文字的设置

<marquee direction=”right” scrollamount=”20″ width=”300″ onmouseover=”stop()” onmouseout=”start()”>锄禾日当午</marquee>

direction：方向

up:上 down：下 left：左 right：右

scroll：滚动 amount：数值

width：宽度 height：高度

onmouseover：当鼠标移上去

onmouseout：当鼠标离开

stop()：停止

start()：开始

路径

绝对路径：c:\face.txt

相对路径：相对于当前的文件的地址

例题一：

例题二：

例题三：

思考：../是表示上一级目录，那么../../表示什么？

答：表示上一级目录的上一级目录，也就是上两级目录

超链接

所有的超链接都是<a>标记

内部链接

在同一个站点内页面之间的链接

target：目标

blank：空白的

注意：要掌握a标记的href,target,title属性

外部链接

跳转到其他网站的链接称为外部链接

空链接

有链接的样子，但是没有链接的地址

下载链接

当链接一个浏览器无法打开的文件时，就会自动出现下载界面。

锚点链接

就像用轮船的锚将两个点链接起来。

第一步：在需要跳转的地方添加一个锚点

id:是唯一的编号，每一个标签都有id属性，因为ID号是唯一的编号，所以不能重复。

第二步：点击超链接，跳转到指定的锚点处（id）

注意：#表示id

作业

跳转到其他页面的指定锚点处

客户端、服务器端

客户端：用来访问服务器的计算机（后面还会细化这个概念）

服务器端：用来存放数据的计算机

在WEB（网页）技术中，客户端和服务器端的通讯是通过http协议进行的

网页的执行过程

客户端给服务器发送一个请求，服务器将代码（HTML,CSS,JS）到送到客户端，这些代码通过浏览器解析执行，就形成了我们看到界面。

浏览器（浏览器的种类，浏览器的内核）

浏览器就是一个软件，这个软件用来解析服务器发送到客户端的代码。

浏览器的种类：

1、IE（微软公司）

2、火狐（firefox）

3、Chrome（谷歌）

4、Opera

5、Safari（苹果）

浏览器的内核：浏览器中的核心代码，360的核心代码就是ie

文件名、基本名、扩展名

文件名由基本名和扩展名组成，比如face.jpg，文件名：face.jpg文件基本名face，扩展名是jpg

扩展名：扩展名是表示文件的类别

Jpg：图片

Txt:文本

Doc：word文档

HTML介绍

什么是HTML

HyperText Mark-up Language（超文本标记语言）

HTML的作用

HTML是组成服务器发送到客户端内容的一门语言，

HTML：做网页页面结构的

查看网页的HTML

IE浏览器——查看——源

站点介绍

一个网站有很多网页页面组成，还有图片等等资源，我们为了便于管理，要将这些资源放到一个文件夹下，这个文件夹就叫站点

做网站的第一步想建站点。

站点就是文件夹。

HTML语言的规则

1. 所有的标记都要放在<>里面
2. 大部分标记成对出现
3. 语法：<标记> </标记>
4. HTML语言不区分大小写

多学一招：虽然HTML不区分大小写，但是W3C（万维网联盟）定义了一套标准，在这套标准中建议区分大小写。

World Wide Web Consortium ——（wwwc）——（3wc）——（w3c）

其中与我们有关的标准

1. 区分大小写
2. 所有的标记都成对出现

网页的基本框架

<html>：表示HTML页面的开始

<head>：页面的头

<body>：页面的身体

<title>：页面的标题

第一个网页

网页的扩展名是html或htm

第一步：创建站点文件夹

第二步：在站点文件夹中，右键—创建记事本

第三步：打开记事本，写入HTML框架结构

第四步：将扩展名改成html

第五步：双击打开此文件，默认通过浏览器打开，浏览器打开此页面的时候就会执行页面中的HTML代码，解析后就会生成我们的看到的界面

脚下留心：HTML语言是不认空格，不认回车。也就说HTML语言对空白字符不敏感。

脚下留心：右键创建文件的时候如果看不到文件的扩展名，肯定是扩展名被隐藏了，我们更改设置将扩展名显示出来即可。

Window宽口——查看——文件扩展名

注释

在代码中我们需要对代码进行备注，以便于多个程序员之间的交流和后期的文件更改。

语法：<!– 注释的内容 –>

浏览器不执行注释中的内容

常见的标记

1. 排版标记
   1. <p></p> ：段落，排版标签
   2. <br>：换行

注意一下换段和换行的区别

• 1. <hr>：水平线

1. 字体标记
   1. <b>：粗体
   2. <i>：斜体
   3. <u>：下划线

1. 强调标记
   1. <strong>：强调标记，通过加粗来强调
   2. <em>：强调标记，通过倾斜来强调
   3. <ins>：强调标记，通过下划线来强调

脚下留心：<b>和<strong>，<i>和<em>，<u>和<ins>外表看是一样的，但是他们的含义是有区别的，<b><i><u>表示是字体，<strong>，<em>,<ins>表示强调。推荐使用强调标记，从SEO（搜索引擎优化）的角度来说，强调标记的权重会更高。

1. 上标（sup）、下标（sub）

p：top b:bottom

1. 预格式化文本<pre>

标记的分类

HTML标记分成两类：

1. 成对出现，我们称为容器标记，也叫围堵标记，也叫双标记
2. 不成对出现：称为空标记，也叫单标记

属性

1. 一个标签就是一个对象，每个对象都有自己的属性（特性）
2. 一个对象可以有多个属性
3. 每个属性都有对应的值，属性值要用单引号或者双引号引起来。
4. 属性和属性之间用空格分开
5. 属性是没有顺序的

使用属性

<标签 属性=’属性的值’ 属性=’属性的值’> </标签>

编辑器介绍

1. dreamweaver
   1. 优点：写HTML和CSS比较方便
   2. 缺点：体积大，打开速度稍微优点慢，需要花钱买

1. editplus：
   1. 优点：体积小，打开速度快，开源
   2. 缺点：提示需要自己去配置

1. Sublime，写JS很方便
   1. 优点:体积小，打开速度快，开源，有提示

1. Netbeans和PHPstrom：对PHP提示比较好

上面5个工具，在后面学习中会一一带大家使用，在HTML+CSS阶段我们学习DW。

Dreamweaver介绍

在使用DW软件来管理文件的时候，需要建立软件和站点文件夹的关联

在DW中新建站点

在DW中新建站点是创建的软件和文件夹的关联

思考一：dw是否可以创建多个站点（多个关联）

答：可以

思考二：删除DW站点的时候会不会将文件夹中的文件删除？

答：不会，只是删除的是软件和文件夹的关联。

DW的使用

打开DW软件——点击HTML——在代码模式中写代码

多学一招：DW中F12是预览的快捷键

滚动文字的设置

<marquee direction=”right” scrollamount=”20″ width=”300″ onmouseover=”stop()” onmouseout=”start()”>锄禾日当午</marquee>

direction：方向

up:上 down：下 left：左 right：右

scroll：滚动 amount：数值

width：宽度 height：高度

onmouseover：当鼠标移上去

onmouseout：当鼠标离开

stop()：停止

start()：开始

路径

绝对路径：c:\face.txt

相对路径：相对于当前的文件的地址

例题一：

例题二：

例题三：

思考：../是表示上一级目录，那么../../表示什么？

答：表示上一级目录的上一级目录，也就是上两级目录

超链接

所有的超链接都是<a>标记

内部链接

在同一个站点内页面之间的链接

target：目标

blank：空白的

注意：要掌握a标记的href,target,title属性

外部链接

跳转到其他网站的链接称为外部链接

空链接

有链接的样子，但是没有链接的地址

下载链接

当链接一个浏览器无法打开的文件时，就会自动出现下载界面。

锚点链接

就像用轮船的锚将两个点链接起来。

第一步：在需要跳转的地方添加一个锚点

id:是唯一的编号，每一个标签都有id属性，因为ID号是唯一的编号，所以不能重复。

第二步：点击超链接，跳转到指定的锚点处（id）

注意：#表示id

回顾

1. 三组概念
   1. 客户端和服务器端

脚下留心：

1. 管理员访问服务器，管理员用的计算机是客户端
2. 通过服务器上的浏览器访问服务器的网站，这台计算机既是客户端也是服务器端。
   1. 浏览器和浏览器的内核
      1. 浏览器是一个用来解析HTML、CSS、JS的一个软件
      2. 浏览器内核：浏览器的核心代码

脚下留心：不同的浏览器内核可以是一样的。

• 1. 文件名、文件基本名、文件扩展名

文件名=基本名+扩展名

1. HTML：超文本标记语言
2. 网页的执行过程
3. Web之间的通讯通过HTTP协议。
4. HTML语法规则：
   1. 标签都要放在<>内
   2. 大部分标签都是成对出现
   3. <标签>：表示标签开始，</标签>表示标签结束
   4. 不区分大小写
5. 常用标签
   1. <p>：段落
   2. <br>：换行
   3. <hr>：水平线
   4. <b>：粗体
   5. <i>：斜体
   6. <u>：下划线
   7. <strong>：加粗强调
   8. <em>：倾斜强调
   9. <ins>：下划线强调
   10. <sup>：上标
   11. <sub>：下标
   12. <pre>：预格式化
   13. <font color=’’ size=’’ face=’’>
6. 标签的分类：
   1. 成对：双标签，容器标签，围堵标签
   2. 不成对：空标签，单标记
7. 标签的属性，每个标签都有自己多个属性，各自的属性跟在各自的后面，属性和属性自己通过空格来分开，每个属性都有值，属性的值通过单引号或双引号引起来。属性之间是没有顺序的。
8. DW编辑器
   1. 设置自动补全功能：编辑——首选参数（ctrl+U）

• 1. 添加删除浏览器

1. 滚动的文字：<marquee>
2. 路径
   1. 绝对路径：从一个不变的地址出发去寻找目标，比如c:\aa.jpg
   2. 相对路径：从自身的地址出发去寻找目标

目录结构如下：

aa

aa.html

bb

bb.html

cc

cc.html

dd

dd.html

test.html

问题：

1、test.html跳转aa.html aa/aa.html

2、test.html跳转bb.html aa/bb/bb.html

3、test.html跳转cc.html aa/bb/cc/cc.html

4、aa.html跳转test.html ../test.html

5、bb.thml跳转test.html ../../test.html

6、cc.html跳转test.html ../../../test.html

7、dd.html跳转到bb.html ../bb/bb.html

8、dd．Html跳转到cc.html ../bb/cc/cc.html

1. 超链接
   1. 内部链接：链接到网站内部
   2. 外部链接：链接到外部网站
   3. 空连接：只有链接的样子，没有链接的地址，#
   4. 下载链接：连接到无法打开的文件自动出现下载界面
   5. 锚点链接：

作业

跳转到其他页面指定的锚点处。

第一步：在B页面创建锚点

第二步：在A页面跳转到B页面的锚点处

六级标题

h1~h6

多学一招：在DW中，ctrl+1就是一级标题的快捷键，ctrl+2是二级标题，以此类推。

多学一招：从SEO的角度说，h1的权重更大。

列表

有序列表（<ol>） order list

有序列表中的每一项目是<li>

tpye属性

例题

无序列表（ul） unorder list

type属性

例题

自定义列表（dl） define list

dl：自定义列表

dt：自定义列表中的标题

dd：自定义列表中的项

<!DOCTYPE>标签

文档声明，用来声明文档遵循的规范

document 文档

type 类别

脚下留心：

1、<!doctype>必须放在页面的最顶端

2、<!doctype>标签本身不是HTML标签，是用来声明文档遵循的规范，也告知浏览器通过此规范来解析此页面中的代码。

详细资料：http://www.w3school.com.cn/tags/tag_doctype.asp

常用的 DOCTYPE 声明

注意：使用最多的是HTML5和XHTML1.0过渡型的声明。

XHTML和HTML的区别

xHTML就是满足W3C定义的规范的HTML。

XHTML=规范+HTML

DW中更改文档规范

Ctrl+U，打开首选参数

<meta>

遇到的问题

分析

结论：服务器发送什么格式的编码，浏览器就需要使用什么样的编码来解析。如果编码格式不一样，就会出现乱码。

常用编码

GBK：简体中文

GB2312：简体中文

UTF-8：国际统一编码（推荐）

ANSI ：中文操作系统就用中文编码，日文的操作系统就用日文的编码，换句话说什么样的操作系统就用什么样的编码格式。

作用一：通过meta标记控制浏览器编码

<meta charset=”utf-8″>

告知浏览器通过utf-8的字符编码来解析。

作用二：给搜索引擎使用

例题

多学一招：搜索引擎上的描述可能是<meta>标记的description部分，也可能是这个页面上的一段话。

插入图片（img）

语法：<img src=’图片的源’ alt=’’ title=’’ width=’’ height=’’ />

src：图片的地址

alt：当图片无法显示的时候，将alt后面的文字显示在图片的位置上

title：当鼠标放到图片的位置的时候显示提醒性文字。

脚下留心：如果一个图片很大，要在图片引入之前先调整好尺寸，不要将图片进入后再通过width和height来调整尺寸。

热点（了解）

热点：带有超链接的区域

DW创建热点非常简单

第一步：在设计模式下选择图片

第二步：选择热点选区工具在图片上画出热点区域

第三步：将每个热点链接到指定目标即可。

Object标签（了解）

<object type=”application/x-shockwave-flash” data=”地址” width=”” height=””></object>

例题

实体

实体就是一个固定不变的值，通过&去调用实体，分号表示调用结束。

空格：&nbsp;

<：lt less than &lt;

>：gt greater than &gt;

使用表格

网页默认情况下，使用的流布局，使用表格可以实现页面布局。

与表相关的标记

<table></table> 表格

<tr></tr> 行

<td></td> 单元格

<th></th> 标题

使用表的相关标记创建表

<table border=”1″ width=”500″ height=”300″ bordercolor=”#0000FF”>

<tr>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</tr>

<tr>

<td>令狐冲</td>

<td>男</td>

<td>22</td>

</tr>

<tr>

<td>任盈盈</td>

<td>女</td>

<td>18</td>

</tr>

<tr>

<td>任我行</td>

<td>男</td>

<td>55</td>

</tr>

<tr>

<td>岳不群</td>

<td>男</td>

<td>50</td>

</tr>

</table>

运行结果

单元格中数据的对齐方式

水平对齐

使用标签的align属性

align=”center”：水平居中

align=”left”：水平居左（默认）

align=”right”：水平居右

垂直对齐

valign=’top’：垂直居顶

valign=’ middle’：垂直居中（默认）

valign=’bottom’：垂直居底

单元间距和单元填充

单元格间距（cellspacing）：单元格和单元格距离，默认是2像素

单元格填充（cellpadding）：单元格和内容的距离，默认是1像素

例题

合并单元格

合并行(rowspan)：把不同的行合并起来

合并列(colspan)：把不同列合并起来

row：行

span：跨度

col：column（柱状体，列）

例题

<table border=”1″ align=”center” width=”500″ height=”300″>

<tr>

<th colspan=”3″>学生证</th>

</tr>

<tr>

<th width=”30%”>姓名</th>

<td width=”30%”>&nbsp;</td>

<td rowspan=”3″ align=”center”>照<br /><br />片</td>

</tr>

<tr>

<th>性别</th>

<td>&nbsp;</td>

</tr>

<tr>

<th>年龄</th>

<td>&nbsp;</td>

</tr>

</table>

运行结果

回顾

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>一样。