课程回顾

html结构

<!DOCTYPE HTML>
head里面的标签
meta ： charset name="keywords" content="a,b,c"
title ：页面标题
body里面的标签
h1-h6 属性： align=“left/center/right”
p 段落上下有空白
列表：有序列表 ol-li 无序 ul-li
分区元素： div：独占一行和span 非独占一行
块级元素：独占一行，div, p, h1-6,hr
行内元素：非独占一行,span, i和em, b和strong,u,del和s
换行 br
特殊字符空格： < > br
图片标签: img 属性： src路径（相对和绝对）alt，title，width、height

简历练习

注释

格式：快捷键：control+shift+/

图像地图 map

什么是图像地图：可以将图片中的某个部分作为可点击的连接。
使用方式：
```
<img alt="图片" src="k.jpg"
```
width="800px" usemap="#mymap">
如果使用shape=rect，coords的值所代表的意思是左上角点的x和y，还有右下角点的坐标x和y。如果shape=circle coords值表示圆心坐标(x和y)，和半径.
href属性：值为一个路径，相对路径和绝对路径，区域被点击时会直接访问此路径的内容，路径可以指向页面，也可以指向图片资源，也可以指向其它类型的文件会下载此文件。

超链接 a

在网页中经常使用超链接进行链接导航，语法：
```
<a href="路径" >链接</a>
```
target属性：控制从什么位置跳转，值为self是从当前页面跳转（默认）,值为blank是跳转到一个新窗口显示页面

a标签可以支持以下几种写法：

<a href="http://doc.tedu.cn">达内文档</a>
<a href="map2.html" 
target="_blank">图像地图练习</a>
<a href="day01.zip">文件下载</a>
<a href="2.gif">浏览图片</a>

a标签锚点的使用

通过锚点可以实现页面内部位置的跳转
操作方式：
在页面中的某个位置设置锚点：
```
<a id="top" name="top"></a>
```
通过超链接跳转到锚点的位置
```
<a href="#top">回到顶部</a>
```
-锚点练习：图片1 图片2 图片3 图片4

表格标签

什么是表格：由一些单元格的矩形框按照从左到右从上到下的顺序排列组成的内容为表格
作用：以一定的结构来显示信息

表格的格式：

<table>
<tr>
    <td>1-1</td>
    <td>1-2</td>
</tr>
<tr>
    <td>2-1</td>
    <td>2-2</td>
</tr>
<tr>
    <td>3-1</td>
    <td>3-2</td>
</tr>

表格属性：
cellspacing：每个单元格之间的间距和单元格距表格边框的距离
cellpadding: 内容与单元格边框的距离
width/height:表格的宽高
border：边框的宽度预习： colspan rowspan 两个属性

回顾上午内容：

注释
图像地图 map 属性：name和id 子标签 area: 属性：shape（rect circle）coords: href:相对路径和绝对 img图片标签中使用usemap指向某个地图的id或name
超链接 a 属性：href 锚点：跳转到锚点: 跳转
表格： table tr: table-row td:table-data 属性：border cellspacing:每个单元格之间的间距， cellpadding：单元格和内容的距离

表格属性续

colspan: column(列) span 合并列
rowspan: row span 合并行

课程表练习参见 table5.html文件

行分组

在前端编程的时候，使用分组便于整体操作表格的头部体部和尾部

格式： table-head
caption标签，写在table标签内部，起到表格标题的作用
```
<table border="1">
    <caption>订单列表</caption>
</table>
```

表单 form

在浏览器中，浏览器向服务器发送数据，一般使用的都是表单表单内部的控件有：文本框，密码框，单选框，多选框，下拉列表，文件选择，时间选择，提交按钮。

文本框

用于获取用户输入的单行数据

格式：

<form action="提交地址">
    用户名：<input type="text" >
</form>

属性：name ，values：默认值，maxlength：最大长度，readonly：只读

密码框

格式：

<form action="提交地址">
    密码：<input type="password" >
</form>

单选

格式：

性别：<input type="radio">男<input type="radio">女

属性：name：多个单选控件的name值要一致，value:提交数据时会把value的值提交到服务器，checked:设置选中

复选框（多选）

格式：

爱好：<input type="checkbox" name="hobby" value="dy">电影
    <input type="checkbox" name="hobby" value="cg">唱歌
    <input id="lq" type="checkbox" name="hobby" value="lq">篮球

标签 label

格式：
```
<label for="lq">篮球<label>
```

文件选择

选择上传的文件
格式：
```
靓照:<input type="file" name="pic">
```

日期选择

格式：

生日:<input type="date" name="birthday">

隐藏域

格式：

<input type="hidden" name="id" value="1">

作用：此控件用户看不到，有些场景需要提交一部分用户不需要看到的数据，比如修改数据时的id

文本域 textarea

输入多行数据时使用

格式：

个人介绍:<textarea name="intro" rows="3" cols="30">这个人很懒。。。。
</textarea>

下拉选

格式：

<select name="city">
    <option>选择城市：</option>
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gz">广州</option>
</select>

按钮

提交按钮：
```
<input type="submit" value="注册">
```
重置按钮：
```
<input type="reset" value="重置">
```
普通按钮：
```
<input type="button" value="按钮">
```

回顾

图像地图
超链接 a 属性 href 锚点 a href=#id/name
表格 table tr td th thead tbody tfoot caption ,table属性： border cellspacing单元格间距 cellpadding 内容和边框的距离，rowspan colspan
form表单 <input type=?
- text password radio checkbox date,file,hidden,button,submit,reset name value
- select option
- textarea

课程回顾

简历练习

注释

图像地图 map

超链接 a

a标签锚点的使用

表格标签

回顾上午内容：

表格属性续

课程表练习 参见 table5.html文件

行分组

表单 form

文本框

密码框

单选

复选框（多选）

标签 label

文件选择

日期选择

隐藏域

文本域 textarea

下拉选

按钮

回顾

作业： 把form和table结合一起写个注册页面

课程表练习参见 table5.html文件

作业：把form和table结合一起写个注册页面