HTML列表标签,表格标签
列表应用场景
在网页中展示关联性的内容, 例如:新闻列表. 排行榜 网站首页底部导航
三种,无序列表,有序列表,自定义列表
无序列表
应用场景: 新闻列表 网页的导航 网页的侧边栏
<ul>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
.....
</ul>
无序列表有默认的小圆点后期css处理
ul里面只能包含li标签
li标签里面可以包含任意内容(元素)
有序列表
<ol>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
.....
</ol>
有序列表有默认的序号,后期css处理
ol里面只能包含li标签
li标签里面可以包含任意内容(元素)
自定义列表
应用场景:网页的底部导航(网页尾部)
<dl>
<dt>列表主题</dt>
<dd>列表主题的每一项内容</dd>
<dd>列表主题的每一项内容</dd>
....
</dl>
dd前面会有默认的缩进效果 后续css处理
dl标签里面只允许包含dt/dd标签
dt/dd标签里面可以嵌套任意内容(标签)
dt/dd是兄弟关系(千万不要写错了哟)
表格标签
表格基本标签
<table>
<tr>
<td></td>
<td></td>
<td></td>
....
</tr>
....
</table>
示例代码:
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>孙以龙</td>
<td>人妖</td>
<td>18</td>
</tr>
<tr>
<td>金金</td>
<td>女</td>
<td>19</td>
</tr>
<tr>
<td>德华</td>
<td>男</td>
<td>16</td>
</tr>
</table>
嵌套关系:
table>tr>td
表格属性
表格属性(table 属性):
border:设置边框
width:设置宽度
height:设置高度
align:对齐方式(取值:left(左对齐)|center(居中对齐)|right(右对齐))
rules:细线表格 属性是all(后续使用css修饰)
tr属性:
align:对齐方式(取值:left(左对齐)|center(居中对齐)|right(右对齐))
bgcolor:背景颜色
示例代码:
<table border="1" width="600" height="200" align="center" rules="all">
<tr align="center" bgcolor="red" height="50">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr align="center" bgcolor="green">
<td>孙以龙</td>
<td>人妖</td>
<td>18</td>
</tr>
<tr align="center" bgcolor="pink">
<td>金金</td>
<td>女</td>
<td>19</td>
</tr>
<tr align="center" bgcolor="yellow">
<td>德华</td>
<td>男</td>
<td>16</td>
</tr>
</table>
表格标题+表头单元格标签
<caption>表格标题</caption>
默认居中加粗显示,位于表格的第一行,td替换th即可.
<th>表头单元格标签</th>
示例代码:
<table border="1" width="600" height="200" align="center" rules="all">
<caption>
<h2>学生信息表</h2>
</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align=" center">
<td>孙以龙</td>
<td>人妖</td>
<td>18</td>
</tr>
<tr align="center">
<td>金金</td>
<td>女</td>
<td>19</td>
</tr>
<tr align="center">
<td>德华</td>
<td>男</td>
<td>16</td>
</tr>
</table>
表格结构标签
表格头部:
<thead></thead>
表格主体:
<tbody></tbody>
表格尾部:
<tfoot></tfoot>
示例代码:
<table border="1" width="600" height="200" align="center" rules="all">
<caption>
<h2>学生信息表</h2>
</caption>
<!-- 表格头部 -->
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<!-- 表格身体 -->
<tbody>
<tr>
<td>孙以龙</td>
<td>人妖</td>
<td>18</td>
</tr>
<tr>
<td>金金</td>
<td>女</td>
<td>19</td>
</tr>
<tr>
<td>德华</td>
<td>男</td>
<td>16</td>
</tr>
</tbody>
<!-- 表格的底部 -->
<tfoot>
<tr>
<td>总结</td>
<td>龙哥真浪</td>
<td>龙哥真浪</td>
</tr>
</tfoot>
</table>
表格合并
跨行合并(垂直合并)
rowspan
跨列合并(水平合并)
colspan
合并步骤:
1. 明确合并方式(跨行/跨列)
2. 通过左上原则,确定保留谁删除谁
• 上下合并→只保留最上的,删除其他单元格
• 左右合并→只保留最左的,删除其他单元格
3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
• `rowspan`:跨行合并→垂直方向合并
• `colspan`:跨列合并→水平方向合并
删除的单元格个数= 合并的个数-1
示例代码
<table border="1" width="800" height="200" rules="all" align="center">
<tr>
<td></td>
<td></td>
<!-- 跨行合并 -->
<td rowspan="3"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<td></td>
<!-- 跨列合并 -->
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
表单标签
input系列
文本框
<input type="text" placeholder="">
密码框
<input type="password" placeholder="">
单选框
<input type="radio" checked name="sex">男
<input type="radio" checked name="sex">女
多选框
<input type="checkbox" checked >
文件上传
multiple:多文件上传
<input type="file" multiple>
提交按钮
<input type="submit" value="提交">
重置按钮
<input type="reset" value="重置" >
普通按钮
<input type="button"value="普通按钮">
搜索框
<input type="search">
图像提交按钮
<input type="image" src="./img/btn.png" alt="">
placeholder:占位符
单选框设置相同的name属性值才可以实现多选一效果
checked 默认被选中
button系列
<button type="submit">提交按钮</button><br>
<button type="reset">重置按钮</button><br>
<button type="button">普通按钮</button><br>
select下拉系列
select:下拉菜单整体
option:下拉菜单的每一项
selected:默认选中下拉菜单的某一项
示例代码:
所在城市:
<select>
<option>请选择城市</option>
<option selected>上海</option>
<option>北京</option>
<option>深圳</option>
<option>广州</option>
<option>武汉</option>
</select>
文本域
<textarea placeholder="请您留言"></textarea>
label标签
提高用户体验
使用方法①:
使用label标签把内容(如:文本)包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
<label for="nan">男</label>
<input type="radio" name="sex" id="nan">
<label for="nv">女</label>
<input type="radio" name="sex" id="nv">
使用方法②:
直接使用label标签把内容(如:文本)和表单标签一起包裹起来
需要把label标签的for属性删除即可
<label>文本框:<input type="text"></label>
语义化标签
无语义化标签
<div>独占一行</div>
<span>一行显示多个</span>
有语义化标签
html5新增标签,IE9以上浏览器支持,后续移动端布局经常使用.
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>
小结
实际项目用地比较多多的标签
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<p>段落标签</p>
<em>倾斜</em>
<strong>加粗</strong>
<img src="图像路径" alt="替换文本" title="提示文本">
<a href="链接路径" target=_self>超级链接</a>
<a href="链接路径" target=_blank>超级链接</a>
<!--无序列表-->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
....
</ul>
<!--自定义列表-->
<dl>
<dt>自定义列表主题</dt>
<dd>自定义列表每一项</dd>
<dd>自定义列表每一项</dd>
<dd>自定义列表每一项</dd>
....
</dl>
<!--表格基本语法-->
<table>
<tr>
<td></td>
<td></td>
<td></td>
...
</tr>
...
<tr>
<td></td>
<td></td>
<td></td>
...
</tr>
...
</table>
<!--表单标签-->
文本框
<input type="text" placeholder="">
密码框
<input type="password" placeholder="">
单选按钮(单选按钮需要设置相同的name属性值,才可以实现单选效果)
<input type="radio">
多选框
<input type="checkbox">
搜索框
<input type="search" placeholder="">
普通按钮
<button type="button">普通按钮</button>
无语义化标签
<div>独占一行</div>
<span>一行显示多个,装不下会自动折行</span>