首页 前端知识 【HTML】结丹篇

【HTML】结丹篇

2025-02-24 13:02:31 前端知识 前端哥 43 42 我要收藏

HTML实体

图像标签

链接标签

锚点定位

功能链接


引言

上文我们讲到了HTML入门的基本骨架和对标签的相关解释和说明,以及最基础的排版标签的讲解,今天继续对标签进行更进一步的学习。

文本格式化标签


在网页中,有时需要为文字设置粗体、斜体和下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方法显现。

标签显示效果
<b></b>和<strong></strong>文字以粗体方式显示 (XHTML推荐使用strong)
<i></i>和<em></em>文字以斜体方式显示 (XHTML推荐使用em)
<s></s>和<del></del>文字以加删除线方式显示 (XHTML推荐使用del)
<u></u>和<ins></ins>文字以加下划线方式显示 (XHTML不赞成使用u)

<body>

    <strong>我是粗体</strong> <br />

    <em>我是斜体</em>         <br />

    <del>我是删除线</del>     <br />

    <ins>我是下划线</ins>     <br />

</body>

总结:b、i、s、u 只有使用没有强调的意思,正印证了我们上文讲到的写有语义化的标签更加合适strong、em、del、ins 语义更强烈。

标签属性


在上篇文章标签分类那一块提到了属性一词的概念,今天顺便将这个知识点也提一下。

属性就是特性,比如手机的颜色和尺寸总结就是手机的

使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签属性加以设置其基本语法格式如下:


<标签名 属性1='属性值1' 属性2='属性值2' ...> 内容 </标签名>

例如

<hr width='400' />

在上面的语法中

1.标签可以拥有多个属性,必须写在开始标签中,位于标签名的后面

2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开

3.任何标签的属性都有默认值,省略该属性则取默认值

采取 键值对 的格式 key = "value"的格式

HTML实体


实体字符 (HTML Entity) 通常用于在页面中显示一些特殊字符。书写格式有两种,如下:

1. &单词;  (常见举例)

小于符号:<   大于符号:>   空格符号:    版权符号:©   &符号:&


<body>

  在页面中,&nbsp;表示段落使用:&lt;p&gt;

  &copy;

</body>

2. &#数字;(内容太多自己查手册吧,这里就展示几个)只做了解


<body>

  &#1;

  &#90;

  &#123;

</body>

图像标签


单词缩写:image 图像

HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像,就需要使用图像标签接下来将详细介绍图像标签以及和它相关的属性,其基本格式如下:

该语法中src属性用于指定图像文件的路径和文件名,它是img标签的必需属性:


<img src='图像URL' />

标记属性

| 属性 | 属性值 | 描述 |

| — | — | — |

| src | URL | 图像的路径 |

| alt | 文本 | 图像不能显示时的替换文本 |

| title | 文本 | 鼠标悬停时显示的内容 |

| width | 像素(XHTML不支持%页面百分比) | 设置图像的宽度 |

| height | 像素(XHTML不支持%页面百分比) | 设置图像的高度 |

| border | 数字 | 设置图像边框的宽度 |

既然讲到了标签要书写路径,那我这里就插一句,浅浅提及一下路径的写法 (知道的略过)

书写路径分为两种:绝对路径和相对路径

站外资源  (非当前网站的资源)  :书写 绝对路径

站内资源  (当前网站的资源)      :  书写 相对路径(或绝对路径)

绝对路径的书写格式:

协议名://主机名:端口号/路径 (schema://host:port/path)

协议名:http、https、file

主机名:域名、IP地址

端口号:协议是http,默认端口号80;协议是https,默认端口号443

相对路径的书写格式:

以./开头,./表示当前资源所在的目录;可以书写…/表示返回上一级目录;相对路径:./可以省略。

链接标签


单词缩写:anchor 的缩写,基本解释为:锚,铁锚的。

在HTML中创建超链接非常简单,只需要标签环绕需要被链接的对象即可,其基本语法格式如下:


<a href='跳转目标' target='目标窗口的弹出方式'> 文本或图像 </a>

href(Hypertext Reference的缩写,意思是超文本引用):

用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接功能。

target:

用于指定链接页面的打开方式其取值有 _self 和 _blank 两种,其中 _self 为默认值,_blank为在新窗口中的打开方式

这里提一下一个问题,根据上文我们要想点开链接是从新窗口打开的,需要给 a 标签的 target 赋值为 _black,可是在我们日常项目开发中,可能一个网站都要有成百上千的 a 标签,要想每一个都以新窗口打开是不是太费事了?针对这个问题,我在这里讲一下 base 标签的用法。

base标签:可以整体设置链接的打开状态


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <base target="_blank">

</head>

如果又想设置有的标签是当前窗口打开,只需在相应的 a 标签设置 target = “_self” 即可。

注意:

1. 外部链接 需要添加 https://www. …

2. 内部链接 直接链接内部页面即可,比如 首页

3. 如果当时没有确定链接目标时,通常将链接标签的href属性值定义为 “#”(即href=‘#’),表示该链接暂时为一个空链接。

4. 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

锚点定位

通过创建锚点链接,用户能快速定位到目标内容。创建锚点链接分为两步:

1. 使用 “a href=“#id名” 创建链接文本  (id属性:全局属性,表示元素在文档中的唯一编号)

2. 使用相应的id名标注跳转目标的位置


<body>

    <a href="#live">个人生活</a>

    <h2>人生经历</h2>

    <p>我的人生经历</p>

    <h2 id="live">个人生活</h2>

    <p>我的个人生活</p>

</body>

锚点定位一般用于网页文章含有大量内容时,方便用户查找自己想要了解的内容而提供的快捷锚点以上代码虽然格式如此,但内容太少看不到效果,vscode可以生成乱文用作测试,lorem*100 Tab或者 回车键 来看一看。

功能链接

点击后,触发某个功能(只做了解即可)

1. 执行JS代码,javascript:


<body>

  <a href="javascript:alert('你好!')">
转载请注明出处或者链接地址:https://www.qianduange.cn//article/21243.html
标签
评论
发布的文章

C/C | 每日一练 (2)

2025-02-24 13:02:49

Linux性能监控工具汇总

2025-02-24 13:02:48

Python常见面试题的详解16

2025-02-24 13:02:48

QQ登录测试用例报告

2025-02-24 13:02:47

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!