【前端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

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

相关文章
|
16天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
30 3
|
6天前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
13 3
|
13天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
11天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
11天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
18 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
17天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
30 3
|
17天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
17 3
|
17天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
33 2
|
Web App开发 前端开发 搜索推荐
从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等
大家好,这里是 Daotin 从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1424 0
|
1月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
100 3