1. 主页
  2. 文档
  3. 君土小程入门
  4. 超文本标记语言基础

超文本标记语言基础

超文本标记语言, 简称超文本(HTML), 是一种用来结构化网站网页及其内容的标记语言。网页内容可以是:一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示,本文将对 超文本及其功能做一个基本介绍。

超文本是何方神圣?

超文本不是一门编程语言,而是一种用于定义内容结构的标记语言。超文本由一系列的元素 组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。 一对标签可以为一段文字或者一张图片添加超链接,将文字设置为斜体,改变字号,等等。 例如,键入下面一行内容:

我的猫咪脾气好:)

可以将这行文字封装成一个段落元素来使其在单独一行呈现:

<视图>我的猫咪脾气好:)</视图>

超文本 元素详解

让我们深入探索一下这个视图元素。

这个元素的主要部分有:

  1. 开始标签:包含元素的名称(本例为 段落),被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
  2. 结束标签:与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即视图在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。
  3. 内容:元素的内容,本例中就是所输入的文本本身。
  4. 元素:开始标签、结束标签与内容相结合,便是一个完整的元素。

元素也可以有属性:

属性包含了关于元素的一些额外信息,这些信息本身不应显现在内容中。本例中,链接 是属性名称,https://www.jtu.net.cn/ 是属性的值 。_锚 标签定义超链接,用于从一张页面链接到另一张页面。链接 属性规定链接的目标。

属性应该包含:

  1. 在属性与元素名称(或上一个属性,如果有超过一个属性的话)之间的空格符。
  2. 属性的名称,并接上一个等号。
  3. 由引号所包围的属性值。

注:不包含空格(以及 " ' ` = < > )的简单属性值可以不使用引号,但是建议将所有属性值用引号括起来,这样的代码一致性更佳,更易于阅读。

嵌套元素

也可以将一个元素置于其他元素之中 —— 称作嵌套。要表明猫咪非常暴好,可以将 “好” 用 <文本>元素包围,通过设置样式,好字将突出显示:

<视图>我的猫咪脾气<文本>好</文本>:)</视图>

必须保证元素嵌套次序正确:本例首先使用 <视图>标签,然后是 <文本>标签,因此要先结束 <文本>标签,最后再结束 <视图>标签。这样是不对的:

<视图>我的猫咪脾气<文本>好:)</视图></文本>

元素必须正确地开始和结束,才能清楚地显示出正确的嵌套层次。否则浏览器就得自己猜测,虽然它会竭尽全力,但很大程度不会给你期望的结果。所以一定要避免!

空元素

不包含任何内容的元素称为空元素。比如 <图片> 元素:

<图片 源='https://jtmy.gitee.io/jtma-rumen/tp/xuexi.png' />

本元素包含两个属性,但是并没有 </图片> 结束标签,元素里也没有内容。这是因为图片元素不需要通过内容来产生效果,它的作用是向其所在的位置嵌入一个图片。

超文本 文档详解

以上介绍了一些基本的 超文本 元素,但孤木不成林。现在来看看单个元素如何彼此协同构成一个完整的 超文本 页面。

引 { 视图, 图片 } 自 '@芋头/组件'

出 默 () => {
  回 (
    <视图>
      <图片 源='https://jtmy.gitee.io/jtma-rumen/tp/xuexi.png' />
    </视图>
  )
}

标记文本

本段包含了一些最常用的文本标记 超文本 元素。

文本

在小程序和网络应用中,组件 文本 用来显示文本。我们可以通过设置属性 可选来设置文本是否可以选择。

            <文本>H5、小程序通用</文本>
            <文本 可选>可选择的文字</文本>
            <文本>不可选择的文字</文本>

对于小程序,我们还可以指定空格属性来设置显示连续空格的方式。我们还可以设置解码来指定是否对文本内容解码。

              <文本>不支持多          空格文字</文本>
              <文本 空格='半角'>多          空格文字(半角)</文本>
              <文本 空格='全角'>多          空格文字(全角)</文本>
              <文本 空格='不断'>多          空格文字(不断)</文本>
              <文本>{"不解码文字&gt;"}</文本>
              <文本 解码>{"解码文字&gt;"}</文本>

视图

视图是一个视图容器组件。

        <视图>
          <视图>
            <文本>H5、小程序通用</文本>
          </视图>
          <视图>
            <视图>
              <文本 可选>可选择的文字</文本>
            </视图>
            <视图>
              <文本>不可选择的文字</文本>
            </视图>
          </视图>
        </视图>

导航器

导航器组件让我们能够在程序内部页面间跳转,也可以跳转到别的小程序。

小结

如果你一直跟着这篇文章里的指导做的话,你应该完成了一个像下面这样的页面。(你也可以从这查看):

如果你遇到困难,你可以将  完整示例代码 上的文件与你的文件进行比较。

在这里,我们只是介绍了一点点 超文本。要学习更多,访问我们的 超文本 学习主题页面 。

http://jtmy.gitee.io/taro/