HTML中的常见标签

最新推荐文章于 2024-07-24 16:53:23 发布

苏艾格

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量840

点赞数 3

分类专栏： HTML学习笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_43641202/article/details/115179425

版权

HTML学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML中常见的标签

基本标签

上一章说了常见标签有：

标题标签<h1>~<h6>
段落标签<p>
水平线标签<hr>
强制换行标签<br>
强调标签<strong>标签（字体加粗）
特别强调标签 <em>标签（字体倾斜）

还有两个没有特别意思的标签，分别是：

<div>和<span>
这两个标签没有特别标注是段落标签还是标题标签之类，
他们两唯一的区别就是，一个是行内元素，一个是块元素。

行内元素有哪些？
上面说的<span><strong><em><br>就是行内元素。<br>因为是强制换行，但是是属于行内元素。<a><img>也属于行内标签，之后再讲这两个标签。

块元素呢？
<h1>~<h6>
<p>
<hr>
<div>

都属于块元素。

块元素

简单理解就是行内元素能在同一行显示，而块元素会自动换行。
块元素之所以叫块元素，就是要把它看成一个方块，块元素有大小，默认占据一整行。
例如：给块元素和行内元素加上背景颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>行内标签与块标签的区别</title>

    </head>
    <body>
        <p style="background-color: red;">块元素</p>
        <span style="background-color: red;">行内元素</span>
    </body>
</html>

行内元素与块元素的区别
比如我们要在网页里居中一副图片，直接给<img>标签居中，去给<img>加一个居中属性，不会有任何效果。我们要给<img>套一个块元素，再给块元素设置一个居中属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>行内标签与块标签的区别</title>

    </head>
    <body>
        <img style="text-align: center; background-color: red;" src="img/A.jpg" alt="#">
    </body>
</html>

我这里直接给<img>加上了居中和红色背景，但是因为<img>是行内元素所以在浏览器中看不到又任何变化。
在这里插入图片描述

如果我给<img>外边套一个<div>，把居中和背景颜色属性赋予<div>会是什么样子呢

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>行内标签与块标签的区别</title>

    </head>
    <body>
        <div style="text-align: center; background-color: red;">
            <img src="img/A.jpg" alt="#">
        </div>
    </body>
</html>

在这里插入图片描述

既然说了图片就来说一下 <img>

<img>标签的基本语法

<img>标签的基本语法如下。

   <img src="图片地址" alt="图像失效的替代文字" title="鼠标悬停提示文字">

src 属性表示图片路径，分为绝对路径和相对路径。

绝对路径： 指向目标地址的完整路径描述，一般指向本站点外的文件。例如：<img src=http://www.sohu.com/indx.html/file/sohu.png>
相对路径： 相对于当前页面的路径，通常用于指向本站点内的文件，所以未必是一个完整的URL地址。例如：<img src="img/A.jpg">表示链接地址为当前页面所在路径的 img 目录下的A.jpg 图片。

<a>标签的基本语法

超链接标签包含两个部分，一个是<a>标签的href属性，就是链接的目标，可以是某个网址或文件的路径；二是<a>标签的target属性，用来定义被链接的文档在何处显示。也就是在本页面直接打开这个链接，还是开启一个新的窗口去打开这个链接。
语法如下：

<a href="链接地址" target="目标窗口位置">链接文本或图片</a>

href: 链接地址的路径
target: 指定链接在哪个窗口打开，常用的值有 _self (自身窗口)、_blank (新建窗口)。

示例：

<a href="https://www.baidu.com/" target="_self">百度</a>

在这里插入图片描述
单击文本超链接（百度），会在当前页面跳转到百度页面。

注意！ 当超链接标签的href属性为 “#” 时，表示空链接，不会跳转到其他链接，也不会弹出404。

锚链接

锚链接常用于页面内容很多，需要定位到目标页面内容中的某个具体位置时。我们最常见的就是某宝，当点击某个超链接时，会跳转到对应帮助的内容介绍处，实现这个效果也很简单。
（1）在页面乙位置设置标记，语法如下。

<a name="AJ">目标位置乙</a>

name属性用于规定锚的名称，AJ为标记名，就类似于古时固定船的锚，所以也称作为锚名。
（2）设置甲位置的链接路径，就是href属性值为 “#标记名”，语法如下。

<a href="#AJ">当前位置甲</a>

完整效果就是点击“当前位置甲”，页面就会弹到“目标位置乙”。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>锚链接</title>

    </head>
    <body>
           <a name="AJ">目标位置乙</a>
           <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
           <a href="#AJ">当前位置甲</a>
    </body>
</html>

为了感受到效果我用<br>把页面拉长,页面效果如下：
在这里插入图片描述

右边的滚动条在最底端，当点击“当前位置甲”，浏览器就会自动跳到当前页面的“目标位置乙”。
在这里插入图片描述

HTML的常见标签就说完了，下一章说一说CSS。
美化网页，让我们的页面看起来赏心悦目。

苏艾格

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
3
评论
HTML中的常见标签

HTML中常见的标签基本标签块元素基本标签上一章说了常见标签有：标题标签<h1>~<h6>段落标签<p>水平线标签<hr>强制换行标签<br>强调标签<strong>标签（字体加粗）特别强调标签 <em>标签（字体倾斜）还有两个没有特别意思的标签，分别是：<div>和<samp>这两个标签没有特别标注是段落标签还是标题标签之类，他们两唯一的区别就是，一个是行内元素，一个是块
复制链接

扫一扫