【HTML】第 2 节 - HTML 标签

        欢迎来到博主 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、总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/352308.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Vivado下时序逻辑模块的仿真

文章目录 D触发器两级D触发器带异步复位的D触发器带异步复位和同步置数的D触发器移位寄存器单口RAM伪双口RAM真双口RAM单口ROM 组合逻辑电路在逻辑功能上特点是任意时刻的输出仅仅取决于当前时刻的输入&#xff0c;与电路原来的状态无关。 时序逻辑在逻辑功能上的特点是任意时刻…

单元测试方法-cmockery实践

目录 单元测试概念 引子 定义 内容 方法 单元测试模型 测试模型构建 单元测试工具简介 Cmockery使用介绍 简介 使用 VPBX实践 UT框架搭建 目录 编译&#xff1a; 实例demo 例1&#xff1a; 例2&#xff1a; 例3&#xff1a; 例4&#xff1a; 例5&#xff…

从0开始搭建vue3+vite+ts+pinia项目

目录 项目搭建选项 项目搭建步骤 本地开发环境 Vite脚手架构建项目 关联Git仓库 开发工具 安装pinia 安装Sass 安装Vant-UI 安装postcss-pxtorem&#xff08;移动端项目&#xff09; 安装axios 本地调试 环境变量 本地代理 全局UI组件 路由中间件 项目部署 n…

layui(2)----页面元素

水平导航栏 依赖加载模块&#xff1a;element <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport"…

AcWing 回转游戏 dfs IDA* 剪枝 统一操作 java

&#x1f351; 算法题解专栏 &#x1f351; 回转游戏 如下图所示&#xff0c;有一个 # 形的棋盘&#xff0c;上面有 1 , 2 , 3 1,2,3 1,2,3 三种数字各 8 8 8 个。 给定 8 8 8 种操作&#xff0c;分别为图中的 A s i m H A \\sim H AsimH。 这些操作会按照图中字母和箭头…

MCGS昆仑通态触摸屏导入博途自定义数据类型和DB块变量的具体方法演示

MCGS昆仑通态触摸屏导入博途自定义数据类型和DB块变量的具体方法演示 如下图所示,在博途中新建项目后,添加自己所需的数据类型,然后选中该数据类型,右击选择“从块生成源“—”仅所选块“, 如下图所示,设置文件名后点击保存, 如下图所示,选中需要导出的DB块,右击选…

vue 自定义el-table穿梭框功能

一、需求描述&#xff1a;前段时间接到一个需求是点击做一个类似穿梭框的表格点击选中功能&#xff0c;弹框的左边是全部数据展示&#xff0c;点击表格行数据可以选中自动增加到右边的已选框&#xff0c;并且可以手动删除、重置选中数据。点击确定后到展示到主页面&#xff0c;…

Java核心知识点常考面试题(持续更新中)

Java核心知识点常考面试题&#xff08;持续更新中&#xff09; 线程与线程池Java锁机制轻量级锁重量级锁 线程与线程池 一、线程 1、线程的状态 2、线程的创建方式 &#xff08;1&#xff09;继承 Thread 类&#xff1b; &#xff08;2&#xff09;实现 Runnable 接口&#…

IDEA2023.1配置Git

一、前言 在使用新设备整理git项目时&#xff0c;报了以下问题&#xff0c;在整理项目的同时&#xff0c;做下记录。 二、下载git 2.1.官网下载git 官网下载地址&#xff1a; git官网&#xff0c;如下图所示&#xff1a; 如果选方法二&#xff0c; 接下来会让选择系统&#…

【cocos精品】《三国之刃》:腾讯首款三国炫技格斗手游

基于cocos引擎开发的《三国之刃》是腾讯独家代理的三国题材的动作格斗手游。独创的自由组合战技系统&#xff0c;配合特色的兵器和灵兽技能&#xff0c;可搭配出上万种格斗套路&#xff0c;让您的战斗酣畅淋漓又变幻莫测。清爽灵活的操作&#xff0c;无锁定技术PK&#xff0c;更…

java开发街机三国志_入坑必看《街机三国志》游戏初期重点讲解

《街机三国志》为了让新手更好的了解游戏&#xff0c;设立里相关的新手指引&#xff0c;引导新入门的玩家完成各种任务与基础的系统教学。只凭新手教学是没办法在初期阶段积累足够的资源的。本次小编特意整理了一些新手教程中没有提及的重点&#xff0c;希望帮助玩家们更好的开…

搜索引擎三国鼎立:百度 vs 360 vs 搜狗

理论上说&#xff0c;搜索市场不存在平分秋色的可能&#xff0c;不管份额如何接近&#xff0c;最终必然是东风压倒西风&#xff0c;这一点在全球市场都未见过反例。雅虎在日本和台湾独占鳌头&#xff0c;Naver在韩国有压倒性优势&#xff0c;Yandex称霸俄罗斯。谷歌在全球大部分…

街机三国志隐藏人物刘备_隐藏的人物

街机三国志隐藏人物刘备 最初的程序员的故事将永远不为人知 背后没有外套的男人是梅尔凯&#xff08;Mel Kaye&#xff09;&#xff0c;埃德纳瑟&#xff08;Ed Nather&#xff09;为他写了他永恒的程序员绝版经典著作《故事》 。 那一年是1960年&#xff0c;尽管存在有关他编…

Java霸王的大陆梦幻版_三国志霸王的大陆,喜欢三国的进

三国是中国历史上英雄辈出的时代&#xff0c;《霸王的大陆》这款移植自Fc的战棋游戏更是中国手游java游戏的No.1!该游戏内容极其丰富&#xff0c;对玩家的要求很高&#xff0c;因此这完全是一款符合游戏高手要求的大型单机游戏。以下是这款游戏的核心攻略&#xff0c;只要稍加留…

无可用下载链接_经典大全合集500个街机游戏大全下载

经典大全合集500个街机游戏大全下载 WinKawaks1.45模拟器 游戏链接 链接:https://pan.baidu.com/s/1MZ3_Gv825dtswcGXr006zQ 提取码:zhrk 一、游戏介绍

linux模拟器玩三国战记,三国战纪风云再起街机版

三国战纪风云再起街机版带你回忆最初玩三国街机游戏的乐趣,多种对战玩法轻松上手,在三国战纪风云再起街机版手机游戏里面玩家可以随便选择一个角色进入战斗,强烈的打击感绝对让你爱不释手,在指尖畅享超酷的格斗盛宴。 三国战纪风云再起街机版介绍 三国战纪风云再起街机版是…

智勇三国

视频: http://you.video.sina.com.cn/a/4806164-1488862174.html 8M的客户端下载地址: 一,http://yule.hedanwang.cn/sanguozhi/sanguozhi_864.htm 二,QQ群:100410266 的群共享下载 智勇三国是单机游戏三国群英传2的简单化、网络化、智能化。简单化指的是保留精华&#xff0c…

小时候玩的10款经典街机游戏,如今我们都在玩什么?

很多的人的童年&#xff0c;都是伴随着游戏度过的。尤其是8090后。今天就列举10款经典的大型街机游戏&#xff0c;跟大家一起回忆一下童年时光&#xff0c;不信没有你玩过的&#xff01; 1、《拳皇》 小时候小编最喜欢的大型对战格斗型街机游戏之一&#xff0c;一阵猛如虎的操…

toFixed精度丢失问题

bug说明&#xff1a; 10.3950 * 3935.00 用toFixed&#xff08;2&#xff09; 得到的是40904.32 实际应该是40904.33 解决的方法&#xff1a; 第一种&#xff1a; 在main.js中直接复制下面代码即可 Number.prototype.toFixed function (n) {n n || 0let resNum Math.ro…

深浅拷贝及赋值区别理解

浅拷贝&#xff1a; 对象浅拷贝Object.assign() 数组的浅拷贝Array.prototype.slice()与Array.prototype.concat() 解构赋值 1.对于数组/对象中基本数据类型[123,234]&#xff0c;拷贝的是数值&#xff0c;所以修改拷贝后的这个值&#xff0c;原数据不会改变&#xff1b;2.对…