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中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件…...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
工业安全零事故的智能守护者：一体化AI智能安防平台
前言： 通过AI视觉技术，为船厂提供全面的安全监控解决方案，涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面，能够实现对应负责人反馈机制，并最终实现数据的统计报表。提升船厂…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课，做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程，它的核心机制是 Goroutine 协程、Channel 通道，并基于CSP（Communicating Sequential Processes࿰…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）
考察一般的三次多项式，以r为参数： p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]； 此多项式的根为： 尽管看起来这个多项式是特殊的，其实一般的三次多项式都是可以通过线性变换化为这个形式…...
CSS | transition 和 transform的用处和区别
省流总结： transform用于变换/变形，transition是动画控制器 transform 用来对元素进行变形，常见的操作如下，它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
tauri项目，如何在rust端读取电脑环境变量
如果想在前端通过调用来获取环境变量的值，可以通过标准的依赖： std::env::var(name).ok() 想在前端通过调用来获取，可以写一个command函数： #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...