亿企邦
  • 首页
    •
  • 解决方案&服务
    •
  • 客户&案例
    •
  • 营销资讯
    •
  • 关于我们
    •
    15158846557 或 在线咨询 在线咨询
    亿企邦
    15158846557 或 在线咨询
    亿企邦

    快捷入口

    所在位置： 首页 > 营销资讯 > 网站运营 > HTML常用标签

    HTML常用标签

    时间：2023-10-03 10:36:01 | 来源：网站运营

    时间：2023-10-03 10:36:01 来源：网站运营

    HTML常用标签：

    1、导学

    通过前面课程的学习，我们现在已经能够写出一个完整的HTML骨架了，但是光有骨架还是不行的，我们要向网页

    中去添加‘血肉’，这就需要用到其它的标签，所以从这节课开始我们就要学习HTML中常用的标签了。

    总的来说，这里我们会学习以下几类标签。

    标题标签，顾名思义这类标签，就是设置文章中的标题的。

    段落标签与换行标签：我们写文章的时候，是不是要分段落或者要换行啊，这就要用到段落标签与换行标签了。

    文本格式化标签：在写文章的时候，有一些关键的词语，为了能够引起用户的注意，我们往往会给这些词语加粗，

    或者是让其变成斜体等，这就需要用到文本格式化标签了。

    图像标签：关于图像标签，我在这里不用解释，相信你也能够理解图像标签的作用。对了！，就是向网页中插入图 片的标签，那么怎样向网页中插入图片呢？也就是图像标签应该怎样使用呢？我们会在这节课中详细的说明。

    最后我们还要介绍两个特殊的标签，但是也是以后经常使用的两个标签，分别是 <div>标签与<span>标签。这两个标签就像一个盒子，可以用来装内容，在网页设计中，主要用来实现网页布局，关于网页布局是以后课程重点讲解的内容。

    好了，了解了这节课我们要讲解的内容以后，下面，我们看一下这节课的学习目录。




    2、学习目标

    在这节课中，需要你做到以下几点：

    第一、能够使用标题标签设置文章标题

    第二、能够使用段落标签和换行标签来给文章设置段落和进行换行。

    第三、能够使用文本格式化标签设置文字格式。

    第四、能够使用图像标签给网页插入图片。

    第五、能够说出<div>标签与<span>标签的含义与作用。

    下面，我们先来学习一标题标签的内容。

    3、标题标签

    为了能够使网页更具有语义化，我们经常会在网页中用到标题标签，如下图所示：




    在上图中，我们可以看到在文章的第一行显示的是文章的标题，那么文章的标题一般都是比较醒目的，字号比较

    大，并且是加粗显示，要想达到这样的效果，就可以使用标题标签。

    HTML提供了6个等级的网页标题标签，分别是<h1> 到<h6>。

    <h1>:表示的是一级标题

    <h2>:表示的是二级标题

    以此类推，<h6>表示的就是六级标题。

    标题标签的语法格式，如下所示：

    <h1>我是一级标题</h1>注意：<h1>标签是双标签，标签内部的文字就是具体的标题内容了。现在我们定义的是一级标题，如果想定义二级标题，可以采用如下的写法

    <h2>我是二级标题</h2>那么，要是设置三级标题、四级标题、应该怎样写呢？

    对了，在h的后面跟上相应的数字就可以了。

    h其实是head这个单词的缩写，表示的是头部，标题的意思。

    在这，我们还需要注意另外一个问题就是，标题标签的语义是什么？

    标题标签的语义，就是作为标题使用，并且依据重要性递减。

    怎样理解‘重要性’呢？

    所谓‘重要性’指的是一段文字，只要加上了标题标签就会变得非常的重要，关于这一点前面咱们也说过，标题都是加粗而且字号比较大，也就是比较醒目，通过这一点我们就能够理解体会出标题的重要性了。

    那么怎样理解‘重要性递减呢’？

    一级标题比二级标题重要，二级标题比三级标题重要，依次类推。通俗理解，就是设置了一级标题的文字在网页上进行展示的时候字号要比二级标题设置的文字大，二级标题设置的文字要比设置了三级标题的文字大，依次类推。

    关于标题标签我们还需要了解其特点：

    第一、加了标题的文字会变的加粗，字号也会依次变大，关于这一点我们也已经强调过多次了。

    第二、一个标题独占一行。

    讲解了这么多，下面我们来体验一下，标题标签的应用。

    实现代码如下：

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <h1>线上学习，就来博学谷</h1> <h2>线上学习，就来博学谷</h2> <h3>线上学习，就来博学谷</h3> <h4>线上学习，就来博学谷</h4> <h5>线上学习，就来博学谷</h5> <h6>线上学习，就来博学谷</h6> </body></html>在上面的代码中，设置了六个标题，最终展示效果如下：




    现在，你也尝试一下上面的代码，看一下效果是否一样。

    通过最终的展示效果，我们可以对标题标签做一个总结：

    标题标签可以让文字加粗并且一行展示，而且文字的字号由大到小逐渐递减的，同时重要性也是递减的。







    4、段落和换行标签

    4.1 段落标签

    在前面的课程中，我们也学习过如果想让网页中，把文字有条理的显示出来，就需要对这些文字进行分段的展示。

    在HTML标签中，要想实现文字的分段展示就要用到<p>标签，<p>标签用于定义段落，它可以将整个网页分为若

    干个段落。

    段落标签的语法格式如下：

    <p> 这是一个段落</p>段落标签的语义就是将HTML文档分割成若干的段落。

    下面，咱们来做一个例子来体验一下段落标签的使用。

    在上图中，我们可以看到，在VSCode中，已经按下回车键，将文章的内容分成了两段。现在通过浏览器浏览时，会分段显示吗？这里你可以思考一下。

    下面，我们将网页内容保存一下，然后通过浏览器浏览一下，看一下效果。在浏览器中展示的效果如下图所示：




    通过上图的展示，我们可以很清楚的看到，在浏览器中进行展示时，文章内容并没有进行分段。也就是说，要想让浏览器展示的文章内容进行分段，不能直接通过按下回车键来完成，这里需要用到<p>标签来完成。下面咱们使用<p>标签来完成分段。

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <p> 如今，多屏互动和多端兼容友好的界面日益成为所有系统重要的需求，因此优秀的前端开发工程师在就业市场上也变得更为抢手。本文将为广大的前端学习者介绍一下前端开发培训班的一些实战项目，希望大家可以通过理论知识和项目实践的学习，朝着中高级前端工程师的方向发展。 </p> <p> 电商后台管理系统项目通过使用vue官方vue-cli3.0脚手架工具提供的工作流快速搭建和开发项目，运用阿里旗下饿了么 ElementUI组件库搭建网页结构同时实现相应页面中的功能，通过axios请求后端相应的接口，然后把请求到的数据展示到页面中，通过Vue-router作为前端路由管理复杂页面。该项目包括了前后端分离模式开发、vue-cli3.0、ElementUI组件库（饿了么UI）、Echarts数据可视化库等内容。 </p> </body></html>你仔细阅读上面的代码可以发现，我们就是添加了两组<p>标签。而<p> 标签内部的文字就构成了一个段落，这样上面的文章，我们共分成了两个段落。

    前面我们是不是已经打开了浏览该网页的浏览器啊，所以这里可以直接单击浏览器的刷新按钮，就可以看到最新的效果了，如下图所示：




    通过上图，可以看到当单击了刷新按钮后，文章就被分成了两个段落。

    接下来你也把上面的代码尝试一下吧！

    关于段落标签的内容我们学习完了，下面总结一下:

    <p> 这是一个段落</p>


    4.2 换行标签

    在写文章的时候，我们不仅要进行分段，而且还要进行换行。说到换行，其实浏览器会自动的给所展示的文章内容进行换行，如下图所示：

    但是，浏览器自动产生的换行，往往并不是我们希望的，我们希望的是能够根据自己的情况来决定对文章内容进行换行，那么这应该怎样实现呢？

    在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要用到换行标签。

    <br />注意：换行标签是一个单标签。

    下面，就来使用一下换行标签。

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <p> 如今，多屏互动和多端兼容友好的界面日益成为所有系统重要的需求，因此优秀的前端开发工程师在就业市场上也变得更为抢手。<br />本文将为广大的前端学习者介绍一下前端开发培训班的一些实战项目，希望大家可以通过理论知识和项目实践的学习，朝着中高级前端工程师的方向发展。 </p> <p> 电商后台管理系统项目通过使用vue官方vue-cli3.0脚手架工具提供的工作流快速搭建和开发项目，运用阿里旗下饿了么 ElementUI组件库搭建网页结构同时实现相应页面中的功能，通过axios请求后端相应的接口，然后把请求到的数据展示到页面中，通过Vue-router作为前端路由管理复杂页面。该项目包括了前后端分离模式开发、vue-cli3.0、ElementUI组件库（饿了么UI）、Echarts数据可视化库等内容。 </p> </body></html>​在上面的代码中，我们在第一段中添加了换行标签，下面看一下效果。

    你也尝试一下，在文章中添加换行标签，来感受一下对应的效果吧！！

    关于换行标签，我们学习完了，下面做一个简单的总结：

    <br />标签是一个单标签，作用就是将文本强制换行显示。




    5、文章案例

    通过前面的学习，我们已经掌握了‘标题标签’，‘段落标签’,'换行标签'的应用。下面我们通过一个案例，来综合应用一下这几个标签。案例的最终效果如下：

    在这里，你先自己思考一下，把一篇文章展示出如上的效果，应该怎样进行处理？

    分析的结果如下：

    通过上面的图，我们知道，文章中第一行为标题，在这里为了醒目，可以使用<h1>标签，同时可以看到文章是有段落的，所以会使用<p>标签。在这篇文章中不仅有一级标题，还有子标题，关于子标题的设置，这里我们可以使用<h4>标签来完成，需要格外注意的一点就是最后文章的【来源】与【作者】这块内容，首先它们是在一个段落中，然后分到了不同的行中，所以这里会先有<p>标签，使其在一段中，然后再用<br />标签来完成换行操作。

    好了，现在我们已经将整个案例分析完成了，下面你可以自己尝试的把代码写一下了。

    代码最终实现如下：

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <h1>前端开发培训班的实战项目有哪些?</h1> <p> 如今，多屏互动和多端兼容友好的界面日益成为所有系统重要的需求，因此优秀的前端开发工程师在就业市场上也变得更为抢手。本文将为广大的前端学习者介绍一下前端开发培训班的一些实战项目，希望大家可以通过理论知识和项目实践的学习，朝着中高级前端工程师的方向发展。 </p> <h4>学成网在线项目</h4> <p> 学成在线案例是一个在线教育平台，在该案例中使用HTML+CSS进行页面的布局， 在首页中主要有网页的头部区域、网页的banner区域、课程导航和课程列表。 </p> <h4>品优购电商项目</h4> <p> 品优购电商项目属于B2C电商平台，类似于京东商城和淘宝，在该项目中使用HTML+CSS/CSS3进行页面的布局和动态效果实现， 主要实现了电商首页、列表页面、详情页面，三个页面之间能够进行相互切切换。项目主要根据Photoshop进行效果图的展示和页面尺寸、颜色量取的辅助开发；综合运用DIV+CSS知识，提高学员进行网页布局的能力。 </p> <p> 来源：博学谷<br /> 作者：照照 </p> </body></html>现在，我们已经完成整个案例了，在这个案例中，我们主要使用了段落标签,标题标签，换行标签。

    对于这几个标签的应用，我相信你已经学会了，那么我们就开始下一小节的学习吧！！

    6、文本格式化标签

    6.1 文字加粗

    在浏览网页的时候，你有没有遇到这样的情况，就是在阅读一篇文章或者是新闻的时候，发现某个词语或者某句话被设置了【粗体】,【斜体】或者是【下划线】。

    为什么要做这样的设置呢?

    目的就是为了突出重要性，引起读者的关注，因为设置了‘粗体’，或者是'斜体'，‘下划线’要比普通的文字更重要，

    所以，你在写一篇文章的时候，可以将你认为的重要的文字设置成这样的效果。

    而设置这样效果的标签，我们称之为‘文本格式化标签’。

    常见的文本格式化标签，如下表格所示：

    下面我们先来看一下加粗效果，关于加粗这里有两个标签，分别是<strong>标签与<b>标签。

    代码演示如下：

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> 我是一个<strong>大帅哥</strong> 我是一个<b>大帅哥</br> </body></html>在上面的代码中，我们使用了<strong>标签与<b>标签。

    效果如下：

    虽然，<strong>标签与<b>标签都可以实现加粗效果，但是这里推荐使用<strong>标签。因为<strong>标签语义更加强烈。怎样理解语义更加强烈呢？打个比方：你在与同学交流的时候，为了突出你的观点，可以加重语气，而<strong>相当于语气更加的强烈，所以推荐使用<strong>标签。

    下面学习一下文字倾斜效果。

    6.2 文字倾斜

    关于文字倾斜，也有两个标签可以实现，分别是<em>标签与<i>标签。

    代码如下：

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> 我是大<em>美女</em> <br /> 我是大<i>美女</i> </body></html>效果展示：

    通过以上效果可以看到 <em>标签与i标签都可以实现斜体，但是这里还是推荐<em>标签，因为该标签语义更加强烈。

    赶紧尝试一下上面的代码吧！！

    6.3 删除线效果

    对于删除线也有两个标签可以实现，分别是<del>标签与<s>标签。

    如果需要给文字添加删除线效果，推荐使用<del>标签，因为语义更加强烈。

    删除线的效果，我们是比较常见的，例如：在访问某些购物网站的时候，经常会遇到某件商品原价是多少钱，现价是多少钱，并且把原价添加了删除线，表示商品已经降价了，如下图所示：




    下面，我们来看一下关于删除线标签的应用，具体代码如下：

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> 商品价格<del>￥50</del> <br /> 商品价格<s>￥100</s> </body></html>执行上面代码后，效果如下图所示：




    赶紧尝试一下上面的代码吧！！

    6.4 下划线效果

    我们在阅读文章的时候， 经常会将一些重要的语句或者是段落添加下划线。如下图所示：

    但是，在网页中我们应该怎样添加下划线呢？这里需要用到下划线标签，下划线标签也是有两个标签<ins>与<u>，当然这里推荐使用<ins> 标签，因为该标签语义更加的强烈。具体的实现代码如下：

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> 这是<ins>下划线</ins><br /> 这是<u>下划线</u> </body></html>执行上面代码后，效果如下图所示：




    赶紧尝试一下上面的代码吧！！

    总结：

    关于文本格式化标签，在这里我们就学习完了，下面对这块内容总结一下。

    文本格式化标签，可以对我们的文字添加一些特殊的格式，例如：'加粗'，’倾斜‘，’下划线‘等。添加上这些效果后，就使得这些文字比普通的文字更加的重要了，也更能吸引用户的眼球，这就是对文字添加格式化标签的目的。

    在这一关中，我们主要学习了如下的文本格式化标签：

    在这张表格中，你要记住的是，加粗使用的是<strong>标签，倾斜使用的是<em>标签，删除线使用的是<del>标签，下划线使用的是<ins>标签。




    7、div与span标签

    <div>标签与<span>标签是两个比较特殊的标签，因为这两个标签是没有语义的，它们就是一个盒子，用来装内容的。这两个标签主要用来完成网页布局的，我们通过下图来体会一下：







    上图展示的效果是我们比较常见的效果，在访问某些购物网站的时候，通常会采用如上的布局来展示对应的商品。

    在上图中，我用红色的线框起来的内容就是一个一个的盒子，在每个盒子中装的就是图片与文字。下面看一下这两个标签的语法格式。

    语法格式

    <div> 我是div标签</div><span> 我是span标签</span><div>与<span>标签都是双标签，可以在这两个标签中(两个盒子)添加内容。

    关于这两个标签，现在最重要的是要理解它们的特点。

    特点1：<div>标签是用来进行网页布局的，但是就目前来说在一行中只能放一个<div>,相当于一个大盒子。

    特点2：<span>标签也是用来布局的，一行上可以有多个<spa>,相当于一个小盒子。

    下面，我们首先来看一下<div>标签的应用，具体代码如下：

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <div>第一个div标签</div> <div>第二个个div标签</div> </body></html>在上面的代码中，我们添加了两个<div>标签，并且在标签中添加了文字，相当于这两个盒子中装的就是文字。

    好了，下面看一下在浏览器中运行的效果，如下图所示：




    通过上图的展示效果，我们很容易就明白了，在默认的情况下，每个<div>独占一行，就像一个大盒子。

    下面，再通过一张图来体会一下，<div>的应用。




    在上图中，相当于一个大盒子中装了很多的内容，这个大盒子就是一个大的<div>

    理解了<div> 标签的应用后，下面看一下<span>标签的应用，代码如下：

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <div>第一个div标签</div> <div>第二个个div标签</div> <span>博学谷</span> <span>传智播客</span> <span>博学谷</span> </body></html>在上面的代码中，我们添加了三组<span>标签，对应的在浏览器中展示的效果如下所示：




    通过上图的展示效果，我们知道所有<span>标签内容是在一行中展示的，所以<span>标签就像一个小盒子。‘

    关于<div>标签与<span>标签，在这我们就学习完了，后面学习了CSS样式以后，还会继续深入学习这块内容。目前，我们需要记住以下两点就可以了：




    8、图像标签

    8.1 图像标签使用

    在前面的课程中，我们创建的网页中只有文字没有图片。如果我们想在网页中插入图片，应该怎样进行处理呢？这就需要用到图像标签。

    在HTML标签中，<img>标签用于定义HTML网页中的图像。

    语法格式：

    <img src="图像路径" />在上面的语法格式中，首先要注意的就是<img>标签是一个单标签，然后还要注意在<img>标签中有一个属性src.

    src是<img>标签必须要添加的属性，它的作用是用来指定网页中所展示的图片的路径和文件名(关于路径概念后期课程会专门来讲解，这里我们先记住src属性取值为图片文件名就可以)，也就是说如果没有该属性是无法在网页中显示图片的。那什么是属性呢？

    所谓属性：简单的理解就是属于这个图像标签的特性。其是属性在我们日常生活中也是非常常见的，例如‘人’有哪些属性呢？可以说话，可以思考等等。了解了以上内容后，下面我们就尝试一下怎样实现在网页中插入图片。

    当然，在插入图片之前我们还需要做一下准备工作，就是准备一张图片，如下图所示：




    通过上面这张图片，我们可以看出在我们创建的MyWeb这个文件夹中，除了有我们以前创建的html网页以外，这里我还添加了一张图片，叫做m.jpg,下面我们就把这张图片添加到index.html这个网页中。具体实现的代码如下：

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <img src="m.jpg" /> </body></html>通过上面的代码，可以发现我们直接给img标签的src属性指定了图片的名称。写完以上代码，打开浏览器查看对应的效果，如下图所示：




    下面，你也赶紧尝试一下在你的网页中插入一张漂亮的图片吧!!

    当你在网页中插入图片以后，是否也想添加文字啊！现在，将代码修改成如下的形式

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> 我的梦中情人 <img src="m.jpg" /> </body></html>在上面的代码中，就是添加了一句话，然后通过浏览器运行上面的代码，效果如下所示：




    通过上图，可以发现文字与图片在一行中展示了，现在我们想换行展示应该怎样进行处理呢？我相信你已经想到了多个解决方案，例如：在文字后面添加<br /> 标签，可以实现文字与图片的换行展示，或者把文字放到一个<div>标签中也可以实现换行展示。除了这两种方式以外，还有没有其他的方式呢？是不是也可以通过标题标签来完成啊，在前面我们也学习过，标题标签是独占一行的。在这里，我们通过标题标签来解决这个问题，因为标题标签有加粗效果，整体上更加的美观。所以，修改后的代码如下所示：

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <h4>我的梦中情人</h4> <img src="m.jpg" /> </body></html>现在，你也将代码修改成如上的形式，看一下效果吧！！

    通过以上的学习，我们已经掌握了图像标签的基本使用了，下面我们继续学习一些关于图像标签的其它属性。

    8.2 图像标签属性

    通过前面的学习，我们知道了图像标签中必须有一个src属性，该属性的作用就是用来指定网页中所展示的图片的路径和文件名。那么除了src这个属性以外，图像标签还没有其它的属性呢？当然是有的，如以下表格所示：




    下面，我们分别来学习一下这些属性，首先先来学习一下alt属性。

    alt属性：当图片显示不出来的时候，用alt属性所指定的文字来替换图片进行展示。

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <img src="m1.jpg" alt="我的梦中情人" /> </body></html>在上面的代码中，我们所插入的图片的名称叫做m1.jpg,但是注意了，在当前的MyWeb 这个文件夹下是没有该图片的。同时，给img标签添加了alt属性，并给该属性指定了一段文本，下面通过浏览器查看一下运行的效果：




    通过运行结果可以看到，由于没有m1.jpg, 所以浏览器中不会展示任何的图片，只能显示alt属性所指定的文本。alt属性是比较常用的一个属性，因为在图片显示不出来的情况下，用户可以通过文字来了解图片的内容。所以，一般建议给img标签添加上该属性。

    以上是alt属性的内容，下面学习一下title属性：

    title属性：该属性的取值也是一段文本，这段文本是在用户将鼠标放到图像上的时候才会展示出来，所以也叫做提示文本。具体代码实现如下：

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <img src="m.jpg" title="我的梦中情人" /> </body></html>运行上面的代码，效果如下所示：




    当鼠标移动到图片上的时候，就会显示出title属性的文本内容。

    下面学习一下width与height 这两个属性，其实这里通过这两个属性的名称，我们就知道其作用就是设置图片的宽度与高度的。具体代码如下：

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <img src="m.jpg" title="我的梦中情人" width="300" height="300" /> </body></html>在上面的代码中，我们给<img>标签不仅添加了<title>属性，同时也指定了width 和height属性,设置图片的宽度与高度,分别为300像素。通过浏览器运行上面的代码，对应的运行效果如下所示：




    通过演示效果，可以看到图片的高度与宽度都发生了变化，但是你仔细观察一下，是不是发现了一个问题？图片变形了。对了！如果我们同时设置了图片的width 属性与height 属性，就会导致图片的变形。所以，我们一般只需设置一个属性就可以，也就是要么只设置width属性，要么只设置height属性，不会同时设置这两个属性。

    我相信看到这，你一定有疑问了。如果只设置了width属性，那height属性的值是多少呢？会自动等比例缩放，根据宽度值，自动计算出高度的值。同理，你只设置了height属性，那么width属性的值也会自动等比例缩放。

    好了，在这给你留一个小的练习题，你自己尝试一下只设置图片的width属性或者是height属性，看一下运行效果，是不是我们所说的，高度或者宽度会自动等比例缩放。

    下面，学习最后一个属性<border>属性，该属性的作用是为图片添加边框，代码如下：

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <img src="m.jpg" title="我的梦中情人" width="300" border="10" /> </body></html>在上面的代码中，给<img>标签添加了<border>属性，设置了边框为10像素，对应的效果如下所示：

    通过这个展示效果，可以看到border 属性给图像添加了边框，但是这个边框效果并不是特别好看，所以我们后期要给图像添加边框都是通过CSS样式来完成的。通过css样式添加边框不仅可以设置漂亮的颜色，同时还可以控制边框的形状，例如将边框修成成圆角等。所以，关于border属性，在这里你只需了解一下就可以了。

    关于图像标签的内容，在这我们就学习完了，下面总结一下。

    9、课程总结

    关于HTML常用标签这一节课我们学习完了，下面我们就回想一下都学到了哪些知识内容吧！

    通过本课程的学习，我们能够使用标题标签来设置文章的标题，同时也能够使用段落标签与换行标签给文章内容分段，以及换行，从而使文章的整体结构更加的清晰，而且还能够使用文本格式化标签对文章中的关键词语进行’加粗‘，’倾斜‘等设置，从而引起用户注意，最关键一点是现在可以向网页中插入图片了，现在我们设计的网页既有文字又有图片，是不是很激动啊！！



    关键词：标签

    推荐文章

    新闻资讯

    整合营销 网络营销 网络推广 信息时代 建站知识 网站运营 电子商务 营销百科 公司新闻 行业动态 品牌营销

    推荐资讯

    74
    73
    25
    news

    微信公众号

    版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

    为了最佳展示效果，本站不支持IE9及以下版本的浏览器，建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
    关闭