千古前端图文教程-HTML005-HTML标签:字体标签和超链接

HTML标签:字体标签和超链接

本文主要内容

字体标签: <font></font>、 、 、 <sup></sup><sub></sub>

超链接

超链接

# 字体标签

# 特殊字符(转义字符)

  • :空格 (non-breaking spacing,不断打空格)
  • <:小于号(less than)
  • >:大于号(greater than)
  • &:符号 &
  • ":双引号
  • ':单引号
  • &#xA9;:版权 &#xA9;
  • &#x2122;:商标 &#x2122;
  • &#x7ED0;:文字 &#x7ED0;。其实, #32464是汉字 &#x7ED0;的unicode编码。

比如说,你想把 <p></p>作为一个文本在页面上显示,直接写 <p></p>是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到 转义字符。应该这么写:

这是一个HTML语言的<p>标签

正确的效果如下:

千古前端图文教程-HTML005-HTML标签:字体标签和超链接

错误的效果如下:

千古前端图文教程-HTML005-HTML标签:字体标签和超链接

其实我们只要记住前三个符号就行了,其他的在需要的时候查一下就行了。而且,EditPlus软件中是可以直接点击这些符号进行选择的:

千古前端图文教程-HTML005-HTML标签:字体标签和超链接

来一张表格,方便需要的时候查询:

特殊字符 描述 字符的代码 空格符

< 小于号 <

大于号 >

& 和号 &

¥ 人民币 &#xA5;

© 版权 &#xA9;

® 注册商标 &#xAE;

° 摄氏度 &#xB0;

± 正负号 &#xB1;

× 乘号 &#xD7;

÷ 除号 &#xF7;

² 平方2(上标2) &#xB2;

³ 立方3(上标3) &#xB3;

# 下划线、中划线、斜体

  • :下划线标记
  • 或 :中划线标记(删除线)
  • 或 :斜体标记

效果:

千古前端图文教程-HTML005-HTML标签:字体标签和超链接

上面的这几个标签,常用于做一些小装饰、小图标。比如:

粗体标签 或 (已废弃)

效果:

千古前端图文教程-HTML005-HTML标签:字体标签和超链接

我的模仿


    这是特殊字体 <p>
    这是一个商标™
    这是一个版权图标©
    这是一个立方³

千古前端图文教程-HTML005-HTML标签:字体标签和超链接
下划线斜体加粗

千古前端图文教程-HTML005-HTML标签:字体标签和超链接

# 字体标签 <font></font> (已废弃)

属性:

  • color="&#x7EA2;&#x8272;"color="#ff00cc"color="new rgb(0,0,255)":设置字体颜色。 设置方式:单词 \ #ff00cc \ rgb(0,0,255)
  • size:设置字体大小。 取值范围只能是:1至7。取值时,如果取值大于7那就按照7来算,如果取值小于1那就按照1来算。如果想要更大的字体,那就只能通过css样式来解决。
  • face="&#x5FAE;&#x8F6F;&#x96C5;&#x9ED1;":设置字体类型。

举例:

vae

效果:

千古前端图文教程-HTML005-HTML标签:字体标签和超链接

# 上标 <sup></sup> 下标 <sub></sub>

上小标这两个标签容易混淆,怎么记呢?这样记: b的意思是 bottom&#xFF1A;&#x5E95;&#x90E8; 举例:

O2    53

效果:

千古前端图文教程-HTML005-HTML标签:字体标签和超链接

三、超链接

超链接有三种形式,下面分别讲讲。

# 1、外部链接:链接到外部文件

举例:

点击进入另外一个文件

a是英语 anchor“锚”的意思,就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

href(hypertext reference):超文本地址。读作”喝瑞夫”,不要读作”喝夫”。

效果:

千古前端图文教程-HTML005-HTML标签:字体标签和超链接

当然,我们也可以直接点进链接,访问一个网址。代码举例如下:

点我点我

、锚链接

锚链接:给超链接起一个名字,作用是 在本页面或者其他页面的的不同位置进行跳转。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就可以利用锚链接。

首先我们要创建一个 锚点,也就是说,使用 name属性或者 id属性给那个特定的位置起个名字。效果如下:

千古前端图文教程-HTML005-HTML标签:字体标签和超链接

上图中解释:

第11行代码表示,顶部这个锚的名字叫做name1。 然后在底部设置超链接,点击时将回到顶部(此时,网页中的url的末尾也出现了 #name1)。注意 上图中红框部分的 # 号不要忘记了,表示跳到名为name1的特定位置,这是规定。如果少了 #号,点击之后,就会跳到name1这个文件或者name1这个文件夹中去。

如果我们将上图中的第28行代码写成:

回到顶部

那就表示,点击之后,跳转到 a.html页面的 name1&#x951A;&#x70B9;中去。

说明:name属性是HTML4.0以前使用的,id属性是HTML4.0后才开始使用。为了向前兼容,因此,name和id这两个属性都要写上,并且值是一样的

我的模仿

千古前端图文教程-HTML005-HTML标签:字体标签和超链接

3、邮件链接

代码举例:

点击进入我的邮箱

1

效果:点击之后,会弹出outlook,作用不大。

# 超链接的属性

  • href:目标URL
  • title:悬停文本。
  • name:主要用于设置一个锚点的名称。
    *
target

:告诉浏览器用什么方式来打开目标页面。

target

属性有以下几个值:
_self:在同一个网页中显示(默认值)
_blank在新的窗口中打开
_parent:在父窗口中显示
_top:在顶级窗口中显示

title属性举例:

结婚照

效果如下:

千古前端图文教程-HTML005-HTML标签:字体标签和超链接

我的模仿

我是悬浮文字,鼠标放上来可以看到更多东西

千古前端图文教程-HTML005-HTML标签:字体标签和超链接

target属性举例:

链接的内容

blank就是”空白”的意思,就表示新建一个空白窗口。为啥有一个_ ,就是规定,无需解释。 也就是说,如果不写 target=&#x201D;_blank&#x201D;那么就是在相同的标签页打开,如果写了 target=&#x201D;_blank&#x201D;,就是在新的空白标签页中打开。

# 备注1:分清楚img和a标签的各自的属性

区别如下:


# 备注2:a是一个文本级的标签

比如一个段落中的所有文字都能够被点击,那么应该是p包裹a:


    段落段落段落段落段落段落

而不是a包裹p:


        段落段落段落段落段落段落

a的语义要小于p,a就是可以当做文本来处理,所以p里面相当于放的就是纯文字。

Original: https://www.cnblogs.com/BEMAKE/p/16479084.html
Author: 271374667
Title: 千古前端图文教程-HTML005-HTML标签:字体标签和超链接

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/685739/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • Mysql InnoDB多版本并发控制MVCC

    &#x53C2;&#x8003;&#x4E66;&#x7C4D;&#x300A;mysql&#x662F;&#x600E;&…

    技术杂谈 2023年7月25日
    0107
  • CESIUM 原理 之 COMMAND拼接【转】

    VAO VAO(Vertext Array Object),中文是顶点数组对象。之前在《Buffer》一文中,我们介绍了Cesium如何创建VBO的过程,而VAO可以简单的认为是基…

    技术杂谈 2023年5月31日
    0106
  • 上周热点回顾(7.25-7.31)

    热点随笔: · 手把手带你实现基于 Vite+Vue3 的在线Excel表格系统 (葡萄城技术团队)· 使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 🌐 (Drago…

    技术杂谈 2023年5月31日
    082
  • 日常踩坑_JPA聚合查询

    背景提要 需求是要进行分组并统计每组的数量,本来以为JPA有GroupBy的语法的,看了一圈才发现原来没有这个语法,只能通过自己写sql的方式这其中又分为写原生sql(即 nati…

    技术杂谈 2023年7月25日
    054
  • 聊聊分布式锁

    字节跳动技术团队 字节跳动的技术实践分享 为什么我们需要一把分布式锁? 为了效率(efficiency),协调各个客户端避免做重复的工作。即使锁偶尔失效了,只是可能把某些操作多做一…

    技术杂谈 2023年5月31日
    0124
  • Idea运行HelloWorld与Idea自用设置

    Java运行机制 编译型compile:操作系统等需要速度的会使用编译型去做(全局翻译再运行) 解释型:网页,服务器脚本等对速度没有要求的使用解释型做(运行一句解释一句) 程序运行…

    技术杂谈 2023年6月21日
    0119
  • 防火墙NAT配置与DHCP下发

    该实验如果有做的不足的地方请见谅 实验目标: 按要求划分区域,公司内部办公区为trust,服务器区为dmz,外部网络为untrust。 PC1和PC2为公司内部办公区,需要从防火墙…

    技术杂谈 2023年6月21日
    080
  • shopify产品添加自定义字段如何实现

    博客园 :当前访问的博文已被密码保护 请输入阅读密码: Original: https://www.cnblogs.com/ytkah/p/15670424.htmlAuthor:…

    技术杂谈 2023年5月31日
    096
  • DevOps工程师

    DevOps工程师 1. DevOps工程师的任务是什么? 设计、构建、测试和部署可伸缩的分布式系统,实现从开发到部署的自动化 管理代码库(如Git、SVN、BitBucket等)…

    技术杂谈 2023年5月31日
    085
  • odbc 驱动开发的一些资料

    dremio 以前版本的odbc 当前是已经不支持直接下载了,早期版本的odbc 是基于了drill 的odbc 驱动,利用了SimbaEngine sdk以下是整理的一些资料可以…

    技术杂谈 2023年5月30日
    0112
  • ps插件camera raw 15.0,摄影后期必看的ACR15.0新功能保姆级教程

    Original: https://www.cnblogs.com/aurora-123/p/16862332.htmlAuthor: 佛系女孩Title: ps插件camera …

    技术杂谈 2023年7月11日
    060
  • 瞎子摸象与刻舟求剑

    我这几年越来越觉得,这两个成语故事是对我们世界深刻的隐喻。 瞎子摸象 从前,有四个盲人很想知道大象是什么样子,可他们看不见,只好用手摸。胖盲人先摸到了大象的牙齿。他就说:&#822…

    技术杂谈 2023年6月1日
    091
  • Clickhouse的MergeTree表引擎存储结构

    MergeTree存储的文件结构 一张数据表被分成几个data part,每个data part对应文件系统中的一个目录。通过以下SQL可以查询data parts的信息。 sel…

    技术杂谈 2023年7月24日
    085
  • Docker配置LNMP环境

    目录规划 根目录下新建www目录,集中存放相关的配置文件和web文件 Mysql 从dockerhub拉取mysql镜像 $ docker pull mysql 实例化镜像,启动一…

    技术杂谈 2023年7月10日
    072
  • 浅析Kubernetes架构之workqueue

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    技术杂谈 2023年7月25日
    071
  • 面试官:说下你对方法区演变过程和内部结构的理解

    之前我们已经了解过”运行时数据区”的程序计数器、虚拟机栈、本地方法栈和堆空间,今天我们就来了解一下最后一个模块——方法区。 简介 《Java虚拟机规范》中明…

    技术杂谈 2023年7月11日
    078
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球