[从零开始学前端]html常用标签1

最新推荐文章于 2024-08-13 10:40:16 发布

还不能起飞~

最新推荐文章于 2024-08-13 10:40:16 发布

阅读量334

点赞数

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

本文链接：https://blog.csdn.net/time_limited/article/details/106443492

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这次来介绍一些HTML中常用的标签

html常用标签

h标签

h标签包括六种从h1到h6 大小递减，h标签属于内容所以要写在body中，代码及效果图如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

h标签效果图
h标签的语义就是标题，所以为了能够直接的表达你的目的，请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS效果代替。特别注意的是h1标签一个HTML文件只能有一个！

p标签

p标签就一种：<p></p>，p标签也是写在body中，其效果与代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>这是p标签</p>
<p>这是p标签</p>
</body>
</html>

p标签效果图
p标签的语义就是一个段落，就算是把两个p标签放到一起也会分段显示。

div标签

div又可以叫盒子标签，没有语义，主要的作用是用来装其他标签或文字（极少直接用div标签装文字），每个div标签独占一行
div
可以看到div直接装文字时没有上下空隙

span标签

span标签同样没有语义，与div标签不同的是一行可以有多个span
span
可以看到这几个span标签之间没有空隙且处在同一行

strong标签、em标签、del标签、ins标签

这四个标签是文本修饰标签，strong标签：文本加粗；em标签：斜体；del标签：删除线；ins标签：下划线。
在这里插入图片描述

img标签

除了文字，html当然也能显示图片，img标签就是专门用来显示图片的，其语法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--使用相对路径-->
<img src="test.jpg" alt="图片无法显示时展示的文字">
<!--图片无法显示时展示的文字-->
<img src="tst。jpg" alt="图片无法显示">
</body>
</html>

src指明图片路径 alt指明当发生错误无法显示图片时的说明文字
在这里插入图片描述
可以看到img标签也是一行上显示多个的

a标签

a标签是超链接标签，通常用法有三个：跳转页面，下载资源，锚点跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="https://www.baidu.com">跳转网络链接：百度</a>
<a href="2.html">跳转项目内链接</a>
<a href="webstorm.rar">下载资源</a>
<a >失去样式</a>
</body>
</html>

a标签有三个注意事项：一是a一定要有href属性，哪怕是空值，否则a标签将失去样式；标签二是a标签跳转网络链接时，一定要加上http（https）或其他协议号；三是当href指向浏览器无法解析的资源时（除了图片，网页，视频，音频以外的资源），点击a标签就会提示下载。
在这里插入图片描述
可以看到a标签也是可以一行上存在多个

br标签

br标签是用来换行的，目前我理解的作用有两个：一是使p标签换行；二是使原本显示在一行上的标签换行。另外值得注意的是br标签是单标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="https://www.baidu.com">跳转网络链接：百度</a>
<a href="2.html">跳转项目内链接</a>
<br>
<a href="webstorm.rar">下载资源</a>
<a >失去样式</a>
<p>这里是 <br>p标签</p>
</body>
</html>

br的作用

hr标签

hr标签是分界线标签，其作用是画一条水平线将上下分开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="https://www.baidu.com">跳转网络链接：百度</a>
<hr>
<a href="2.html">跳转项目内链接</a>
<br>
<a href="webstorm.rar">下载资源</a>
<a >失去样式</a>
<p>这里是 <br>p标签</p>
</body>
</html>

在这里插入图片描述

还不能起飞~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[从零开始学前端]html常用标签1

这次来介绍一些HTML中常用的标签html常用标签h标签p标签div标签span标签strong标签em标签del标签ins标签img标签a标签br标签hr标签h标签h标签包括六种从h1到h6 大小递减，h标签属于内容所以要写在body中，代码及效果图如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title
复制链接

扫一扫

专栏目录