HTML综合
一.HTML的初始结构
<!DOCTYPE html>
<html lang="en"><head><!-- 设置文本字符 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 设置网页名 --><title>首页</title>
</head><body>这是我的first page！
</body></html>
二.HTML中的常用标签
1. 标题标签
<h1> 到 <h6>：定义六个级别的标题，<h1> 级别最高，<h6> 级别最低。h1字体大小是32px h4字体大小是16px默认字体大小是16px
2. 段落和换行标签
<p>：定义段落。
<br>：插入一个简单的换行符。
3. 链接标签
<a>：定义超链接，用于链接到其他网页或网站。
4. 图像标签
<img>：定义图像，src 属性用于指定图像的URL。
5. 列表标签
<ul>：定义无序列表。
<ol>：定义有序列表。
<dl>: 自定义列表
<dt>:自定义列表头
<dd>:自定义列表项
<li>：定义列表项。
<tr>：定义表格行。
<td>：定义表格数据单元格。
<th>：定义表头单元格。
6. 表单标签
<form>：定义HTML表单，用于用户输入。
<input>：定义输入字段，type 属性用于指定输入类型（如 text, password, submit 等）。
<textarea>：定义多行文本输入字段。
<label>：定义 <input> 元素的描述。
<select> 和 <option>：定义下拉列表。
<button>：定义一个点击按钮。
7. 语义化标签
<header>：定义文档的头部区域。
<footer>：定义文档的底部区域。
<article>：定义文档中的独立内容区域。
<section>：定义文档中的节（或区段）。
<nav>：定义导航链接的部分。
<aside>：定义页面的侧边栏内容。
8.格式化标签
<strong>我变强壮了</strong>
<b>我也可以加粗</b>
<hr>
<em>我倾斜了吗</em>
<i>我倾斜了吗</i>
<hr><del>我身上有什么？</del>
<s>我身上有一条线</s>
<hr><ins>台湾是中国的，日本也是中国的</ins>
<u>台湾是中国的，日本也是中国的</u>
<hr>100<sub>10</sub>
26<sup>C°</sup>
9. 其他常用标签
<div>：定义文档中的区块或节，常用于结合CSS进行布局和样式设计。
<span>：对文档中的行内元素进行分组。
<meta>：提供有关HTML文档的元数据，如字符编码、页面描述、关键词等。
<title>：定义浏览器工具栏的标题，当网页添加到收藏夹时的标题。
<style>：用于包含CSS样式信息。
<script>：用于嵌入或引用JavaScript代码。
这些只是HTML5中常用标签的一部分，实际上HTML5还包含许多其他标签和属性，用于构建功能丰富、结构清晰的网页。
三.部分标签的使用
1. table标签
1.1 table标签的基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>table标签的使用</title>
</head>
<body><!-- border 边框cellspacing 格子和格子之间的边距cellpadding 格子和文字的边距align="" left, center, rightth 默认字体加粗，内容居中表格的组成caption 标题thead 表头tr 代表一行th 代表一行中的一个格子tbody 主体部分trtd 代表一行中的一个格子tfoottrtd--><table border="1" cellspacing="0" cellpadding="0"><caption>水果价格列表</caption><thead><tr><th>No</th><th>fruit</th><th>price</th><th>num</th></tr></thead><tbody><tr><td align="center">1001</td><td align="center">apple</td><td align="center">$2</td><td align="center">10</td></tr><tr><td align="center">1002</td><td align="center">pear</td><td align="center">$5</td><td align="center">8</td></tr><tr><td align="center">1003</td><td align="center">strawberry</td><td align="center">$7</td><td align="center">10</td></tr><tr><td>1004</td><td>watermelon</td><td>$1.2</td><td>50</td></tr></tbody><tfoot><tr><td>总金额：</td></tr></tfoot> </table>
</body>
<style></style>
</html>
1.2 table标签的合并
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table, th, tr, td{text-align: center;}</style>
</head>
<body><table border="1" cellspacing="0" cellpadding="0" width="200" height="200"><tr><td>1</td><td >2</td><td rowspan="2">3</td></tr><tr><td>4</td><td>5</td></tr><tr><td colspan="3">7</td></tr></table></body>
</html>
2. ul, ol, dl 标签的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表</title>
</head>
<body><script>// 列表 块级元素// 1.有序列表 ol// 默认显示 1-n的数字// start="10"// type=""// 2.无序列表 ul 默认是黑点// style="list-style: circle;" 空心的圆// style="list-style:none;"// 3.自定义列表 dl > dt > dd</script><ol start="10"><li>苹果</li><li>梨子</li><li>草莓</li><li>香蕉</li></ol><br><ul style="list-style: none;"><li>周杰伦</li><li>蔡徐坤</li><li>黎明</li><li>迪丽热巴</li></ul><!-- t:title --><dl><dt>吃了吗</dt><dd>吃的包子</dd><dt>今天去哪里玩</dt><dd>哪里都不去</dd></dl>
</body>
</html>
3.label 标签
<!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><p><!-- label中的for应该与input中的id相关联 --><!-- 使用单选框时，想要两个单选框为一组，需要给他们设置相同的name --><label for="username">用户名： <input type="text" name="" id="username" ></label><label for="nan"><input type="radio" value="男" id="nan" checked name="gender">男</label><label for="nv"><input type="radio" value="女" id="nv" name="gender">女</label></p>
</body>
</html>
label 标签通常和表单元素一起使用
4.form 表单标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单的使用</title>
</head><body><!-- 表单：数据的入口 --><!-- form表单method="get/post"get:通过url地址传智，体积小，速度快，不安全，数据格式有限（asc,string）post:通过表单传值，体积大，速度慢，安全，类型和格式不限制(压缩包，视频，音频，ppt)action="提交的地址"--><form action="" method="get"><p>用户名<input type="text" placeholder="用户名" name="username" ></p><p>密 码<input type="password" name="pwd"></p><p>性别：<!-- 使用lable标签for属性应该和input标签中的id相关联 --><!-- 使用单选框时选项应该在同一组中（在同一个name属性中） --><label for="gender1"><input type="radio" id="gender1" name="gender" value="男">男</label><label for="gender2"><input type="radio" id="gender2" name="gender" value="女" checked>女</label></p><p><label for="age">年龄：<input type="number" max="120" min="18" value="20"></label></p><p>爱好：<input type="checkbox" value="钱" name="hobby"> 钱<input type="checkbox" value="黄金" name="hobby"> 黄金<input type="checkbox" value="香车" name="hobby"> 黄金<input type="checkbox" value="美女" name="hobby"> 黄金<input type="checkbox" value="黄金" name="hobby"> 黄金</p><p><label for="city">城市：<select name="" id="city"><option value="请选择">请选择</option><option value="长沙">长沙</option><option value="株洲">株洲</option><option value="湘潭">湘潭</option><option value="怀化" selected>怀化</option></select></label></p><p>详细地址：<textarea rows="5" style="width: 500;"></textarea></p><p><button type="submit">提交</button><button>提交2</button><button type="reset"> 重置</button><!-- <input type="rest" value="重置"> 过时 --><!-- --></p></form></body></html>
注意在form表单中 button按钮默认为 submit 类型， 即type=“submit”
5.audio 音频 和 video 视频
<!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><!-- autoplay 自动播放controls 控制的界面loop 循环preload 预加载--><!-- 音频 --><!-- 第一种方式 --><!-- <audio src="file/1.mp3" autoplay controls loop preload="auto"></audio> --><!-- 第二种方式 --><audio autoplay controls loop preload="auto"><source src="file/1.mp3" type="audio/mpeg"><source src="file/1.mp3" type="audio/mpeg"></audio><!-- 视频 --><video src="file/1.mp3" autoplay controls loop preload="auto"></video><video src=""><source src="file/1.mp3" type="video/mp4"><source src="file/1.mp3" type="video/mp4"></video>
</body></html>
rgba, hsla 和 opacity
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body{height: 100%;width: 100%;margin: 0;padding: 0;}</style>
</head><body><!-- 直接设置会影响子盒子的颜色 --><!-- 弹框，给父盒子设置一个背景色为 rgba() ,子盒子的颜色不会被影响 --><div class="dialog" style="width: 100%;height: 100%; background-color: black; opacity: 0.5;"><div class="content" style="width: 200px;height: 200px;background-color: red;"></div></div><!-- <div class="dialog" style="width: 100%;height: 100%; background-color: rgba(0,0,0,0.5);"><div class="content" style="width: 200px;height: 200px;background-color: red;"></div></div> --><!-- <div style="width: 200px;height: 200px;background-color: hsla(24, 50%, 47%, 0.416);"></div> --></body>
<script>// 1. hex 16进制 0-f// 2. rgb 和 rgba// 3. hsl 和 hsla// hsl(色调0-360，饱和度，亮度)</script></html>
使用opacity给父盒子添加透明度时会影响到子盒子，其他两个不会
如下图使用opacity，代码如上
下图使用rgba
四. HTML区块
1.块级元素
div 定义了文档的区域，块级 (block-level)
块级元素有：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre、header、section、aside、footer等。
2.内联元素
span 用来组合文档中的行内元素， 内联元素(inline)
行内元素：span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button等。
五.在VS中常用的快捷方式
ctrl + B 折叠菜单shift + alt + F 格式化shiift + alt + 向下箭头 向下复制一行ctrl + z 撤销ctrl + v 粘贴ctrl + c 复制ctrl + x 剪切crtl + k, ctrl + 0 全部折叠ctrl + k, ctrl + j 全部展开快速生成带有标签的类名 标签名.类名 如 img.price快速生成标签 如 ul>li{$}*3
相关文章：
HTML综合
一.HTML的初始结构 <!DOCTYPE html> <html lang"en"><head><!-- 设置文本字符 --><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><!-- 设置网页…...
孚盟云 MailAjax.ashx SQL注入漏洞复现
0x01 产品简介 上海孚盟软件有限公司是一家外贸SaaS服务提供商，也是专业的外贸行业解决方案专业提供商。 全新的孚盟云产品，让用户可以用云模式实现信息化管理，让用户的异地办公更加流畅，大大降低中小企业在信息化上成本，用最小的投入享受大型企业级别的信息化服务，主要…...
解决“VMware虚拟机报Intel VT-x”错误
今天，在windows系统上，打开VMware WorkStation v15软件里的虚拟机，弹出"Intel VT-x处于禁用状态"错误，如图(1)所示： 图(1) 虚拟机报"Intel VT-x"错误 问题原因：当前电脑的BIOS没有开启…...
NiceGUI `ui.table` 基础
NiceGUI ui.table 基础 ui.table 是 NiceGUI 提供的一个组件，用于在页面上展示数据表格 基本概念 官方简介 A table based on Quasar’s QTable component. 参数参考rows:list of row objects; 行对象列表columns:list of column objects (defaults to the colu…...
分布式 Raft算法 总结
前言 相关系列 《分布式 & 目录》《分布式 & Raft算法 & 总结》《分布式 & Raft算法 & 问题》 参考文献 《Raft一致性算法论文译文》《深入剖析共识性算法 Raft》 简介 Raft 木筏是一种基于日志复制实现的分布式容错&一致性算法。在Raft算法…...
C++ 中面向对象编程如何实现动态绑定？
在 C 中，动态绑定（Dynamic Binding）是通过 虚函数（virtual function） 和 多态性（polymorphism） 来实现的。这是面向对象编程的重要特性之一，它允许程序在运行时根据对象的实际类型调…...
微服务-01
1.认识微服务 1.1 单体架构 单体架构（monolithic structure）：顾名思义，整个项目中所有功能模块都在一个工程中开发；项目部署时需要对所有模块一起编译、打包；项目的架构设计、开发模式都非常简单。 当项目…...
这是一个vue3 + scss的数字滚动效果
介绍: 当数字变化时，只改变变化的数字位，其余的不变，可以递增、递减、骤变、负数也可以，但是样式要根据具体的项目需求去改； 效果1、增加数字： 效果2、减少数字： 使用方法： <te…...
数字证书管理工具 openssl keytool
OPENSSL 命令 openssl command [ command_opts ] [ command_args ] 常用command: version 用于查看版本信息 enc 用于加解密 ciphers 列出加密套件 genrsa 用于生成私钥 -des|-des3|-idea：用来加密私钥文件的三种对称加密算法。 rsa …...
Polars数据聚合与旋转实战教程
在这篇博文中，我们的目标是解决数据爱好者提出的一个常见问题：如何有效地从Polars DataFrame中创建汇总视图，以便在不同时间段或类别之间轻松进行比较。我们将使用一个实际的数据集示例来探索实现这一目标的各种方法。 Polars简介 Polars 是…...
)
引用类型集合的深拷贝，无需手动写循环：Apache Commons Lang (SerializationUtils)
在java中，我们如果想要对引用类型的集合进行深拷贝。有一种方式，就是调用SerializationUtils Apache Commons Lang (SerializationUtils) Apache Commons Lang 提供了 SerializationUtils 类，可以利用 Java 的序列化机制来进行集合及其元素…...
HTML、CSS表格的斜表头样式设置title 画对角线
我里面有用到layui框架的影响，实际根据你自己的框架来小调下就可以 效果如下 上代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wi…...
docker 安装mysql 5.7 详细保姆级教程
1. 安装mysql(5.7) docker pull mysql:5.7 若是拉取不了，可以配置下 docker 源 2. 查看是否安装成功 docker images 下图就是成功了 3.创建mysql专用目录、数据挂载目录、配置文件目录 ，演示目录在于/home/下 //命令逐条执行cd /home/ mkdir mysql …...
Kioptrix level3
声明！ 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&a…...
UE5 Lyra项目源码分析-关卡配置加载
最近刚学完一套教程，准备研究研究官方的源码，看看自己能不能看懂。 当前分析只在本人能力之下能够分析的内容，如果有一些问题，还请大家指出。 开始 如果你打开一个别人的项目，你会从哪里看起，如果是我&am…...
Cursor重置机器码-解决Too many free trials.
参考文章：如何绕过Cursor的机器绑定限制 前言 在前面这篇文章无限使用Cursor指南中，我提到使用 无限邮箱 或者 删除账号并重新注册 的方法，来无限使用Cursor免费版。但是当在本机登录过3个账号后，就会报这个“Too many free tria…...
transformer学习笔记-自注意力机制（2）
经过上一篇transformer学习笔记-自注意力机制（1）原理学习，这一篇对其中的几个关键知识点代码演示： 1、整体qkv注意力计算 先来个最简单未经变换的QKV处理： import torch Q torch.tensor([[3.0, 3.0,0.0],[0.5, 4…...
呼叫中心呼入大模型如何对接传统呼叫中心系统？
呼叫中心呼入大模型如何对接传统呼叫中心系统？ 原作者：开源呼叫中心FreeIPCC，其Github：https://github.com/lihaiya/freeipcc 呼叫中心呼入大模型与传统呼叫中心系统的对接是一个复杂而细致的过程，涉及技术实现、流程…...
[Unity] Text文本首行缩进两个字符
Text文本首行缩进两个字符的方法比较简单。通过代码把"\u3000\u3000"加到文本字符串前面即可。 比如： 效果： 代码： TMPtext1.text "\u3000\u3000" "选择动作类型：";...
最新版Chrome浏览器加载ActiveX控件之Adobe PDF阅读器控件
背景 Adobe PDF阅读器控件是一个ActiveX控件，用于在Windows平台上显示和操作PDF文件。它提供了一系列方法和属性，可以实现对PDF文件的加载、显示、搜索、打印、保存等操作。 allWebPlugin中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...
JavaScript 中的 ES|QL：利用 Apache Arrow 工具
作者：来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗？了解下一期 Elasticsearch Engineer 培训的时间吧！ Elasticsearch 拥有众多新功能，助你为自己…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...
短视频矩阵系统文案创作功能开发实践，定制化开发
在短视频行业迅猛发展的当下，企业和个人创作者为了扩大影响力、提升传播效果，纷纷采用短视频矩阵运营策略，同时管理多个平台、多个账号的内容发布。然而，频繁的文案创作需求让运营者疲于应对，如何高效产出高质量文案成…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...
【VLNs篇】07：NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战，克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
MFC 抛体运动模拟：常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...
NPOI操作EXCEL文件 ——CAD C# 二次开发
缺点:dll.版本容易加载错误。CAD加载插件时，没有加载所有类库。插件运行过程中用到某个类库，会从CAD的安装目录找，找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库，就用插件程序加载进…...
【Linux】Linux安装并配置RabbitMQ
目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的，需要先安…...
OCR MLLM Evaluation
为什么需要评测体系？——背景与矛盾 能干的事： 看清楚发票、身份证上的字（准确率>90%），速度飞快（眨眼间完成）。干不了的事： 碰到复杂表格（合并单元…...