HTML标签精要-优快云博客

本文链接：https://blog.youkuaiyun.com/CCT912097957/article/details/105268635

段落标签

把文字有条理地显示出来。

<p>  文本内容  </p>

换行标签
某段文本强制换行显示，就需要使用换行标签。

<br />

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>
    <span>我span也是个盒子，我不独占一行</span>
    <p>两者都是没有语义的，就是用来布局的</p>
</body>
</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>
    <strong>我是strong标签，我会加粗并有强调意义</strong>
    <b>我是b标签，我只是单纯加粗，没有强调意义</b>
    <i>我是i标签，我是倾斜的</i>
    <em>我是em标签，我也是倾斜的，也能起到强调效果</em>
    我是del标签，我是删除线，原价：1888 现价：<del>1688</del>
</body>
</html>

在这里插入图片描述
b i 只有使用没有强调的意思 strong em 语义更强烈

标签属性

给标签设置宽高，字体大小，颜色等。

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

这是行内样式，非特殊情况杜绝使用，详见css样式。

图像标签img

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签。
其基本语法格式如下：
该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

<!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>
    <p>图片插入的属性有 src:链接 alt:图片无法加载显示图片名字 title：鼠标放图片上显示名字 border：给图片加边框像素</p>
    <img src="../../images/运动员.png" alt="我是图像不能显示的时候替换的文本">
    <img src="../../images/运动员.png" title="我是鼠标放上去就会出现图片名字">
    <img src="../../images/运动员.png" alt="我是图片，一般设置宽度就会等比例缩放" width="300">
    <img src="../../images/运动员.png" alt="我是可以调边框的图片" width="400" border="10px">
</body>
</html>

链接a标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。
target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意：
1.外部链接需要添加 http:// www.******.com
2.内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：

<!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>
    <!-- 锚点定位用链接来做，一般是给锚点标签设置一个id，然后设置链接#id调用 -->
    <a href="h3">点击我可以跳转</a>
    <!-- 使用相应的id名标注跳转目标的位置 -->
    <h3 id="two">第2集</h3>
</body>
</html>

base 标签

base 可以设置整体链接的打开状态;
base 写到之间;
把所有的连接都默认添加 target="_blank";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- 全文档所有链接标签全部打开新页面跳转 -->
    <base target="_blank">
    <title>点击跳转</title>
</head>
<body>
    <a href="#">点击我可以跳转新页面而不是在原页面跳转</a>
</body>
</html>

路径

工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。
根目录:当前目录
路径可以分为：相对路径和绝对路径

相对路径:以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src=“logo.gif” />。
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src=“img/img01/logo.gif” />。
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="…/logo.gif" />。

绝对路径:绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

需要注意的是：使用绝对路径之自己电脑本身的路径那么当文件移动到其他电脑上是路径就会失效导致页面显示不出来。