HTML标签学习---第三天

最新推荐文章于 2023-08-18 15:50:00 发布

容露俞德

最新推荐文章于 2023-08-18 15:50:00 发布

阅读量293

点赞数

分类专栏：初识HTML VS Code 文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_44762145/article/details/117255333

版权

VS Code 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

初识HTML

11 篇文章 0 订阅

订阅专栏

第三天：HTML常用标签学习

一.<div>和<span>标签

二.图像标签和路径

2.1图像路径

2.2图像属性

一.<div>和<span>标签

<div>和<span>是双标签是没有语义的，它们就是盒子标签，用来在里面添加内容，使布局网页更加清晰方便。

div是division的缩写，表示分割、分区。span意为跨度、跨距。

<div>常见用途有：作为盒子模型用于组合其他HTML元素的容器；另一个常见用途是文档布局，它取代了使用表格定义布局的老方法，而<table>标签的作用是显示表格化的数据。

<span>常见用途：和<div>标签一样可以用作文本的容器，此外，当它与css一同使用时，<span>元素可以用于为部分文本设置样式属性。

特点：

1.<div>属于块级元素，通常独占行，上一篇讲到的<h1>~<h6>\<p>，以及后面会涉及的<ul>\<table>都属于块级元素，块级元素不与其他元素分享自己所占的行。

补充：HTML元素通常被划分为两类，一类是块级元素、一类是行内元素（也叫内联元素），行内元素在显示时不会独占行。例如：<b>\<td>\<a>\<img>

2.<div>标签可以用于对大的内容块设置样式属性，一行只能放一个大盒子

3.<span>标签属于行内元素（内联元素），也就是上述提到的它可以与其他行内元素共享一行空间

4.一行上可以存在多个<span>，span相当于小盒子，所填内容也少

<div>实例：

<!DOCTYPE html>
<html lang="zh-CN">

<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>div与span标签</title>
</head>

<body>
    <div>块级元素，独占一行</div>
    不信你看
    <a>行内元素，分享同一行</a> 这是真的
</body>

</html>

<div>如何在网页制作中使用呢？

拿京东界面举例：

像下图这样独占一行的情况就可以用div标签划分框架，是一个盒子模型

<span>实例：

<span>综艺</span>
<span>电视剧</span>
<span>动漫</span>

<span>如何在网页制作中使用呢？

我们还是拿京东界面举例：

像下图这样需要写页面导航栏的情况就可以用<span>标签和<li>标签灵活使用

二.图像标签和路径

2.1图像路径

在 HTML 中，图像由 <img> 标签定义，它是一个单标签，img就是image图像的缩写。

写成 <img> 格式，指的是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src），src 指 "source"，是<img>标签的必须属性，它用于指定图像文件的路径和文件名。即源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />

实例以及注意事项：

大多数情况下我们都会使用相对路径来调用图像位置：

第一种相对路径情况：需要将图片和文件放在同一文件夹下

VS Code是可以将图片、文件、文件夹等资源通过拖拽的方式直接将其拖拽到软件中的，如图：

如此一来该图片便被我们拖到同一文件夹下了

接着，我们便可以在HTML文件中使用该图片了：

记住图像标签是<img src="url" />，url就是路径的意思，在这里我们需要将其改为图片所在途径，也就是<img src="./1.jpg" />

<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <img src="./1.jpg">
</body>

</html>

展示效果如下：

那么有人会问了“. / 1.jpg”是什么意思，它其实就是路径的简化，当该图片与所写文件处于同一文件夹下时，你只需要在VS Code的图片标签src的双引号内敲上“. /”，VS Code会自动提示照片位置，直接选择便是：

第二种相对路径情况：是图片与文件不在同一文件夹中，即在上一级文件夹中时：

那我们就需要用到<img src="../8-Vue/1.jpg">来调用图片，而这里用到的方式虽然是和上一种情况相似的，但有一处细节不要忽视，"../8-Vue/1.jpg"前面需要两个" . "

这样我们就需要选择两次路径了：

最终效果与上述相同。

接着我们来看第三种情况：

第三种情况是绝对路径，是指目录下的绝对位置，直接达到目标位置，通常是从盘符开始的路径

例如：“D:\色彩设计\05简单单个临摹\02.jpg” 或完整的网络地址“https://img20.360buyimg.com/babel/jfs/t1/178856/31/5678/84515/60ab3c66E98c2533f/78fc74c931ae9800.png.webp”

<!DOCTYPE html>
<html lang="zh-CN">

<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>
</head>

<body>
    <img src="./1.jpg" alt="图片加载不出。。。">
    <img src="D:\色彩设计\05简单单个临摹\02.jpg" alt="图片加载不出。。。" width="50%">
    <img src="https://img20.360buyimg.com/babel/jfs/t1/178856/31/5678/84515/60ab3c66E98c2533f/78fc74c931ae9800.png.webp" alt="图片加载不出。。。">
</body>

</html>

2.2图像属性

HTML文件是从上往下解析的，所以浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

事例如下：

<!DOCTYPE html>
<html lang="zh-CN">

<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>
</head>

<body>
    <h1>NBA解释詹姆斯未被停赛：本赛季有许多类似情况 </h1>
    <h3>首创统计</h3>
    <p>北京时间5月25日，近日，勒布朗-詹姆斯违反了NBA的健康和安全规定， 但他并没有因此在首轮对阵太阳时被停赛。本周早些时候，詹姆斯参加了一个品牌推广活动， 他现身支持一个龙舌兰酒品牌Lobos 1707，这次活动发生在湖人队与勇士队的比赛之前。</p>
    <p>联盟和湖人都知悉了这件事，但是詹姆斯没有被停赛，因为这一事件并没有上升到病毒传播的威胁水平。 今天，NBA首席联络官Mike Buss发布声明， 就湖人前锋勒布朗-詹姆斯违反联盟健康与安全协议事件作出解释。
    </p>
    <img src="../8-Vue/1.jpg">
    <p>“为了澄清任何可能存在的误解，詹姆斯上周短暂地参加了一次户外活动， 该项活动的参与者都已经接种了疫苗或者核酸检测呈阴性。在这样的情况下，经咨询医疗专家后， 联盟认为他的出席并不会引发与新冠病毒传播相关的风险，因此不必需要接受隔离。 在这个赛季，已经出现多次类似的违反联盟健康与安全协议的情况， 都采取了与对詹姆斯相似的处理方式。”
    </p>
    <p>雅虎记者Chris Haynes对这则声明表示：“在詹姆斯身边呆了几年，他一直都是个很注重医疗情况保持隐私的人， 也从来不会危及到他的家人和队友。这份声明表明了一件事：他已经接种了疫苗。”
    </p>
    <h5>作者：NBA广角 <br/> 2021-05-25 08:13</h5>

</body>

</html>

图像标签除了src属性外还有其他一系列的属性，并且一个图像标签可以包含多个属性，但是属性与属性之间需要空格隔开。

图像标签属性
属性	属性值	说明
src	图片路径	可以说是图像标签的必须属性
alt	文本	替换文本，当图像不显示时的提示文字
title	文本	提示文本，鼠标放在图像上弹出的文字
width	像素宽度	设置图像的宽度
height	像素高度	设置图像的高度
border	像素	设置图像边框粗细

属性格式：属性名=“属性值”

拿其中的“alt”属性举例：

alt属性是在src属性查找图片无果后反馈给用户的文字，所以我们可以先将文件夹中的图片删除，再添加src属性：

其在网页中显示效果如下：

在上述属性中大家要略微注意width和height属性，当我们同时修改两个属性像素时很可能会计算不准导致图像变形，这时候我们最好只修改其中一个属性，而另一个属性会自动等比例缩放。

对其他属性感兴趣的朋友们可以自己试试看，技术学习就是需要多动手~

容露俞德

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签学习---第三天

第三天：HTML常用标签学习一.<div>和<span>标签<div>和<span>是双标签是没有语义的，它们就是盒子标签，用来在里面添加内容，使布局网页更加清晰方便。div是division的缩写，表示分割、分区。span意为跨度、跨距。<div>常见用途有：作为盒子模型用于组合其他HTML元素的容器；另一个常见用途是文档布局，它取代了使用表格定义布局的老方法，而<table>标签的作用是显示表格化的数据。<
复制链接

扫一扫

专栏目录