HTML 和 CSS 作为文字处理器。这就是你需要知道的全部

用于文本处理的 HTML 和 CSS

一月初我们告诉过你 降价,这可能是使用 PC 做笔记的最佳方式。它是一种可以在半小时或更短时间内学会的语言,它允许我们创建具有特定格式和结构的轻量级文档。还有 胶乳,但学习曲线比较陡峭,而且软件安装也不是微不足道的。还有另一种选择,那就是使用创建文本文档 HTML和CSS.

HTML 和 CSS 并不是为编辑文本文档而设计的语言,而是 还可以服务。结合起来,它们的作用远不止于此,但通过了解一些标签和规则,我们可以比 Writer 做得更多,也比使用 Markdown 或 LaTeX 做得更多。在这里,我们将解释这些基础,以及一些使打印看起来不错的技巧。

文本的 HTML 和 CSS:一个有效的选项

首先要知道的是 要查看 .html 文档,您需要网络浏览器。这是负责呈现它并显示其内容的部分,也是我们打印文档的部分。它不是我们必须单独安装的软件,因为我们已经在任何 PC 或移动设备上安装了一些软件。

您需要知道的另一件事是如何创建文档:只需打开一个普通的文字处理程序(例如 Kate),添加内容并将其保存为 .html 扩展名。我们可以,事实上我建议,也可以创建  和 身体,第一个用于一般样式等部分,第二个用于文档本身。

我还建议使用 Visual Studio Code 或任何类似的编辑器,但它附带了所谓的 智能感知,也就是说,它允许我们打开和关闭标签,而不必完整地编写它们。此外,在代码中我们可以单击放置“!”符号,按 Tab 键,它将创建基本结构。

所有标签都以符号“大于”(<) 和“小于”(>) 开始和结束,但结束标签前面通常有一个斜杠(/)。

解释完这一点,让我们继续讨论最重要的事情。

HTML 和 CSS 中的出血

在 HTML 和 CSS 中, 出血是没有必要的。您可以将所有内容放在一行上,但如果您有良好的缩进并且所有内容都位于同一水平相同的高度,则更容易阅读。子元素通常放置在右侧大约四个空格处,或者按 Tab 键给出的任何位置。

HTML 标头

HTML 标头由“h”后跟 1 到 6 的数字组成。例如,“HTML Headers”中的前一个文本是“h2”,完整文本将为:

HTML 标头

粗体、斜体、删除线和突出显示

按照 Markdown 文章的顺序,接下来是粗体、斜体、删除线和突出显示。他们会是这样的:

粗体文本 斜体划线的文字突出显示的文本

它将显示:

粗体
斜体文字
条纹文字
突出显示的文本

幂和下标

如果我们想放置一个小且稍微凸起的数字(幂)或相反一侧的数字(下标),我们可以使用以下标签:

电力分指数

段落

我们遵循 Markdown 文章的顺序,但对于 HTML 和 CSS 来说可能不是最好的。在 Markdown 中,段落是在没有任何标签的情况下编写的,这就是为什么它被放在这里,但在 HTML 中则使用标签。开始和结束标记之间的所有内容都将是一个块,并且具有以下语法:

我们放在这两个标签之间的所有内容都将是一个段落。如果我们再添加一个,两者之间就会出现换行符。块标签内可能还有其他标签,例如粗体点等,以及其他内联标签。理论上,这里的所有内容都将是一个连续的段落。如果我们想将它分开,我们必须添加其他的或使用我们稍后会提到的标签。

列表

列表(至少是 HTML 中最基本的列表)有有序和无序之分。对于那些不了解它们的人来说,它们可能会令人困惑,但像 Visual Studio Code 这样的编辑器可以让事情变得更容易。它的语法是这样的:

商品 1 无订单元素 2 无序元素 3 无序第 1 项已排序项目 2 已排序第 3 项已排序

将显示这个

  • 商品 1 无订单
  • 商品 2 无订单
  • 商品 3 无订单
  1. 第 1 项已排序
  2. 第 2 项已排序
  3. 第 3 项已排序

列表用标签打开和关闭,“ul”如果它们是无序的,并且默认情况下会在前面显示一个球,“ol”如果它们是有序的,并且默认情况下会在前面放置一个数字。编号的元素会自动排序,即开始标记后的第一个元素前面将带有 1,第二个元素前面将带有 2,依此类推。

对于列表组合,您必须以相同的标签(“ul”或“ol”)开始子列表。

还有定义列表,其以标签“dl”开头和结尾,内部是术语 (dt) 和定义 (dd),语法如下:

Linux我们喜爱的系统视窗我们在这里不常使用的系统

它将显示:

Linux
    我们喜爱的系统
Windows
    我们在这里不常使用的系统

任务清单

HTML 中没有任务列表,但可以创建它们。要实现此目的,您必须添加一个复选框,它看起来像这样:

第一个元素第二个元素第三元素

它将显示:

在这里,我们引入了 CSS 规则来删除列表中默认显示的磁盘。我们把它弄复杂了一点,但它可以简化。标签部分可以省略,但如果按照示例放置,则单击时文本也将用于标记框。

HTML 中的链接

链接是使用“a”标签创建的,并具有以下结构:

<a href="https://linuxadictos.com/">您关于 Linux(和 HTML?)的博客

它将显示:

您关于 Linux(和 HTML?)的博客

该链接位于“href”属性之后,文本位于开始标记和结束标记之间。

链接可以指向标识符。例如,如果我们将 id=”test” 添加到开始标记中的元素,则可以使用 #test 链接,这样单击它就会将我们带到该元素,只要它位于同一页面上即可。否则,哈希值和标识符将放在 .html 之后。

HTML 中的图像

HTML 图像被添加到“img”标签中,如下所示:


现在,如果我们希望所有内容都在一个文档中,我们可以将它们转换为 base64 并以另一种方式添加它们


如果我们希望图像将我们带到另一个网页,我们只需用“a”及其相应的“href”将其包围即可。

Citas

引号有两种类型,但最常用的是块引号。结合介绍性段落,它看起来像这样:

Pablinux 说:我们将解释如何使用 HTML 和 CSS 创建文本文档。

它将显示:

Pablinux 说:

我们将解释如何使用 HTML 和 CSS 创建文本文档。

我们可以使用“cite”标签包含内联引用,默认情况下通常将其显示为斜体。如果该文档是给我们的,我们也可以使用“i”或“em”,我们将获得相同的效果。建议将该文本放在引号中。

如果我们想嵌套引号,只需将一个“块引用”放入另一个“块引用”中即可。

HTML代码

HTML中的代码放在“code”标签之间,并没有太多神秘之处。它通常用等宽字体呈现,通过使用它的标签,我们将能够在语义上正确(这是 HTML 问题),并且我们还可以为所有代码提供特殊格式。它不会像某些那样漂亮 Markdown 编辑器,除非我们给它一个在这里不会自动的格式。

平局

与列表一样,表格的制作也可能有点复杂,但通过添加这一点,我们可以使用 HTML 和 CSS 在文本文档中做更多事情。正确的方法将包含三个部分:“thead”、“tbody”和“tfoot”,它们将位于“table”标签内,但如果表格很简单并且我们不需要分开,则可以省略所有三个部分他们的内容。

在表中,我们必须创建带有数据(td)的行(tr),结构如下:

一个标题另一个标题第三个标题前线的一条信息前线的另一条信息第一行第三个事实第二行有一条信息第二行其他信息第二行第三个数据第三行的一条信息第三行其他信息第三行第三个数据第一个结果第二个结果第三个结果

它将显示以下内容(默认情况下不应显示该格式):

一个标题 另一个标题 第三个标题
前线的一条信息 前线的另一条信息 第一行第三个事实
第二行有一条信息 第二行其他信息 第二行第三个数据
第三行的一条信息 第三行其他信息 第三行第三个数据
第一个结果 第二个结果 第三个结果

表格可能会变得更加复杂,我们无法专注于它们是如何制作的,否则我们会占用大量的时间和空间。是的,我们可以说,我们必须小心它们是否适合,并且可以通过在其相应的“td”中添加属性“colspan”,后跟我们想要的框数来使框占据多个宽度占据(例如, 列跨度=”2”)。对于同一件事但垂直,使用“rowspan”(例如 行跨度=”3”).

水平线和换行符

如果我们想制作一条从文档的一部分到另一部分的水平线,我们将使用标签,如果我们想换行。

使用 HTML 和 CSS 为我们的文档提供样式

到目前为止,我们所拥有的只不过是一个复杂的 Markdown,对吧?如果不是因为我们也可以使用 CSS,那么所有这一切都没有任何意义,这里有一些提示。

如果我们希望所有内容都在同一个文档中, CSS 必须添加到“style”标签内 或者在同名属性的 HTML 标记中,例如我们用来防止无序列表默认显示磁盘。

CSS 允许我们做很多事情,甚至可以同时做几个元素。如果我们希望所有类型 2 (h2) 标题居中且呈红色,我们必须将其添加到“head”内的“style”标签中:

h2 { 文本对齐:中心;红色; }

上面我们说的是:“将居中文本规则和红色应用于所有 h2 标签。”如果我们希望它们成为所有标题,则在大括号之前我们必须添加选择器“h1,h2,h3,h4,h5,h6”。默认情况下,所有内容都在左侧,如果我们使用“right”而不是“center”,也可以将其设置为右侧。

其他推荐规则

  • 背景颜色:selected_color;,其中“chosen_color”将是具有现有单词的颜色,例如“red”,或者 RGB 或 HSL 代码等。为元素提供背景颜色。
  • 边框半径:selected_curve,其中“chosen_curve”将以像素或百分比为单位。它为拐角提供了一条曲线,您可以为每个拐角设置独立的值。
  • 文本阴影:1px 2px 2px 黑色;,其中的值可以是其他。它为文本提供阴影,X 轴上的第一个值,Y 轴上的第二个值,第三个是模糊,第四个是颜色。
  • 框阴影:1px 2px 2px 黑色;,与上一点相同,但针对整个框而不仅仅是文本。
  • 字体大小:a_size;,其中“a_size”是可以采用不同单位的大小,通常以像素为单位。
  • 字体粗细:a_thickness;,其中“a_thickness”是字体的粗细。如果字体类型支持,我们可以使用“bold”或“bolder”之类的单词或 100 到 900 之间的单位。
  • 字体系列:font_type;,其中“font_type”是一种字体。
  • 边框:1px 纯蓝色;,第一个是厚度,第二个是类型,第三个是可以不同的颜色。这将为元素添加边框。
  • 填充 y  它们都为我们提供了元素周围的边距,但有一个区别:填充是元素本身的一部分,而边距是它占用的空间,但不是元素的空间。可以输入不同类型的测量值,最常见的是像素。
  • 宽度 y 高度 它们用于指示元素的宽度和高度。它们在文本类型中使用较少(这就是 font-size 的用途),但在容器(我们在这里没有看到)和图像等元素中使用较多。使用不同类型的测量,例如像素。
  • 更多内容 免打扰.

打印 HTML 和 CSS 文档的提示

使用 HTML 和 CSS 创建文档时我们可能会遇到的一个问题是 浏览器不会按照我们想要的方式打印内容。例如,它会拆分列表之类的元素,这可能是我们不希望看到的。

我的建议是,当您使用浏览器单击打印时(按Ctrl+P 在大多数情况下),我们至少在上方和下方添加自定义边距。这将纠正文本可能太靠近顶部和底部边缘的错误(您也可以使其不显示页眉和页脚)。

通过在 CSS 部分添加此规则可以解决拆分元素问题:

@media print{ 正文 { 背景颜色:白色; } ul, ol{ 内部突破:避免; /* 打印时不剪切列表* } }

上面告诉您,打印时,背景是全白色的,并且列表在分页符处不分隔。其他元素可以放入选择器中,例如“table”,如果我们看到它切断了它们。我认为没有必要把一些内容作为段落放在这里,因为它们很好划分。

我们可以做的另一件事是使用以下内容 强制分页 无论我们想要什么,都有效,例如,完成一章并将接下来的内容显示在下一页上(如果不起作用,请使用 分页后,他们说将来会停止工作):


另一种选择

这就是全部了。使用 HTML 和 CSS,我们比 Markdown 拥有更多的控制权,而且在我看来,它比 LaTeX 更简单,尽管它们在不同的联盟中发挥作用。这是又一种选择。


发表您的评论

您的电子邮件地址将不会被发表。 必填字段标有 *

*

*

  1. 负责资料:AB Internet Networks 2008 SL
  2. 数据用途:控制垃圾邮件,注释管理。
  3. 合法性:您的同意
  4. 数据通讯:除非有法律义务,否则不会将数据传达给第三方。
  5. 数据存储:Occentus Networks(EU)托管的数据库
  6. 权利:您可以随时限制,恢复和删除您的信息。