当前位置: 首页 > article >正文

HTML 标签

HTML:超文本标记语言

HTML骨架结构:

html标签:网页的整体

head标签:网页的头部

body标签:网页的身体

HTML的注释

VS code中:ctrl+/

浏览器不会执行注释

HTML标签的构成:

双标签:<开始标签> 内容 </结束标签>

单标签:自成一体  如<br>、<hr>

标签与标签的关系:

父子关系(嵌套关系)

<head>

  <title></title>

</head>

兄弟关系(并列关系)

<head></head>

<body></body>

标题标签

<h1>1级标题</h1>

<h2>2级标题</h2>

<h3>3级标题</h3>

<h4>4级标题</h4>

<h5>5级标题</h5>

<h6>6级标题</h6>

1~6级标题,重要程度逐级递减

特点:文字都加粗;文字都变大,从h1~h6文字逐渐减小;独占一行

段落标签

<p>一段文字</p>

特点:段落间存在间隙;独占一行

换行标签

<br>

特点:单标签,让文字强制换行

水平线标签

<hr>

特点:单标签,在页面中显示一条水平线

文本格式化标签

标签

说明

标签

说明

b

加粗

strong

加粗

u

下划线

ins

下划线

i

倾斜

em

倾斜

s

删除线

del

删除线

右边一列用在突出重要性的强调语境。

媒体标签

图片标签

<img  src=   alt= >

特点:img标签需要展示对应的效果,需要借助标签的属性进行设置

属性注意点:

  1. 标签的属性写在开始标签内部
  2. 标签上可以同时存在多个属性
  3. 属性之间以空格隔开
  4. 标签名与属性之间必须以空格隔开
  5. 属性之间没有顺序之分

图片标签的alt属性

属性名:alt

属性值:替换文本

当图片加载失败时,才显示alt的文本

当图片加载成功时,不显示alt的文本

图片标签的Title属性

属性名:title

属性值:提示文本

当鼠标悬停时才显示的文本

注意点:title属性不仅可以用于图片标签,还可以用于其他标签

图片标签的width、hight属性

属性名:width、height

属性值:宽度和高度

注意点:如果只设置width或height中一个,另一个没设置的会自动等比例缩放(此时图片不会变形)   如果同时设置width和height两个,若设置不当,此图片可能会变形

绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径

          如:盘符开头     完整的网络地址

相对路径(常用):从当前文件开始出发找目标文件的过程

  1. 同级文件:<img src= ./目标图片.gif>      <img src= 目标图片.gif>
  2. 下级目录:目标文件在下级目录中     <img src=文件夹名/目标图片.gif>
  3. 上级目录:目标文件在上级目录中      ../

音频标签

<audio src=  controls> </audio>

常见属性:

属性名

功能

src

音频的路径

control

显示播放的控件

autoplay

自动播放(部分浏览器不支持)

loop

循环播放

注意点:音频标签目前支持三种格式:MP3,Wav,Ogg

视频标签

<video></video>

属性名

功能

src

音频的路径

control

显示播放的控件

autoplay

自动播放(谷歌浏览器需要配合muted实现静音播放)

loop

循环播放

注意点:视频标签目前支持三种格式:MP4、WebM、Ogg

链接标签

<a href=./目标网页></a>    实现页面跳转

特点:双标签,内部可以包裹内容     如果a标签点击之后去指定页面,需要设置a标签的href属性

链接标签target属性

属性名:target

属性值:目标网页的打开方式

取值

效果

-self

默认值,在当前窗口中跳转(覆盖源网页)

-blank

在新窗口中跳转(保留原网页)


http://www.kler.cn/a/231401.html

相关文章:

  • 应急响应(风险处置)
  • 小鹏汽车嵌入式面试题及参考答案
  • 如何将几个音频合成一个音频?非常简单的几种合成方法
  • 第8章硬件维护-8.2 可维护性和可靠性验收
  • MongoDB聚合操作
  • HTML and CSS Support HTML 和 CSS 支持
  • 【Git版本控制 02】分支管理
  • re:从0开始的CSS学习之路 5. 颜色单位
  • 第五篇【传奇开心果系列】vant开发移动应用示例:深度解读高度可定制
  • MySQL-事务(TRANSACTION)
  • [技术杂谈]如何下载vscode历史版本
  • c#cad 创建-正方形(四)
  • 什么是数据库软删除,什么场景下要用软删除?(go GORM硬删除)
  • 编辑器Zed
  • leetcode 1539.第k个缺失的正整数
  • 信号的处理机制
  • Springboot使用kafka的两种方式
  • SQL 注入 - http头注入之UA头注入探测
  • 数据库管理-第146期 最强Oracle监控EMCC深入使用-03(20240206)
  • 中兴R5300G4服务器查看服务器、主板序列号及硬盘RAID信息
  • Netty源码系列 之 AbstractUnsafe 高低水位线 ChannelOutboundBuffer 源码
  • redis集群配置
  • gcore服务器设置root账号密码登录
  • LeetCode 491 递增序列
  • 行为型设计模式—备忘录模式
  • 正点原子--STM32基本定时器学习笔记(2)