学习目标:
- 掌握列表标签实现网页中列表结构的搭建
- 掌握表格标签及其属性实现网页中表格结构的搭建
- 掌握表单标签及其属性实现表单网页的搭建
学习内容:
- 列表标签
- 表格标签
- 表单标签
- 综合案例
一、列表标签:
目标:能够使用无序列表、有序列表、自定义列表标签,实现网页中列表结构的搭建
(一)列表的使用场景
1、场景
在网页中按照行展示关联性的内容,例如账单、排行榜等。
2、特点
按照行的方式,整齐显示内容。
3、种类
无序列表、有序列表、自定义列表
3.1无序列表(最常用)
3.1.1场景
在网页中表示一组无顺序之分的列表,例如新闻列表。
3.1.2标签组成
<ul>
<li></li>
</ul>
ul:表示无序列表的整体,用于包裹li标签。注意:ul标签中只允许包括li标签。
li:表示无序列表中的每一项,包含每一行的内容。li标签可以包含任意内容。
3.2有序列表(偶尔用)
3.2.1场景
在网页中表示一组有顺序之分的列表,例如排行榜。
3.2.2标签组成
<ol>
<li></li>
</ol>
ol: 表示有序列表的整体,ol标签中只允许包括li标签。
li: 表示有序列表中的每一项,包含每一行的内容。li标签可以包含任何内容。
3.3自定义列表(底部导航用)
3.3.1场景
在网页的底部导航中通常使用自定义列表实现
3.3.2标签组成
<dl>
<dt>主题</dt>
<dd>针对主题的每一项内容</dd>
</dl>
dl:表示列表的整体,用于包裹dt/dd标签。dl标签中只允许包含dt/dd标签。
dt:表示自定义列表的主题。
dd:表示针对dt主题解释的每一项内容。dt/dd标签可以包含任意内容。
3.4小结
正确答案:D
二、表格标签:
(一)表格列表的基本标签
1、场景
在网页中以行跟列的单元格的方式整齐显示数据,例如学生成绩表。
2、基本标签
标签名 | 说明 |
---|---|
table | 表示表格的整体,可以包含多个tr |
tr | 表示表格的每一行,可以包含多个td |
td | 表示单元格,用于包裹内容 |
<table>
<tr>
<td></td>
</tr>
</table>
(二)表格相关属性
1、属性作用
设置表格基本展示效果
2、常见相关属性
属性名 | 属性值 | 效果 |
---|---|---|
border | 数字 | 边框的宽度 |
width | 数字 | 表格的宽度 |
height | 数字 | 表格的高度 |
3、注意点
实际开发中针对样式效果推荐使用CSS设置。
(三)表格标题和表头单元格标签
1、使用场景
在表格中表示整体大标题和一列小标题
2、标签
标签名 | 名称 | 说明 |
---|---|---|
caption | 表格大标题 | 表示表格整体大标题,默认在表格整体顶部居中位置显示 |
th | 表头单元格 | 表示一列小标题,默认内部文字加粗并居中显示 |
3、注意点
caption标签写在table标签内部;
th标签写在tr标签内部(用于替换td标签)。
(四)表格的结构标签
1、使用场景
让表格的内容分组,突出表格的不同部分(头部、主体、尾部),使语义更加清晰。
2、结构标签
标签名 | 名称 |
---|---|
thead | 表格头部 |
tbody | 表格主体 |
tfoot | 表格尾部 |
3、注意点
表格结构标签内部用于包裹tr标签;
表格结构标签可以省略。
(五)合并单元格
1、使用场景
将水平或者垂直多个单元格合并成一个单元格。
2、合并单元格步骤
2.1明确合并哪几个单元格
2.2通过左上原则,确定保留谁删除谁。
上下合并:只保留最上面的那一个单元格,其他都删除。
左右合并:只保留最左边的那一个单元格,其他都删除。
2.3给保留的单元格设置
跨行合并(rowspan)或者跨列合并(colspan)
属性名 | 属性值 | 说明 |
---|---|---|
rowspan | 合并单元格的个数 | 跨行合并,将多行的单元格垂直合并 |
colspan | 合并单元格的个数 | 跨列合并,将多列的单元格水平合并 |
3、注意点
只有同一个结构标签中的单元格才能合并,不能跨结构合并(不能跨:thead、tbody、tfoot)。
三、表单标签
(一)input系列标签
1、使用场景
在网页中显示收集用户信息的表单效果,如登录、注册。
2、标签名
input:input标签可以通过type属性值的不同,展示不同的效果。
3、type属性值
3.1文本框
3.1.1使用场景
在网页中显示输入单行文本的表单控件·。
3.1.2代码
type的属性值:text
<input type="text" placeholder=“请输入您的昵称">
type的属性值:text
type常用属性:placeholder,占位符,提示用户输入内容的文本。
3.2密码框
3.2.1使用场景
在网页中显示输入密码的表单控件·。
3.2.2代码
type的属性值:password
<input type="password" placeholder="请输入密码">
3.2.3注意点
type属性值不要拼错或者多加空格,否则相当于设置了默认值状态:text
3.3单选框
3.3.1使用场景
在网页中显示多选一的表单控件·。
3.3.2代码
type的属性值:radio
<input type="radio" name="sex" checked>男
<input type="radio" name="sex" >女
3.3.3注意点
name属性对于单选框有分组功能
有相同name属性值的单选框为一组,一组中只能同时有一个被选中。
3.4复选框
3.4.1使用场景
在网页中显示多选多的多选表单控件
3.4.2代码
type的属性值:checkbox
<input type="checkbox" checked>音乐
<input type="checkbox">舞蹈
<input type="checkbox">羽毛球
<input type="checkbox">零食
3.5文件选择
3.5.1使用场景
在网页中显示文件选择的表单控件
3.5.2代码
type属性值:file
<input type="filke" multiple>
3.6按钮
3.6.1使用场景
在网页中显示不同功能的按钮表单控件
3.6.2代码
type属性值:
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">
3.6.3注意点
如果需要实现以上按钮功能,需要配合form标签使用
form使用方法:用form标签把表单标签一起包裹起来就可以了。
(二)button按钮标签
1、使用场景
在网页中显示用户点击的按钮
2、标签名及属性值
标签名 | type属性值 | 说明 |
---|---|---|
button | submit | 提交按钮,点击之后提交数据给后端服务器 |
button | reset | 重置按钮,点击之后恢复表单默认值 |
button | button | 普通按钮,默认无功能,之后配合js添加功能 |
<button type="submit"></button>
<button type="button">普通按钮</button>
3、注意点
谷歌浏览器中button默认是提交按钮
button标签是双标签,更便于包裹其他内容:文字、图片等。
(三)下拉菜单标签
1、使用场景
在网页中提供多个选择的下拉菜单表单控件
2、标签组成
标签名 | 说明 |
---|---|
select | 下拉菜单的整体 |
option | 下拉菜单的每一项 |
3、常见属性
selected:默认选中
(四)文本域标签
1、使用场景
在网页中提供可输入的多行文本的表单控件
2、标签名及常见属性
标签名:textarea
常见属性:
cols:规定了文本域内可见的宽度
rows:规定了文本域内可见的行数。
3、注意点
右下角可以拖拽改变大小。
实际开发时这五年对样式效果推荐使用CSS设置。
(五)label标签
1、使用场景
常用于绑定内容与表单标签的关系。
2、使用方法
2.1方法一
使用label标签把内容包裹起来;
在表单标签上添加id属性;
在label标签的for属性中设置对应的Id属性值。
2.2方法二
直接使用label标签吧内容和表单标签一起包裹起来;
需要把label标签的for属性删除。
四、综合案例
(一)会员注册案例
1、代码
<h1>青春不常在,抓紧谈恋爱</h1>
<hr >
<p>昵称:<input type="text" name="" id="" placeholder="请输入昵称"></p>
<p>性别:
<label><input type="radio" name="sex" id="" checked>男</label>
<label><input type="radio" name="sex" id="" >女</label>
</p>
<p>所在城市:
<select name="">
<option >上海</option>
<option >北京</option>
<option >广州</option>
<option >深圳</option>
</select>
</p>
<p>婚姻状态:
<label><input type="radio" name="ss" id="" checked>未婚</label>
<label><input type="radio" name="ss" id="">已婚</label>
<label><input type="radio" name="ss" id="">保密</label>
</p>
<p>喜欢的类型:
<label><input type="checkbox" name="" id="" checked>可爱</label>
<label><input type="checkbox" name="" id="" checked>性感</label>
<label><input type="checkbox" name="" id="" >御姐</label>
<label><input type="checkbox" name="" id="" >萝莉</label>
<label><input type="checkbox" name="" id="" >小鲜肉</label>
<label><input type="checkbox" name="" id="" >大叔</label>
</p>
<p>个人介绍:</p>
<textarea rows="10" cols="60">
</textarea>
<h4>我承诺</h4>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<p><input type="checkbox" name="" id="">我同意所有条款</p>
<input type="button" value="免费注册">
<input type="reset" name="" />
</form>
</body>
2、结果图
(二)小说排行榜
1、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" width="800" height="100">
<caption><h3>今日小说排行榜</h3></caption>
<tr><th>排名</th><th>关键字</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="images/up.jpg" ></td>
<td>65589</td>
<td>45</td>
<td>
<a href="http://www.tieba.com">贴吧</a>
<a href="http://image.baidu.com">图片</a>
<a href="http://www.baike.com">百科</a>
</td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="images/down.jpg" ></td>
<td>1</td>
<td>456</td>
<td>
<a href="http://www.tieba.com">贴吧</a>
<a href="http://image.baidu.com">图片</a>
<a href="http://www.baike.com">百科</a>
</td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="images/up.jpg" ></td>
<td>2</td>
<td>456</td>
<td>
<a href="http://www.tieba.com">贴吧</a>
<a href="http://image.baidu.com">图片</a>
<a href="http://www.baike.com">百科</a>
</td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td><img src="images/up.jpg" ></td>
<td>4567</td>
<td>456</td>
<td>
<a href="http://www.tieba.com">贴吧</a>
<a href="http://image.baidu.com">图片</a>
<a href="http://www.baike.com">百科</a>
</td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="images/down.jpg" ></td>
<td>7895</td>
<td>456</td>
<td>
<a href="http://www.tieba.com">贴吧</a>
<a href="http://image.baidu.com">图片</a>
<a href="http://www.baike.com">百科</a>
</td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="images/up.jpg" ></td>
<td>4254</td>
<td>456</td>
<td>
<a href="http://www.tieba.com">贴吧</a>
<a href="http://image.baidu.com">图片</a>
<a href="http://www.baike.com">百科</a>
</td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="images/up.jpg" ></td>
<td>456</td>
<td>456</td>
<td>
<a href="http://www.tieba.com">贴吧</a>
<a href="http://image.baidu.com">图片</a>
<a href="http://www.baike.com">百科</a>
</td>
</tr>
</table>
</body>
</html>