博学谷 - html笔记03 - HTML常用标签

最新推荐文章于 2024-08-27 16:35:39 发布

hecr_mingong

最新推荐文章于 2024-08-27 16:35:39 发布

阅读量475

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/hecr_mingong/article/details/106960094

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.标题标签 <h1> - <h6>

特点：

使字号变大
一个标题独占一行

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <h1>1号标题</h1>
    <h2>2号标题</h2>
    <h3>3号标题</h3>
    <h4>4号标题</h4>
    <h5>5号标题</h5>
    <h6>6号标题</h6>
</body>
</html>

效果：
在这里插入图片描述
2.段落标签
特点：

文本在一个段落会根据浏览器窗口的大小自动换行
段落和段落之间有空隙

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签</title>
</head>
<body>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</body>
</html>

效果：
在这里插入图片描述
3.换行标签
特点：

单标签
只是单纯的换行，两行之间没有空隙

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换行标签</title>
</head>
<body>
    换行标签上
    <br/>
    换行标签中
    <br/>
    换行标签下
</body>
</html>

效果：
在这里插入图片描述
4.文本格式化标签

标签	语义
<strong></strong>	加粗
<em></em>	倾斜
<del></del>	删除线
<ins></ins>	下划线

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>
<body>
    <strong>加粗</strong>
    <br/>
    <em>倾斜</em>
    <br/>
    <del>删除线</del>
    <br/>
    <ins>下划线</ins>
    <br/>
</body>
</html>

效果：
在这里插入图片描述
5.盒子标签

标签	特点
<div></div>	大盒子标签，一行只能放一个div
<span></span>	小盒子标签，一行可以放多个span

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子标签</title>
</head>
<body>
    <div>大盒子</div>
    <span>小盒子1</span>
    <span>小盒子2</span>
    <span>小盒子3</span>
</body>
</html>

效果：
在这里插入图片描述
6.图像标签
特点：

可以拥有多个属性，必须写在标签名后面
属性之间不分先后顺序，标签名与属性、属性与属性之间以空格分开
属性是用键值对的格式

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签</title>
</head>
<body>
    <!-- 非正常显示的图片，需要显示后缀名 -->
    <img src="images/pic_01" alt="图片显示不出来时显示的" title="图片的标题"/>
    <br/>
    <!-- 正常显示的图片，需要显示后缀名 -->
    <img src="images/pic_01.png" title="图片的标题"  border="10" width="100" height="100"/>
</body>
</html>

效果：
在这里插入图片描述

7.超链接标签

属性：

属性	作用
href	用于指定链接目标的url地址(必须属性)
target	用于指定链接页面的打开方式，_self在本窗口打开(默认方式)，_blank在新窗口打开

分类：

类型	说明
外部链接	href填写项目外的url地址
内部链接	href填写项目内的url地址
空链接	href填写#
下载链接	href是一个文件或者压缩包时，会自动下载这个文件
网页元素连接	网页中的各种网页元素也可以添加链接
锚点链接	链接标签中href填写#id名；目标位置标签加id属性

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <p><a href="http:www.baidu.com" target="_self">外部链接</a></p>
    <p><a href="text9.html" target="_blank">内部链接</a></p>
    <p><a href="#">空链接</a></p>
    <p><a href="images.rar">下载链接</a></p>
    <p><a href="http:www.baidu.com"><img src="images/pic_01.png" width="100"/></a></p>
    <p><a href="#one">锚点链接</a></p>
    <h1 id="one">跳到到锚点链接</h1>
    <h1 >跳到到锚点链接1</h1>
    <h1 >跳到到锚点链接1</h1>
    <h1 >跳到到锚点链接1</h1>
    <h1 >跳到到锚点链接1</h1>
    <h1 >跳到到锚点链接1</h1>
    <h1 >跳到到锚点链接1</h1>
    <h1 >跳到到锚点链接1</h1>
    <h1 >跳到到锚点链接1</h1>
    <h1 >跳到到锚点链接1</h1>
</body>
</html>

效果：
在这里插入图片描述
8.文章参考链接
a. https://www.boxuegu.com/

hecr_mingong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
博学谷 - html笔记03 - HTML常用标签

1.标题标签 <h1> - <h6>特点：使字号变大一个标题独占一行demo：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标题标签&l
复制链接

扫一扫

专栏目录