当前位置: 首页 > 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;当…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...