HTML标签上_html放到标签上显示的字-CSDN博客

本文链接：https://blog.csdn.net/weixin_54375830/article/details/125573444

标题标签：

在页面中经常使用标题标签，HTML提供了6个等级的网页标题，即<h1>-<h6>

h单词head的缩写，意为头部，标题

标签语义：作为标题使用，并且依据重要性递减

特点：

1.加了标题的文字会变得加粗，字号也会依次变大

2.一个标题独占一行

段落标签：

在网页中，利用段落标签可以将文字分段表示，在HTML中，<p>标签用于定义段落，它可以将整个网页分为若干个段落

<p>我是一个段落标签</p>

标签语义：可以把HTML文档分割为若干段落

特点：

1.文本在一个段落中会根据浏览器窗口的大小自动换行

2.段落和段落之间保有空隙

换行标签

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

标签语义：强制换行

特点：

1.<br />是单个标签

2.<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的差距

文本格式化标签

在网页中，有时需要为文字设置粗体，斜体和下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示

标签语义：突出重要性，比普通文字更重要

加粗: <strong></ strong>或者<b></b>

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

删除线：<del></del>或者<s></s>

下划线：<ins></ins>或者<u></u>

HTML常用标签

<div>和<span>是没有语义的，他们就是一个盒子，用来装内容

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

特点：

1.<div>标签用来布局，但是现在一行只能放一个<div>，大盒子

2.<span>标签用来布局，一行可以多个<span>,小盒子

<!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>
    <div>我是一个大盒子，独占一行</div>
    <span>我是一个小盒子，可以多个占一行</span>
    <span>洛克王国</span>
    <span>百度</span>
</body>
</html>

图像标签和路径

图像标签

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

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

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

图像标签的各种属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

代码：

<!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="img.jpg"/>
    <h4>alt 替换文本 图像显示不出来的时候用文字替换</h4>
    <img src="img1.jpg"alt="我是桂永哼"/>

    <h4>title 提示文本 鼠标放到图像上提示的文字</h4>
    <img src="img.jpg"alt="我是桂永哼" tilte="好看的图片"/>
</body>
</html>

<!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>width 改变图像宽度：</h4>
    <img src="img.jpg" alt="我是图片" tilte="好看的图片" width="500"/>

    <h4>width 改变图像高度：</h4>
    <img src="img.jpg" alt="我是图片" tilte="好看的图片" height="500"/>

    <h4>width 改变图像边框：</h4>
    <img src="img.jpg" alt="我是图片" tilte="好看的图片" weight="500" border="10"/>

</body>
</html>

使用的注意事项：

1.图像标签可以拥有多个属性，必须写在标签名的后面。

2.属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开。

3.属性采取键值对的格式，即key="value"的格式，属性="属性值"。

路径

路径之相对路径

即图片相对于HTML页面的位置

相对路径分类	符号	说明
同一级路径		图像位于HTML文件同一级如<img src="baidu.jpg" />
下一级路径	/	图像位于HTML文件下一级如<img src="img/baidu.jpg" />
上一级路径	../	图像位于HTML文件上一级如<img src="../baidu.jpg" />

超链接标签

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

1.外部链接

链接的语法格式：

<a href="跳转目标网址" target="打开方式"> 文本或者图像 </a>

两个属性的作用：

属性	作用
href	用于指定链接目标的ur地址，(必须属性)当为标签应用href属性时，他就有了超链接的功能
target	用于指定链接页面的打开方式，_self为默认打开，_blank为在新窗口打开