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

html元素基本使用

news 文章来源：https://blog.csdn.net/weixin_53425006/article/details/136772339 2025/5/14 19:11:07

前言

大家好，我是jiantaoyab，第一次学习前端的html，写一篇笔记总结常用的元素

语义化

例如只要是

不管字体的大小是怎么样，有没有加粗都是标题，元素显示到页面中的效果应该由css决定，这就是语义化。

文本元素

元素周期表大家可以查看这个，查看每个元素怎么使用，或者用官网查询。

标签

接下来一个一个解释每个标签的用法和解释

<!-- 当前使用的标准是html5 -->
<!DOCTYPE html> 
<!-- lang全局属性,告诉浏览器元素内部是用哪一种语音写的 -->
<html lang="en"> <!-- en:英文 cmn-hans:中文 -->
<!-- 参与显示网页内容的,全部写到body中 -->

head

<!-- head中的内容不会显示到网页上 -->
<!-- meta 附加属性 -->
<head><!-- 指定网页内容编码是UTF-8 --><meta charset="UTF-8"><!-- 适配手机端 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页标题 --><title>Document</title></head>

span

span 无意义， 仅仅用来设置样式
某些元素显示的时候会占一行（块级元素）
某些不元素不会（行级元素）
到了HTML5已近弃用这种税法

pre

在源代码中连续出现的空格，会出现折叠成一个空格在网页中
但是在pre元素的内容会按照原样出现在网页中
该元素通常用来显示代码，它有一个默认的css属性

实体字符

实体字符 Entity
通常用来显示页面特殊符号
&单词 比如小写字符 &lt &gt（大写） &nbsp 空格符号 &copy 版权符号
&#数字 &#60 小写字符

a元素

1.跳转地址
2.跳转锚点#（跳转到同一个网页中某个位置） 
3.功能链接 点击后会触发js代码<!-- 1.跳转地址 --><a href="https://lestore.lenovo.com/">联想电脑管家</a><!-- 2.跳转锚点 --><a href="#chapter2">章节2</a><h2 id="chapter2">跳转的锚点</h2><!-- 3.功能链接发送邮件 --><a href="mailto:dawdwawda@yeah.net">邮件</a><!-- 4.拨打电话 --><a href="tel:312321321321di">电话</a><!-- 和map联用 coords 坐标原点是从左上角开始的circle 圆要找出圆心 "长，宽，圆的半径"rect   矩形要找出左上角和右下角 "x1,y1, x2,y2"poly   多边形（三角形，五边形什么都行）"x1,y1,x2,y2,xn,yn"--><map name="com"> <area shape="circle" coords="137,197,30" href="https://www.bilibili.com/" ></map><!-- 和figure联用 --><figure>-><a target = "_blank" href="https://lestore.lenovo.com/search?"><img usemap="#com" src="hh.jpg" alt="这是图片">下载</a><map name="com"> <area shape="circle" coords="137,197,30" href="https://www.bilibili.com/" ></map></figure>

target

跳转窗口的位置_self 当前窗口打开默认值
_blank 在新窗口打开
title:鼠标放到这里的话会有一个详细描述<!-- target使用 --><a href="https://lestore.lenovo.com/" target = "_blank"  title ="软件下载">联想</a>

URL

 访问站位资源得用决定路径
当跳转的目标和当前页面的协议相同时，可以省略协议
绝对路径的书写格式
url地址 = 协议名：// 主机名：端口号 / 路径相对路径
访问站内资源
以 ./ 开头  ./表示当前资源所在的目录
..表示上一级目录<!-- 相对路径 --><a href="./second.html">第二页面</a>

图片元素

img 空元素
src资源的路径，alt描述图片内容
1.和a元素联用
2.和map元素联用
coords 坐标原点是从左上角开始的
circle 圆要找出圆心 "长，宽，圆的半径"
rect   矩形要找出左上角和右下角 "x1,y1, x2,y2"
poly   多边形（三角形，五边形什么都行）"x1,y1,x2,y2,xn,yn"
衡量坐标的时候用专业软件量才准确
3.figure联用
把图片，图片标题，描述包裹起来<!-- 图片 --><img src="https://img2.baidu.co20&f=JPEG?" alt="这是图片">
<!-- 和a元素联用 --><a target = "_blank" href="https://lestore.lenovo.com/search?"><img usemap="#com" src="ff.jpg" alt="这是图片">下载</a>

video视频&& audio 音频

video视频
controls = "controls" 只能这样用这种叫bool属性
和controls 是一样的，不用写等于后面的也可以
下面都是bool属性
autoplay 自动播放
muted 禁音播放
loop 循环播放audio 音频 和视频的使用一样
如果网站不兼容的话，用source带上多个格式<!-- 视频 --><video src="//www.bilibili.com/bangumi/media/md28229590">视频<!-- 用这个方式支持多种播放模式 --><source src ="xxxx/xx.mp4"><source src ="xxxx/xx.webm"></video>

列表

ol ：是一个列表
li ：有序列表
<ol reversed> 倒着显示
一般不用type属性，用css来设置前面的序号
type = "i" 罗马数字排列
type = "A" 字母排列排列ul ：无序列表
常用来制作菜单 和 新闻列表定义列表
dl ： definition list 
dt ： definition title
dd ： definition description<!-- 有序列表 --><ol reversed><li> 大娃大娃</li><li> 大娃大娃</li><li> 大娃大娃</li></ol><!-- 无序列表 --><ul><li> 无穷大青蛙单位</li><li> 无穷大青蛙单位</li><li> 无穷大青蛙单位</li><li> 无穷大青蛙单位</li></ul><!-- 定义列表 --><dl><dt>HTML</dt><dd>超文本语言</dd></dl>

容器元素

该元素代表一个区域，内部放置其他元素
div 没有语义 显示效果靠css设计
header 表示页头，也可以表示文章头部
footer 表示页脚，也可以表示文章尾部
article 通常用于表示整片文章
section 通常用于表示文章的章节
aside 通常用于显示侧边栏

元素包含关系

元素的包含关系由元素的内容类别决定
假如想要查 h1 元素能不能包含 P 元素 用mdn查 1.容器元素中可以包含任何元素
2.a元素中几乎可以包含任何元素
3.某些元素可以可以有固定的子元素 ul和li

相关文章：

html元素基本使用

前言 大家好&#xff0c;我是jiantaoyab&#xff0c;第一次学习前端的html&#xff0c;写一篇笔记总结常用的元素 语义化 例如只要是 不管字体的大小是怎么样&#xff0c;有没有加粗都是标题&#xff0c;元素显示到页面中的效果应该由css决定&#xff0c;这就是语义化。 文…...

编程日记 2024/3/17 12:37:58

PHP+golang开源办公系统CRM管理系统

基于ThinkPHP6 Layui MySQL的企业办公系统。集成系统设置、人事管理、消息管理、审批管理、日常办公、客户管理、合同管理、项目管理、财务管理、电销接口集成、在线签章等模块。系统简约&#xff0c;易于功能扩展&#xff0c;方便二次开发。 服务器运行环境要求 PHP > 7.…...

编程日记 2024/3/17 12:33:55

smartmontools-5.43交叉编译Smartctl

嵌入式系统的sata盘经常故障&#xff0c;需要使用smatctl工具监控和诊断sata故障。 1. 从网上下载开源smartmontools-5.43包。 2. 修改makefile进行交叉编译。 由于软件包中已经包含Makefile.am&#xff0c;Makefile.in。直接运行 automake --add-missing 生成Makefile。 3.…...

编程日记 2024/3/17 12:30:52

idea找不到或无法加载主类

前言 今天在运行项目的时候突然出了这样一个错误&#xff1a;IDEA 错误 找不到或无法加载主类,相信只要是用过IDEA的朋友都 遇到过它吧&#xff0c;但是每次遇到都是一顿焦头烂额、抓耳挠腮、急赤白咧&#xff01;咋整呢&#xff1f;听我给你吹~ 瞧我这张嘴~ 问题报错 找不…...

编程日记 2024/3/17 12:26:49

2.二进制的方式读写文件

文章目录 写入文件代码运行结果 读出文件代码运行结果 文件打开模式标记&#xff08;查表&#xff09; 写入文件 ------写文件一共五步&#xff1a;------ 第一步&#xff1a;包含头文件 第二步&#xff1a;创建流对象 第三步&#xff1a;指定方式打开文件 第四步&#xff1a;…...

编程日记 2024/3/17 12:24:47

Seata的详细解释

什么是seata Seata&#xff08;Simple Extensible Autonomous Transaction Architecture&#xff09;是一个开源的分布式事务解决方案。它是由阿里巴巴集团开发的&#xff0c;旨在解决分布式系统中的事务一致性问题。 Seata提供了一种简单易用的方式来实现跨多个数据库和服务的…...

编程日记 2024/3/17 12:22:45

JS手写实现洋葱圈模型

解释洋葱圈模型&#xff1a; 当我们执行第一个中间件时&#xff0c;首先输出1&#xff0c;然后调用next()&#xff0c;那么此时它会等第二个中间件执行完毕才会继续执行第一个中间件。然后执行第二个中间件&#xff0c;输出3&#xff0c;调用next()&#xff0c;执行第三中间件…...

编程日记 2024/3/17 12:21:44

3.Windows下安装MongoDB和Compass教程

Windows下安装MongoDB 总体体验下来&#xff0c;&#xff0c;要比MySQL的安装简单了许多&#xff0c;没有过多的配置&#xff0c;直接就上手了&#xff01; 1、下载 进入官方的下载页面https://www.mongodb.com/try/download/community&#xff0c;如下选择&#xff0c;我选…...

编程日记 2024/3/17 12:20:44

go反射实战

文章目录 demo1 数据类型判断demo2 打印任意类型数据 demo1 数据类型判断 使用reflect.TypeOf()方法打印go中数据类型&#xff0c;可参考go官方API文档;使用格式化参数%T也能打印数据类型。 package mainimport "fmt" import "reflect" import "io&…...

编程日记 2024/3/17 12:12:35

Docker 中 MySQL 的部署与管理

目录 一、Docker 中部署 MySQL1.1 部署 MySQL1.2 进入容器并创建数据库1.3 Navicat 可视化工具连接 二、可能存在的问题2.1 1130 - Host ‘172.17.0.1‘ is not allowed to connect to this MySQL server 参考资料 一、Docker 中部署 MySQL 1.1 部署 MySQL 首先&#xff0c;从…...

编程日记 2024/3/17 12:11:34

基础练习题之函数

前言 这些题目来自与一些刷题网站,以及c primer plus,继续练习 第一题 给你一个数&#xff0c;让他进行巴啦啦能量&#xff0c;沙鲁沙鲁&#xff0c;小魔仙大变身&#xff0c;如果进行变身的数不满足条件的话&#xff0c;就继续让他变身。。。直到满足条件为止。 巴啦啦能量…...

编程日记 2024/3/17 12:10:33

Java NIO浅析

NIO&#xff08;Non-blocking I/O&#xff0c;在Java领域&#xff0c;也称为New I/O&#xff09;&#xff0c;是一种同步非阻塞的I/O模型&#xff0c;也是I/O多路复用的基础&#xff0c;已经被越来越多地应用到大型应用服务器&#xff0c;成为解决高并发与大量连接、I/O处理问题…...

编程日记 2024/3/17 12:09:32

数据挖掘与大数据的结合

随着大数据技术的不断发展和普及&#xff0c;数据挖掘在大数据环境下的应用也变得更加广泛和深入。以下将探讨大数据技术对数据挖掘的影响&#xff0c;以及如何利用大数据技术处理海量数据并进行有效的数据挖掘&#xff0c;同时分析大数据环境下的数据挖掘挑战和解决方案。 1.…...

编程日记 2024/3/17 12:08:31

分布式链路追踪（一）SkyWalking（2）使用

一、使用方法 1、简介 agent探针可以让我们不修改代码的情况下&#xff0c;对Java应用上使用到的组件进行动态监控&#xff0c;获取运行数据发送到OAP上进行统计和存储。agent探针在Java使用中是使用Java agent技术实现。不需要更改任何代码&#xff0c;Java agent会通过虚拟…...

编程日记 2024/3/17 12:01:23

【QT入门】VS2019+QT的开发环境配置

声明&#xff1a;该专栏为本人学习Qt知识点时候的笔记汇总&#xff0c;希望能给初学的朋友们一点帮助(加油&#xff01;) 往期回顾&#xff1a; 【QT入门】什么是qt&#xff0c;发展历史&#xff0c;特征&#xff0c;应用&#xff0c;QtCreator-CSDN博客【QT入门】Windows平台下…...

编程日记 2024/3/17 11:59:22

RTP 控制协议 (RTCP) 反馈用于拥塞控制

摘要 有效的 RTP 拥塞控制算法&#xff0c;需要比标准 RTP 控制协议(RTCP)发送方报告(SR)和接收方报告(RR)数据包提供的关于数据包丢失、定时和显式拥塞通知 (ECN) 标记的更细粒度的反馈。 本文档描述了 RTCP 反馈消息&#xff0c;旨在使用 RTP 对交互式实时流量启用拥塞控制…...

编程日记 2024/3/17 11:55:19

基于SpringBoot SSM vue办公自动化系统

基于SpringBoot SSM vue办公自动化系统 系统功能 登录 个人中心 请假信息管理 考勤信息管理 出差信息管理 行政领导管理 代办事项管理 文档管理 公告信息管理 企业信息管理 会议室信息管理 资产设备管理 员工信息管理 开发环境和技术 开发语言&#xff1a;Java 使用框架: S…...

编程日记 2024/3/17 11:53:17

SpingBoot集成Rabbitmq及Docker部署

文章目录 介绍RabbitMQ的特点Rabbitmq术语消息发布接收流程 Docker部署管理界面说明Overview: 这个页面显示了RabbitMQ服务器的一般信息&#xff0c;例如集群节点的名字、状态、运行时间等。Connections: 在这里&#xff0c;可以查看、管理和关闭当前所有的TCP连接。Channels: …...

编程日记 2024/3/17 11:52:16

子组件自定义事件$emit实现新页面弹窗关闭之后父界面刷新

文章目录 需求弹窗关闭之后父界面刷新展示最新数据 实现方案AVUE 大文本默认展开slotVUE 自定义事件实现 父界面刷新那么如何用呢? 思路核心代码1. 事件定义2. 帕斯卡命名组件且在父组件中引入以及注册3. 子组件被引用与父事件监听4.父组件回调函数 5.按钮弹窗事件 需求 弹窗…...

编程日记 2024/3/17 11:51:15

【框架】跨端开发框架介绍（Windows/MacOS/Linux/Andriod/iOS/H5/小程序）

1. 跨端框架介绍 跨端框架 基本信息 说明 移动端 &#xff08;性能&#xff1a;uniapp < ReactNative < Flutter&#xff09; uniapp 注&#xff1a;weex已经嵌入uniapp 适用范围&#xff1a;Andriod、iOS、H5、国产小程序、快应用 引擎&#xff1a; 所属公司&#x…...

编程日记 2024/3/17 11:50:14

亚马逊云科技 Lambda 运行selenium

有些定时任务需要使用自动化测试的工具&#xff0c;如果使用亚马逊云科技 Lambda来实现这个功能的话&#xff0c;那么就需要图形框架&#xff0c;而我们知道lambda其实是一个虚拟机&#xff0c;而且按照系统级别依赖比较困难。所以这里选择使用容器的形式进行发布。 在dockerf…...

编程日记 2024/3/17 11:47:11

算法——前缀和之除自身以外数组的乘积、和为K的子数组、和可被K整除的子数组、连续数组、矩阵区域和

这几道题对于我们前面讲过的一维、二维前缀和进行了运用,包含了面对特殊情况的反操作 目录 4.除自身以外数组的乘积 4.1解析 4.2题解 5.和为K的子数组 5.1解析 5.2题解 6.和可被K整除的子数组 6.1解析 6.2题解 7.连续数组 7.1题解 7.2题解 8.矩阵区域和 8.1解析 …...

编程日记 2024/3/17 11:43:08

Text-to-SQL 工具Vanna + MySQL本地部署 | 数据库对话机器人

今天我们来重点研究与实测一个开源的Text2SQL优化框架 – Vanna 1. Vanna 简介【Text-to-SQL 工具】 Vanna 是一个基于 MIT 许可的开源 Python RAG&#xff08;检索增强生成&#xff09;框架&#xff0c;用于 SQL 生成和相关功能。它允许用户在数据上训练一个 RAG “模型”&a…...

编程日记 2024/3/17 11:41:06

linux最佳入门（笔记）

1、内核的主要功能 2、常用命令 3、通配符&#xff1a;这个在一些启动文件中很常见 4、输入/输出重定向 意思就是将结果输出到别的地方&#xff0c;例如&#xff1a;ls标准会输出文件&#xff0c;默认是输出到屏幕&#xff0c;但是用>dir后&#xff0c;是将结果输出到dir文…...

编程日记 2024/3/17 11:38:04

加速 PyTorch 模型预测常见方法梳理

目录 1. 使用 GPU 加速 2. 批量推理 3. 使用半精度浮点数 (FP16) 4. 禁用梯度计算 5. 模型简化与量化 6. 使用 TorchScript 7. 模型并行和数据并行 结论 在使用 PyTorch 进行模型预测时&#xff0c;可以通过多种方法来加快推理速度。以下是一些加速模型预测的常用方法&…...

编程日记 2024/3/17 11:37:03

【STM32定时器 TIM小总结】

STM32 TIM详解 TIM介绍定时器类型基本定时器通用定时器高级定时器常用名词时序图预分频时序计数器时序图 定时器中断配置图定时器定时 代码调试 TIM介绍 定时器&#xff08;Timer&#xff09;是微控制器中的一个重要模块&#xff0c;用于生成定时和延时信号&#xff0c;以及处…...

编程日记 2024/3/17 11:36:02

RISC-V 编译环境搭建：riscv-gnu-toolchain 和 riscv-tools

RISC-V 编译环境搭建&#xff1a;riscv-gnu-toolchain 和 riscv-tools 编译环境搭建以及说明 操作系统&#xff1a;什么系统都可以 虚拟机&#xff1a;VMmare Workstation Pro 17.50.x (版本不限) 编译环境&#xff1a;Ubuntu 18.04.5 CPU&#xff1a;i7-8750h(虚拟机分配4核…...

编程日记 2024/3/17 11:34:00

一文速通ESP32（基于MicroPython）——含示例代码

ESP32 简介 ESP32-S3 是一款集成 2.4 GHz Wi-Fi 和 Bluetooth 5 (LE) 的 MCU 芯片&#xff0c;支持远距离模式 (Long Range)。ESP32-S3 搭载 Xtensa 32 位 LX7 双核处理器&#xff0c;主频高达 240 MHz&#xff0c;内置 512 KB SRAM (TCM)&#xff0c;具有 45 个可编程 GPIO 管…...

编程日记 2024/3/17 11:32:59

记录一次业务遇到的sql问题

刚开始工作 业务能力比较薄弱 记录一下这几天遇见的一个业务问题 场景 先简单说一下场景&#xff0c;有一批客户&#xff08;一张表&#xff09;&#xff0c;可以根据这个客户匹配出很多明细数据&#xff08;另一张表&#xff09;&#xff0c;现在需要删除明细&#xff0c;一个…...

编程日记 2024/3/17 11:29:57

代码分支管理

代码分支管理规范 一、分支管理要求 分支管理 • 将代码提交到适当的分支，遵循分支管理策略。 • 随时可以切换到线上稳定版本代码，确保可以快速回滚到稳定版本。 • 同时进行多个版本的开发工作，确保分支清晰，避免混淆。提交记录的可读性 • 提交描述准确，具有可检索性，…...

编程日记 2024/3/17 11:26:54