html中的表
一.列表
场景:在网页中按照行展示关联性的内容,如:新闻列表、排行榜、账单等
特点:按照行的方式,整齐显示内容
种类:无序列表、有序列表、自定义列表
1.无序列表
一般在网页导航或者相同样式等等内容中使用较多,运用标签为<ul>中嵌套<li>
,使用如下:
<h1>水果</h1>
<!-- 快捷键 ul>li{具体内容}*n 或者内容带数字递增的ul>li{$具体内容}*n $显示成从1开始依次递增-->
<!-- (无序列表)ul标签中只能放li标签,li标签则没有限制 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li><b>葡萄</b></li>
</ul>
效果如下:
2.有序列表
一般在类似排行榜中应用较多,运用标签为<ol>中嵌套<li>
,快捷键运用类似无序列表,使用如下:
<!-- (有序列表)ol标签中只能放li标签,li标签则没有限制 -->
<h1>成绩排行榜</h1>
<ol>
<li>小明:100</li>
<li>小红:90</li>
<li>小亮:80</li>
</ol>
效果如下:
3.自定义列表
在网页底部导航通常会使用,或者主题带几行描述的副主题也会使用。
使用如下:
<!-- (自定义列表)dl标签中只能放dt(主题),dd(内容)标签,而dd,dt标签则没有限制 -->
<dl>
<dt>帮助中心</dt>
<dd>账号管理</dd>
<dd>客服处理</dd>
<dd>服务进度</dd>
</dl>
效果如下:
二.表格
1.表格的基本标签
2.表格的相关属性
3.表格的标题和单元格标签
4.表格的结构化标签
让内容分组(头部,主体,底部),使结构更清晰,同时更加语义化。
5.合并单元格
合并单元格步骤如下:
- 1.明确合并哪几个单元格
- 2.通过左上原则,确定保留谁删除谁:
- 上下合并一只保留最上的,删除其他
- 左右合并一只保留最左的,删除其他
- 3.删除其他给保留的单元格设置:跨行合并 (rowspan)或者跨列合并 (colspan),其属性值为合并多少单元格
6.综合案例
代码如下:
<table border="1" width="400" height="200">
<caption><h3>优秀学生信息表格</h3></caption>
<thead>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">高三</td>
<td>小明</td>
<td>1</td>
<td>一班</td>
</tr>
<tr>
<td>小红</td>
<td>2</td>
<td>二班</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>评语</td>
<td colspan="3">你们都很优秀</td>
</tr>
</tfoot>
</table>
效果如下:
三.表单
1.input标签系列介绍
一般在网页中显示收集用户信息的表单效果,如:登录页、注册页,会使用标签input
input标签可以通过type属性值的不同,展示不同效果,具体如下
类似效果如下:
如果要在框内有提示用户输入的文本,那么使用placeholder属性
举例:昵称:<input type="text" placeholder="请输入昵称">
效果:
在使用radio单选框时,没法体现出单选的功能,这个时候需要label标签
2.label标签
常用于绑定内容与表单标签的关系,其标签名: label
有两种使用方法(推荐第一种):
- 1.使用label标签把内容(如: 文本)包裹起
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值 - 2.直接使用label标签把内容(如:文本)和表单标签一起包裹起来
需要把label标签的for属性删除即可
示例:
性别:<label><input type="radio" name="sex" checked>男</label>
<label><input type="radio" name="sex">女</label>
即可实现单选功能
3.多文件选择
在网页中显示文件选择的表单控件,type属性值: file,后面再添加属性名multipl
示例:<input type="file" multiple>
4.文本域标签
场景:在网页中提供可输入多行文本的表单控件标签名:
textarea常见属性:
- cols:规定了文本域内可见宽度
- rows:规定了文本域内可见行数
注意点
- 右下角可以拖拽改变大小
- 实际开发时针对于样式效果推荐用CSS设置
示例:<textarea cols="31" rows="11"></textarea>
5.下拉菜单
在网页中提供多个选择项的下拉菜单表单控件标签组成
- select标签:下拉菜单的整体
- option标签:下拉菜单的每一项
常见属性(在option中):
- selected:下拉菜单的默认选中
示例:
<select>
<!-- selected表示默认选中 -->
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
<option>深圳</option>
</select>
6.button按钮标签
在网页中显示用户点击的按钮,其标签名: button,type属性值 (同input的按钮系列)
示例:
<!-- button无固定功能,在应用中更加广泛 -->
<button>按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">提交按钮</button>
效果:
四.综合案例
<h1>青春不常在,抓紧谈恋爱</h1>
<hr>
昵称:<input type="text" placeholder="请输入昵称">
<br><br>
性别:<label><input type="radio" name="sex" checked>男</label>
<label><input type="radio" name="sex">女</label>
<br><br>
所在城市:
<select>
<option>上海</option>
<option selected>广州</option>
<option>北京</option>
</select>
<br><br>
喜欢的类型:
<input type="checkbox">可爱
<input type="checkbox">性感
<input type="checkbox">御姐
<br><br>
个人介绍:<br>
<textarea id="" cols="60" rows="10"></textarea>
<h3>我承诺</h3>
<ul>
<li>年满18</li>
<li>严肃</li>
<li>真诚</li>
</ul>
<input type="checkbox">我同意
<br>
<input type="submit" value="免费注册">
<button type="reset">重置</button>
效果如下: