第二单元：文字与列表

最新推荐文章于 2024-09-18 10:06:00 发布

HelloAkr

最新推荐文章于 2024-09-18 10:06:00 发布

阅读量159

点赞数

分类专栏： html 文章标签： html java python javascript

本文链接：https://blog.csdn.net/wanshi1405088661qq/article/details/105202100

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第二单元：文字与列表

语义化使用HTML标签

什么是语义化的去使用标签呢？，用着相应有一定意义的标签去表示，对于自己看来不会凌乱，别人看你的代码也容易根据标签意思一步一步来阅读你的网页，不要去使用一些不搭边的标枪（作者就以前看过有些憨憨用h6标签去定义一个加粗文字）。

如何知道自己的网页是否符合语义化

我们去掉我们网页中的css样式效果就只剩下我们的html标签，看一下是否是头就是头、脚就是脚，这剩下标签，如果符合标准那就是语义化的标签。

当然语义化本身就是标签中体现了，比如h1标签就是，headline标题的单词首字母，p标签是paragraph段落单词的首字母，等等许多，望大家能够使用标签语义相符去编写HTML文档。

1.常用的文字标签

标题

标题（Heading）是通过 h1 - h6 标签进行定义的.

实例

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是一个标题。</h1> 
	<h2>这是一个标题。</h2> 
	<h3>这是一个标题。</h3> 
</body>
</html>

水平线

hr 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。

实例

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
</body>
</html>

段落

段落是通过 p标签定义的。

实例

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<p>这是一个段落 </p>
<p>这是另一个段落</p>
</body>
</html>

换行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
标签。

在 HTML 语言中br标签定义为一个换行符，它可以理解为简单的输入一个空行，而不是用来对内容进行分段。

实例

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这个<br>段落<br>演示了分行的效果</p>
</body>
</html>

注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

HTML 注释可以方便地用来帮助网页设计人员，提醒他们与程序相关的信息。
实例

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 这是一个注释 --> 
</body>
</html>

2.特殊字符

在我们html毕竟使用字符标记什么的，所以也就造就了一个点就是一些特殊字符是保留的，要用特殊的形式来表达出来。

常用的实体字符

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
’	撇号	' (IE不支持)	'
￠	分	¢	￠
￡	镑	£	￡
￥	人民币/日元	¥	￥
？/td>	欧元	€	？/td>
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷

3.列表

列表绝对是日常生活中，非常实用的数据排列方式，以一条一条的形式将数据展现在你的眼前，来体现数据的顺序结构。

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表适合成员之间无级别顺序关系的情况。

实例

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
    </ul>
</body>
</html>

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于

标签。每个列表项始于
标签。

有序列表适合各项目之间存在顺序关系的情况。

列表项项使用数字来标记。

实例

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>Coffee</li>
        <li>Milk</li>
    </ol>
</body>
</html>

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以

标签开始。每个自定义列表项以开始。每个自定义列表项的定义以

开始。

自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有也术语名或者只有定义也是可行的，也就是说

与

在其中数量不限、对应关系不限。

实例

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>
</body>
</html>