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

最新推荐文章于 2023-08-23 20:49:55 发布
最新推荐文章于 2023-08-23 20:49:55 发布
阅读量611 收藏 4
点赞数 5
分类专栏： HTML5 文章标签： html 编程语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45627684/article/details/104414962
版权

文本级别语义

Ⅰ 前言

在第一篇文章中，我讲解了几个HTML5的基本元素，这篇文章会再讲解几个常用的文本级别语义。我们先看一下HTML5中的元素有哪些。
在这里插入图片描述
可以看到这个像元素周期表一样的东西，就是HTML5中的语义了。我这篇文章先讲黄色部分的内容，也就是文本级别语义。
比如下面这张图👇
在这里插入图片描述
这是在WPS上编辑的，可以看到，我分别进行几个操作，加粗，斜体，下划线，删除线，以及加入链接。
接下来的部分我就会讲解这几个文本语义在HTML5中的用法。

Ⅱ 加粗 <b></b>

加粗的命令就是<b></b>，应用如下👇

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

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

Ⅲ 斜体<em></em>

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

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

Ⅳ 下划线<u></u>

<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中的换行是<br>。

<!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>

效果如下👇
在这里插入图片描述
好了，关于几个常用的文本级别语义我就说完了，大家可以再去尝试一下别的元素，下一篇文章我将会讲解几个表格元素。

_为光
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CVPR 2020 Oral | 妙笔生花新境界，语义级别多模态图像生成
我爱计算机视觉
04-03 1559
GAN已经成为图像生成的有力工具，现今GAN已经不再局限于生成以假乱真的图，而是向着更加灵活可操控的方向发展。今天向大家介绍的CVPR 2020 的文章出自华中科技大学白翔老师组，特别要...
1.HTML——文本级别语义
weixin_46319702的博客
03-22 219
文本级别语义 超链接：<a href> <a href="www.xxx.com" target="_blank">任曼</a> 新建一个窗口 <a href="www.xxx.com" target="_self">任曼</a>等价于<a href="www.xxx.com"任曼</a> ...
文本层次语义元素
无区新手的博客
04-02 1379
1.time元素 time元素用于定义时间或日期，可以代表24小时中的某个时间。time元素不会在浏览器中呈现任何特殊效果，但是该元素能以机器可读方式对日期和时间进行编码，这样，用户能够将生日提醒或其他事件添加到日程表中，搜索引擎也能够生成更智能的搜索结果。 time元素有两个属性。 （1）datetime：用于定义相应的时间或日期。取值为具体时间（如14：00）或具体日期（如2015-09...
html看了就会（一）html常用文本标签语义与样式
gisercug的博客
06-29 735
html常用文本标签语义与样式 em标签用于表示一段内容的着重点，指的是语气上的强调 strong标签用来表示内容上的重要性，指的是语义上的重要性 两者都表示强调的内容 <p> 今天天气真不错 </p> <p> <strong> 不好好学前端，没有高工资 </strong&...
volatile语义级别分析
weixin_42546729的博客
02-18 182
https://www.cnblogs.com/keeya/p/9255136.html 1。可见行 2、对变量的读写操作保证原子性，但是不能保证i++这类的操作因为这是三个操作也叫复合操作，这里里面包括了读取值 修改，写回到主内存。可能在前面读的时候拿到了最新的，但是可能其他线程在这个线程修改操作前，进行了修改然后相当于两个线程进行了相同的操作。 volatile读写建立的的happeds-before关系： java5也就是JSR-133以后volatile修饰的可以进行线程间通信，...
LLaMA的解读与其微调(含LLaMA 2)：Alpaca-LoRA/Vicuna/BELLE/中文LLaMA/姜子牙
热门推荐
结构之法 算法之道
03-22 6万+
还开始研究一系列开源模型(包括各自对应的模型架构、训练方法、训练数据、本地私有化部署、硬件配置要求、微调等细节)​该项目部分一开始是作为此文《》的第4部分，但但随着研究深入 为避免该文篇幅又过长，将把『第4部分 开源项目』抽取出来 独立成本文。
解读HTML-入门第一文
小程的博客
08-11 348
对HTML的一个初步分析，很重要但没人告诉你的知识
HTML5学习
qq_37534947的博客
01-04 1257
文章目录前言一、HTML 基础1.1、什么是HTML1.2、发展史、优势1.3、W3C标准1.4、HTML基本结构1.5、网页的基本标签1、标题标签2、段落标签3、换行标签4、水平线标签5、字体样式标签6、注释和特殊符号总结 前言 阶段目标： 使用HTML进行网页布局 使用CSS3美化网页 制作精美的商业网站 一、HTML 基础 目标： 会使用HTML5的基本结构创建网页 会使用文本相关标签排版文本信息 会使用图像相关标签实现图文并茂的页面 会使用标签创建超链接、锚链接及功能性链接 1.1、什么.
javaweb01-html、css基础
最新发布
binbinxiaoz的博客
08-23 774
网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。[页面结构.png](https://upload-images.jianshu.io/upload_images/2904860-155368a66f3c2c25.png?- Web标准是一些规范的集合，是由W3C和其他的标准化组织共同制定的，以用它来创建和解释网页的基本内容。首战以web的三大基石开头（html、css、js），js内容比较多，下一序章讲解，这一章节主要以html和css为主。
HTML5中的新元素--结构和语义
03-02
HTML5在以往的HTML中加入了新元素，这还是新千年以来的第一次。这些新部件包括：aside，figure，和section。新的行内（inline）部件包括：time，meter，和progress。新的嵌入部件包括：video和audio。新的交互性部件...
postfix-notation.zip_E->E+T_E->E+T E->T
09-19
2、利用实验5中的算符优先分析算法，结合上面给出的语义动作实现逆波兰式的构造； 3、利用栈，计算生成的逆波兰式，步骤如下： 1）中缀表达式，从文本文件读入，每一行存放一个表达式，为了降低难度，表达式采用常数...
13-html5新增的语义标签.html
09-11
13-html5新增的语义标签.html
asciidoctor-html5s:Asciidoctor 的语义 HTML5 转换器（后端）
07-23
Asciidoctor 的语义 HTML5 后端 该项目为提供替代 HTML5 转换器（后端），专注于正确的语义、可访问性和与常见排版 CSS 样式的兼容性。 目标 使用正确的 HTML5 语义清理标记。 为残疾人士提供良好的无障碍环境。...
【HTML5】->初识HTML->HTML简单介绍&HTML5基本元素讲解
欢迎来到新世界
02-19 6342
HTML边缘探索Ⅰ HTML简介Ⅱ HTML到HTML5----HTML发展历史Ⅲ HTML5简介Ⅳ HTML5环境Ⅴ HTML5基本元素介绍Ⅵ 写一个最简单的HTML程序 Ⅰ HTML简介 超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言 （markup language），是网页制...
【HTML5】->列表元素讲解
欢迎来到新世界
02-21 1536
列表元素Ⅰ 前言Ⅱ 无序列表Ⅲ 有序列表 Ⅰ 前言 列表元素主要有三个，分别是<ol>,<ul>,和<li>。分别为有序列表，无序列表和列表中的项。其中有序列表有两个属性，一个是type,意为设置样式，一个是reversed，意为降序。现在我来逐一讲解。 Ⅱ 无序列表 分别以<ul>和</ul>作为开始和结束的标志。会显示这样的内容： ...
【HTML5】->表单元素第一节->基本元素详解
欢迎来到新世界
02-22 748
表单元素Ⅰ 何为表单Ⅱ 关键表单元素Ⅲ input常用属性A. 占位符B. 不占文本框的占位符C. 限制输入的字符数D. 拓宽单行文本框E. 只读F. 密码G. 文本框大小的设定 Ⅰ 何为表单 表单是HTML中获取用户输入的手段，对于web应用系统极其重要。 比如这个搜索框，就是一个表单，用户可以在上面输入任何字符，然后进行相应的操作。 比如这个淘宝的登录框，也是个表单，用户输入的信息会被传送...
【HTML5】->表格元素讲解
欢迎来到新世界
02-21 720
表格元素Ⅰ 前言Ⅱ 表格三大元素Ⅲ 表头，表身，表尾Ⅳ 如何合并单元格 Ⅰ 前言 让我们在回顾一下HTML5的“元素周期表”。 这篇文章我就来讲解一下最右边的表格元素。 下面我们通过这三个表格来逐个讲解表格元素???? （一） （二） （三） Ⅱ 表格三大元素 <table>,<tr>,<td> 这三个元素就是表格的三大元素，通过这三个元素我们来构建第一个表...
HTML5——专栏索引篇
欢迎来到新世界
03-02 541
前言 HTML5是前端技术比较热门的一个语言，它是超文本标记语言，不属于真正的编程语言，所以学起来没有那么难，很多东西HTML5本身已经给出了，都很方便。 这篇文章是我写的HTML5的一个专栏总结篇，便于索引和查找。关于HTML5，你想知道的，都在这里了。 目录 第一课：HTML入门----------------------------------------------------------...
用c++编写程序，实现语义分析及中间代码生成，显示四元式，产生式为E->TZ Z->+TZ Z->@ T->FY Y->*FY Y->@ F->(E) F->i
07-07
这是一个比较简单的语法分析和中间代码生成的问题。下面是一个用 C++ 编写的示例程序，实现了该功能： ```cpp #include <iostream> #include <vector> #include <string> using namespace std; // 定义四元式结构体 struct Quadruple { string op; string arg1; string arg2; string result; }; // 语义分析及中间代码生成函数 vector<Quadruple> generateQuadruples(string input) { vector<Quadruple> quadruples; int tempCount = 1; for (int i = 0; i < input.length(); i++) { if (input[i] == 'E') { quadruples.push_back({"=", "T", "", "temp" + to_string(tempCount)}); tempCount++; } else if (input[i] == 'Z') { if (input[i + 1] == '+') { quadruples.push_back({"+", "temp" + to_string(tempCount - 1), "T", "temp" + to_string(tempCount)}); tempCount++; i++; } else { // Z->@ } } else if (input[i] == 'T') { quadruples.push_back({"=", "F", "", "temp" + to_string(tempCount)}); tempCount++; } else if (input[i] == 'Y') { if (input[i + 1] == '*') { quadruples.push_back({"*", "temp" + to_string(tempCount - 1), "F", "temp" + to_string(tempCount)}); tempCount++; i++; } else { // Y->@ } } else if (input[i] == 'F') { if (input[i + 1] == '(') { int j = i + 2; int bracketCount = 1; while (bracketCount > 0) { if (input[j] == '(') { bracketCount++; } else if (input[j] == ')') { bracketCount--; } j++; } string subExpression = input.substr(i + 2, j - i - 3); vector<Quadruple> subQuadruples = generateQuadruples(subExpression); quadruples.insert(quadruples.end(), subQuadruples.begin(), subQuadruples.end()); quadruples.push_back({"=", subQuadruples[subQuadruples.size() - 1].result, "", "temp" + to_string(tempCount)}); tempCount++; i = j - 1; } else if (isalpha(input[i + 1])) { quadruples.push_back({"=", input.substr(i + 1, 1), "", "temp" + to_string(tempCount)}); tempCount++; } } } return quadruples; } // 打印四元式函数 void printQuadruples(vector<Quadruple> quadruples) { cout << "Quadruples:" << endl; for (int i = 0; i < quadruples.size(); i++) { cout << i + 1 << ": "; cout << quadruples[i].op << ", "; cout << quadruples[i].arg1 << ", "; cout << quadruples[i].arg2 << ", "; cout << quadruples[i].result << endl; } } int main() { string input = "TZ"; vector<Quadruple> quadruples = generateQuadruples(input); printQuadruples(quadruples); return 0; } ``` 这个示例程序中，我们使用了一个结构体 `Quadruple` 来表示四元式，其中包含了操作符 `op`，操作数 `arg1` 和 `arg2`，以及结果 `result`。`generateQuadruples` 函数根据产生式进行语法分析，并生成相应的四元式序列。`printQuadruples` 函数用于打印生成的四元式。 你可以根据需要修改输入字符串 `input` 并运行程序来观察生成的四元式序列。希望这个示例对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值