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

HTML5语法总结

news 2025/6/27 4:56:14

文章目录

一.HTML基本框架
二.标题标签
三.段落标签
四.换行与水平线标签
五.文本格式化标签(加粗、倾斜、下划线、删除线)
六.图像标签
- 扩展：相对路径,绝对路径与在线网址
七.超链接标签
八.音频标签
九.视频标签
十.列表标签
十一.表格标签
- 扩展：表格结构标签
- 合并单元格
十二.表单标签
- 1.input标签
- - input占位文本属性(提示信息)
  - 单选框radio属性
  - 表单如何上传多个文件？
  - 多选框checkbox属性
- 2.下拉菜单
- 3.文本域
- 4.label标签
- 4.按钮
十三.布局标签（div和span）
十四.字符实体（空格，大于小于符号）

VS Code编译器
浏览器(谷歌或Microsoft Edge)

注释标签： < !-- … – >
VsCode注释快捷键： Ctrl + /

一.HTML基本框架

如何快速生成VS Code基本框架：在VS Code中输入’!'并回车生成一个HTML基本骨架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

html:整个网页
head:网页头部，存放给浏览器看的代码，例如CSS
body:网页主体，存放给用户看的代码，例如图片、文字等
title:网页标题

二.标题标签

标签名： h1~h6（双标签）
显示特点：文字加粗，且标签数字越大，标题的文字大小越小；一个标题标签独占一行；
注意：h1标签在一个网页中只能用一次，而h2~h6标签没有使用次数的限制

    <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>

结果展示：

三.段落标签

标签名：p（双标签）
显示特点：独占一行；段落之间存在间隙

    <p>我我我我我我嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄我我我我我嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄我我</p><p>你你你你你你你你你</p><p>她她她她她她她她她她她她她她她她她她她</p>

运行结果：

四.换行与水平线标签

换行：br（单标签）
水平线：hr （单标签）

<body><h1>这里展示换行与水平线标签</h1><hr>第一行内容<br>第二行内容<br>第三行内容
</body>

运行结果：

五.文本格式化标签(加粗、倾斜、下划线、删除线)

加粗：strong或b
倾斜：em或i
下划线：ins或u
删除线：del或s

<body><h1>这里展示文本格式化标签</h1><strong>加粗标签</strong><b>加粗标签</b><br><em>倾斜标签</em><i>倾斜标签</i><br><ins>下划线标签</ins><u>下划线标签</u><br><del>删除线标签</del><s>删除线标签</s>
</body>

结果展示：

六.图像标签

作用：在网页中插入图片
语法：< img src = “图片的URL” >

src用于指定图像的位置和名称，是img的必须属性

<body><h1>这里展示图片的标签</h1><br><img src="./map.jpg" alt="">    <!--这里用的是相对路径-->
</body>

运行结果：

扩展：相对路径,绝对路径与在线网址

相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件
在线网址：路径为网址的形式

相对路径：./map.jpg
绝对路径：C:\imges\map.jpg
在线网址：src="https://www.baidu.com/images/logo.png"

七.超链接标签

作用：跳转到其他页面
标签名：a(双标签)
必须属性：href-跳转地址

开发时，如果不知道超链接的跳转地址，则href属性值写#，表示空链接，点击不会跳转

默认是点击链接在当前页面打开网址，如果想新建页面打开网址，则需要添加属性 target=“_blank”

<body><h1>这里展示超链接跳转标签</h1><a href="https://www.baidu.com">点击我跳转到百度</a>
</body>

八.音频标签

标签名：audio(双标签)

属性	作用	说明
src(必须属性)	音频URL	支持格式：MP3,Ogg,Wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	通常禁用

<audio src="./music.mp3" controls loop autoplay></audio>

运行结果

九.视频标签

标签名：video(双标签)

属性	作用	说明
src(必须属性)	视频URL	支持格式：MP4,WebM,Ogg
controls	显示视频控制面板
loop	循环播放
muted	静音播放
autoplay	自动播放

<video src="./music.mp4" controls loop autoplay></video>

十.列表标签

列表的分类：无序列表，有序列表，定义列表
无序列表标签：ul嵌套li,ul是无序列表，li是列表条目。ul标签里面只能包含li标签，li标签里面可以包裹任何内容
有序列表标签：ol嵌套li,ol是有序列表，li是列表条目。ol标签里面只能包含li标签，li标签里面可以包裹任何内容
定义列表标签：dl嵌套dt和dd,dl是定义列表，dt是定义列表的标题，dd是定义列表的描述。dl里面只能包含dt和dd,dt和dd可以包含任何内容

<body><h2>展示无序列表</h2><ul><li>第一项</li><li>第二项</li><li>第三项</li></ul><h2>展示有序列表</h2><ul><ol>第一项</ol><ol>第二项</ol><ol>第三项</ol></ul><h2>展示定义列表</h2><dl><dt>列表标题</dt><dd>第一项</dd><dd>第二项</dd><dd>第三项</dd><dt>第二标题</dt><dd>第一项</dd><dd>第二项</dd><dd>第三项</dd></dl>
</body>

运行结果：

十一.表格标签

语法：table嵌套tr,tr嵌套td/th

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

表格默认没有边框线，加属性border添加边框线

<body><h2>展示表格（不加边框线）</h2><table><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></table><h2>展示表格（加边框线）</h2><table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></table>   
</body>

运行结果：

扩展：表格结构标签

作用：用表格结构标签把内容划分区域，便于代码开发，展示给用户看的部分不变

标签名	含义
thead	表格头部
tbody	表格主体
tfoot	表格底部

<body><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table></body>

用户看到的表格结果不变

合并单元格

将多个单元格合并成一个单元格，以合并同类信息。
可以跨行合并，也可以跨列合并

跨行合并，保留最上单元格，添加属性rowspan
跨列合并，保留最左单元格，添加属性colspan
** rowspan和colspan的属性值是数值，为合并单元格的个数**

<body><h2>展示跨行合并单元格</h2><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td rowspan="2">100</td><td>199</td></tr><tr><td>李四</td><td>98</td><!-- <td>100</td> --><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table><h2>展示跨列合并单元格</h2><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td colspan="3">全市第一</td><!-- <td>全市第一</td><td>全市第一</td> --></tr></tfoot></table></body>

运行结果：

十二.表单标签

1.input标签

type属性值	说明	特点
text	文本框，输入单行文本	输入什么就显示什么
password	密码框	输入什么都是以点的形式显示
radio	单选框
checkbox	多选框
file	上传文件

    <h2>展示input标签</h2>文本框 <input type="text"><br>密码框 <input type="password"><br> 单选框 <input type="radio"><br>多选框 <input type="checkbox"><br>上传文件 <input type="file">

input占位文本属性(提示信息)

属性 placeholder
属性值：提示信息

    <h2>展示input的占位属性值</h2>文本框 <input type="text" placeholder="这是一个文本框"><br>密码框 <input type="password" placeholder="这是一个密码框">

单选框radio属性

属性名	作用	说明
name	控件名称	控件分组，同组只能选中一个（单选功能）
checked	默认选中	属性名和属性值相同，简写为一个单词

    <h2>展示redio属性值</h2><br> 性别 <input type="radio" name="gender"> 男 <input type="radio" name="gender" checked> 女

表单如何上传多个文件？

默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能

    <h2>展示上传多个文件</h2><br> 上传文件 <input type="file" multiple>

多选框checkbox属性

默认选中添加属性：checked

    <h2>展示多选框的默认选中</h2><br> 我姓：<input type="checkbox"> 王<input type="checkbox" checked> 李<input type="checkbox"> 国

2.下拉菜单

语法总结：select嵌套option,select是下拉菜单整体，option是下拉菜单的每一项

默认选择属性：selected

    <h2>展示下拉菜单</h2>请选择你所在的城市<select><option selected>北京</option><option>上海</option><option>广州</option><option>深圳</option><option>武汉</option></select>

3.文本域

作用：多行输入文本等待表单控件
标签：textarea, 双标签

    <h2>展示文本域标签</h2><textarea name="" id="" cols="30" rows="10">输入评论</textarea>

4.label标签

作用：网页中，某个标签的说明文本。或用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。
如何使用label标签增大点击范围？：①设置label标签的for属性值和表单控件的id属性值相同 ②使用label标签包裹文字和表单控件
支持文本框，密码框，上传文件，单选框，多选框，下拉菜单，文本域等增大点击范围

    <h2>展示label标签增大点击范围</h2>性别 <input type="radio" name="gender" id="man"> <label for="man">男</label><input type="radio" name="gender" checked> 女

4.按钮

标签：button(双标签)
表单控件用form标签管理，按钮才有对应的实际效果

如果botton标签省略type属性，则默认功能为提交

type属性值	说明
submit	提交按钮，点击后可以提交数据到后台（默认功能）
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合JS使用

    <h2>表单按钮标签</h2><!-- action是发送数据的地址，即要把数据提交到哪的位置 --><form action="">用户名：<input type="text"> <br><br>密码：<input type="password"> <br><br><button type="submit">提交</button><button type="reset">重置</button></form>

十三.布局标签（div和span）

作用：布局网页（划分网页区域）
div:独占一行，双标签
span:不换行，双标签

  <div>这是div标签,独占一行</div><span>这是不换行的span标签</span>

十四.字符实体（空格，大于小于符号）

作用：在网页中显示预留字符

显示结果	描述	实体名称
	空格	& nbsp
<	小于符号	& lt
>	大于符号	& gt

    <h2>展示HTML中的字符实体</h2>这里是展示字符实体，&nbsp;&nbsp;打两个空格。&nbsp;&nbsp;&nbsp;打三个空格。<br>画一个小于符号：&lt;<br>画一个大于符号：&gt;

HTML5语法总结

文章目录一.HTML基本框架二.标题标签三.段落标签四.换行与水平线标签五.文本格式化标签(加粗、倾斜、下划线、删除线)六.图像标签扩展：相对路径,绝对路径与在线网址七.超链接标签八.音频标签九.视频标签十.列表标签十一.表格标签扩展：表格结构标签合并…...

编程日记 2024/3/21 13:01:42

在github下载的神经网络项目，如何运行？

github网页上可获取的信息在github上面，有一个requirements.txt文件，该文件说明了项目要求的python解释器的模块。 - 此外，还有一个README.md文件，用来说明项目的运行环境以及其他的信息。例如python解释器的版本是3.7、PyTorc…...

编程日记 2024/3/21 12:58:39

spring boot学习第十四篇:使用AOP编程

一、基本介绍 1，什么是 AOP （1）AOP 为 Aspect Oriented Programming 的缩写，意为：面向切面编程，通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。 （2）利用 AOP…...

编程日记 2024/3/21 12:57:38

凯特信安云签解决方案

联合解决方案凯特信安基于《电子签名法》设计“云签服务方案”，应用人脸识别、电子签章签名云服务等技术，支持多个自然人、多个企业等签名，满足各种移动终端签署的应用场景。面向不动产登记、工改系统等社会公众服务系统，针对自然…...

编程日记 2024/3/21 12:54:36

【xr806开发板使用】连接wifi例程实现

##开发环境 win10 WSL ##1、环境配置参考：https://aijishu.com/a/1060000000287513 首先下载安装wsl 和ubuntu https://docs.microsoft.com/zh-cn/windows/wsl/install （1）安装repo： 创建repo安装目录： mkdir ~/…...

编程日记 2024/3/21 12:40:22

停车管理系统asp.net+sqlserver

停车管理系统asp.netsqlserver 说明文档运行前附加数据库.mdf（或sql生成数据库） 主要技术： 基于asp.net架构和sql server数据库， 功能模块： 停车管理系统asp.net sqlserver 用户功能有菜单列表我的停车记录专…...

编程日记 2024/3/21 12:39:21

新增多项功能，龙讯旷腾开源机器学习力场PWMLFF 2024.3版本上线

人工智能与传统计算机模拟结合是当今科学计算的一大趋势,机器学习力场作为其中的一个重要方向,能够显著提升分子动力学模拟的精度和效率。PWMLFF是一套由龙讯旷腾团队开发，在 GNU 许可下的开源软件包，用于快速生成媲美从头算分子动力学（AIMD&…...

编程日记 2024/3/21 12:32:15

文章目录 Docker常用命令练习1.docker 基础命令2.镜像命令3.保存镜像4.加载镜像5.容器命令6.环境变量7. --rm8. --networkhost Docker常用命令练习 1.docker 基础命令安装docker yum install docker启动docker systemctl start docker关闭docker systemctl stop docker重…...

编程日记 2024/3/21 12:30:13

Kafka（十）安全

目录 Kafka安全1 安全协议1.1 PALINTEXT1.2 SSL1.2.1 生成服务端证书1.2.2 生成客户端证书1.2.3 修改配置listenersadvertised.listenerslistener.security.protocol.mapinter.broker.listener.namesecurity.inter.broker.protocolcontrol.plane.listener.name 1.3 SASL_PLAINT…...

编程日记 2024/3/21 12:28:11

流畅的 Python 第二版（GPT 重译）（四）

第二部分：函数作为对象第七章：函数作为一等对象我从未认为 Python 受到函数式语言的重大影响，无论人们说什么或想什么。我更熟悉命令式语言，如 C 和 Algol 68，尽管我将函数作为一等对象，但我并不认为 Py…...

编程日记 2024/3/21 12:27:10

windows docker

写在前面的废话最近在学习riscv的软件相关内容，倒是有别人的sg2042机器可以通过ssh使用，但是用起来太不方便了，经常断掉，所以想着在自己的机器上跑一跑riscv的操作系统。最常见的有两种方法吧，第一个就是qemu&#xf…...

编程日记 2024/3/21 12:25:08

中国1km分辨率逐月地表太阳辐射均值数据集（1960-2022）

地表太阳辐射是地球系统的主要驱动因子，驱动着地球系统的能量、水和碳循环。它是地表水文、生态、农业等陆表过程模拟的重要驱动数据，也是太阳能利用的重要指标。发展长时间序列、高分辨率的地表太阳辐射数据集，对于地表过程研究、太阳能电厂…...

编程日记 2024/3/21 12:24:07

Android中内存泄漏的检测，解决方案以及示例

单例模式使用不当引起的内存泄漏 1. 什么是内存泄漏？安卓内存泄漏是因为长生命周期的对象持有了短生命周期的引用导致本应该本回收的内存无法回收，导致内存的占用越来越大，最终可能导致程序崩溃或者系统资源不足等问题。在Android开发中，内存泄漏是一个常见的问题，…...

编程日记 2024/3/21 12:19:02

Android静默安装一（Root版）

近期开发上线一个常驻app，项目已上线，今天随笔记录一下静默安装相关内容。我分三篇静默安装（root版）、静默安装（无障碍版）、监听系统更新、卸载、安装。先说说我的项目需求：要求app一直运行&…...

编程日记 2024/3/21 12:18:00

【漏洞复现】2.Apache Log4j2远程代码执行漏洞(CVE-2021-44228)复现及分析

文章目录 1. 预备知识2. 漏洞复现2.1 漏洞介绍2.2 漏洞原理分析2.2.1 Log4j介绍2.2.2 JNDI介绍2.2.3 利用原理 2.3 漏洞复现2.3.1 使用docker搭建复现环境2.3.2 DNSLog验证2.3.3 JNDI注入反弹shell 2.4 漏洞修复2.4.1修改log4j2版本2.4.2 临时解决方案 1. 预备知识 Apache是一个…...

编程日记 2024/3/21 12:16:59

Simulink|局部遮荫下光伏组件多峰值PSO-MPPT控制

目录主要内容 1.光伏电池工程数学模型的输出特性程序 2.普通扰动观察法进行MPPT 3.基于粒子群寻优的多峰输出特性 4.PSO_MPPT仿真模型下载链接主要内容在实际的光伏发电系统中，由于环境多变等因素的影响，当局部出现被遮挡情况时光伏阵列…...

编程日记 2024/3/21 12:12:55

今日早报每日精选15条新闻简报每天一分钟知晓天下事 3月21日，星期四

每天一分钟，知晓天下事！ 2024年3月21日星期四农历二月十二 1、教育部：2024年高考全国统考6月7日、8日举行，将专项整治手机作弊、严打高考移民。 2、我国出台首部节约用水行政法规《节约用水条例》，5月1日起施行。…...

编程日记 2024/3/21 12:11:54

蓝桥杯Python B组练习——完美的代价

一、题目问题描述　　回文串，是一种特殊的字符串，它从左往右读和从右往左读是一样的。小龙龙认为回文串才是完美的。现在给你一个串，它不一定是回文的，请你计算最少的交换次数使得该串变成一个完美的回文串。　　交换的定义是…...

编程日记 2024/3/21 12:10:52

分布式游戏服务器

1、概念介绍分布式游戏服务器是一种专门为在线游戏设计的大型系统架构。这种架构通过将游戏服务器分散部署到多台计算机（节点）上，实现了数据的分散存储和计算任务的并行处理。每个节点都负责处理一部分游戏逻辑和玩家请求，通过高…...

编程日记 2024/3/21 12:08:51

idea中常见快捷键及插件操作

1、双击shift【万能】 （1）输入pull，回车可以更新代码 （2）输入commit，回车可以提交代码 （3）输入history,可以查看提交记录 （4）输入break，回车可以查…...

编程日记 2024/3/21 12:07:50

Cesium1.95中高性能加载1500个点

一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/6/17 7:02:51

python/java环境配置

环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...

编程新知 2025/6/26 1:37:07

剑指offer20_链表中环的入口节点

链表中环的入口节点给定一个链表，若其中包含环，则输出环的入口节点。若其中不包含环，则输出null。数据范围节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。节点 val 值各不相同。链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/6/26 7:36:16

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言生活的美好，总是藏在那些你咬牙坚持的日子里。硬件：OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写，"1306" 是产品编号。驱动 OLED 屏幕的 IIC 总线数据传输格式示意图 …...

编程新知 2025/6/24 1:49:00

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

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

编程新知 2025/6/24 4:54:01

【决胜公务员考试】求职OMG——见面课测验1

2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/6/16 3:46:00

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/6/26 10:08:46

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2025/6/26 9:36:04

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/6/19 4:31:50

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题：阻塞式模态窗口的缺陷原始代码中ShowDialog()会阻塞UI线程，导致后续逻辑无法执行： var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2025/6/26 3:36:54

文章目录

一.HTML基本框架

二.标题标签

三.段落标签

四.换行与水平线标签

五.文本格式化标签(加粗、倾斜、下划线、删除线)

六.图像标签

扩展：相对路径,绝对路径与在线网址

七.超链接标签

八.音频标签

九.视频标签

十.列表标签

十一.表格标签

扩展：表格结构标签

合并单元格

十二.表单标签

1.input标签

input占位文本属性(提示信息)

单选框radio属性

表单如何上传多个文件？

多选框checkbox属性

2.下拉菜单

3.文本域

4.label标签

4.按钮

十三.布局标签（div和span）

十四.字符实体（空格，大于小于符号）

相关文章：