Html读书随记2

最新推荐文章于 2023-04-12 07:58:50 发布

无关风月.

最新推荐文章于 2023-04-12 07:58:50 发布

阅读量222

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_49399033/article/details/117267714

版权

笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文详细介绍了HTML中的三种列表类型：有序列表、无序列表和定义列表，以及如何通过type属性改变列表项符号。此外，还讲解了表格的基本结构，包括table、tr、td标签，以及caption、th和td的区别。强调了HTML语义化的重要性，特别是thead、tbody和tfoot在表格语义化中的作用。最后，提到了rowspan和colspan属性用于合并单元格。

摘要由CSDN通过智能技术生成

列表

列表是网页中最常用的一种数据排列方式
在HTML中，列表共有3种：有序列表、无序列表和定义列表。
有序列表
在有序列表中，列表项之间有先后顺序之分。
有序列表从<ol>开始，到</ol>结束。在有序列表中，一般采用数字或字母作为顺序，默认采用数字。
有序序列语法
在该语法中，<ol>和</ol>标志着有序列表的开始和结束，而<li>和< /li>标签表示这是一个列表项。一个有序列表可以包含多个列表项。
举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>有序列表</title>
</head>
<body>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ol>
</body>
</html>

ps:若想改变表项符号"1234"，可使用type属性 type属性:
在HTML中，我们可以使用type属性来改变列表项符号。在默认情况下，有序列表使用数字作为列表项符号。

在这里插入图片描述

其中，type属性值如下
type属性取值

无序序列
无序列表，很好理解，有序列表的列表项是有一定顺序的，而无序列表的列表项是没有顺序的。

默认情况下，无序列表的列表项符号是●，我们可以通过type属性来改变其样式。

无序序列语法
type属性
用于无序序列的type取值

定义列表
在HTML中，定义列表由两部分组成：名词和描述。
定义列表语法
大体样式
在HTML入门阶段，了解一下就行。

HTML语义化

HTML的精髓就在于标签的语义。在HTML中，大部分标签都有它自身的语义。例如，p标签，表示的是paragraph，标记的是一个段落；h1标签，表示的是header1，标记的是一个最高级标题。但div和span是无语义的标签，我们应该优先使用其他有语义的标签。

语义化是非常重要的一个思想。在整站开发中，编写的代码往往成千上万行，你现在的几行代码无法与其相提并论。如果全部使用div和span来实现，我相信你会看得头晕。要是某一行代码出错了怎么办？你怎么快速地找到那一行代码呢？除了可读性，语义化对于搜索引擎优化（即SEO）来说，也是极其重要的。

5-15

表格

基本结构
在HTML中，一个表格一般由以下3个部分组成。
表格：table标签。行：tr标签。单元格：td标签。
表格语法
<table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，而<td >和</td>表示单元格的开始和结束。
在表格中，有多少组“<tr ></tr>”，就表示有多少行。
表格标题
表格标题：caption
在HTML中，表格一般都会有一个标题，我们可以使用caption标签来实现。

一个表格只能有一个标题，也就是只能有一个caption标签。在默认情况下，标题位于整个表格的第一行。

使用标题的表格语法
表头单元格：th

在HTML中，单元格其实有两种：一种是“表头单元格”，使用的是th标签；另一种是“表行单元格”，使用的是td标签。

显示上：浏览器会以“粗体”和“居中”来显示th标签中的内容，但是td标签不会。
语义上：th标签用于表头，而td标签用于表行。

使用表头单元格的表格语法
语义化

语义化
一个完整的表格包含：table、caption、tr、th、td。为了更进一步地对表格进行语义化，HTML引入了thead、tbody和tfoot这3个标签。

thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚。有了这些标签，表格语义更加良好，结构更加清晰，也更具有可读性和可维护性。

语义化的表格语法

(表脚（tfoot）往往用于统计数据。对于thead、tbody和tfoot标签，不一定需要全部都用上，如tfoot就很少用。一般情况下，我们根据实际需要来使用这些标签。)

Q: 对于表格的显示效果来说，thead、tbody和tfoot标签加了和没加是一样的，那为什么还要用呢？
A: 单纯从显示效果来说，确实如此。但是加了之后，可以让你的代码更具有逻辑性，并且还可以很好地结合CSS来分块控制样式。

合并行：rowspan
在HTML中，我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。
合并行语法

(所谓的合并行，其实就是将表格相邻的N个行合并。rowspan="n"实际上是让加上rowspan属性的这个td标签跨越n行。)

合并列：colspan
基本与合并行相同。
合并列语法

6-10

无关风月.

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html读书随记2

列表列表是网页中最常用的一种数据排列方式在HTML中，列表共有3种：有序列表、无序列表和定义列表。有序列表在有序列表中，列表项之间有先后顺序之分。有序列表从开始，到结束。在有序列表中，一般采用数字或字母作为顺序，默认采用数字。在该语法中，和标志着有序列表的开始和结束，而和标签表示这是一个列表项。一个有序列表可以包含多个列表项。举例: 有序列表 HTML CSS JavaScript jQue
复制链接

扫一扫