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

27,259次阅读
没有评论

共计 2409 个字符,预计需要花费 7 分钟才能阅读完成。

本文主要内容

字体标签:<font><b><u><sup><sub>

超链接 <a>

字体标签

特殊字符(转义字符)

  • &nbsp;:空格(non-breaking spacing,不断打空格)
  • &lt;:小于号<(less than)
  • &gt;:大于号>(greater than)
  • &amp;:符号&
  • &quot;:双引号
  • &apos;:单引号
  • &copy;:版权©
  • &trade;:商标
  • &#32464;:文字 。其实,#32464是汉字 的 unicode 编码。

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

这是一个 HTML 语言的 &lt;p&gt; 标签

正确的效果如下:

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

错误的效果如下:

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

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

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

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

特殊字符 描述 字符的代码
空格符 &nbsp;
< 小于号 &lt;
大于号 &gt;
& 和号 &amp;
人民币 &yen;
© 版权 &copy;
® 注册商标 &reg;
° 摄氏度 &deg;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方 2(上标 2) &sup2;
³ 立方 3(上标 3) &sup3;

下划线、中划线、斜体

  • <u>:下划线标记

  • <s><del>:中划线标记(删除线)

  • <i><em>:斜体标记

效果:

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

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

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

这张图中,我们通过查看京东网站的代码发现,箭头处的小图标都是用的标签<i>

粗体标签 <b><strong>(已废弃)

效果:

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

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

属性:

  • color=" 红色 "color="#ff00cc"color="new rgb(0,0,255)":设置字体颜色。
    设置方式:单词 #ff00cc rgb(0,0,255)

  • size:设置字体大小。取值范围只能是:1 至 7。取值时,如果取值大于 7 那就按照 7 来算,如果取值小于 1 那就按照 1 来算。如果想要更大的字体,那就只能通过 css 样式来解决。

  • face=" 微软雅黑 ":设置字体类型。

举例:

<font face=" 微软雅黑 " color="#FF0000" size="10">vae</font>

效果:

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

上标<sup> 下标<sub>

上小标这两个标签容易混淆,怎么记呢?这样记:b的意思是bottom:底部
举例:

O<sup>2</sup>    5<sub>3</sub>

效果:

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

三、超链接

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

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

举例:

<a href="02 页面.html"> 点击进入另外一个文件 </a>

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

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

效果:

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

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

<a href="http://www.baidu.com" target="_blank"> 点我点我 </a>

2、锚链接

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

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

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

上图中解释:

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

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

<a href="a.html#name1"> 回到顶部 </a>

那就表示,点击之后,跳转到 a.html 页面的 name1 锚点 中去。

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

3、邮件链接

代码举例:

<a href="mailto:xxx@163.com"> 点击进入我的邮箱 </a>

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

超链接的属性

  • href:目标 URL
  • title:悬停文本。
  • name:主要用于设置一个锚点的名称。
  • target:告诉浏览器用什么方式来打开目标页面。target属性有以下几个值:
    • _self:在同一个网页中显示(默认值)
    • _blank在新的窗口中打开
    • _parent:在父窗口中显示
    • _top:在顶级窗口中显示

title属性举例:

<a href="09_img.html" title=" 很好看哦 "> 结婚照 </a>

效果如下:

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

target属性举例:

<a href="1.html" title=" 悬停文本 " target="_blank"> 链接的内容 </a>

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

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

区别如下:

<img src="1.jpg" />
<a href="1.html"></a>

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

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

<p>
	<a href=""> 段落段落段落段落段落段落 </a>
</p>

而不是 a 包裹 p:

<a href="">
	<p>
		段落段落段落段落段落段落
	</p>
</a>

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

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-09-10发表,共计2409字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)