【前端web入门第二天】01 html语法实现列表与表格_合并单元格

简介: 本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`<ul>`嵌套`<li>`)、有序列表(`<ol>`嵌套`<li>`)和定义列表(`<dl>`嵌套`<dt>`和`<dd>`)。

html语法实现列表与表格

文章目录:


写在最前,第二天学习目标:

列表 表格 表单

image.png

元素为嵌套关系


1.列表

作用:布局内容排列整齐的区域。
列表分类:无序列表、有序列表、定义列表。

image.png

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>

效果如下:
image.png

多了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>

效果如下:
image.png


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>

效果如下:
image.png


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 合并单元格

作用:将多个单元格合并成一个单元格,以合并同类信息。
image.png

==合并单元格的步骤==:
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>

效果如下:
image.png

注意:不能跨标签结构合并

相关文章
|
20天前
|
前端开发 JavaScript 测试技术
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
11天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
13天前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
45 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
|
14天前
|
前端开发 JavaScript 开发者
web前端需要学什么
web前端需要学什么
|
16天前
|
前端开发 JavaScript 开发者
Web组件:一种新的前端开发范式
【10月更文挑战第9天】Web组件:一种新的前端开发范式
16 2
|
16天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
13天前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
72 0
|
13天前
|
存储 安全 前端开发
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
66 0
|
13天前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
61 0
|
14天前
|
编解码 前端开发 JavaScript
Web前端开发需要掌握哪些知识?
Web前端在最近几年发展的十分迅速,报名进行Web前端培训的同学也越来越多。移动互联网的背景之下,每一个人每天会跟各式各样的手机端应用打交道,殊不知这些App都跟Web前端有着密不可分的关系。