html语法实现列表与表格
文章目录:
写在最前,第二天学习目标:
列表 表格 表单
元素为嵌套关系
1.列表
作用:布局内容排列整齐的区域。
列表分类:无序列表、有序列表、定义列表。
1.1 无序列表
作用:布局排列整齐的不需要规定顺序的区域。
标签:ul嵌套li,ul是无序列表，li是列表条目。
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
......
</ul>
注意事项:
- ul标签里面只能包裹li标签
- li标签里面可以包裹任何内容,li标签内容自动换行
1.2 有序列表
作用:布局排列整齐的需要规定顺序的区域。
标签:ol嵌套li，ol是有序列表，li是列表条目。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
......
</ol>
效果如下:
多了1,2,3的序号
1.3 定义列表
标签:dl嵌套dt和dd,
dl是定义列表,dt是定义列表的标题,dd是定义列表的描述 / 详情。
<d>
<dt>列表标题</dt>
<dd>列表描述/详情</dd>
....
</dI>
注意事项:
- dl里面只能包含dt和dd
- dt和dd 里面可以包含任何内容
<dl>
<dt>服务中心</dt>
<dd>申请售后</dd>
<dd>售后政策</dd>
</dl>
效果如下:
2.表格
2.1 表格基本结构
标签: table嵌套tr , tr 嵌套 td / th。
<table border="1">
<tr>
<th>标签名</th>
<th>说明</th>
</tr>
<tr>
<td>table</td>
<td>表格</td>
</tr>
<tr>
<td>tr</td>
<td>行</td>
</tr>
<tr>
<td>th</td>
<td>表格单元头</td>
</tr>
<tr>
<td>td</td>
<td>内容单元头</td>
</tr>
</table>
提示:在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。
代码样例如下:
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>
效果如下:
2.2 表格结构标签
注意:这个不是给用户和前端程序员看的,是给计算机看的,计算机能够清晰的识别出这个表的基本结构
作用:用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。
<table border="1">
<tr>
<th>标签名</th>
<th>含义</th>
<th>特殊说明</th>
</tr>
<tr>
<td>thead</td>
<td>表格头部</td>
<td>表格头部内容</td>
</tr>
<tr>
<td>tbody</td>
<td>表格主体</td>
<td>表格主体区域</td>
</tr>
<tr>
<td>tfoot</td>
<td>表格底部</td>
<td>汇总信息区域</td>
</tr>
</table>
就是把之前写的代码,按照逻辑把这些标签放在他们的开头和结尾
2.3 合并单元格
作用:将多个单元格合并成一个单元格，以合并同类信息。
==合并单元格的步骤==:
1．明确合并的目标
2．保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量)
-跨行合并，保留最上单元格，添加属性 rowspan
-跨列合并，保留最左单元格，添加属性colspan
3．删除其他单元格
代码样例如下:
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
</tr>
</table>
效果如下:
注意:不能跨标签结构合并
