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

html标签表示!

  1. html是什么?

HTML全称为超文本标记语言,是一种标记语言。包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字图形动画声音表格链接等。

超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。

2.学习html可以做什么?

html作用是将网页使用代码实现,并且将网页的各个部分添加模块,需要的时候给模块添加颜色和大小等操作。

  html是一种静态网页,很多网站都是动静结合的,当然html是网页的基础知识,学习前端一定要先学习html,把html基本知识学扎实,然后就可以写出各种静态网页,再去学习动态网页。

html基础内容

  1. 标签之间的关系?

标签之间的关系分为两种:

父子关系(嵌套关系):<head> 与<title>等

兄弟关系(并列关系):同级关系 <head> 与<body>

标签分为单标签和双标签

  1. 标题标签

标题标签从h1-h6 逐渐减小

标签的特点:

文字都有粗体

文字独占一行

文字都有变大,从h1-h6逐渐减小

  1. 其他标签

换行标签:br 解释:单标签 让文字或者图片强制换行

水平线标签:hr 解释:加上水平线 会随着网页的大小随之变化

  1. 文本标签

段落标签:p

文本标签:text

标签格式的介绍:

标签

说明

b/strong(强调语义)

加粗

u/ins

下划线

i/em

倾斜

s/del

删除线

  1. 图片标签

使用场景:在网页中显示图片 单标签

代码:<img src=" 图片的路径 " alt=" ">

src=“ ”标签属性 属性名=“属性值”

alt替换文本

当图片没有显示出来就,才会加载的alt文本

当图片加载处理啊,不会显示,会自动被图片遮盖

title 提示文本

当鼠标悬停的时候,才会显示文本;title不仅可以在图片中使用,也可以在其他标签中使用

width和height属性

图片的宽高

如果知识设置了其中一个属性 另一个属性会自动等比例缩放(图片不会)

如果同时设置了两个属性,若设置不当会造成图片变形

属性注意点:

  1. 标签属性写在开始标签中

  1. 标签上可以同时存在多个属性

  1. 属性之间空格隔开

  1. 标签与属性之间必须使用空格隔开

  1. 属性之间没有顺序

  1. 音频视频标签

场景:在页面中插入音频或者视频

音频标签

代码:<audio src="/音频的路径" controls></audio>

常见的属性:

src 音频的路径

controls 显示播放的控件

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

loop 循环播放

音频只支持:map3,wav,ogg格式

视频标签

代码:<audio src="/音频的路径" controls></audio>

常见的属性:

src 音频的路径

controls 显示播放的控件

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

loop 循环播放

视频支持:MP4,webm,ogg格式

  1. 路径

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

相对路径:从当前文件开始寻找目标文件的过程

相对路径的分类:

  • 同级目录

  • 下级目录

  • 上级目录

./”:表示当前的文件所在的目录。

“../”:表示当前的文件所在的上一层的目录。

“/”:表示当前的文件所在的根目录。

方法一:<img src="目标图片.gif>

方法二:<img src="./目标图片.gif>

图片的格式:常用的是.jpg或.jpeg gif是动图的格式

  1. 链接标签

场景:点击事件后跳转到另一个页面

a标签 ,超链接

代码:<a href="./跳转的页面.html">文本描述</a>

双标签,内部可以包裹使用,点击跳转指定的页面,需要设置a标签的href属性

target属性名:属性值(目标网页的打开形式)

属性值:

_self:默认值,在当前窗口中跳转(覆盖当前页面)

_blank:在新窗口中跳转(保留原来的页面)

例句:<a href="https://www.baidu.com/" target="_blank">百度</a>

  1. 列表标签

种类:无序列表,有序列表,自定义列表

特点:按照行的方式,整齐显示内容

无序列表:

场景:在网页中表示一组无顺序之分的列表,如:新闻列表

标签组成:

标签名

说明

ul

表示无序列表的整体,用于包裹li标签

li

表示无序列表的每一项,包含每一行的内容

显示特点

列表的每一项前默认显示的圆点标识

特点

ul标签中只允许包括li标签

li标签可以包含任意标签

有序列表:

在网页中表示一组由顺序之分的列表

标签组成:

标签名

说明

ol

表示有序列表的整体,用于包裹li标签

li

表示有序列表的每一项,包含每一行的内容

显示特点

列表中的每一项前默认显示序号标识

特点

ol标签中只允许包括li标签

li标签可以包含任意标签

自定义标签

场景:在网页的底部导航中通常会使用自定义列表实现

标签组成:

标签名

说明

dl

表示自定义列表的整体,用于包裹dt/dd标签

dt

表示自定义列表的主题

dd

表示自定义的针对主题的每一项内容

特点

dd前会默认显示缩进效果

注意

dl标签中只允许包括dt/dd标签

dt/dd标签可以包含任意内容

  1. 表格标签

表格标题和表头单元格标签

场景:在表格中表示整体大标题和一列小标题

其他标签:

标签名

名称

说明

caption

表格大标题

表示表格整体大标题,默认在表格整体顶部居中位置显示

th

表格单元格

表示一列小标题,通常用于表格第一行,默认文字加粗并居中显示

caption标签写在table标签内部

th标签书写tr标签内部(用于替换td标签)

相关文章:

html标签表示!

html是什么&#xff1f;HTML全称为超文本标记语言&#xff0c;是一种标记语言。包括一系列标签&#xff0c;通过这些标签可以将网络上的文档格式统一&#xff0c;使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本&#xff0c;HTML命令可以说明文…...

前端优化,webpack打包删除无用文件,并附上批量删除文件脚本!非常好用

前言 大家可能在webpack打包项目过程中&#xff0c;常遇见一些无用的图片&#xff0c;js文件&#xff0c;怎样能够自动检测哪些是无用的文件呢&#xff1f;本文中介绍使用插件useless-files-webpack-plugin查找无用文件&#xff0c;在terminal中删除&#xff0c;附加bat批量删…...

SpringCloud之 LoadBalancer负载均衡

文章目录LoadBalancer 负载均衡一、LoadBalanced 负载均衡&#x1f33d;①观察负载均衡现象&#x1f33d;②LoadBalanced 源码剖析二、自定义负载均衡三、OpenFeign 实现负载均衡&#x1f346;①添加依赖&#x1f346;②启动类添加 EnableFeignClients&#x1f346;③创建客户端…...

idm如何下载种子文件和磁力链接 idm如何下载torrent

采用分段式下载技术并支持断点续传的idm下载加速器&#xff0c;几乎可以胜任所有的下载任务。由于该软件强大的下载能力和仅为10MB的小巧体积&#xff0c;idm被来自全球的用户亲切地称为天花板级的下载软件。那么有关idm如何下载种子文件和磁力链接&#xff0c;idm如何下载torr…...

UE4 安卓AR 识别图片

UE4 安卓AR 识别图片 开启一个插件 准备一个只有玩家出生点的场景&#xff0c;这个场景用来做识别图片的 新建一个游戏模式&#xff0c;设置好默认的pawn类&#xff1a; 一个摄像机就行了&#xff0c;代表手机开启AR会话后的那个相机 然后gamemode 事件开始运行&#xff0…...

数字化服务环境下高校成人教育图书馆服务工作的发展方向

1.利用高校成人教育图书馆的整体化优势进行图书馆网络的优化组织与协调&#xff0c;使数字化信息服务功能在图书馆数字化服务中得以充分实现&#xff0c;促使数字电子信息资源成为图书馆信息服务的有机组成部分。2.高校成人教育应该从宏观上有计划有组织地协调高校成人教育图书…...

以创作之名致敬女性开发者

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​​ 前言 在昨天的2023年3月8日&#xff0c;是咱们女性朋友的节日妇女节&#xff0c;本章将会…...

【ArcGIS学习记录03】--利用DEM数据提取河网溪流--加入大型河流数据及裁剪美化

【ArcGIS学习记录03】–利用DEM数据提取河网溪流–加入大型河流数据及裁剪美化 注&#xff1a;本文仅作为自己的学习记录以备以后复习查阅 一 添加大型河流数据 数据是我自己找的&#xff0c;如果有需要的可以私信我发&#xff1a; 二 裁剪 使用这个相交的工具可以对矢量…...

VOC2012数据集取需要的几个类别

Visual Object Classes Challenge 2012 一、VOC2012二、保留 people ,移除其他类三、画一张图片3.1 新开窗口显示3.2 在jupyter notebook 里面显示一、VOC2012 这项挑战的主要目标是从许多视觉对象中识别对象 现实场景中的对象类(即不是预先分割的对象)。是的 从根本上说,…...

主成分分析(PCA)原理

主成分分析&#xff08;PCA&#xff09;原理 在高维数据处理中&#xff0c;为了简化计算量以及储存空间&#xff0c;需要对这些高维数据进行一定程度上的降维&#xff0c;并尽量保证数据的不失真。PCA和ICA是两种常用的降维方法。 PCA&#xff1a;principal component analysi…...

Git:合并一个仓库的某个分支到另一个仓库的某个分支

ps&#xff1a;&#xff08;同名分支或不同名分支均可&#xff09; 1.操作: 当前仓库A的一个指定分支1 推给 另一个仓库B的另一个指定分支2 仓库A:repo1 分支1&#xff1a;develop1 仓库B:repo2 分支2&#xff1a;develop2 2.操作命令&#xff1a; 1、git pull # 在当前仓…...

工作记录:bi重构

2023.3.8&#xff0c;我在组内进行工作汇报。内容记录如下&#xff1a; 本次重构的特点 改动大影响后续开发 所以有必要进行工作汇报&#xff0c;让组内同事了解代码的改动与现状。 为什么要重构代码&#xff1f; 正在开发的数据报告模块包含大量 widget 功能&#xff0c;…...

java明文数据加密、脱敏方法总结

前言 在一些安全性要求比较高的项目里&#xff0c;避免不了要对敏感信息进行加解密&#xff0c;比如配置文件中的敏感信息。 第一种方法&#xff08;自定义加解密&#xff09; 加解密工具类&#xff1a; public class SecurityTools {public static final String ALGORITHM…...

4N65-ASEMI高压MOS管4N65

编辑-Z 4N65在TO-220封装里的静态漏极源导通电阻&#xff08;RDS(ON)&#xff09;为2.5Ω&#xff0c;是一款N沟道高压MOS管。4N65的最大脉冲正向电流ISM为16A&#xff0c;零栅极电压漏极电流(IDSS)为10uA&#xff0c;其工作时耐温度范围为-55~150摄氏度。4N65功耗&#xff08…...

天梯赛训练L1-018 (大笨钟)

目录 1、L1-018 大笨钟 2、 如果到帮助大家&#xff0c;希望大家一键三连&#xff01;&#xff01;&#xff01; 1、L1-018 大笨钟 分数 10 题目通道 微博上有个自称“大笨钟V”的家伙&#xff0c;每天敲钟催促码农们爱惜身体早点睡觉。不过由于笨钟自己作息也不是很规律&a…...

GCC编译器编译C/C++程序(一步完成、分步完成)

以下内容源于C语言中文网的学习与整理&#xff0c;非原创&#xff0c;如有侵权请告知删除。 参考内容 &#xff08;1&#xff09;GCC 预处理器选项_dllbl的博客-CSDN博客 &#xff08;2&#xff09;Preprocessor Options (Using the GNU Compiler Collection (GCC)) 一、编译的…...

Java8中那些方便又实用的Map函数

简介 java8之后&#xff0c;常用的Map接口中添加了一些非常实用的函数&#xff0c;可以大大简化一些特定场景的代码编写&#xff0c;提升代码可读性&#xff0c;一起来看看吧。 computeIfAbsent函数 比如&#xff0c;很多时候我们需要对数据进行分组&#xff0c;变成Map<…...

如何修复dxgi.dll文件错误?修复方法推荐

如果您使用Windows操作系统&#xff0c;在使用某些应用程序时&#xff0c;可能会遇到dxgi.dll文件错误。这可能会导致应用程序崩溃或无法正常运行。在本文中&#xff0c;我们将探讨如何修复dxgi.dll文件错误。 一.什么是dxgi.dll文件 dxgi.dll文件是Microsoft DirectX图形接口…...

数字化时代,你应该知道的BI

我曾经看到有人在讨论过商业智能BI的部署对于企业是否有实际意义&#xff0c;现在市场的数据已经证明商业智能BI在商业世界中&#xff0c;在企业的实践中证明了自己的价值&#xff0c;得到了广泛的认可。 一、什么是BI 有一点可能很多人没有想到&#xff0c;实际上商业智能BI…...

前端jQuery ajax请求,后端node.js使用cors跨域

前言 跨域&#xff0c;一句话介绍&#xff1a; 你要请求的URL地址与当前的URL地址&#xff0c;协议不同、域名不同、端口不同时&#xff0c;就是跨域。 步入正题 前端&#xff0c;jQuery ajax请求 $.ajax({async: false,method: post,//URl和端口与后台匹配好&#xff0c;当…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

Qt的学习(一)

1.什么是Qt Qt特指用来进行桌面应用开发&#xff08;电脑上写的程序&#xff09;涉及到的一套技术Qt无法开发网页前端&#xff0c;也不能开发移动应用。 客户端开发的重要任务&#xff1a;编写和用户交互的界面。一般来说和用户交互的界面&#xff0c;有两种典型风格&…...