HTML 标签

news2024/11/15 13:42:23

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.coloradmin.cn/o/1440012.html

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

相关文章

Kubernetes基础(十四)-Cluster Autoscaler

Kubernetes 给出的解决方案就是&#xff1a;自动伸缩&#xff08;auto-scaling&#xff09;&#xff0c;通过自动伸缩组件之间的配合&#xff0c;可以 7*24 小时的监控着k8s集群&#xff0c;动态变化负载&#xff0c;以适应用户需求。 1 自动伸缩组件 1.1 自动伸缩类型 1.1.…

VsCode中常用的正则表达式操作

在vscode中可以使用正则表达式来进行搜索内容&#xff0c;极大的方便了我们对大量数据中需要查看的信息进行筛选&#xff0c;使用正则搜索时点击 .* 此文章会持续补充常用的正则操作 1.光标选中搜索到的内容 将搜索的内容进行全选&#xff0c;举例&#xff1a;在如下文件中我需…

基于Linux的HTTP代理服务器搭建与配置实战

在数字化世界中&#xff0c;HTTP代理服务器扮演着至关重要的角色&#xff0c;它们能够帮助我们管理网络请求、提高访问速度&#xff0c;甚至在某些情况下还能保护我们的隐私。而Linux系统&#xff0c;凭借其强大的功能和灵活性&#xff0c;成为了搭建HTTP代理服务器的理想选择。…

Android Camera2 API 后台服务

最近在搞CameraAPP需要将Camera2弄成一个后台服务&#xff0c;发现跟预览的Activity没多大变动只是加了Service&#xff0c;和一些简单的修改。之前的公司也用到Camera2&#xff0c;发现用到的时候还是蛮多的所以记录一下&#xff0c;代码在文章末尾 camera2的结构如下&#x…

常用的前端模块化标准总结

1、模块化标准出现以前使用的模块化方案&#xff1a; 1&#xff09;文件划分&#xff1a; 将不同的模块定义在不同的文件中&#xff0c;然后使用时通过script标签引入这些文件 缺点&#xff1a; 模块变量相当于是定义在全局的&#xff0c;容易造成变量名冲突&#xff08;即不…

代码随想录算法训练营第25天 | 216.组合总和III ,17.电话号码的字母组合

回溯章节理论基础&#xff1a; https://programmercarl.com/%E5%9B%9E%E6%BA%AF%E7%AE%97%E6%B3%95%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80.html 216.组合总和III 题目链接&#xff1a;https://leetcode.cn/problems/combination-sum-iii/ 思路: 本题就是在[1,2,3,4,5,6,7,…

Git简单了解

文章目录 1、Git概述2、Git下载与安装3、Git代码托管服务3.1、使用码云托管服务 1、Git概述 什么是Git Git是一个分布式版本控制工具&#xff0c;主要用于管理开发过程中的源代码文件&#xff08;Java类、xml文件、html页面等&#xff09;&#xff0c;在软件开发过程中被广泛使…

免费文字转语音工具,一款优秀且永久免费的文字转语音工具,同时拥有多种类型男声女声,支持多国语言转换,支持语速调节和下载!

一、软件简介 该工具只有一个功能&#xff0c;就是将输入框内的纯文本内容转换为指定语言的音频&#xff0c;并且可以自由调节语速及音色&#xff08;男声/女声&#xff09;&#xff0c;其内置了多种语音包&#xff0c;包含男声、女声、普通话、粤语以及方言&#xff0c;并且支…

Ubuntu安装SVN服务并结合内网穿透实现公网访问本地存储文件

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&…

Visual Studio 2022中创建的C++项目无法使用万能头<bits/stdc++.h>解决方案

目录 发现问题 解决办法 第一步 第二步 第三步 第四步 最后一步 问题解决 发现问题 如果大家也遇到下面这种问题&#xff0c;可能是没有include文件夹中没有bits/stdc.h 解决办法 第一步 打开一个C项目&#xff0c;鼠标移动至头文件上右击&#xff0c;选择转到文档或…

c#: 表达式树的简化

环境&#xff1a; .net 6 一、问题&#xff1f; 有下面的表达式&#xff1a; var nums new List<int> { 1, 2, 3 }; Expression<Func<int, bool>> exp i > i > nums.Max();我们知道&#xff0c;它其实就是&#xff1a;exp i > i > 3; 那么…

06-OpenFeign-使用HtppClient连接池

默认下OpenFeign使用URLConnection 请求连接&#xff0c;每次都需要创建、销毁连接 1、添加ApacheHttpClient依赖 <!-- 使用Apache HttpClient替换Feign原生httpclient--><dependency><groupId>org.apache.httpcomponents</groupId><artifact…

编曲学习:旋律创作基础概念 和弦进行作曲 和弦外音使用 作曲技巧

旋律创作基础概念 和弦进行作曲 和弦外音使用 作曲技巧https://app8epdhy0u9502.pc.xiaoe-tech.com/live_pc/l_65be1ba7e4b064a83b92a3d7?course_id=course_2XLKtQnQx9GrQHac7OPmHD9tqbv文档https://app8epdhy0u9502.pc.xiaoe-tech.com/p/t_pc/course_pc_detail/camp_pro/cour…

【GAMES101】Lecture 19 相机

目录 相机 视场 Field of View (FOV) 曝光&#xff08;Exposure&#xff09; 感光度&#xff08;ISO&#xff09; 光圈 快门 相机 成像可以通过我们之前学过的光栅化成像和光线追踪成像来渲染合成&#xff0c;也可以用相机拍摄成像 今天就来学习一下相机是如何成像的…

Golang数据库编程详解 | 深入浅出Go语言原生数据库编程

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站https://www.captainbed.cn/kitie。 Golang学习专栏&#xff1a;https://blog.csdn.net/qq_35716689/category_12575301.html 前言 对数据库…

【Java八股面试系列】JVM-常见参数设置

目录 堆内存相关 显式指定堆内存–Xms和-Xmx 显式新生代内存(Young Generation) 显式指定永久代/元空间的大小 垃圾收集相关 垃圾回收器 GC 日志记录 处理 OOM JDK监控和故障处理工具总结 堆内存相关 Java 虚拟机所管理的内存中最大的一块&#xff0c;Java 堆是所有线…

【JavaScript + CSS】随机生成十六进制颜色

效果图 实现 <template><div class"year_area"><div class"year_list"><el-row :span"24"><div :class"showAll"><el-col :span"5" v-for"(item, index) in defaulList" :key&…

代码随想录算法训练营DAY16 | 二叉树 (3)

一、LeetCode 104 二叉树的最大深度 题目链接&#xff1a;104.二叉树的最大深度https://leetcode.cn/problems/maximum-depth-of-binary-tree/ 思路&#xff1a;采用后序遍历递归求解。 class Solution {int ans 0;public int maxDepth(TreeNode root) {if(root null){retur…

【Linux】Linux开发工具(yum、gdb、git)详解

一、软件包管理器 yum 1、什么是软件包 在 Linux 下安装软件&#xff0c;通常的办法是下载到程序的源代码&#xff0c;并进行编译&#xff0c;得到可执行程序。但这样太麻烦了&#xff0c;于是有些人把一些常用的软件提前编译好&#xff0c;做成软件包&#xff08;可以理解成…

mac电脑flutter环境配置,解决疑难问题

准备工作 首先搭建flutter的环境需要使用到flutter的sdk&#xff0c;可以直接跳去官网下载&#xff1a;Choose your first type of app - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter&#xff0c;下载时要注意你电脑所使用的芯片是Intel的还是苹果的芯片。 下载好的…