1. 图片与超链接
1. 图片标签
<img src="">
默认按照图片原始尺寸显示
标签属性 ：
1. width : 取px为单位的像素值，设置图片宽度
2. height : 取像素值，设置图片的高度
3. title : 用来设置鼠标悬停于图片上方时的显示文本
4. alt : 当图片加载失败时显示的文本
注意 ：
宽高尺寸可以只给一个值，另外一个方向会自适应
2. 超链接标签
1. 什么是超链接
能够实现文件跳转的文本，叫超链接文本
2. 使用超链接
1. 语法 ：
<a href="链接地址">超链接文本</a>
注意 ：
1. href属性是必填项，省略的话，超链接文本跟
普通文本无差别
2. 如果是网络路径，必须加协议
3. 链接地址可以使网络路径，也可以是本地路径
2. 标签属性
target : 设置目标文件的打开方式，默认在当前窗口打开
取值 ：
1. _self : 默认值
2. _blank : 新建窗口打开目标文件
3. href 属性的特殊取值:
1. href="" :表示链接至本页面,包含刷新操作
2. href="javascript:void(0)" : 链接至本页,无刷新
3. href="#" :链接至本页的锚点位置,无刷新
3. 使用锚点链接
1. 通过定义锚点,实现跳转至指定文件的指定位置
2. 使用 :
1. 定义超链接,链接到本页的指定位置
2. 在页面相应位置添加锚点
et :
<a href="#7">7. 早年经历</a>
<a name="7"></a>
使用name属性定义锚点名称,超链接的链接地址中
使用#表示本页,跟上锚点名称,表示跳转至锚点位置
练习 :
模拟回到顶部
2. 表格标签
1. 语法 :
1. <table></table> 表示表格标签
2. <tr></tr> 表示表格中的一行 table row
3. <td></td> 表示行中的一个单元格 table data
et :
<table>
<tr>
//单元格
<td></td>
<td></td>
</tr>
<tr></tr>
<tr></tr>
</table>
2. 表格的标签属性
1. table 标签的属性
1. border
可以为表格设置边框,取像素值
2. width height
设置表格的宽高大小,取像素值.默认情况下,表格尺寸
由内容自适应
3. bgcolor
设置表格背景颜色,取英文单词
4. align
设置表格在父元素中的水平对齐方式
取值 : left(默认值) / center / right;
5. cellspacing
设置单元格与单元格之间的距离
取像素值
6. cellpadding
设置单元格内容与单元格边框之间的距离
取像素值
2. tr 标签的属性
1. bgcolor
设置行的背景颜色
2. align
设置单元格内容的水平对齐方式
取值 : left(默认) / center / right
3. valign
设置单元格内容的垂直对齐方式
取值 : top / middle(默认) / bottom
3. td 标签的属性
1. width height
设置单元格尺寸,取像素值
2. align valign
设置单元格内容的水平和垂直对齐方式
3. bgcolor
设置单元格的背景颜色
3. 单元格合并
单元格合并涉及表格结构的调整
1. 跨列合并
属性 : colspan
取值 : 无单位的数值,表示跨几列
2. 跨行合并
属性 : rowspan
取值 : 无单位的数值,表示跨几行
注意 :
1. 跨行和跨列是单元格的操作,所以属性是单元格td的
属性
2. 一旦发生单元格合并,要删除多余的单元格:
跨列合并 :
影响当前行中单元格的数量,删除当前行中多余单元格
跨行合并 :
影响其后行中的单元格数量,需要删除后面行中多余的
单元格
4. 表格行分组
表格在浏览器中渲染时,会自动添加结构标签
表格可以分为 thead tfoot tbody 三部分
1. thead
<thead></thead>标签用来划分表头
表头中可以有若干行组成
<thead>
<tr>
<td></td>
</tr>
</thead>
2. tfoot
<tfoot></tfoot>用于划分表尾,由若干行组成
3. tbody
<tbody></tbody>表示表格主体,默认情况下,所有的行
会自动加入tbody
注意 :
如果涉及在HTML代码中完整书写行分组标签,建议按照
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
顺序书写
3. 表单
1. 用来接收用户输入的数据并且提交给服务器
表单二要素
1. 表单元素
<form></form>
2. 表单控件
提供一系列可视化的组件,能够实现跟用户的交互
例如 : 输入框,按钮,文件上传等
2. 表单元素
1. 标签 :
<form></form>
用来提交数据到服务器,表单控件都应书写在form标签中
2. 标签属性
1. method
用来设置数据提交方式,取值 get / post
默认是get请求方式提交
get 请求 :
1. 数据会以参数的形式拼接在url后面
2. 安全性较低
3. 最大提交数据2kb
post 请求:
1. 数据会打包在请求头中,隐式提交
2. 安全性较高
3. 没有数据大小限制
2. action
必填,指定数据的提交地址
3. enctype
指定数据的编码方式,表单提供的编码类型有 :
1. application/x-www-form-urlencoded(默认)
将表单中的数据转换成字符串格式(name=zhangsan
&pwd=123456),附加在url后面,使用?与url隔开
2. multipart/form-data
专门用来上传特殊类型数据的,例如图片,文件,mp3
数据的提交方式必须是post
3. text/plain
数据以纯文本形式编码,不含任何控件和格式字符
3. 表单控件(重点)
1. 表单控件的数据只有放在表单元素中才可以被提交
2. 分类
1. 文本框和密码框
1. 语法 :
文本框 <input type="text">
密码框 <input type="password">
标签属性 :
1. type 指定控件类型
2. name 指定控件名称,缺少的话无法提交
3. value 指定控件的值,可以通过JS获取
4. maxlength 指定最大输入字符数
5. placeholder 设置提示文本
6. autocomplete 设置是否自动补全
2. 单选按钮和复选框
1. 语法 :
单选钮 : <input type="radio">
复选框 : <input type="checkbox">
2. 标签属性
1. name :
1. 定义控件名称
2. 一组的按钮控件名称必须保持一致,实现单选
2. value :
定义控件的值,最终将发送给服务器,按钮的value
属性必须指定
3. checked
表示选中当前按钮
3. 特殊用法 label for id
将按钮文本与按钮控件绑定在一起,实现点击文本与
点击控件等价的效果
使用 :
1. 使用<label></label>标签包括按钮文本
2. 为按钮控件添加id属性,属性值自定义
3. 为label标签添加for属性,属性值与控件的id属性
值保持一致,实现文本与控件绑定
3. 隐藏域和文件选择框
1. 隐藏域
需要提交给服务器,但是不需要呈现给用户的内容,
都可以使用隐藏域表示
例如 : 用户id
语法 :
<input type="hidden" name="uid" value="0001">
name定义控件名称,value设置控件的值,都是必填项
2. 文件选择框
1. 语法
<input type="file" name="">
2. 涉及二进制数据提交,文件,图片,mp3
需要设置form enctype属性,指定数据提交
方式为post
4. 下拉选择框
<select name="address">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
5. 文本域,可以支持多行输入
语法 :
<textarea name="uinfo"></textarea>
标签属性 :
cols : 指定文本域默认宽度,宽度是通过列数控制的
以英文字符数量为准,中文字符减半
rows : 指定文本域行数
特点 : 文本域的大小可以由用户手动调整
6. 按钮
分类 :
1. 提交按钮 :
点击时,将表单数据发送给服务器
<input type="submit" value="">
value 属性设置按钮的显示文本
2. 重置按钮 :
点击时,会将表单数据还原成默认状态
<input type="reset" value="">
3. 普通按钮
<input type="button" value="">
绑定自定义事件
4. <button>按钮显示文本</button>
1. 按钮标签,可以在HTML中任意地方使用,需要绑定
自定义事件
2. 如果按钮标签放在form标签中使用,默认具备提交
功能,等同submit