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.hqwc.cn/news/464468.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法与数据结构】496、503、LeetCode下一个更大元素I II

文章目录 一、496、下一个更大元素 I二、503、下一个更大元素II三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、496、下一个更大元素 I 思路分析&#xff1a;本题思路和【算法与数据结构】739、LeetCode每日温度类似…

【数据结构与算法】【小白也能学的数据结构与算法】迭代算法专题

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《数据结构与算法&#xff1a;初学者入门指南》&#x1f4d8;&am…

InternLM大模型实战-3.InternLM+Langchain搭建知识库

文章目录 前言笔记正文大模型开发范式RAGFinetune LangChain简介构建向量数据库搭建知识库助手1 InternLMLangchain2 构建检索问答链3 优化建议 Web Demo 部署搭建知识库 前言 本文是对于InternLM全链路开源体系系列课程的学习笔记。【基于 InternLM 和 LangChain 搭建你的知识…

SpringCloud-高级篇(十九)

我们已经学过使用 SpringAMQP去收和发消息&#xff0c;但是发和收消息是只是MQ最基本的功能了&#xff0c;在收发消息的过程中&#xff0c;会有很多的问题需要去解决&#xff0c;下面需要学习rabbitMQ的高级特性去解决 死信交换机&#xff1a;这个可以帮助我们实现消息的延迟的…

云计算运维 · 第三阶段 · 代码上线案例

学习b记 第三阶段 持续集成案例 这一章做一个小的案例&#xff0c;git、gitlab、jenkins、sonarqube、maven、shell把这周学的一整个流程串联起来做一个完整的代码发布流程案例&#xff0c;这一部分东西比较多&#xff0c;相对于之前的笔记这个会做的仔细一点。#嘿嘿回家就是…

AI大模型学习笔记之四:生成式人工智能(AIGC)是如何工作的?

OpenAI 发布 ChatGPT 已经1年多了&#xff0c;生成式人工智能&#xff08;AIGC&#xff09;也已经广为人知&#xff0c;我们常常津津乐道于 ChatGPT 和 Claude 这样的人工智能系统能够神奇地生成文本与我们对话&#xff0c;并且能够记忆上下文情境。 Midjunery和DALLE 这样的AI…

ERROR: Could not build wheels for roslz4

Python bugs 最近在安装python的rosbag包时出现了诸多问题&#xff0c;特别记录下。 python版本&#xff1a;3.11 系统版本&#xff1a;Windows10 x86_64 使用conda虚拟环境进行包管理。 运行命令 pip3 install roslz4 --extra-index-url https://rospypi.github.io/simple…

奇异值分解(SVD)的应用——图像压缩

SVD方法是模型降阶的一类重要方法&#xff0c;本征正交分解&#xff08;POD&#xff09;和平衡截断&#xff08;BT&#xff09;都属于SVD类方法。 要想深入了解模型降阶技术&#xff0c;我们可以先从SVD的应用入手&#xff0c;做一个直观的了解。 1. SVD的定义和分类 我们想寻找…

【学网攻】 第(25)节 -- 帧中继(多对一)

系列文章目录 目录 系列文章目录 文章目录 前言 一、帧中继是什么&#xff1f; 二、实验 1.引入 实验目标理解帧中继在广域网中的原理及功能&#xff1b; 实验背景 技术原理 实验步骤 实验设备 实验拓扑图​编辑 实验配置 实验验证 文章目录 【学网攻】 第(1)节…

华为 huawei 交换机 接口 MAC 地址学习限制接入用户数量 配置示例

目录 组网需求: 配置思路&#xff1a; 操作步骤&#xff1a; 配置文件&#xff1a; 组网需求: 如 图 2-14 所示&#xff0c;用户网络 1 和用户网络 2 通过 LSW 与 Switch 相连&#xff0c; Switch 连接 LSW 的接口为GE0/0/1 。用户网络 1 和用户网络 2 分别属于 VLAN10 和 V…

c++之说_14|左值引用与右值引用

提起左右值引用我就头疼 左值&#xff1a; 1、在内存中开辟了空间的便叫左值 2、左值不一定可以赋值 如字符串常量 3、左值可以取地址 右值&#xff1a; 1、在内存中没有开辟空间的 2、右值无法取地址 如&#xff1a; 立即数&#xff08;1&#xff0c;2&#xff0c;3…

前后端分离nodejs+vue动态网站的图书借阅管理系统35ih5

读者模块 1)注册&#xff1a;读者输入账号、密码、确认密码、姓名、手机、身份证、邮箱&#xff0c;点击注册按钮&#xff0c;完成注册。 2)登录&#xff1a;普通读者成功输入读者账号和密码&#xff0c;点击登录按钮。 3)读者主页面&#xff1a;读者登录成功后&#xff0c;选择…