目录
在前端开发中，HTML不仅是构建网页的基础，还通过各种标签提供了丰富的文本排版和内容展示方式。本篇文章将深入介绍HTML中常用的文本标签，帮助你掌握如何在网页中应用强调和排版功能。你将学习到如何使用<strong>, <em>, <ins>, <del>等标签来强调内容，以及如何通过<b>, <i>, <u>等无语义标签进行样式应用。我们还将探讨HTML中的注释标签、块级元素和内联元素的区别，并介绍如何在网页中插入和控制图片显示。通过本篇文章，你将能够更好地理解HTML标签的用法，为后续的前端开发打下坚实的基础。
强调与重要性标签
HTML提供了具有加粗，倾斜，下划线等效果的标签，来着重强调某些文字
带有语义的标签
<strong></strong>标签
strong标签为加粗标签
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html_01</title>
</head>
<body>
<strong>HTML第二篇</strong>
</body>
</html>
被strong标签包裹着的部分，会产生加粗效果，如上图
<em></em>标签
em标签为倾斜标签
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html_01</title>
</head>
<body>
<strong>HTML第二篇</strong>
<em>HTML第二篇</em>
</body>
</html>
被em标签包裹着的部分，会产生倾斜效果，如上图
<ins></ins>标签
ins标签为下划线标签
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html_01</title>
</head>
<body>
<strong>HTML第二篇</strong>
<em>HTML第二篇</em>
<ins>HTML第二篇</ins>
</body>
</html>
被ins标签包裹着的部分，会产生带有下划线的效果，如上图
<del></del>标签
del标签为下划线标签
被del标签包裹着的部分，会产生带有下划线的效果，如上图
无语义但是有作用的标签
- <b></b>标签 加粗标签
- <i></i>标签 倾斜标签
- <u></u>标签 下划线标签
- <s></s>标签 删除线
注释标签
<!-- <del>HTML第二篇</del> -->
具体格式
<!--注释内容-->
可以让浏览器直接跳过这句话
有没由发现，上面的代码是在一行之中显示的，这就牵扯到了块级元素和内联元素，下来就来介绍有一个这两个概念
块级元素和内联元素
块级元素
- 块级元素是自己独自占据一行的
- 块级元素可以嵌套其它的元素
- 常见的块级元素p,h,div等\
内联元素（也可以叫行内元素）
- 可以一行之内存在多喝，通常与文本一起使用
- 不能嵌套块级元素,可以嵌套其他内联元素
- 常见的内联元素strong,em,a等
HTML中的图片
语法：<img src="" alt="">
img标签是单标签，含有两个默认的属性,src属性和alt属性
src属性
指向要插入到页面的图像地址
alt属性
备选文本，用于在图片无法显示或者因为网速慢情况下显示的文字
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html_01</title>
</head>
<body>
<strong>HTML第二篇</strong>
<em>HTML第二篇</em>
<ins>HTML第二篇</ins>
<!-- <del>HTML第二篇</del> -->
<!--注释内容-->
<img src="./img/2.webp" alt="CPU">
</body>
</html>
当给出一个不存在的地址时
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html_01</title>
</head>
<body>
<strong>HTML第二篇</strong>
<em>HTML第二篇</em>
<ins>HTML第二篇</ins>
<!-- <del>HTML第二篇</del> -->
<!--注释内容-->
<img src="./img/.webp" alt="CPU">
</body>
</html>
就会显示alt中的内容
但是我们插入的图片太大了，这时候可以使用img的其他属性
width 属性
设置图片宽度(建议使用css进行修改)
height
设置图片高度(建议通过css修改)
title
图像标题,鼠标悬停时显示的文字
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html_01</title>
</head>
<body>
<strong>HTML第二篇</strong>
<em>HTML第二篇</em>
<ins>HTML第二篇</ins>
<!-- <del>HTML第二篇</del> -->
<!--注释内容-->
<img src="./img/2.webp" alt="CPU" width="300px" height="300px" title="这是一张CPU图片">
</body>
</html>
常见的图片格式
jepg/jpg
- 放大缩小会变得模糊或有锯齿
- 适合网页图片
png
- 无损压缩，支持透明度
- 适合logo,网页图形
gif
- 支持动画
webp
- 支持有损/无损压缩，透明度和动画
- 进行网页优化，来代替jpeg/png/gif
同时，建议在做一个练习时，可以将创建一个文件夹，专门存放图片，方便管理，这就牵扯到了相对路径和绝对路径
相对路径：相对于当前文件位置的路径
- 如果处于同一目录直接使用文件名即可
./表示当前文件夹 - 下级子目录 使用
目录名/文件名 - 上级目录
使用../返回上一级