HTML除了基本的布局标签以外,还有部分标签拥有强大的交互功能,比如表单标签,可以实现基本的登录注册操作。再者各种标签通过设置不同的属性,也可以实现一些交互效果。
一、HTML 标签属性
(一)、HTML属性
HTML属性指的是对元素的一种描述方式,其提供了更多有关HTML元素的信息
(二)、通用属性
通用属性指的是所有标签都拥有的属性
id
规定元素的唯一 idclass
规定元素的类名style
规定元素的行内样式title
规定元素的额外信息,当鼠标放在元素上,提示的文本内容
<!--以下代码是实际开发的案例-->
<div class="wrapper" id="wrapper" style="background:red;" title="此处鼠标悬停显示此段信息"></div>
(三)、自定义属性
HTML5规范中指定如果需要使用自定义属性,需要用
data-*
的方式,比如data-src
data-index
<!--以下代码是实际开发的案例,img标签显示的是缩略图,而data-src的值为点击显示原图的地址-->
<img src='./img/1.jpg' data-src='./img/big_1.jpg'>
二、table 表格标签
(一)、table表格
在Html中
<table>
标签表示一个表格,每个表格均有若干行(由<tr>
标签定义),每行被分割为若干单元格(由<td>
标签定义)
- 表格属性
border
:设置表格边框width
:设置表格宽度align
:设置表格对齐cellpadding
:设置单元格间距cellspacing
:设置像素间隙
- 常见表格展示
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td>ID</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男/td>
</tr>
</table>
(二)、td跨行\跨列属性
rowspan 属性定义单元格应该纵跨的行数
<!-- 单元格纵跨两列 -->
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
colspan 属性定义单元格应该横跨的列数
<!-- 单元格横跨两格 -->
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
(三)、table完全表格
一个完整table表格一般包含
<thead>
、<tbody>
、和<tfoot>
元素结合,用来规定表格的各个部分(表头、主体、页脚)
<thead>
标签用于组合 HTML 表格的表头内容<tbody>
标签用于组合 HTML 表格的主体内容<tfoot>
标签用于组合 HTML 表格的页脚内容
<!-- 完整表格实例 -->
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0" >
<thead>
<tr align="center">
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr align="center">
<td>王五</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td colspan="2">底部</td>
</tr>
</tfoot>
</table>
三、form 表单标签
(一)、form表单
<form>
表单是一个包含表单元素的区域,允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素
- 表单常用属性
name
属性:规定表单的名称action
属性:规定当提交表单时,向何处发送表单数据method
属性:规定如何发送表单数据(表单数据发送到 action 属性所规定的页面),常见的用post,get方式请求
(二)、表单元素
HTML 表单元素的有:
<input>
、<textarea>
、<button>
、<select>
<input>
标签:根据不同的type
属性,可以变化为多种状态输入方式<input type="text" />
: 定义供文本输入的单行输入字段<input type="password" />
:定义密码字段<input type="submit" />
:定义提交表单数据至表单处理程序的按钮<input type="radio" />
: 定义单选按钮checked {boolean}
:属性为选中状态,true为选中,false 为未选中
<input type="checkbox" />
: 定义复选框checked {boolean}
:属性为选中状态,true为选中,false 为未选中
<input type="button" />
: 定义普通按钮<input type="reset" />
: 定义重置按钮<input type="file" />
:定义文件框
<textarea>
标签:定义多行的文本输入控件<button>
标签:定义一个按钮,根据不同的type
属性展示不同按钮类型- button:定义普通按钮
- reset:定义重置按钮
- submit:定义提交按钮
<select>
标签:定义可单选或多选下拉菜单,包含若干个可选项(<option>
)
(三)、表单通用属性
表单通用属性的有:
name
、value
、readonly
、disabled
name
属性:规定输入字段名称value
属性:规定输入字段的初始值readonly
属性:规定输入字段为只读disabled
属性:规定输入字段是禁用的
四、iframe 框架标签
<iframe>
元素会创建包含另外一个文档的内联框架,也是镶嵌在一个网页中的另一个网页。相当网页中又嵌套了一个窗口
src
属性:规定在框架中显示的文档的 URLname
属性:规定框架的名称width
属性:iframe设置宽度height
属性:iframe设置高度frameborder
属性:设置框架边框scrolling
属性:设置滚动条
<!-- 此处是一个内嵌框架:地址为百度,宽度1200 高度500 无滚动条 框架边框为0 -->
<iframe src="http://www.baidu.com"
name="baiduIframe"
width="1200"
height="500"
frameborder="0"
scrolling="no">
</iframe>
五、课后作业
-
编写常用的标签,赋予HTML通用属性,自定义属性,并注释自定义属性的含义
-
通过所学table表格知识完成如下表格
-
基本表格
-
网格表格
-
综合表格
-
-
通过所学form表单完成如下表单
-
基本表单(包含:表单元素、文本域、下拉框、提交按钮)
-
综合表单
-
-
采用内嵌标签,把所想要内嵌的网站内嵌到您的网站下