专栏首页程序媛生涯H5入门之文本标签和特殊字符

H5入门之文本标签和特殊字符

在网页简介的文章中,我们已经接触过超链接标签了。除了超链接标签以外,h5还有很多展示不同内容的标签,其中包括文本标签。那么,什么是文本标签呢?文本标签是用来展示文字的。

H5的文本标签如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文本</title>
</head>
<body>
  
  <!-- 以下均是文本标签 -->
  
  <!-- 文本基础标签 -->
  <!-- h1~h6是标题标签 -->
  <h1>大标题</h1>
  <h6>小标题</h6>
  <!-- <p>是段落标签 -->
  <p>段落</p>
  <!-- <br>是换行标签 -->
  <br>
  <!-- <hr>是水平线标签 -->
  <hr>


  <!-- 定义文本格式的标签 -->
  <!-- <strong>和<b>是加粗内容的标签 -->
  <strong>加粗</strong>
  <b>加粗<b>
  <!-- <s>是删除内容的标签 -->
  <s>删除</s>
  <del>删除</del>
  <!-- <small>是小字号内容的标签 -->
  <small>小字号</small> 
  <!-- <i>和<em>是斜体内容的标签 -->
  <i>斜体</i>
  <em>斜体</em>
  <!--<u>为内容添加下划线的标签 -->
  <u>下划线</u>
  <ins>下划线</ins>
  <!--<sup>为内容添加上标的标签 -->
  <sup>上标</sup>
  <!--<sub>为内容添加上标的标签 -->
  <sub>下标</sub>


  <!-- 定义文本样式 -->
  <!-- <span>用来添加样式的标签 -->
  <span>用来添加样式</span>
  <!-- <div>和<section>是模块化的标签 -->
  <div>模块</div>
  <section>模块</section>
  <!-- <header>是内容头部模块的标签 -->
  <header>头部</header>
  <!-- <footer>是内容底部模块的标签 -->
  <footer>底部</footer>
  <!-- <article>是文章内容的标签 -->
  <article>文章</article>  
  <!-- <aside>是定义侧边栏内容的标签 -->
  <aside>侧边</aside>
  <!-- <nav>是定义导航的标签-->
  <nav>导航</nav>
  <!-- <nav>是定义带有标记文本的标签-->
  <mark>带有标记</mark>
  <!-- <details>描述细节的标签-->
  <details>细节</details>
  <!-- <summary>与<details>搭配使用-->
  <details>
    <summary>你猜我说了什么?</summary>
    <p>你是大猪蹄子</p>
    <p>我喜欢你</p>
  </details>
  <!-- <ruby><rp><rt>三个标签组合使用-->
  <!-- <rt>定义中文注音或字符的解释或发音-->
  <ruby>
    叶<rp>(</rp><rt>ye</rt><rp>)</rp>
    匠<rp>(</rp><rt>jiang</rt><rp>)</rp>
  </ruby>
  <!-- <time>描述时间的标签-->
  <time datetime="2020-02-14">9:00</time>
  <!-- <template>描述模板的标签-->
  <template>模板</template>
  <!-- <address>是作者信息/地址标签 -->
  <address>文章作者信息/地址信息<address>


  <!-- 编程相关标签 -->
  <dfn>定义项目</dfn><br>
  <code>一段电脑代码</code><br>
  <samp>计算机样本</samp><br>
  <kbd>键盘输入</kbd><br>
  <var>变量</var>

</body>
</html>

在h5文本方面,还会使用到一些特殊的符号,这些符号在html里面无法直接识别,所以我们需要把它们转成html能识别的符号,于是就有了转义。以下是一些常用的特殊字符和它们转义后的代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>转义字符</title>
</head>
<body>
  <!-- "的转义字符 -->
  &quot;
  <!-- &的转义字符 -->
  &amp;
  <!-- <的转义字符 -->
  &lt;
  <!-- >的转义字符 -->
  &gt;
  <!-- 空格的转义字符 -->
  &nbsp;
  <!-- ©的转义字符   -->
  &copy;
  <!-- ®的转义字符 -->
  &reg;
  <!-- »的转义字符 -->
  &raquo;
  <!-- × 的转义字符 -->
  &times;
</body>
</html>

HTML5在文本这方面增加了很多新标签,以上是一些常用的文本标签和特殊字符的转义。

本文分享自微信公众号 - 程序媛生涯(bcffl1024),作者:叶匠

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML文本和图像:做一个简单的文章网页

    我们已经了解过HTML的基本结构了,那么,现在,我们通过一个简单的文章网页案例来跟大家讲解一下HTML的部分基础知识。文章网页的效果图如下,有点丑,但包含了很多...

    邂逅千寻
  • 用房子的逻辑方式理解:网站是怎么一回事

    很多人都喜欢访问网站,但网站的运作原理你有注意过吗?其实网站就像我们的房子一样,有地址,需要建房工具等等。那么,我们就以房子作为类比,通过房子的一整套流程来理解...

    邂逅千寻
  • H5入门之图像和多媒体

    H5入门时,图像一般是指图片相关的标签,而多媒体是指音频和视频相关的标签。以下是图像相关标签的示例:

    邂逅千寻
  • Web前端学习 第2章 网页重构2 常用的html标签

    上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法.

    学习猿地
  • HTML标签分类

    在HTML页面中,带有“<>”符号的元素被称为HTML标签,如 <HTML>、<head>、<body>、<head>等都是HTML骨架结构标签。所谓标签就是放...

    爱知汇
  • 互联网进入标签时代

    最近有三个产品的改版引起了我的注意:一个是网易跟帖上线了标签功能,用户可以给其他跟帖用户打上特定标签,看上去是为了提升互动性和实现用户自运营;第二是百度图片搜索...

    罗超频道
  • 用户画像实践:神策标签生产引擎架构

    导读:用户画像是建立在数据基础之上的用户模型,是产品改进、精准营销等业务场景中不可或缺的重要基础。而构建用户画像的过程就是要给用户打上各种维度的标签,并基于标签...

    木东居士
  • HTML知识清单(附学习网站)

    上面知识点知识本人总结的,想要深入学习的话请跳转至http://www.w3school.com.cn/专业的前段技术学习网站,免费开源!!!

    时间静止不是简史
  • 用HTML写一篇简单的日记

    在这篇文章之前,已经初步的了解了HTML是怎么创建了,接下来,我们要用创建的文件去写我们进入前端的第一个demo,当然了,如果你忘记了,我之前的文章里也有详细的...

    守护最温柔的金木
  • JavaWeb(十三)简单标签

    用户定义的一种自定义的jsp标记 。当一个含有自定义标签的jsp页面被jsp引擎编译成servlet时,tag标签被转化成了对一个称为 标签处理类 的对象的操作...

    leeqico

扫码关注云+社区

领取腾讯云代金券