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中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
AI编程--插件对比分析：CodeRider、GitHub Copilot及其他
AI编程插件对比分析：CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展，AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者，分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展，光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域，IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选，但在长期运行中，例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合：各模块职责清晰，便于独立开发…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如：Boss直聘（招聘方平台） 直接按照条件进行筛选 例如：…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...
脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）
一、OpenBCI_GUI 项目概述 （一）项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台，其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言，首次接触 OpenBCI 设备时，往…...