html基础（三）

最新推荐文章于 2024-12-16 16:52:23 发布

原创最新推荐文章于 2024-12-16 16:52:23 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

HTML+CSS 专栏收录该内容

17 篇文章

订阅专栏

本文深入探讨HTML中的表格和列表元素，包括<table>、<tr>、<td>、<th>、<span>和<div>等标签的使用技巧，讲解如何创建复杂表格结构，以及如何利用列表简化网页内容组织。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

表格
列表
区块

表格

首先附上菜鸟教程table教程

表格由 <table>标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="3px">
        <caption>表格标题（可略）</caption>
        <tr>
              <th>表头用`th`<th/>
              <th>功能
        <tr/>
        <tr>
            <td>行用td
            <td>功能
            <tr/>
            <tr>
            <td>1<td/>
            <td>2<td/>
        </tr>
        <tr>
            <td> <img  width=78  src="http://www.yama.gz.cn/b.png"  style="border:groove 10px;"> <td/>
            <td>4<td/>
        <tr/>
        <tr>
            <td colspan="2">请注意我跨了两格
            <td>2<td/>
        <tr/>
        <tr>
            <td>1<td/>
            <td>2<td/>
        <tr/>
        <tr>
          <th>First Name:</th>
          <td>Bill Gates</td>
        </tr>
        <tr>
          <th rowspan="2">请注意我跨了两行</th>
          <td>555 77 854</td>
        </tr>
        <tr>
          <td>555 77 855</td>
        </tr>
    </table>

1、请注意结合我残缺的表格分析代码，表格显示并不理想，在Chrome和优快云编辑页中有所不同，csdn中标签<tr>不闭合才会显示正常，否则会像第二、第三行一样多显示列

2、尽量定义边框

3、在csdn中不需设置，因为它显示得很好，但在实际开发中还需设置cellpadding="20"来创建单元格内容与其边框之间的空白,如果有需要还可设置cellspacing="10"来增加单元格之间的距离

表格标题（可略）
表头用`th`		功能
行用td	功能
1		2
		4
请注意我跨了两格		2
1		2
First Name:	Bill Gates
请注意我跨了两行	555 77 854
请注意我跨了两行	555 77 855

表格看起来比较乱，注意结合代码分析 border-bottom缩写属性设置一个声明中所有底部边框属性。分别为（按顺序）：border-bottom-width, border-bottom-style,和border-bottom-color，
附上关于border-bottom-style的[菜鸟教程](https://www.runoob.com/cssref/pr-border-bottom-style.html) 表格源于菜鸟教程点击查看源码
列表

列表很简单，没啥好说的，例如

Coffee
- black hot drink
Milk
- white cold drink

附菜鸟列表学习链接
值得一讲的是优快云的文章编辑页面，不得不感叹很强大，但是也有许多吐槽的地方，相信对html略有了解之后对这个编辑页面也会与更多的认识，比如优快云中插入居中的图片曾困扰我挺久，但是认识<img>之后就解决了这个问题，对于列表、链接等等许多东西可以自己写，而不是非要用优快云提供的方法

区块

以往对html不熟悉不会设置标签位置或者说难以操控位置（某些标签可能没有这个属性）
我就会把它套在一个<div>里，这样直接操控<div>就行了。

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>

HTML <div> 元素（由于技术原因，下面用div代指）

HTML div元素是块级元素，它可用于组合其他 HTML 元素的容器,div标签定义 HTML 文档中的一个分隔区块或者一个区域部分,没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示==折行==，（我记得此前写过其他拆行方法点击查看）
如果与 CSS 一同使用，标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。div 元素可用于对大的内容块设置样式属性。
div元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用table元素进行文档布局不是表格的正确用法（当然也可以）。但是table标签是不建议作为布局工具使用的 - 表格不是布局工具table元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span>元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。