【HTML5】->初步->文本级别语义讲解

最新推荐文章于 2022-02-10 09:00:00 发布

_为光

最新推荐文章于 2022-02-10 09:00:00 发布

阅读量718

点赞数 5

分类专栏： HTML5 文章标签： html 编程语言

本文链接：https://blog.csdn.net/qq_45627684/article/details/104414962

版权

HTML5 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

文本级别语义

Ⅰ 前言

在第一篇文章中，我讲解了几个HTML5的基本元素，这篇文章会再讲解几个常用的文本级别语义。我们先看一下HTML5中的元素有哪些。
在这里插入图片描述
可以看到这个像元素周期表一样的东西，就是HTML5中的语义了。我这篇文章先讲黄色部分的内容，也就是文本级别语义。
比如下面这张图👇

这是在WPS上编辑的，可以看到，我分别进行几个操作，加粗，斜体，下划线，删除线，以及加入链接。
接下来的部分我就会讲解这几个文本语义在HTML5中的用法。

Ⅱ 加粗 ``

加粗的命令就是，应用如下👇

<!DOCTYPE html>
<html>
<head>
	<title>text semantics</title>
</head>
<body>
<b>你是千堆雪</b>
</body>
</html>

于是就可以得到加粗效果了。
在这里插入图片描述

Ⅲ 斜体``

<em>我是长街。</em>

结果如下👇
在这里插入图片描述

Ⅳ 下划线``

<u>怕日出一到,</u>

结果如下👇
在这里插入图片描述

Ⅴ 删除线`<s></s>`

<s>彼此瓦解。</s>

运行结果如下👇
在这里插入图片描述

Ⅵ 超链接

这里需要多讲一点，前几个元素都是有固定的参数的，超链接需要稍微根据自己的需求多写一点。

<a href=""></a>

这是基本格式，双引号中间写网址，两个尖括号之间写名字。我们先试验一下。
我们先不带参数

<a href="https://baike.sogou.com/v64333429.htm?fromTitle=%E9%82%AE%E5%B7%AE%EF%BC%88%E7%8E%8B%E8%8F%B2%E6%BC%94%E5%94%B1%E6%AD%8C%E6%9B%B2%EF%BC%89">《邮差》</a>

打开文件后👇
在这里插入图片描述
可以看到，《邮差》已经是个超链接了。我们点进去可以看到，

注意，没有打开新的窗口，而是直接从我们的文件直接跳转进了一个新的网页。
比如我们进一个网站，里面会有很多别的信息，这些信息就是超链接，打开它们有的会弹出新的网页，有的会直接将当前页变成新的网页，这就是打开超链接的两种方式。
那么如何用HTML5实现这个呢？
在这里插入图片描述
我们需要在网页后面添加这行命令

target=""

双引号中有两个参数可以写，一个是target="_blank"，一个是target="_self"，其中blank就是打开一个新的窗口，self就是默认参数，从原网页中跳转。我们将参数设置为blank。

<a href="https://baike.sogou.com/v64333429.htm?fromTitle=%E9%82%AE%E5%B7%AE%EF%BC%88%E7%8E%8B%E8%8F%B2%E6%BC%94%E5%94%B1%E6%AD%8C%E6%9B%B2%EF%BC%89" target="_blank">《邮差》</a>

运行结果如下👇
在这里插入图片描述
可以看到，打开了一个新的窗口。
再多说一句，HTML5中的换行是 。

<!DOCTYPE html>
<html>
<head>
	<title>text semantics</title>
</head>
<body>
<b>你是千堆雪,</b>
<em>我是长街。</em>
<u>怕日出一到,</u>
<s>彼此瓦解。</s>
<br>
看着蝴蝶扑不过天涯，谁又有权不理解。
<br>
王菲
<a href="https://baike.sogou.com/v64333429.htm?fromTitle=%E9%82%AE%E5%B7%AE%EF%BC%88%E7%8E%8B%E8%8F%B2%E6%BC%94%E5%94%B1%E6%AD%8C%E6%9B%B2%EF%BC%89" target="_blank">《邮差》</a>
</body>
</html>