列表概述
概念
- 列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的样式显示出来
列表分类
- 无序列表
- 有序列表
- 自定义列表
无序列表
概念
- 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
<!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> 
3179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
