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

html元素基本使用

news 2025/9/15 15:24:04

前言

大家好，我是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

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/7/6 21:38:30

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/9/11 8:06:49

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/9/11 4:52:26

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/9/15 3:25:50

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2025/8/14 14:59:56

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/9/4 2:30:13

API网关Kong的鉴权与限流：高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

编程新知 2025/9/6 9:35:29

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...

编程新知 2025/7/7 19:28:43