超文本标记语言, 简称超文本(HTML), 是一种用来结构化网站网页及其内容的标记语言。网页内容可以是:一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示,本文将对 超文本及其功能做一个基本介绍。
超文本是何方神圣?
超文本不是一门编程语言,而是一种用于定义内容结构的标记语言。超文本由一系列的元素 组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。 一对标签可以为一段文字或者一张图片添加超链接,将文字设置为斜体,改变字号,等等。 例如,键入下面一行内容:
我的猫咪脾气好:)
可以将这行文字封装成一个段落元素来使其在单独一行呈现:
<视图>我的猫咪脾气好:)</视图>
超文本 元素详解
让我们深入探索一下这个视图元素。
这个元素的主要部分有:
- 开始标签:包含元素的名称(本例为
段落
),被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。 - 结束标签:与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即
视图
在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。 - 内容:元素的内容,本例中就是所输入的文本本身。
- 元素:开始标签、结束标签与内容相结合,便是一个完整的元素。
元素也可以有属性:
属性包含了关于元素的一些额外信息,这些信息本身不应显现在内容中。本例中,链接 是属性名称,https://www.jtu.net.cn/ 是属性的值 。_锚 标签定义超链接,用于从一张页面链接到另一张页面。链接 属性规定链接的目标。
属性应该包含:
- 在属性与元素名称(或上一个属性,如果有超过一个属性的话)之间的空格符。
- 属性的名称,并接上一个等号。
- 由引号所包围的属性值。
注:不包含空格(以及 "
'
`
=
<
>
)的简单属性值可以不使用引号,但是建议将所有属性值用引号括起来,这样的代码一致性更佳,更易于阅读。
嵌套元素
也可以将一个元素置于其他元素之中 —— 称作嵌套。要表明猫咪非常暴好,可以将 “好” 用 <文本>
元素包围,通过设置样式,好字将突出显示:
<视图>我的猫咪脾气<文本>好</文本>:)</视图>
必须保证元素嵌套次序正确:本例首先使用 <视图>
标签,然后是 <文本>
标签,因此要先结束 <文本>
标签,最后再结束 <视图>
标签。这样是不对的:
<视图>我的猫咪脾气<文本>好:)</视图></文本>
元素必须正确地开始和结束,才能清楚地显示出正确的嵌套层次。否则浏览器就得自己猜测,虽然它会竭尽全力,但很大程度不会给你期望的结果。所以一定要避免!
空元素
不包含任何内容的元素称为空元素。比如 <图片>
元素:
<图片 源='https://jtmy.gitee.io/jtma-rumen/tp/xuexi.png' />
本元素包含两个属性,但是并没有 </图片>
结束标签,元素里也没有内容。这是因为图片元素不需要通过内容来产生效果,它的作用是向其所在的位置嵌入一个图片。
超文本 文档详解
以上介绍了一些基本的 超文本 元素,但孤木不成林。现在来看看单个元素如何彼此协同构成一个完整的 超文本 页面。
引 { 视图, 图片 } 自 '@芋头/组件'
出 默 () => {
回 (
<视图>
<图片 源='https://jtmy.gitee.io/jtma-rumen/tp/xuexi.png' />
</视图>
)
}
标记文本
本段包含了一些最常用的文本标记 超文本 元素。
文本
在小程序和网络应用中,组件 文本
用来显示文本。我们可以通过设置属性 可选
来设置文本是否可以选择。
<文本>H5、小程序通用</文本>
<文本 可选>可选择的文字</文本>
<文本>不可选择的文字</文本>
对于小程序,我们还可以指定空格
属性来设置显示连续空格的方式。我们还可以设置解码
来指定是否对文本内容解码。
<文本>不支持多 空格文字</文本>
<文本 空格='半角'>多 空格文字(半角)</文本>
<文本 空格='全角'>多 空格文字(全角)</文本>
<文本 空格='不断'>多 空格文字(不断)</文本>
<文本>{"不解码文字>"}</文本>
<文本 解码>{"解码文字>"}</文本>
视图
视图是一个视图容器组件。
<视图>
<视图>
<文本>H5、小程序通用</文本>
</视图>
<视图>
<视图>
<文本 可选>可选择的文字</文本>
</视图>
<视图>
<文本>不可选择的文字</文本>
</视图>
</视图>
</视图>
导航器
导航器组件让我们能够在程序内部页面间跳转,也可以跳转到别的小程序。
小结
如果你一直跟着这篇文章里的指导做的话,你应该完成了一个像下面这样的页面。(你也可以从这查看):
如果你遇到困难,你可以将 完整示例代码 上的文件与你的文件进行比较。
在这里,我们只是介绍了一点点 超文本。要学习更多,访问我们的 超文本 学习主题页面 。