HTML基础（二）：标签学习
html学习笔记
排版标签#
标题标签 h1～h6#
- 场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
- 代码：h系列标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
- 特点：
- 文字都有加粗
- 文字都有变大，从h1->h6文字逐渐减小
- 独占一行
注：一个页面建议只有一个h1
段落标签 p#
- 场景：在新闻和文章的页面中，用于分段显示
- 代码：
<p>我是一段文字</p> - 特点：
- 段落之间存在间隙
- 独占一行
断内换行标签 br#
- 场景：让文字强行换行显示
- 代码：
<br /> - 特点：
- 单标签
- 让文字强行换行
空格字符 #
- 场景：使段落内部文字显示多个连续的空格
- 代码：
<p>我是一段 文字</p> - 特点：特殊字符、全小写
预留格式 pre#
- 场景：文本中的空格和换行符都会被保留，很适合显示计算机代码
- 代码：
<body>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
行内组合标签 span#
- 场景：组合行内元素，以便通过CSS样式来格式化
- 代码
<p>这是一段<span>有样式</span>的文字<p>
<style type="text/css">
span{
color: blue;
font-weight: bold;
}
</style>
水平线标签 hr#
- 场景：分割不同主题内容的水平线
- 代码：
<hr /> - 特点：
- 单标签
- 在页面中展示一条水平线
文本格式化标签#
- 场景：需要让文字加粗、下划线、倾斜、删除线等效果
- 代码：
| 标签 | 说明 |
|---|---|
| b | 加粗 |
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
表示的强调语气更强烈
| 标签 | 说明 |
|---|---|
| strong | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
- 语义：突出重要性的强调语境
媒体标签#
图片标签#
- 场景：在网页中显示图片
- 代码：
<img src="" alt=""> - 特点：
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置
- 图片标签介绍
- 属性注意点
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
图片标签的alt属性#
- 属性名：alt
- 属性值：替换文本
- 当图片加载失败时，才显示alt文本
- 当图片加载成功时，不会显示alt文本
图片标签的title属性#
- 属性名：title
- 属性值：提示文本
- 当鼠标悬停时，才显示文本
- 注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签
- 代码：
<img src="pulpit.jpg" title="title文本" >
图片标签的width和height属性#
- 属性名：width和height
- 属性值：宽度和高度（数字）
- 注意点
- 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
- 如果同时设置了width和height，若设置不当此时图片可能变形
- 代码：
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
补充#
图像格式#
JPG：有损压缩、色彩丰富的图片
GIF：简单动画、背景透明
PNG：无损压缩、透明、交错、动画
路径#
绝对路径
- 绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
- 例如：
- 盘符开头：D:\image\cat.jpg
- 完整的网络地址：https://m.runoob.com/html/html-images.html
相对路径
相对路径：从当前文件开始出发找目标文件的过程
相对路径分类：
- 同级目录：当前文件和目标文件在同一目录中。
- 代码：直接写出目标文件的名字
<img src="目标图片.jpg" ><img src="./目标图片.jpg" >
- 下级目录：目标文件在下级目录中
- 代码：文件夹的名字/目标文件名字
<img src="image/目标图片.jpg" >
- 上级目录：目标文件在上级目录中
- 代码：到上级目录/目标文件。如果是上两级，则需要使用 “../ ../”
<img src="../image/目标图片.jpg" >
音频标签#
- 场景：在页面中插入音频
- 代码：
<audio src="./music.mp3" controls ></audio> - 常见属性:
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
- 注意点：音频格式目前支持3种格式：MP3、Wav、Ogg
视频标签#
- 场景：在页面中插入视频
- 代码：
<video src="./video.mp4" controls ></video> - 常见属性:
| 属性名 | 功能 |
|---|---|
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器中需配合muted实现静音播放） |
| loop | 循环播放 |
- 注意点：格式仅支持MP4、WebM、Ogg
链接标签#
-
场景：点击以后从一个页面跳转到另一个页面
-
称呼：a标签、超链接、锚链接
-
代码：
- 链接到本站点的其他网页
<a href= "news.html" > 新闻</a>- 链接到其他站点
<a href= "http://www.baidu.com" > 百度</a>- 虚拟超超链接（开发初期不知道链接写什么的可以用#代替）
<a href="#">链接文本</a> -
特点：
- 双标签，内部可以包裹内容
- 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
链接标签的target属性#
- 属性名：target
- 属性值：目标网页的打开形式
| 取值 | 效果 |
|---|---|
| _self | 默认值，在当前窗口中跳转（覆盖原网页） |
| _blank | 在新窗口中跳转（保留原网页） |
- 代码：
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
锚点定位#
- 场景：通过创建锚点链接，用户能够快速定位到目标内容。
- 创建锚点链接分为两步：
- 在HTML文档中插入ID:
<a id="tips">有用的提示部分</a> - 在HTML文档中创建一个链接,定位到"有用的提示部分"(id="tips"）：
<a href="#tips">访问有用的提示部分</a>
- 在HTML文档中插入ID:
作者： 是小鱼呀
出处：https://www.cnblogs.com/sophia12138/p/16616729.html
本站使用「CC BY 4.0」创作共享协议，转载请在文章明显位置注明作者及出处。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？