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

html元素基本使用

news 2026/4/2 20:36:34

前言

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

python实现skip-gram(跳词)示例

文章目录示例什么是跳词? 一句话&#xff0c;就是用中心词&#xff0c;去预测它周围的词。它是 Word2Vec 里最常用的一种训练方式。 示例 1、安装依赖 pip install matplotlib # 其他torch等依赖早就安装了2、创建python文件skip_gram_demo.py&#xff0c;代码&#xff1a;…...

编程新知 2026/4/2 19:57:50

丁二酸酯PEG氨基叔丁氧羰基，NHBoc-PEG-SA，可与胺基、羟基等基团发生缩合反应

一.名称英文名称&#xff1a;SA-PEG-NHBoc&#xff0c;Succinic Acid-PEG-NHBoc&#xff0c;NHBoc-PEG-SA&#xff0c;NHBoc-PEG-Succinic Acid中文名称&#xff1a;丁二酸酯聚乙二醇氨基叔丁氧羰基&#xff0c;丁二酸酯PEG氨基叔丁氧羰基分子量&#xff1a;1k&#xff0c;2k&a…...

编程新知 2026/4/2 19:35:39

别再傻傻分不清！ComfyUI里Load Checkpoint和Load Diffusion Model到底怎么选？附实战场景对比

ComfyUI模型加载决策指南&#xff1a;Checkpoint与Diffusion Model的实战选择逻辑 第一次打开ComfyUI工作流时&#xff0c;面对"Load Checkpoint"和"Load Diffusion Model"两个相似的紫色节点&#xff0c;大多数新手都会愣住——它们看起来都能加载模型&am…...

编程新知 2026/4/2 19:17:21

从混乱到有序：大数据规范性分析的转型之路

从混乱到有序：大数据规范性分析的转型之路 关键词：大数据分析、数据治理、规范性分析、数据质量、ETL流程、数据仓库、数据可视化 摘要：本文深入探讨了大数据分析从混乱无序状态向规范性分析转型的关键路径。文章首先分析了大数据环境下面临的典型数据质量问题，然后系统性地…...

编程新知 2026/4/2 19:17:21

从“脸”开始的全球化：SOUNDVIEW 如何用 AI 换脸打破视频出海的文化壁垒

在全球化浪潮中&#xff0c;视频已成为跨境电商、短剧以及品牌营销出海的核心载体。然而&#xff0c;许多企业在实际操作中面临着一个巨大的“信任陷阱”&#xff1a;即便翻译精准、配音完美&#xff0c;屏幕中那张带有明显地域特征的面孔&#xff0c;依然会让海外用户产生天然…...

编程新知 2026/4/2 17:57:52

基于单片机的无线病床呼叫系统（有完整资料）

资料查找方式&#xff1a;特纳斯电子&#xff08;电子校园网&#xff09;&#xff1a;搜索下面编号即可编号&#xff1a;T4092204C设计简介&#xff1a;本设计是基于单片机的无线病床呼叫系统&#xff0c;主要实现以下功能&#xff1a;1、按下呼叫按钮&#xff0c;液晶显示器显…...

编程新知 2026/4/2 17:27:21

FGA开源工具问题速解：从入门到精通的实战指南

FGA开源工具问题速解&#xff1a;从入门到精通的实战指南 【免费下载链接】FGA Auto-battle app for F/GO Android 项目地址: https://gitcode.com/gh_mirrors/fg/FGA 一、基础配置问题&#xff1a;3步定位法解决启动障碍 1.1 权限访问失败&#xff1a;系统级操作权限配…...

编程新知 2026/4/2 17:07:02

别再手动另存为了！用Python脚本5分钟搞定上百个Excel文件的格式转换（附完整代码）

别再手动另存为了&#xff01;用Python脚本5分钟搞定上百个Excel文件的格式转换&#xff08;附完整代码&#xff09; 你是否曾经面对过这样的场景&#xff1a;电脑里堆积着上百个老旧的.xls格式Excel文件&#xff0c;每次需要使用时都得手动一个个"另存为"xlsx格式&a…...

编程新知 2026/4/2 15:51:24

数学解题能力实测：通义千问QwQ-32B vs Claude 3.5 Sonnet，谁才是理科生最佳AI助手？

数学解题能力实测&#xff1a;通义千问QwQ-32B vs Claude 3.5 Sonnet&#xff0c;谁才是理科生最佳AI助手&#xff1f; 当一道复杂的AIME竞赛题摆在面前时&#xff0c;你会选择哪种AI助手&#xff1f;是擅长分步推导的开源新秀QwQ-32B&#xff0c;还是以逻辑严谨著称的Claude 3…...

编程新知 2026/4/2 15:27:02

自动化工具赋能工作流：如何用KeymouseGo提升效率与降低错误率

自动化工具赋能工作流&#xff1a;如何用KeymouseGo提升效率与降低错误率 【免费下载链接】KeymouseGo 类似按键精灵的鼠标键盘录制和自动化操作 模拟点击和键入 | automate mouse clicks and keyboard input 项目地址: https://gitcode.com/gh_mirrors/ke/KeymouseGo 在…...

编程新知 2026/4/2 14:11:41