【HTML】结丹篇

🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🍇个人主页：亦世凡华、的博客

🍓系列专栏：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标签，要想在网页中显示图像，就需要使用图像标签接下来将详细介绍图像标签<img />以及和它相关的属性，其基本格式如下：

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

<img src='图像URL' />

<img />标记属性
属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素(XHTML不支持%页面百分比)	设置图像的宽度
height	像素(XHTML不支持%页面百分比)	设置图像的高度
border	数字	设置图像边框的宽度

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

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

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

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

绝对路径的书写格式：

        协议名://主机名:端口号/路径（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. 内部链接直接链接内部页面即可，比如 <a href=’index.html’>首页</a>

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('你好！')">
    弹出：你好!
  </a>
</body>

2. 发送邮件，mailto: （不过需要要求用户计算机上安装有邮件发送软件：exchange）

<body>
  <a href="mailto:1111111111@qq.com">
    点击给我发送邮件
  </a>
</body>

3. 拨号 tel: （不过需要要求用户计算机上安装有拨号软件，或使用的是移动端访问）

<body>
  <a href="tel:131414141414">
    点击给我拨打电话
  </a>
</body>

🍃HTML的学习还是要以多练习为主，想要练习HTML的朋友，推荐可以去牛客网看一看，链接：牛客网里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看

个人总结：

本来打算一篇博文尽量写多一点内容，但是想想还是算了，因为内容多的话有点让人眼花缭乱的感觉，有种焦虑感！非常的让人不适，即使硬着头皮通篇看下来，内容太多的话，能学到记到的内容寥寥无几，所以我也是打算一篇博文所写的知识点涵盖少，但知识点的讲解要全面透彻，通俗易懂，一方面对知识点更加底层的了解，另一方面也是能让人真正从博文中学到一些东西。那么现在，开始学习吧。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/140131.html