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

html元素基本使用

news 2025/12/21 10:12:37

前言

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

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/12/20 0:21:45

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/11/16 14:05:01

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/12/15 8:43:18

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/11/1 8:36:48

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/12/11 3:51:27

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2025/12/10 17:29:53

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2025/12/17 4:32:25

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50