Html5标签（列表、行级、文本格式、字符实体、语义化）

Vapaus_999

已于 2022-09-17 14:05:55 修改

阅读量403

点赞数

文章标签： html

于 2022-09-16 17:57:20 首次发布

本文链接：https://blog.csdn.net/Vapaus_/article/details/126894230

版权

一、

1.无序列表

(1)语法

<ul>

<li>内容<li>

……

</ul>

(2)语义

将没有数字顺序的一组数据或内容进行分组

(3)典型应用

新闻列表
产品列表

(4)type属性

disc列表样式实心圆
circle 列表样式空心圆
square列表样式为小方块
注意:type属性不常用，通常使用css属性替代。

2.有序列表

（1）语法

<ol>

<li>内容<li>

……

</ol>

(2)语义

将顺序是有意义的一组数据或内容进行分组

（3)默认样式（演示）

默认间距

列表样式：数字编号

注意:type属性不常用，通常使用css属性替代。

(4)type属性（了解）

a: 小写字母
A: 大写字母
i: 小写罗马数字
I: 大写罗马数字
1: 数字

3.定义列表

（1）语法

<dl>

……

</dl>

(2)语义

包含术语定义以及描述的列表

烹饪食谱中的各个步骤
指路时的各处转弯方向
营养信息标签上按含量排序的成分列表
面包屑导航

dl自定义列表、dt 自定义列表项、dd自定义列表项的注释（描述）

用于将一组项目及其相关的描述进行分组

(3)典型应用

默认dl，dd带有间距
名词解释、分类（大分类-细节的类别）
键-值对列表
注意:允许使用多条项目定义与描述。
允许使用带有多个描述的单个项目定义。

二、行级标签

1、图像

(1)语法

(2)标签属性

src属性
- 作用：用于指定图像文件的路径和文件名
- 注意：是<img>标签的必须属性
- 代码演示
alt属性
- 作用:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验
- 代码演示
width/height属性
- 作用:指定图片宽度/高度
- 注意：值可以不带单位默认px，只指定宽或高属性其中一个，另一个按照原比例等比缩放
- 代码演示

(3)默认样式

多张图片可以交列在一行显示
默认产生下间隙

(4)典型应用

作为内容展示的图像：产品图、广告图、详情页、文章页中插图。

(5)图像路径

页面中的图片会非常的多，通常我们会新建一个文件夹来存放这些图像文件images，这时候再查找图像，就需要通过路径的来描述图像文件的位置。路径可以分成，相对路径和绝对路径。

相对路径

概述:相对路径是指由这个文件所在位置为参考基础，而建立出的目录关系，常用的相对路径包括当前目录，上一级目录，下一级目录。

当前目录
- 语法
  
  一个点（.）后面跟一个斜杠表示当前目录也就是当前文件所在目录。
上一级目录
- 语法
  
  两个点（.）后跟一个斜杠表示前文件所在目录的上一级目录。
下一级目录
- 语法
  
  一个斜杠，表示图像文件位于HTML文件下一级。
- 绝对路径

绝对路径文件在目录中的绝对位置完整描述，常见的绝对路径一种由其在网络上的绝对位置定义的位置，一种是本地从盘符出发的绝对位置。

网络绝对位置
- 语法
  
  包括协议和域名：如：http://www.ujiuye.com/statics/images/logo.png
本地绝对位置
- 语法
  
  D盘下webset文件夹下的image文件夹中的logo.png描述为：
```
D:\webset\images\logo.jpg
```
特点:绝对URL始终指向同一位置，无论在何处使用

注意:在链接到同一网站内的其他位置时，应尽可能使用相对链接。链接到另一个网站时，需要使用绝对链接。

2、超链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。将文档链接到其他文档或资源，链接到文档的特定部分。

(1)语法

<a href="">文字或图片</a>

(2)语义

超链接

(3)默认样式

不独占一行
默认当前窗口打开
默认带有下划线、文字颜色

(4)超链接属性

href属性
- 作用：指定链接跳转的地址
target属性
- 作用：指定目标地址的打开方式
- 取值
  - _blank新窗口打开
  - _self当前窗口打开（默认值）
title属性
- 作用：定义提示文本，将鼠标悬停在链接上会显示标题作为工具提示

(5)链接的类型

空链接
- 描述：如果当时没有确定链接的目标时使用空链
外部链接
- 描述：链接到站外其他网站的链接（绝对地址）
内部链接（相对地址）
- 描述：网站内部页面之间的相互链接。直接链接内部页面的名称
下载链接
- 描述：如果href里面的地址是一个文件或压缩包，会下载这个文件。
- 代码演示
(6)锚点链接

描述：当我们点击锚点链接时，可以快速定位到页面中的某个位置。
- 跳转至当前页面指定位置的锚点
 - 语法：
```
定义目标： 
定义跳转：<a href="#box"></a>
```
- 跳转至其它页面的锚点
 - 语法：
```
定义目标：a.html页面的 <div id="box"></div>
定义跳转：<a href="a.html#test"></a>
```
总结：重点掌握内部链接，外部链接，锚点链接。

三、文本格式

1、

概述：在日常用语中，我们常常会加重某个字的读音，或者用加粗等方式突出某句话的重点。

与此类似，HTML 也提供了相应的标签，用于标记某些文本，使其具有加粗、倾斜、删除划线等效果。

2、em标签

(1)语法
```

```
(2)语义

强调，用于标记强调内容。

(3)默认样式
- 斜体显示
- 不独占一行
3、strong 标签

(1)作用

标记重要强调的内容。

为了强调重要的词，在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的效果。

(2)语法
```

```
(3)语义

着重强调

(4)默认样式
- 不独占一行
- 加粗显示
4、del标签

(1)作用

被从文档中删除的文字内容

(2)语法
```
<del></del>
```
(3)语义

删除的内容

(4)默认样式
- 带有中划线
- 不独占一行
(5)应用
- 价格中的原价
- 待办事项中已完成的项
5、I标签

(1)作用

区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等

(2)语法
```

```
(3)语义

无

(4)默认样式
- 斜体显示
- 不独占一行
6、b标签

(1)作用

定义粗体文本,用于吸引读者的注意到该元素的内容上。

(2)语法
```

```
(3)语义

没有语义

(4)默认样式
- 加粗
- 不独占一行
7、span标签

(1)作用

作为行内容器包含短语内容，通常用来区分文本样式。

(2)语法
```

```
(3)语义：无

(4)默认样式：无