列表概述
概念
- 列表就是信息资源的一种展示形式,它可以使信息结构化和条理化,并以列表的样式显示出来
列表分类
- 无序列表
- 有序列表
- 自定义列表
无序列表
概念
- 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul>
<li>速溶咖啡</li>
<li>美式</li>
<li>拿铁</li>
<li>摩卡</li>
</ul>
</body>
</html>
特性
- 没有顺序,每个<li>标签独占一行
- 默认<li>标签项前面有个实心小圆点
- 一般用于无序类型的列表,如导航、有规律的图文组合模块等
有序列表
概念
- 有序列表是一列项目,项目列表使用数字进行标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ol>
<li>速溶咖啡</li>
<li>美式</li>
<li>拿铁</li>
<li>摩卡</li>
</ol>
</body>
</html>
特性
- 有顺序,每个<li>标签独占一行
- 默认<li>标签项前面有顺序标记
- 一般用于排序类型的列表,如排行榜等
自定义列表
概念
- 不仅仅是一列项目,而是项目及其注释的组合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义列表</title>
</head>
<body>
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>桃子</dd>
<dd>西瓜</dd>
<dt>蔬菜</dt>
<dd>白菜</dd>
<dd>黄瓜</dd>
<dd>西红柿</dd>
</dl>
</body>
</html>
在上述代码中,dl表示定义列表,dt表示列表项,dd表示列表项内容
特性
- 没有顺序,每个<dt>标签、<dd>标签独占一行
- 默认没有标记
- 一般用于一个标题下有一个或多个列表项的情况
列表的嵌套
- 在无序列表中嵌套图片、超链接和文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>
<img src="haibao.jpg" alt="出错啦"/>
<a href="#">电影海报</a>
<p>介绍一部电影的海报</p>
</li>
<li>
<img src="猫咪.jpeg" alt="出错啦"/>
<a href="#">小猫咪</a>
<p>我是一只小猫咪!</p>
</li>
<li>
<img src="作业1.jpg" alt="出错啦"/>
<a href="#">作业</a>
<p>这是我的作业</p>
</li>
</ul>
</body>
</html>
嵌套列表
- 在无序列表中嵌套标题标签和有序列表
<ul>
<li>
<h4>代表春天的成语</h4>
<ol>
<li>春暖花开</li>
<li>鸟语花香</li>
</ol>
</li>
<li>
<h4>代表夏天的成语</h4>
<ol>
<li>烈日炎炎</li>
<li>挥汗如雨</li>
</ol>
</li>
<li>
<h4>代表秋天的成语</h4>
<ol>
<li>秋风落叶</li>
<li>秋风萧瑟</li>
</ol>
</li>
<li>
<h4>代表冬天的成语</h4>
<ol>
<li>白雪皑皑</li>
<li>天寒地冻</li>
</ol>
</li>
</ul>
实现在网页中创建表格
表格应用
表格常用于结构一致的数据
基本语法
在HTML中,表格由<table>标签定义,每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义)
- <table>…</table>:定义表格
- <tr>…</tr>:定义表格的行
- <td>…</td>:定义表格的列
创建表格
搭建一个两行两列的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搭建基本表格</title>
</head>
<body>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>
在上述代码中,table标签表示定义表格,其border属性表示表格的边框,若不添加border属性表格则不会出现边框。两个成对的tr标签,表示有两行,每个tr标签里面都有两列,即td标签。其中,“row 1, cell 1”表示第一行第一列,“row 1, cell 2”表示第一行第二列,“row 2, cell 1”表示第二行第一列,“row 2, cell 2”表示第二行第二列。
表格的跨行
- 表格可以通过“rowspan”属性实现跨行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格的跨行</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</table>
</body>
</html>
表格的跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格的跨列</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">张三</td>
</tr>
<tr>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td colspan="2">李四</td>
</tr>
<tr>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</table>
</body>
</html>
表格的跨行和跨列
- 如果同一个表格中需要实现跨行和跨列,那么可以将“rowspan”和“colspan”属性结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格的跨行和跨列</title>
</head>
<body>
<table border="1" >
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</table>
</body>
</html>
iframe框架
语法
- iframe 用于在网页内显示网页,其基本语法如下
<iframe src="url" frameborder="0" width="x" height="y"></iframe>
- 各个属性的解释如下:
- src属性用于规定在iframe中显示的文档的url
- frameborder属性用于是否显示iframe周围的边框,属性值默认为0,表示无边框;设置为1,表示有边框
- width属性用于设置iframe的宽度,默认单位是像素
- height属性用于设置iframe的高度,默认单位是像素
表单的使用
表单概念及应用
- 表单用于搜集不同类型的用户输入
表单的基本语法
在HTML中,可以用<form>标签定义表单,语法如下
<form action="提交表单" method="提交方法"> <!-- 表单元素 --> </form>
- <form>标签的属性解释如下:
- action属性定义在提交表单时执行的动作
- method属性规定在提交表单时所用的HTTP方法(GET 或 POST)
- 表单元素指的是不同类型的 input元素、复选框、单选按钮、提交按钮等等
表单元素格式
- <input>元素是最重要的表单元素,根据不同的type类型可以分为很多形态,其基本语法如下:
<input type="元素类型" name="元素名称" value="元素值">
- <input>标签的元素类型
文本框
- 概念
- 通过<input type="text"> 标签来设定,当用户要在表单中输入字母、数字等内容时,就会用到文本框
- 基本使用
<form>
用户名:<input type="text" name="userName" value="用户名" size="30" maxlength="10" ><br>
</form>
密码框
- 概念
- 通过标签<input type="password"> 来定义,其字符不会明文显示,而是以星号或圆点替代
<form>
密码:<input type="password" name="pass" size="20">
</form>
单选按钮
- 概念
- 通过<input type="radio">标签定义了表单单选按钮
<form>
<p>性别:</p>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</form>
- name属性表示单选按钮名称,是必需属性,同时同一组单选按钮,name属性值必须相同,才能在选中单选按钮时达到互斥
- value属性表示单选按钮的值,是必需属性
- checked属性表示单选按钮是选中状态,常用于希望在页面加载时单选按钮有一个默认的选项,就可以使用checked属性,需要注意的是,同一组单选按钮只能有一个默认的checked属性
复选框
- 概念
- 通过<input type="checkbox">定义了复选框,用户需要从若干给定的选择中选取一个或若干选项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<p>兴趣爱好:</p>
<input type="checkbox" name="like" value="sports">运动
<input type="checkbox" name="like" value="talk" checked>聊天
<input type="checkbox" name="like" value="play">打游戏
</form>
</body>
</html>
- name属性表示复选框名称,是必需属性。同一组复选框,根据需要可设置name属性值相同,也可不同
- value属性表示复选框的值,是必需属性
- checked属性表示复选框是选中状态,常用于希望在页面加载时复选框有一个默认的选项,就可以使用checked属性,同一组复选框中允许有多个复选框有默认的checked属性
提交按钮
- 概念
- 通过<input type="submit"> 定义了提交按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<input type="submit" name="butSubmit" value="submit按钮">
</form>
</body>
</html>
上述代码表示,当type取值为submit时为提交按钮,其各个属性解释如下:
- name属性表示提交按钮名称,是必需属性
- value属性表示按钮上显示的文字,是必需属性
表单应用
表单应用
- 下拉列表框——携程酒店预订模块
- 多行文本域
- 文件域
下拉列表框
基本语法
- 在HTML中,<select>标签可创建单选或多选下拉列表,其中,<select>标签中的<option>标签用于定义列表中的可用选项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select name="列表名称">
<option value="选项的值" selected="selected">第一位</option>
<option value="选项的值">第二位</option>
</select>
</html>
- <select>标签的属性解释如下:
- 完整的下拉列表框由<select>标签和 <option> 标签组成,一个<select>标签中至少包含一个<option>标签
- name属性表示列名称,是必需属性
- value属性表示选项的值,是必需属性
- selected属性表示默认选中项,一个列表框中只能有一个列表项默认被选中
- 使用下拉列表框实现城市的选择,并默认选中“北京”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉列表框</title>
</head>
<body>
<select name="city">
<option value="请选择">请选择</option>
<option value="beijing" selected="selected">北京</option>
<option value="shanghai">上海</option>
<option value="guagzhou">广州</option>
<option value="tianjin">天津</option>
<option value="chongqing">重庆</option>
<option value="wuhan">武汉</option>
<option value="changsha">长沙</option>
</select>
</body>
</html>
多行文本域
基本语法
- 在HTML中,<textarea>标签用于定义多行的文本输入控件。其中,name属性表示文本域名称,且可以通过 cols 和 rows 属性来规定文本域的尺寸
<textarea name="showText" cols="x" rows="y">文本内容</textarea>
文件域
- 在HTML中,<input type="file" > 用于文件上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件域</title>
</head>
<body>
<input type="file" name="files">
</body>
</html>
高级表单
- 只读文本框和禁用按钮在网页中的应用
隐藏域
- <input type="hidden" >用于定义隐藏字段,它的隐藏字段对于用户是不可见的
- 实现个人信息表单
- 代码中包含文本框、密码框、单选按钮、多行文本域以及提交按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单的高级应用</title>
</head>
<body>
<form>
<p>账号:<input type="text" name="userName"></p>
<p>密码:<input type="password" name="psd"></p>
<p>性别:<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女</p>
<p>自我评价<textarea name="text" cols="30"
rows="2">请填写内容...</textarea></p>
<p><input type="submit" value="提交信息"></p>
</form>
</body>
</html>
- 使用隐藏域将个人信息表单中的“账号”隐藏
-
<p>账号:<input type="hidden" name="userName"></p>
只读
- 在HTML中,readonly属性规定输入字段为只读,只读字段是不能修改的
<input type="text" name="userName" value="张三" readonly="readonly">
- 将个人信息表单中的“账号”设置为只读状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单的高级应用</title>
</head>
<body>
<form>
<p>账号:
<input type="text" name="userName" value="可乐Coca" readonly="readonly">
</p>
<p>密码:<input type="password" name="psd"></p>
<p>性别:<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女</p>
<p>自我评价<textarea name="text" cols="30"
rows="2">请填写内容...</textarea></p>
<p><input type="submit" value="提交信息"></p>
</form>
</body>
</html>
禁用
- disabled属性规定应该禁用 input元素,被禁用的input元素既不可用,也不可点击
<input type="submit" value="保存" disabled="disabled">
- 将个人信息表单中的“提交信息”按钮设置为禁用状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单的高级应用</title>
</head>
<body>
<form>
<p>账号:<input type="text" name="userName"
value="可乐Coca" readonly="readonly"></p>
<p>密码:<input type="password" name="psd"></p>
<p>性别:<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女</p>
<p>自我评价<textarea name="text" cols="30"
rows="2">请填写内容...</textarea></p>
<p><input type="submit" value="提交信息" disabled="disabled"></p>
</form>
</body>
</html>
HTML5新增的表单元素
类型 | 说明 |
---|---|
| 电子邮件地址文本框,提交表单时会自动验证email的值 |
url | 网页的URL,提交表单时会自动验证url的值 |
color | 主要用于选取颜色 |
search | 用于搜索引擎(搜索框) |
number | 只包含数值的字段,能够设定对所接受的数字的限定 |
range | 滑动条,特定值范围内的数值选择器 |
Date pickers | 拥有多个可供选取日期的新输入类型 |
- 概念
- 在HTML中,email类型用于应该包含email地址的输入域,在提交表单时,会自动验证email域的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<p>
<input type="email">
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
url
- 在HTML中,url类型用于应该包含url地址的输入域,在提交表单时,会自动验证url域的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<p>
<input type="url">
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
color
- 在HTML中,color类型具有预定义的颜色拾取界面。通常,这个域的预期值是十六进制数,如#000000(表示黑色)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<p>
<input type="color">
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
search
- 在HTML中,search类型用于搜索域,比如站点搜索或Google搜索,其显示为常规的文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<p>
<input type="search">
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
number
- 在HTML中,number类型用于应该包含数值的输入域,它还能设定对所接受的数字的限定。其有四个属性值,具体如下:
- min属性表示允许的最小值
- max属性表示允许的最大值
- step属性表示数字间隔
- value属性表示默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<p>
<input type="number" min="3" max="20" step="3" value="3">
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
range
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<p>
<input type="range" min="2" max="10" step="2" value="10">
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
Date pickers
- HTML5 拥有多个可供选取日期和时间的新输入类型,具体如下
- date:选取日、月、年
- month:选取月、年
- week:选取周和年
- time:选取时间(小时和分钟)
- datetime-local:选取时间、日、月、年(本地时间)
date
- 用于选取日、月、年,其基本使用如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<p>
<input type="date">
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
month
- 用于选取月、年,其基本使用如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<p>
<input type="month">
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
week
- 用于选取周和年,其基本使用如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<p>
<input type="week">
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
time
- 用于选取时间(小时和分钟),其基本使用如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<p>
<input type="time">
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
datetime-local
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<p>
<input type="datetime-local">
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
- 用于选取时间、日、月、年(本地时间),其基本使用如下:
placeholder
- placeholder为input类型的文本框提供一种提示,可以描述文本框期待用户输入的内容,提示语默认显示,当文本框中输入内容时提示语消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<p>
请输入用户名:
<input type="text" name="name" placeholder="用户名不能全是数字">
</p>
</form>
</body>
</html>
required
- required用于规定文本框填写内容不能为空,否则不允许用户提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="#" method="post">
<p>
用户名:
<input type="text" name="username" required/>
<input type="submit" value="提交"/>
</p>
</form>
</body>
</html>