重头开始学HTML-DAY1——常用标签

最新推荐文章于 2024-06-14 14:51:07 发布

htw今天AC了吗？

最新推荐文章于 2024-06-14 14:51:07 发布

阅读量122

点赞数

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_52952269/article/details/129712692

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML的常用标签——结合标签的语义进行记忆

1、标题标签：<h1> - <h6>

语义：作为标题使用，并且依据重要性递减。加了标题的文字会变粗变大且独占一行。

2、段落标签&&换行标签： <p> ···· </p> && <br/>

<p></p>语义：可以把HTML文档分隔为若干段落。

<br/>语义：可以对某段落进行换行。

3、文本格式化标签

加粗标签：<strong> </strong> 或者 <b></b>

倾斜标签：<em></em> 或者 <i></i>

删除标签：<del></del> 或者 <s></s>

下滑标签：<ins></ins> 或者 <u></u>

4、div标签&&span标签，布局标签（双标签）

用于对网页进行布局，可以当做是一个盒子，用来装内容。

<div>表示分区，是一个超大盒子，独占一行，<span>表示跨距，是一个较小的盒子。

5、图像标签（单标签）

<img src = '' 图像URL''/>，src是<img> 标签的必须属性，用于指定图像文件的路径和文件名。

所谓属性：简单理解就是属于这个图像标签的特性。

注：需要留意，需要把图像和html的文件放在一起，或者声明好路径位置，不然图片无法显示。同时<img>标签没有先后，但是每个标签要用空格分隔，每个属性都采用键值对的格式。

实操代码：

<!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>
    <h4>图像标签的使用</h4>
    <img src="../image/前端.jpg">

    <h4>alt 替换文本，当图像显示不出来的时候用alt中的文字进行替代</h4>
    <img src="../image/前端1.jpg" alt="这个图像出错了">

    <h4>title 提示文本，鼠标放到图像上，title中的文字会进行提示</h4>
    <img src="../image/前端.jpg" title="这个是有关前端的图片">

    <h4>width（宽）和height（高） 控制图像的尺寸和大小</h4>
    <img src="../image/前端.jpg" width="100px" height="100px">

    <h4>border 给图像设置边框</h4>
    <img src="../image/前端.jpg" border="15" >

</body>
</html>

效果演示：

图像的URL需要提及到关于路径的知识点，在这之前呢，我们先接触到两个知识点：

在实际的工作中呢，我们的文件不能随便乱放，否则需要用到的时候呢，就很难找到他们，所以我们一般会用一个文件夹来管理他们，而目录文件夹就是普通的文件夹，根目录就是打开目录文件夹的第一层。比如我们会用一个images文件夹去管理我们开发当中会用上的图像等等。

什么是相对路径？

以引用的文件所在为参考基础，而建立出的目录路径，就是图片相对于HTML页面的位置。

什么是绝对路径？

是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或者是完整的网络地址（访问时需要联网）。

6、链接标签

在HTMl标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

（1）链接的语法格式

<a href = "跳转目标" target = "目标窗口弹出的方式（默认是_self在原来的窗口打开，而_blank即是在新的窗口打开）"> 文本或图像 </a>

（2）链接分类

A. 外部链接：需要用 http:/ 进行开头，访问其他的网站。

B.内部链接：网站内部页面之间的相互连接。

C.空连接：直接就是用一个"#"代替。

D.下载链接：如果href里面的地址文件、压缩包（.exe或者.zip），会下载这个文件。

E.网页元素链接：相当于给网页当中的某个元素，例如文字，图像等添加链接。

F.锚点链接：当我们点击链接，可以快速定位到页面中的某个位置。

第一步：在链接文本的href属性中，设置属性值为 #名字的形式，如： <a href = ''#two''>第二集</a>。

第二步：找到目标位置的标签，里面添加一个id属性 = 刚才设置的名字，如：<a id = "two">第二集介绍</h3>。

<!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>
    <h2 id="外部">外部链接</h2>
    
    <a href="http:/www.qq.com" target="_blank">腾讯</a>
    <a href="#锚点">点击这里返回锚点链接的位置</a>
    <!-- target默认的值是_self在原本的窗口覆盖打开，而_blank即在新的窗口打开 -->
    
    <h2>内部链接：网站内部页面的相互连接</h2>
    <a href="./图像标签.html" target="_blank">图像标签页</a>

    <h2>空连接：#</h2>
    <a href="#" target="_blank">这是一个空连接</a>

    <h2>下载链接：如果href里面的地址一个文件或者压缩包，会下载这个文件</h2>
    <a href="../image.zip">下载文件</a>

    <h2>网页元素链接：相当于给网页当中的某个元素，例如文字，图像等添加链接。</h2>
    <a href="http:/www.baidu.com" target="_blank"><img src="../image/前端.jpg"></a>

    <p>这里有好多好多字！！！<br>这里有好多好多字！！！
    <br>这里有好多好多字！！！这里有好多好多字！！！这里有好多好多字！！！这里有好多好多字！！！这里有好多好多字！！！这里有好多好多字！！！这里有好多好多字！！！<br>这里有好多好多字！！！<br></p>
    <h2 id="锚点">锚点链接</h2>
    <a href="#外部">点击这里可以前往外部链接的位置</a>

    <!-- 注意，某些文件是保存在我的电脑当中进行访问，需要演示的话，请写入自己电脑当中文件的正确URL -->

        

</body>

</html>

演示视频：

关于HTML当中的链接标签的使用演示

总结：

今天结合视频内容，学习了HTML语法当中的一些常用的标签，接下来，再接再厉！