【H2O2|全栈】关于HTML(2)HTML基础(一)

news2024/11/5 12:28:26

HTML相关知识

目录

前言

准备工作

标签的具体分类(一)

本文中的标签在什么位置使用?

属性

标题标签

段落标签

文本格式化标签

分类汇总 

计算机输出标签

​编辑分类汇总

引文,引用标签

分类汇总

预告和回顾

UI设计相关

前端前置知识

HTML相关

后话


前言

本系列的博客将分享前端HTML的相关知识点。

在上一期中,我写了大量概念性的东西,主要还是为了后面打好基础。基础不牢,实操不稳嘛。

本期博客将展开讲述标签的具体种类和对应的效果,我会按照代码和对应的效果对比着来讲述。

按照我的风格来说,其实我不太喜欢用书面语言来分享知识。比起单纯的科普,我的博文更像是一种语言风格类似于休闲聊天,但是又不缺乏严谨性的知识笔记,也就是我之前提到的——“杂谈”的形式。

初心呢就是主打分享,写的不好,多多包涵(嘻嘻)。

准备工作

软件:参考版本Visual Studio Code,有道云笔记

*关于有道云笔记的使用可以看我主页的Markdown文档有关文章,文末我会给出链接* 

浏览器版本:Chrome

系统版本: Win10/11/其他非Windows版本

*我的电脑是Win10的版本,仅供参考*

标签的具体分类(一)

本文中的标签在什么位置使用?

在上一期博客中,我们知道已经了解了声明、根标签、头部标签以及主体标签的使用。

特别的,对于头部标签,我们展开讲了meta和title两种标签,目前咱们暂时知道这么多,就可以了。

而本文中我们需要掌握的,是写在主体标签(body)中的各种标签,我将以块标签行内标签作为分类依据来讲。

*meta标签其实可以定义很多属性,扩展很多内容,以后我会专门出一期博客来讲头部标签中的内容*

属性

这里提前说一个东西——属性。关于属性,我们需要了解以下几点:

  • 属性可以定义标签的附加信息
  • 属性一般描述于开始标签(写在开始标签里)
  • 属性通常格式为 属性名="属性值" (键值对)
  • 属性推荐使用英文小写字母(虽然它对大小写不敏感

标题标签

现在我有一份示例的说明文档(Markdown),在有道云笔记中打开来,可以看到如下的效果:

*之前说过,Markdown和HTML一样,都是标记语言,因此他们在有些方面实质上是相通的* 

可以看到,不同层级的标签,字体大小和前后行距等样式都略有不同。

正如我们的博文各级标题,HTML中的标题也是分等级的。在HTML5提供的标准标题标签中,共有下面6个等级:

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

在VS中运行这一段代码,就可以看到以下的效果:

其中,一级标题作为最高级的标题,在一个网页文本中一般有且仅有一个。 

二级标题不常用,常常直接跳到第三级标题。

段落标签

在编辑文章的正文内容时,常常会涉及到段落标签的使用,在html文档中,段落标签的形式是这样的:

<p>我是一个段落</p>
<p>我也是一个段落</p>
<p>我是下一个段落</p>
<p>我是最后一个段落</p>

还是以《出师表》为例,看一下段落标签的效果:

<h1>出师表</h1>
    <h3>诸葛亮</h3>
    <p>
        先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。
    </p>
    <p>
        宫中府中,俱为一体;陟罚臧否,不宜异同。若有作奸犯科及为忠善者,宜付有司论其刑赏,以昭陛下平明之理,不宜偏私,使内外异法也。
    </p>
    <p>
        侍中、侍郎郭攸之、费祎、董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下。愚以为宫中之事,事无大小,悉以咨之,然后施行,必能裨补阙漏,有所广益。
    </p>
    <p>
        将军向宠,性行淑均,晓畅军事,试用于昔日,先帝称之曰能,是以众议举宠为督。愚以为营中之事,悉以咨之,必能使行阵和睦,优劣得所。
    </p>
    <p>
        亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军,此悉贞良死节之臣,愿陛下亲之信之,则汉室之隆,可计日而待也。
    </p>
    <p>
        臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。
    </p>
    <p>
        先帝知臣谨慎,故临崩寄臣以大事也。受命以来,夙夜忧叹,恐托付不效,以伤先帝之明;故五月渡泸,深入不毛。今南方已定,兵甲已足,当奖率三军,北定中原,庶竭驽钝,攘除奸凶,兴复汉室,还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益,进尽忠言,则攸之、祎、允之任也。
    </p>
    <p>
        愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。若无兴德之言,则责攸之、祎、允等之慢,以彰其咎;陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏。臣不胜受恩感激。今当远离,临表涕零,不知所言。
    </p>

值得注意的是,在学习盒模型前, 标题标签和段落标签是我们接触到的为数不多的块标签。 

文本格式化标签

对比标题和段落正文的文字,不难发现,他们在字体大小和粗细等样式上拥有不小的差别。

那么,如果想要让正文中的内容也具有类似的效果,可以怎么做?

可能有朋友想到,直接在想要变化样式的地方套用一个<h>系列的标签,不就能够得到相同的效果了吗?

这显然是不对的,之前我们说到,标题标签也是一种块标签。即使它大部分时候看起来只有一行,但是块标签会独自占据一块区域,且自带换行和特殊行距。

所以,对特定内容实现相关效果,应该使用行内标签来操作。

我们一般把实现这类操作的文本标签叫做文本格式化标签

常用的文本样式格式化标签:

标签名视觉效果
b加粗文字
i斜体文字
u下划线文字
del删除线文字

*除非特意说明,否则都是双标签,省略<>*

特别的,前两个标签还有对应的语气强调标签:

strong表现为加粗文字
em表现为斜体文字

可以看到,我在描述这两个标签时使用到了表现为这个说法。

对于可以正常阅读网页的人而言,这两个标签的确与普通的加粗和斜体的效果别无二致。

然而,对于视力障碍者,它们无法正常阅读网页,因此可能会用到一个辅助功能,叫做朗读者功能

而该功能朗读文档时,一旦读到包裹有这两个标签的文字时,就会加重朗读语气,给使用者一种“这里需要着重关注”的感觉。

特别的,后两个标签还有另三种形式:

ins定义插入标签
s | strike定义横线标签  |(已弃用)横线标签

一般来说,在上述几种标签中,我们使用的最多的还是前四种。

继续看标签的内容:

sup上标文字
sub下标文字

sup,全称是super script,sub全称是sub script。就是直译为上标和下标。

比如,我们在有道云笔记里写一个常见的物理方程式和一个化学方程式:

Markdown代码如下:

```math
E=mc^2
```

```math
\ce{2H2O2 = 2H2O + O2 ^}
```

想要在html文档里实现类似的上下标效果,就可以使用sup和sub来实现。

继续看标签内容:

small小号字体
span普通字体
big(已弃用)大号字体

span其实是计算机去输出文本标签的一种,这里提前来说是方便与前后两种字体作比较。

效果是这样的:

继续看标签内容:

br(单标签)强制打断(换行)
nobr强制不换行

单标签的规范写法是:<br />,只不过,后面的“ / ”其实是可以省略的。

br,即break,它的作用相当于回车,如果不加这个标签,那么行内标签(或一行的内容)就会一直排下去,直到浏览器可视化边界才换行。比如,对于下面这个《出师表》的文字片段,使用代码这样处理:

<span>愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。</span>
<span>若无兴德之言,则责攸之、祎、允等之慢,以彰其咎;</span>
<span>陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏。</span>
<span>臣不胜受恩感激。</span>
<span>今当远离,临表涕零,不知所言。</span>

显然,行内标签并不会给我们已经换好行的结果:

在每一个</span>后加上<br />标签之后,就有了换行的效果:

与之对应的,nobr就是强制不换行。

将上面的片段改成如下形式:

<nobr>
    <span>愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。</span><br />
    <span>若无兴德之言,则责攸之、祎、允等之慢,以彰其咎;</span><br />
    <span>陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏。</span><br />
    <span>臣不胜受恩感激。</span><br />
    <span>今当远离,临表涕零,不知所言。</span>
</nobr>

运行后,与正常边界自动换行的文本对比可以发现,即使右边已经超出了浏览器的当前缩放比例的最大边界,也没有自动换行:

继续看标签内容:

hr(单标签)分割线

分割线,其实就是一条直线,用于把网页分为上下两个部分。

hr标签可以定义size属性。下面这行代码就是将分割线的高度(粗细)设为5(px)。

<hr size="5"/>
分类汇总 

所有的文本格式化标签汇总在这个表里:

标签名视觉效果
b加粗文字
i斜体文字
u下划线文字
del删除线文字
strong表现为加粗文字
em表现为斜体文字
ins定义插入标签
s | strike定义横线标签  |(已弃用)横线标签
sup上标文字
sub下标文字
small小号字体
span普通字体
big(已弃用)大号字体
br(单标签)强制打断(换行)
nobr强制不换行
hr(单标签)分割线

计算机输出标签

计算机输出标签可以定义HTML输出的计算机相关的文本。

之前所说的span标签也属于计算机输出标签,其含义就是普通文本。在浏览器上查看,视觉效果和没有加该标签的效果相同。

span标签是可以设置属性的,添加行内样式style之后,可以单独设置某一段文字的效果。

比如,我们可以利用span标签和行内样式将下面文段里的人名单独标识为红色:

<p>
    愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。若无兴德之言,则责<span style="color: red;">攸之、祎、允</span>等之慢,以彰其咎;陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏。臣不胜受恩感激。今当远离,临表涕零,不知所言。
</p>

在浏览器中,显示效果如下: 

继续看代码:

code代码小字显示
samp代码(块)小字显示

这两种标签的作用是定义计算机代码,如果想要让自己的代码与普通文本有一定的区别,就可以使用这个标签。定义下面这一段代码:

<code>
    package 你的包;
    System.out.println("Hello world");
</code>

在网页中显示的效果如下:

*samp标签的效果和用法与之相同*

注意到,代码被显示为了一行,通常来说,我们的代码一般来说是分行来写,并拥有一定的占位符, 即代码拥有一定的格式

对于希望保留格式的文本,可以使用下面这个标签:

pre保留源格式

将上面的定义代码更改一下:

<span>普通文本</span><br />
<code>
    <pre>
    package 你的包;
            
    System.out.println("Hello world");
    </pre>
</code>

保留源格式效果如下:

继续看代码:

var表现为加粗斜体

var标签的作用是定义变量,在网页中显示的效果是斜体,并有加粗效果。

输入下面代码:

<var>这里是一个变量</var>

网页显示效果如下:

分类汇总

所有的计算机输出标签汇总在这个表里:

标签名视觉效果含义
span普通文本普通文本
code代码小字显示定义代码
samp代码(块)小字显示定义代码
pre保留源格式保留源格式输出
var表现为加粗斜体定义变量

引文,引用标签

如果想在网页中展示一些特殊的引用内容,就涉及到引文、引用标签的使用了。

继续看标签内容:

bdo定义文字方向

对于bdo标签来说,它有一个属性叫做dir,即direction,有两种情况:

<bdo dir="ltr">12345</bdo>
<bdo dir="rtl">12345</bdo>

l, t, r分别代表left,to,right。那么,上面的两种情况其实就是从左往右显示和从右往左显示的区别:

继续看标签内容:

abbr表现为虚线下划线

对于长的英文词来说,使用缩写可以方便我们观看,abbr可以实现对缩写的定义。

例如,使用下面的代码来定义万维网的缩写:

<abbr title="World Wide Web">WWW</abbr>

效果如下:

继续看标签内容:

address表现为斜体

在很多网站里填写信息的时候,常常会涉及到地址的填写。

输入下面的代码以定义一个地址:

<address>XX省 XX市 XX区 XXXX街道 XX号</address>

地址在网页中显示的效果如下:

继续看标签内容:

q两侧出现双引号 " "

blockquote

左侧自动添加占位符,独自占据一块区域
cite表现为斜体

在文章中,如果需要引用引证一个名词或者一段材料,就可以用到上面三种标签。

q标签cite标签一般定义一段比较短的引用内容(行内标签)。

特别的,cite标签还可以用来定义标题,与h标题不同的是,它不能占据一块区域。

而比较长的文本内容,最好使用blockquote标签来引用,因为它自带换行的功能(块标签)。

表格中的三种标签的示例代码如下:

<cite>《出师表原文》</cite>

<blockquote>
    将军向宠,性行淑均,晓畅军事,试用于昔日,先帝称之曰能,是以众议举宠为督。愚以为营中之事,悉以咨之,必能使行阵和睦,优劣得所。
</blockquote>

<q>诸葛亮,字孔明...</q>

上述代码在网页中的效果如下:

继续看标签内容:

dfn表现为斜体

如果想在文章中定义一些概念,可以使用dfn标签。

示例代码如下:

<dfn>定义的内容</dfn>

在网页中运行的效果如下:

分类汇总

所有的引文、引用标签汇总在这个表里:

预告和回顾

在我的HTML第三期博客中,将会继续介绍HTML的基本标签的使用,并会加上实际的案例。

本期暂时就到这里,有下面两个原因:

一是因为是在是太长了,一次性全记住比较难;

二是因为这一期内容主要是围绕对文本的处理来写的,是一维的概念;在下一期的内容中,将围绕图片和结构来写,将涉及到二维层次的概念。

对于Web项目来说,HTML只是其中的一部分内容。即使是Web,也只是庞大的全栈项目中的一部分。

对全栈项目感兴趣的朋友,也可以看看我之前的博客——

UI设计相关

专栏 | UI设计入门icon-default.png?t=O83Ahttp://t.csdnimg.cn/wb0OQ

前端前置知识

专栏 | 前端学习开始前icon-default.png?t=O83Ahttp://t.csdnimg.cn/nnlde

HTML相关

专栏 | HTML相关知识icon-default.png?t=O83Ahttp://t.csdnimg.cn/Xuel5

后话

在全栈领域,博主也只不过是刚刚摸到了它的门槛。关于这篇博客,主要是记录一下自己学习的一些经历,然后把自己领悟到的一些东西总结一下,分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的,一些定义性的文字加入了笔者自己的很多理解在里面,所以仅供参考。如果有说的不对的地方,还请谅解。

【H2O2】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2114895.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SAP学习笔记 - 开发04 - Fiori UI5 开发环境搭建

上一章学习了 CDSView开发环境的搭建&#xff0c;以及CDSView相关的知识。 SAP学习笔记 - 开发03 - CDSView开发环境搭建&#xff0c;Eclipse中连接SAP&#xff0c;CDSView创建-CSDN博客 本章继续学习SAP开发相关的内容&#xff0c; - Fiori UI5的开发环境搭建 - 安装VSCode …

JavaScript Web API入门day7

目录 1.图片切换模块 2.鼠标经过以及离开中等盒子&#xff0c;大盒子的处理 3.黑色遮罩层的位置以及放大功能 4.放大镜的完整代码 1.图片切换模块 效果图&#xff1a; 思路分析&#xff1a; ①&#xff1a;鼠标经过小盒子&#xff0c;左侧中等盒子显示对应中等图片 获取对…

2024 年高教社杯全国大学生数学建模竞赛B题第一问详细解题思路(终版)

示例代码&#xff1a; from scipy.stats import norm# 定义参数 p0 0.10 # 标称次品率 alpha 0.05 # 95% 信度下的显著性水平 beta 0.10 # 90% 信度下的显著性水平 E 0.01 # 允许的误差范围# 计算95%信度下的样本量 Z_alpha_2 norm.ppf(1 - alpha / 2) n_95 ((Z_alp…

ICM20948 DMP代码详解(7)

接前一篇文章&#xff1a;ICM20948 DMP代码详解&#xff08;6&#xff09; 上一回讲解了EMP-App中的入口函数main()中重点关注的第2段代码的前一个函数inv_icm20948_reset_states&#xff0c;本回讲解后一个函数inv_icm20948_register_aux_compass。 为了便于理解和回顾&#…

mipi协议:多通道分配和合并

Multi-Lane Distribution and Merging: CSI-2 是一个通道可扩展的规范。对于需要比单个数据通道提供更多带宽的应用&#xff0c;或者那些希望避免高时钟频率的应用&#xff0c;可以通过增加数据通道的数量来扩展数据路径&#xff0c;从而近似线性地提高总线的峰值带宽。为了确保…

CocosCreator中使用protobuf

(前提) 工欲善其事,必先利其器. 要想在CocosCreator中使用protobuf,我们首先要安装NodeJs.安装教程可参考Node.js安装及环境配置详细教程_nodejs安装及环境配置-CSDN博客,已经很详细了.NodeJs自带npm, 我们要用npm下载protobufjs.可能你会问npm是什么? npm是NodeJs自带的包管理…

spring中添加@Test注解测试

1、添加maven依赖 <!-- 添加test方便测试--><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.13.2</version><scope>test</scope></dependency><dependency><grou…

如何将卷积神经网络(CNN)应用于医学图像分析:从分类到分割和检测的实用指南

引言 在现代医疗领域,医学图像已经成为疾病诊断和治疗规划的重要工具。医学图像的类型繁多,包括但不限于X射线、CT(计算机断层扫描)、MRI(磁共振成像)和超声图像。这些图像提供了对身体内部结构的详细视图,有助于医生在进行准确诊断和制定个性化治疗方案时获取关键的信…

如何利用评论进行有效的 ASO

如何利用评论进行有效的ASO的问题的答案通常以“正面评论”一词开始。确实&#xff0c;这句话首先浮现在脑海中。但这个问题的答案包括负面评论、用户体验、提高知名度、评分、根据评论优化应用程序以及许多其他有趣的点。这里几乎没有无聊的统计数据&#xff0c;这些数字也不会…

Qt-常用控件(3)-多元素控件、容器类控件和布局管理器

1. 多元素控件 Qt 中提供的多元素控件有: QListWidgetQListViewQTableWidgetQTableViewQTreeWidgetQTreeView xxWidget 和 xxView 之间的区别&#xff0c;以 QTableWidget 和 QTableView 为例. QTableView 是基于 MVC 设计的控件.QTableView 自身不持有数据,使用 QTableView 的…

lamp的脚本部署

l是linux,a是apache,m是mysql&#xff0c;p是php。最基本的动态网页搭建。语法后面再补几篇&#xff0c;现在先写吧。 一、环境准备 1.1、rocklinux换源&#xff0c;关掉防火墙&#xff0c;selinux&#xff0c;时间同步 #cp rocky* /a # 阿里 sed -e s|^#mirrorlist|mirro…

windows10 卸载网络驱动以及重新安装

右键桌面此电脑的图标&#xff0c;点击管理&#xff0c;设备管理器—网络适配器&#xff0c;找到下图中的驱动&#xff08;不同的系统或者显卡会导致网卡驱动名称与下图不一样&#xff0c;多为Realtek开头&#xff09;&#xff0c;右键选择卸载设备&#xff0c;然后重启电脑&am…

LabVIEW软件,如何检测连接到的设备?

在LabVIEW软件中&#xff0c;检测连接到的设备通常是通过NI提供的硬件驱动和相关工具来完成的。以下是几种常见的检测设备的方法&#xff1a; 1. 使用NI MAX&#xff08;Measurement & Automation Explorer&#xff09; 打开NI MAX&#xff1a;LabVIEW设备管理通常通过NI …

【软件文档】软件系统需求管理规程(项目管理word原件)

软件资料清单列表部分文档清单&#xff1a;工作安排任务书&#xff0c;可行性分析报告&#xff0c;立项申请审批表&#xff0c;产品需求规格说明书&#xff0c;需求调研计划&#xff0c;用户需求调查单&#xff0c;用户需求说明书&#xff0c;概要设计说明书&#xff0c;技术解…

网络学习-eNSP配置路由器

#PC1网关&#xff1a;192.168.1.254 #PC3网关&#xff1a;192.168.3.254 #PC4网关&#xff1a;192.168.4.254# 注&#xff1a;路由器接口必须配置不同网段IP地址 <Huawei>system-view Enter system view, return user view with CtrlZ. #给路由器两个接口配置IP地址 [Hua…

【Kubernetes】K8s 的安全框架和用户认证

K8s 的安全框架和用户认证 1.Kubernetes 的安全框架1.1 认证&#xff1a;Authentication1.2 鉴权&#xff1a;Authorization1.3 准入控制&#xff1a;Admission Control 2.Kubernetes 的用户认证2.1 Kubernetes 的用户认证方式2.2 配置 Kubernetes 集群使用密码认证 Kubernetes…

基于springboot+vue+uniapp的“共享书角”图书借还管理系统小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…

天翼云存储资源盘活系统 HBlock:企业级轻量存储的革新与实战

目录 前言关于HBlock系统HBlock的核心优势番外篇&#xff1a;HBlock应用场景结束语参考文献 前言 在数字化转型的浪潮中&#xff0c;数据存储作为支撑企业业务连续性和数据安全的基石&#xff0c;企业对于存储资源的需求日益增长&#xff0c;同时也面临着成本控制和资源优化的…

常见监督学习算法学习总结。

目录 一、K临近算法 二、决策树 三、多层感知器 四、伯努利贝叶斯算法 五、高斯贝叶斯 一、K临近算法 K 临近算法&#xff08;K-Nearest Neighbors&#xff0c;简称 KNN&#xff09;是一种监督学习算法&#xff0c;用于分类和回归任务。 它通过计算样本之间的距离来进行…

前端开发中遇到的小问题以及解决方案记录2

1、H5中适配屏幕的工具-postcss-px-to-viewport postcss-px-to-viewport。因为设计稿一般给的都是375px宽度的&#xff0c;所以假如一个字体是16px&#xff0c;那么在开发中不能直接写死为16px&#xff0c;因为各个厂商的手机屏幕大小是不同的&#xff0c;所以要根据屏幕大小去…