【前端 - HTML】第 2 课 - HTML 标签

news/2024/12/2 19:35:36/

        欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。


目录

1、缘起 

2、标题标签  

3、段落标签

4、文本格式化标签 

5、图像标签

5.1、基本作用

5.2、属性 

6、超链接标签

7、音频标签

8、视频标签

9、总结


1、缘起 

         HTML 标签是用于描述和定义网页结构的元素。它们用于创建和组织网页内容,并赋予其不同的含义和功能。标签可以定义 文本图像链接表格表单 等元素,以及 样式布局交互效果。HTML 标签是构建网页的基础,让内容在浏览器中呈现出美观和有意义的形式。接下来让我们一起来看看 HTML 中都有哪些标签吧 !

2、标题标签  

        一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

标签名:h1~h6(双标签) 

显示特点:

①  文字加粗

②  字号逐渐减小

③  独占一行(换行) 

示例代码:

<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>

注意:h1 标签在一个网页中 只能用一次,用来放 新闻标题 网页的 logo,h2 ~ h6 没有使用次数的限制。 

3、段落标签

        一般用在新闻段落、文章段落、产品描述信息等等。

标签名:p(双标签)

显示特点:

①  独占一行

②  段落之间有间隙

示例代码: 

<body><p>我与父亲不相见已二年余了,我最不能忘记的是他的背影。那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子,我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。父亲说,“事已如此,不必难过,好在天无绝人之路!”</p><p>我与父亲不相见已二年余了,我最不能忘记的是他的背影。那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子,我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。父亲说,“事已如此,不必难过,好在天无绝人之路!”</p>
</body>

4、文本格式化标签 

作用:为文本添加特殊格式,以 突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。

        在实际工作中,我们经常使用第一种标签名,因为 strong、em、ins、del 标签自带 强调含义(语义)。 

示例代码: 

<body><strong>这是加粗</strong><em>这是倾斜</em><ins>这是下划线</ins><del>这是删除线</del>
</body>

5、图像标签

5.1、基本作用

作用:在网页中插入图片

语法:<img src = “图片的 URL”> 

src 用于指定 图像的位置和名称,是 <img> 的 必须属性。 

示例代码:

<body><img src="./Doutu.jpg" >
</body>

5.2、属性 

①  属性名 = “属性值”

  属性写在 尖括号里面标签名后面,标签名和属性之间用 空格 隔开,不区分先后顺序。 

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

①  属性 alt 示例 

示例代码: 

<body><img src="./Doutu1.jpg" alt = "这是一个表情包" >
</body>

        从上述代码和图片中可以看出,Doutu1.jpg 这张图片在目录找不到,所以就在屏幕上显示 alt 属性的内容。 

②  title 属性示例

示例代码: 

<body><img src="./Doutu.jpg" title = "这是一个表情包" >
</body>

        在 HTML 中,常用的图像属性只有 alt 和 title ,至于图片的 height 和 width 属性专门在 CSS 中进行设置。

6、超链接标签

作用:点击跳转到其他页面 

< a href = "https://www.baidu.com"  target = "_blank" >跳转到百度</a>

  href 属性值是 跳转地址,是超链接的 必须属性 

  target = "_blank 属性的作用是在新窗口打开页面

示例代码:

<body><a href="https://www.baidu.com" target = "_blank">跳转到百度</a>
</body>

7、音频标签

作用:在网页中插入音频

<audio  src = "音频的 URL"></audio>

音频标签的常见属性如下:

属性作用特殊说明
src(必须属性)音频 URL支持格式:MP3、Ogg、Wav
controls显示音频控制面板
loop循环播放
autoplay自动播放为了提升用户体验,浏览器一般会禁用自动播放功能

示例代码: 

<body><audio src="./media/万物生.mp3" controls loop></audio>
</body>

8、视频标签

作用:在网页中插入视频

<video src = "视频的 URL"></video>

视频标签的常见属性如下:

属性作用特殊说明
src(必须属性)视频URL支持格式:MP4、WebM、Ogg
controls显示视频控制面板
loop循环播放
muted静音播放
autoplay自动播放为了提升用户体验,浏览器支持在静音状态自动播放

示例代码: 

<body><video src="./video/婉儿十连胜.mp4" controls loop muted autoplay></video>
</body>

注意:在浏览器中,要想自动播放,必须要有 muted 属性,否则无法自动播放。

9、总结

        本期的分享总结就到这里了,如果有疑问的小伙伴儿,我们在评论区交流嗷~~~,笔者必回,我们下期再见啦 !

前端 - HTML 专栏系列将持续更新,,,,,,


http://www.ppmy.cn/news/282848.html

相关文章

Prompt 工程指南(三)—— 高级技术篇之零样本和少样本提示

到目前为止&#xff0c;显而易见的是&#xff0c;改进提示有助于在不同任务上获得更好的结果。这就是提示工程背后的理念和目标。 虽然上篇教程介绍的基本示例已经很有趣&#xff0c;但在接下来的几篇教程中&#xff0c;我们将介绍更高级的 Prompt 提示工程技巧&#xff0c;使…

终于有人把Linux系统收发网络数据包的过程讲清楚了!

Linux 服务器收到网络数据包&#xff0c;需要经过哪些处理&#xff0c;一步步将数据传给应用进程的呢&#xff1f;应用进程发送数据包时&#xff0c;Linux 又是如何操作将数据包发送出去的呢&#xff1f;今天我们就来聊聊这个话题。 在准备好接收网络数据包之前&#xff0c;Lin…

海信java手机qq_内置QQ service 安卓手机海信E89可爱登场

三、系统界面 海信E89搭载的是Android 2.1智能系统&#xff0c;而系统界面是经过优化的&#xff0c;有海信手机自己的风格。海信E89的解锁界面是比较独特的&#xff0c;虽是常见的滑动解锁&#xff0c;但点击中间的锁图标往不同的方向滑动可以在解锁的同时直接进入到不同的界面…

查看海信电视android版本,海信电视怎么查看MAC地址和版本号 方法介绍

原标题&#xff1a;海信电视怎么查看MAC地址和版本号 方法介绍 随着海信今年发布互联网电视品牌VIDAA电视&#xff0c;越来越多VIDAA系统的新品电视为广大信封们熟知&#xff0c;随着海信智能互联网电视的不断普及&#xff0c;用户朋友们在使用VIDAA系统电视中也会遇到一些问题…

海信电视升级鸿蒙系统,海信电视陆续启动聚好看升级计划

原标题&#xff1a;海信电视陆续启动聚好看升级计划 据了解&#xff0c;欧洲杯官方赞助商海信在此次欧洲杯开赛之前将有“大动作”&#xff0c;海信电视将在欧洲杯开赛前陆续启动聚好看升级计划。海信电视将在升级之后直接变身“看球神器”&#xff0c;设有专区显示本届欧洲杯的…

海信电视云账号连不上服务器,海信云账号如何使用?图文教程详解

原标题&#xff1a;海信云账号如何使用&#xff1f;图文教程详解 海信云账号可以在海信智能电视等海信一系列等多种智能终端上登录并共享资源。登录后&#xff0c;可以全面享受海信应用商城、媒体云、围观等服务。 海信云账号是海信专为海信智能电视、海信电视、海信平板、海信…

海信android版本升级失败,海信电视的android怎么升级-海信电视无法更新

海信电视怎么一直在更新 海信电视系统版本低 但是不更新怎么办 海信电视自动升级: 1、打开海信电视机,然后点击遥控器“设置”键; 2、依次点击“其他设置”——“系统设置”——“系统更新”——“自动更新”; (如果海信电视机有最新升级版本,那么它会提示你下载最新升级包…

华为OD-2023B卷-太阳能板最大面积(java)

2.华为OD-2023B卷 -太阳能板最大面积(回到目录) 太阳能板最大面积 知识点分治 时间限制:1s 空间限制:32MB 限定语言:不限 难度:★★ 中规中矩的双指针题目。暴力for循环过不了全部样例。 题目描述: 给航天器一侧加装长方形或正方形的太阳能板(图中的红色斜线区域),需…