WEBSTORM前端——第1章：HTML——第1节：标签之文字排版、图片、链接、音视频

航Hang*

已于 2025-04-22 08:36:49 修改

阅读量1.3k

点赞数 39

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

于 2025-04-09 13:21:46 首次发布

本文链接：https://blog.youkuaiyun.com/2401_82750246/article/details/147090603

版权

webstorm 专栏收录该内容

12 篇文章

订阅专栏

HTML→超文本（链接）标记语言（也叫标签，带尖括号的文本）

1.标签语法

<body>
    <strong>文字内容1</strong>
<!--开始标签          结束标签  -->
    <strong>文字内容2</strong>
    <hr><!--    下划线     -->
    <strong>985</strong>
    <br><!--    换行      -->
    <strong>211</strong>
</body>

效果图：

注：①标签成对出现，中间包裹内容。②<>里面放英文字母（标签名）。③结束标签比开始标签多 / 。④双标签成对出现；单标签只有开始标签，没有结束标签。

2.基本骨架

<!DOCTYPE html>
<html lang="en"><!--    整个网页    -->
<head><!--  网页头部：存放浏览器看的代码，例如CSS    -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>网页</title><!--   网页标题    -->
</head>
<body><!--  网页主体：存放给用户看的代码，例如图片，文字。 -->
    <strong>文字内容</strong>
</body>
</html>

3.标签

（1）作用：明确代码书写位置。

（2）关系：父子关系（嵌套关系）；兄弟关系（并列关系）。

（3）注释： （在vs code中，添加/删除注释快捷键：ctrl+/）

4.标题标签

（1）标签名：h1~h6（双标签）

（2）显示特点：①文字加粗。②字号逐渐减少。③独占一行（换行）。

（3）h1常用新闻标题和网页logo。只能用一次！h2~h6没有次数限制。

<!DOCTYPE html>
<html lang="en"><!--    整个网页    -->
<head><!--  网页头部：存放浏览器看的代码，例如CSS    -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>网页</title><!--   网页标题    -->
</head>
<body><!--  网页主体：存放给用户看的代码，例如图片，文字。 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

效果图：

5.段落标签

（1）一般用在新闻段落，文章段落，产品描述等信息

（2）标签名：p（双标签）

（3）特点：①独占一段。②段落之间存在间隙。

<!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">
    <title>网页</title>
</head>
<body>
    <h1>哪吒之魔童降世</h1>
    <h4>2025年饺子执导的动画电影</h4>
    <p>《哪吒之魔童降世》是由饺子（原名杨宇）编剧并导演，吕艳婷、囧森瑟夫、瀚墨、陈浩、绿绮、张珈铭、杨卫担任主要配音的奇幻动画电影。该影片于2019年7月26日于中国大陆上映，8月23日在澳大利亚上映，8月29日在新西兰上映，8月30日在英国及爱尔兰陆续上映。</p>
    <p>该电影的故事背景取材自中国明代古籍《封神演义》中关于哪吒的神话传说，并在此基础上进行改编，将哪吒塑造成一位因机缘巧合降临人间、频生事端的乱世“魔童”。影片紧紧围绕着这一角色，展开了一段虽“生而为魔”却“逆天而行”的奇幻故事。</p>
</body>
</html>

效果图：

6.换行与水平线标签

<br>：换行（单标签）

<hr>：水平线（单标签）

7.文本格式标签

（1）作用：为文本添加特殊格式，以突出特点，常见文本格式：加粗，倾斜，下划线，删除线等。

（2）效果

效果	标签名
加粗	重点：strong
加粗	b
倾斜	重点：em
倾斜	i
下划线	重点：ins
下划线	u
删除线	重点：del
删除线	s

8.图像标签

（1）作用：在网页中插入图片

（2）表示：<img src = "图片的URL"> src用于指图片的位置和名称，是<img>的必须属性！

（3）效果

属性	作用	说明
alt	替换文本	图片无法显示的时候显示文字
title	提示文本	鼠标悬停在图片上显示的文字
width	图片的宽	值为数字
height	图片的高	值为数字

<!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">
    <title>网页</title>
</head>
<body>
<img src="图像/钟楼.jpg" height="259" width="460" title="这是钟楼啊！"/>
<img src="图像/懒洋洋1.jpg" height="200"width="440"alt="这是灰太狼吗？"/><br><br>
<img src="图像/懒洋洋.jpg" height="240" width="480"/>
</body>
</html>

效果图：

9. 路径

（1）指查找文件时，从起点到终点经历的路线

（2）分类：

①相对路径：从当前文件位置出发查找目标文件

/ 进入某个文件夹里面

. 当前文件所在文件夹 ./

.. 当前文件上一级文件夹 ../（如在上一级，再加一个点.）

②绝对路径：从盘符出发查找目标文件

/ 是Windows默认的进入某个文件夹里面。※也可以在网址中复制文件的链接/网址

如：<img src="c:\images\mao.jpg"> 如：<img src="网址">

10.超链接

（1）作用：点击跳转到其他页面

（2）空连接：<a href="#">空链接</a>

（3）链接：<a href="https://www.baidu.com">跳转百度</a>

href：跳转地址，是超链接的必须属性。

跳转百度：可点击文字

※【在链接双引号后可以添加：target = “_blank” 作用：在新窗口打开新网址，旧窗口也存在】

（4）伪类-超链接选择器与作用

：link 访问前
：visited 访问后
：hover 鼠标悬停
：active 点击时（激活）

如果设置4个状态，需要按照表格顺序书写！！！

素材：

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>热点新闻</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<h2>热点新闻</h2>
	<hr>
	<ul>
		<li>
			<a href="#">柞水县职教中心来我校交流</a>
		</li>

		<li>
			<a href="#">我校2个案例入选中国职业技术教育学会典型案例</a>
		</li>

		<li>
			<a href="#">我校举行首批留学生开学典礼</a>
		</li>

		<li>
			<a href="#">学校举办DeepSeek应用能力（数字素养）提升培训会</a>
		</li>

		<li>
			<a href="#">校友捐赠仪式在国防科技展馆举行</a>
		</li>

		<li>
			<a href="#">我校2025年“挑战杯”大学生课外学术科技作品竞赛校赛圆满结束</a>
		</li>
	</ul>

	<br>
	<a href="#"><img src="img/timg.png" height="32" width="108"/></a>

</body>
</html>

h2 {
    font-size: 24px;/*将标签内文本的字体大小设置为 24 像素。*/
    margin-bottom: 20px;/*为 <h2> 标签的底部添加 20 像素的外边距，以此让 <h2> 标签与下方元素分隔开来。*/
}
hr{
    background-color: #ff9900;/*把 <hr> 标签的背景颜色设定为橙色（十六进制代码 #ff9900）。*/
    text-align: left;/*虽然 <hr> 标签通常不包含文本，但这个属性在这里并无实际效果。*/
    height: 2px;/*将 <hr> 标签的高度设为 2 像素。*/
    width: 450px;/*把 <hr> 标签的宽度设置为 450 像素。*/
    margin-left: 0px;/*让 <hr> 标签的左外边距为 0 像素，也就是让其左边缘与父元素的左边缘对齐。*/

/*将 <hr> 标签的四条边框宽度都设为 0 像素，从而去除默认的边框。*/
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}
ul {
    list-style-type: square;/*把无序列表项的标记样式设置为正方形。*/
}
li {
    font-family: 宋体;/*将列表项内文本的字体设置为宋体。*/
    font-size: 16px;/*把列表项内文本的字体大小设置为 16 像素。*/
    line-height: 1.6em;/*将列表项内文本的行高设置为字体大小的 1.6 倍，这有助于提升文本的可读性。*/
    color: #666666;/*把列表项内文本的颜色设置为深灰色（十六进制代码 #666666）。*/
}
ul li a:link {
    text-decoration: none;/*去除链接的下划线。*/
    color: #666666;/*将未访问过的链接文本颜色设置为深灰色（十六进制代码 #666666）。*/
}
ul li a:visited {
    color: #666666;/*将已访问过的链接文本颜色设置为深灰色（十六进制代码 #666666）。*/
    text-decoration: none;/*去除已访问过的链接的下划线。*/
}
ul li a:hover {
    text-decoration: underline;/*当鼠标悬停在链接上时，为链接文本添加下划线。*/
    color: #ff9900;/*当鼠标悬停在链接上时，将链接文本颜色设置为橙色（十六进制代码 #ff9900）。*/
}

效果图：

11.音频标签

（1）<audio src = "音频的URL"></audio>

（2）可在URL双引号后添加的属性

属性	作用	说明
src（必须属性）	音频URL	支持格式：mp3，ogg，wav...
controls	显示音频控制面板	/
loop	循环播放	/
autoplay	自动播放	为提升用户体验，浏览器一般禁用此功能
muted	静音播放	/

12.综合案例——个人简介

<!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">
    <title>网页</title></head>
<body>
<h1>人物简介</h1><hr><hr>
<h3>张三</h3>
<img src="图像/大头照.jpg" height="180" width="150" title="这就是张三"/>
<p>性别：男<br>生日：2025年1月1日<br>民族：汉族<br>电话：10086<br>学校：清北大学<br>名下公司：
    <strong><a href="https://aiqicha.baidu.com/company_detail_10115368456266"target="_blank">江西省宏盛鑫模具有限公司</a></strong></p>
<p>注册资本：200万(元)<br>注册时间：2016-02-01<br>主营：机械五金加工 <br>公司简介：江西省模具有限公司成立于2016年02月01日，注册地位于江西省宜春市靖安县，法定代表人为王五。经营范围包括模具制造；五金机械加工；塑胶成型加工、销售。</p>
<br><br><br><br><h3>友情链接</h3>
<a href="https://www.baidu.com/" target="_blank">百度</a>
<a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a>
<a href="https://v.qq.com/" target="_blank">腾讯视频</a>
<a href="https://www.kugou.com/" target="_blank">酷狗音乐</a>
<a href="http://jyt.shaanxi.gov.cn/" target="_blank">陕西省教育厅</a>
<a href="https://edu.xa.gov.cn/" target="_blank">西安市教育局</a>
<a href="http://jyj.hanzhong.gov.cn/" target="_blank">汉中市教育局</a>
<a href="https://changan.a.101.com/" target="_blank">长安区教育局</a>
<a href="http://www.chenggu.gov.cn/cgxzf/c103949/gk_bm_nr.shtml" target="_blank">城固县人民政府</a>
<br>
</body>
</html>

效果图：