HTML 初识
段落标签
<p><!-- 段落标签 -->Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptate iure. Obcaecati explicabo sint ipsum impedit! Dolorum omnis voluptas sint unde sed, ipsa molestiae quo sapiente quos et ad reprehenderit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nam assumenda harum voluptate vel minus nesciunt aspernatur, expedita reiciendis officiis exercitationem odit at fugit eos voluptatum nisi voluptatem dolorem labore.</p>使用<p></p>可以分段，在其中输入多个空格或者换行都只是相当于输入一个空格。
空格符
如果要有多个空格，则需要 使用HTML的空格符：
下面是示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>我的第一个HTLM文件</title>
</head>
<body><!-- <h1>一级标题</h1><h2>二级标题</h1><h3>三级标题</h1><h4>四级标题</h1><h5>五级标题</h1><h6>六级标题</h1> --><p><!-- 段落标签 -->Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptate iure. Obcaecati explicabo sint ipsum impedit! Dolorum omnis voluptas sint unde sed, ipsa molestiae quo sapiente quos et ad reprehenderit.</p><p><!-- 非断行空格 --> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum sapiente fugiat excepturi, qui amet laboriosam necessitatibus, tempore officia ipsa hic numquam asperiores, eaque quae velit doloribus illum modi! Cum, aspernatur.</p><!--   半角空格，宽度为当前字体的一半 -->  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea iste architecto incidunt. Numquam, earum, autem vero aliquid reprehenderit repudiandae voluptatibus quasi minus repellendus quod provident itaque a iure illum beatae.<p><!--   全角空格，宽度等于当前字体--> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat fugiat aliquam delectus veritatis tempore. Laboriosam veniam odit laborum officiis sed est temporibus quas, ducimus alias culpa voluptatibus ad illum libero.</p><p><!--  窄空格，宽度小于一个字符 --> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam dolor tempore nobis, eius consequatur veniam quasi id? Quae, rerum voluptatibus inventore accusantium tempore sapiente temporibus! Officia autem ducimus error magni.</p>
</body>
</html> 可以自行比对一下这些空格符号的区别。
换行符
换行符<br/>或者<br>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>第一个HTLM文件</title>
</head>
<body><p>第一行<br/>第二行<br>第三行</p>
</body>
</html> 下面是刷新后的页面显示：
图片标签
<img src="" alt="" width="" height="">
img：标签。src、alt：标签的属性，width、teight：宽度和高度，只设置一个会高宽等比例缩放
src可以填本机的图片的绝对路径，也能复制网上的图片链接。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>第一个HTLM文件</title></head><body><img src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650" alt="这是一个图片"></body></html>运行结果可以自行试试。
超链接：a
外部链接
<a href = "https://www.baidu.com/index.php?tn=75144485_1_dg&ch=9">百度</a>
href：表示点击后会跳转到哪个页面，
target：打开方式，默认_self，如果是_blank，则用新标签页打开
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>第一个HTLM文件</title>
</head>
<body><a href = "https://www.baidu.com/index.php?tn=75144485_1_dg&ch=9" target="_blank">百度</a></body>
</html>href内填的是网页的连接地址，target是转跳方式，在这里_blank是以新页面打开超链接。
内部链接
<a href="test1.html" target="_blank">test1</a><br>
test1.html是本机上的一个html文件，我们也可以通过指定本机的绝对路径或者是相对路径进行转跳。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>第一个HTLM文件</title>
</head>
<body><a href="test1.html" target="_blank">test1</a><br></body>
</html> 下载文件
<a href="1.rar">下载文件</a>
href链接如果是个压缩包，点击链接可以下载对应路径下已经已创建的压缩文件。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>第一个HTLM文件</title>
</head>
<body><a href="1.rar">下载文件</a></body>
</html> 表格标签
table标签：表示表格
tr：表示表格的一行
tb：表示一个单元格
thead：表格的头部区域
tbody：表格的主题区域
table包含tr、tr包含tb
table的参数：style可以设置表格的长宽，border设置线的粗细和颜色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>第一个HTLM文件</title>
</head>
<body><table style="width: 500px; height: 400;" border="1px black"><tr><td colspan="2">a</td><!-- <td>b</td> --></tr><tr><td>c</td><td>d</td></tr><tr><td>e</td><td>f</td></tr><tr><td>g</td><td>h</td></tr><tr><td>i</td><td>j</td></tr></table></body>
</html> 生成的单元格长这样：
如果不想要边框，我们可以在table接着添加其他的参数，如：cellspacing = "0"可以去掉空白线
<table style="width: 500px; height: 400;" border="1px black" cellspacing = "0">
单元格合并
<tr>
<td colspan="2">a</td>
<!-- <td>b</td> -->
</tr>
td标签里添加colspan = ""与rowspan=""标签可以选择合并单元格行列：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>第一个HTLM文件</title>
</head>
<body><table style="width: 500px; height: 400;" border="1px black" cellspacing = "0"><tr><td colspan="2">a</td><!-- <td>b</td> --></tr><tr><td>c</td><td rowspan="3">d</td></tr><tr><td>e</td><!-- <td>f</td> --></tr><tr><td>g</td><!-- <td>h</td> --></tr><tr><td>i</td><td>j</td></tr></table></body>
</html> 
表单标签
1：表单域
包含表单元素的区域.重点是form标签
2：表单控件
输⼊框,提交按钮等.重点是input标签
<form action="test.html">... [form
的内容
]</form>描述了要把数据按照什么⽅式,提交到哪个⻚⾯中
input 标签
各种输⼊控件,单⾏⽂本框,按钮,单选框,复选框。
type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等.。
name:给input起了个名字.尤其是对于单选按钮,具有相同的name才能多选⼀。
value:input中的默认值，传递给后端判断前端的选择。
checked:默认被选中.(⽤于单选按钮和多选按钮)。
selected：默认被选中值。
placeholder：在输入框里显示的字体。
用户名(文本框)text
<input type="text" size="30" placeholder="请输入用户名">size：最大字数
密码 password
<input type="password" size="30" placeholder="请输入密码">单选按钮 radio
<input type="radio" name = "gender"id = "gender1"> <label for ="gender1">男</label><input type="radio" name = "gender"id = "gender2"> <label for ="gender2">女</label><input type="radio" name = "gender"id = "gender3"> <label for ="gender3">保密</label><br>lable标签可以点击其中的内容选定按钮；单选框之间必须具备相同的name属性,才能实现多选⼀效果
复选框checkbox
<input type="checkbox" name="hobby" id="" value="1">篮球<input type="checkbox" name="hobby" id="" value="2">足球<input type="checkbox" name="hobby" id="" value="3">羽毛球<input type="checkbox" name="hobby" id="" value="4">排球<input type="checkbox" name="hobby" id="" value="5">篮乒乓球<br>按钮方法
<button>这是button标签，按钮1</button><input type="button" name="" id="" value="按钮2"><input type="submit" value="按钮3，提交，搭配form标签使用">下拉标签Subject
专业：<select name="" id=""><option name="Subject" value="1">大数据</option><option name="Subject"value="2"selected>软件工程</option><option name="Subject" value="3">物联网</option><option name="Subject" value="4">人工智能</option>selected:默认选项
<!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 action="test1.html" method="get"><!--action提交给谁，method以什么方式提交（传参） -->用户名(文本框) <input type="text" size="30"><br>密码（密码框）<input type="password" size="30"><br>单选按钮 <input type="radio" name = "gender"id = "gender1" value="1"> <label for ="gender1">男</label><input type="radio" name = "gender"id = "gender2" value="2"> <label for ="gender2">女</label><input type="radio" name = "gender"id = "gender3" value="3"> <label for ="gender3">保密</label><br>复选框 <input type="checkbox" name="hobby" id="" value="1">篮球<input type="checkbox" name="hobby" id="" value="2">足球<input type="checkbox" name="hobby" id="" value="3">羽毛球<input type="checkbox" name="hobby" id="" value="4">排球<input type="checkbox" name="hobby" id="" value="5">篮乒乓球<br><!-- 下拉标签 -->专业：<select name="" id=""><option name="Subject" value="1" >大数据</option><option name="Subject"value="2"selected>软件工程</option><option name="Subject" value="3">物联网</option><option name="Subject" value="4">人工智能</option><br></select><!-- 文本域 -->个人简介：<textarea rows="10" cols="50"></textarea><!-- <button>这是button标签（按钮第一种写法，可以搭配form标签使用）</button><input type="button" name="" id="" value="按钮第二种方法"> --> <input type="submit" value="第三种按钮，提交，搭配form标签使用"></form></body>
</html> 下面是打开后的样子 ：
无语义标签div&span
div 标签,division 的缩写,含义是分割 span标签,含义是跨度。
就是两个盒⼦.⽤于⽹⻚布局。
div是独占⼀⾏的,是⼀个⼤盒⼦，span不独占⼀⾏，是⼀个⼩盒⼦。
<!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><div>一个div</div> <div>一个div</div> <div>一个div</div> <span>一个span</span><span>一个span</span><span>一个span</span>
</body>
</html>
列表标签
ul无序列表标签
ul:unorder list
ol有序列表标签
ol：older list
<ul><div>无序列表</div><li>第一列表标签</li><li>第二列表标签</li><li>第三列表标签</li><li>第四列表标签</li><div>有序列表</div><ol>第1列表标签</ol><ol>第2列表标签</ol><ol>第3列表标签</ol><ol>第4列表标签</ol></ul>
实战：创建一个登录页面
由于我们并不需要真的传递给后端，所以在这做个壳子就行了。
<!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><h1>用户注册</h1><table><tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" size="30" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td> <input type="password" size="30" placeholder="请输入密码"></td></tr></table><div><button>注册</button><span>已有账号？</span><a href="#">登录</a></div></body>
</html>
相关文章：
HTML 初识
段落标签 <p><!-- 段落标签 -->Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptate iure. Obcaecati explicabo sint ipsum impedit! Dolorum omnis voluptas sint unde sed, ipsa molestiae quo sapiente quos et ad reprehenderit.&l…...
MATLAB 训练CNN模型 yolo v4
学生对小车控制提出了更好的要求，能否加入深度学习模型。 考虑到小车用matlab来做，yolo v5及以上版本都需要在pytorch下训练，还是用早期版本来演示。 1 yolov4 调用 参考 trainYOLOv4ObjectDetector (mathworks.com) name "tiny-yo…...
【前端】跟着maxkb学习logicflow流程图画法
文章目录 背景1. 选定学习对象-maxkb应用逻辑编排2. 确定实现框架3. 关键逻辑：查看app-node.js4. 学习开始节点绘制流程数据形式 5. 给节点增加表单输入框遇到过的问题 背景 看看前端如何绘制流程图，界面好看点。 "logicflow/core": "1.…...
数据结构-C语言版本（八）字符串
数据结构中的字符串：概念、操作与实战 第一部分 字符串的分类及常见形式 字符串是由零个或多个字符组成的有限序列，是编程中最基础也最重要的数据结构之一。 1. C语言中的字符串表示 字符数组形式 char str1[10] {H, e, l, l, o, \0};字符串字面量…...
Arduino示例代码讲解：Project 07 - Keyboard 键盘
Arduino示例代码讲解：Project 07 - Keyboard 键盘 Project 07 - Keyboard 键盘程序功能概述功能：硬件要求：输出：代码结构全局变量`setup()` 函数`loop()` 函数读取电位器值：打印电位器值：播放音调：运行过程注意事项Project 07 - Keyboard 键盘 /*Arduino Starter Kit e…...
oracle expdp/impdp 用法详解
oracle expdp/impdp 用法详解 创建逻辑目录，该命令不会在操作系统创建真正的目录，最好以system等管理员创建。 create directory db_bak as d:\test\dump; 查看管理理员目录（同时查看操作系统是否存在，因为Oracle并不关心该目录是…...
【漏洞复现】CVE-2024-38856（ApacheOfbiz RCE）
【漏洞复现】CVE-2024-38856（ApacheOfbiz RCE） 1. 漏洞描述 Apache OFBiz 是一个开源的企业资源规划（ERP）系统。它提供了一套企业应用程序，用于集成和自动化企业的许多业务流程。 这个漏洞是由于对 CVE-2023-51467 的…...
超详细VMware虚拟机扩容磁盘容量-无坑版
1.环境： 虚拟机：VMware Workstation 17 Pro-17.5.2 Linux系统：Ubuntu 22.04 LTS 2.硬盘容量 虚拟机当前硬盘容量180G -> 扩展至 300G 3.操作步骤 （1）在虚拟机关机的状态下，虚拟机硬盘扩容之前必…...
每日一题算法——移除链表元素、反转链表
移除链表元素 力扣题目链接 我的解法： 注意细节：要删掉移除的元素。 class Solution { public:ListNode* removeElements(ListNode* head, int val) {while(head!nullptr){if(head->valval){headhead->next;}}ListNode* nowhead head;while(n…...
全面理解Linux 系统日志：核心文件与查看方法
全文目录 1 Linux 系统日志分类及功能1.1 通用日志1.1.1 /var/log/messages1.1.2 /var/log/syslog 1.2 安全相关日志1.2.1 /var/log/auth.log（Debian/Ubuntu）或 /var/log/secure（RHEL/CentOS）1.2.2 /var/log/audit/au…...
机器学习-08-关联规则更新
总结 本系列是机器学习课程的系列课程，主要介绍机器学习中关联规则和协同过滤。 参考 机器学习（三）：Apriori算法（算法精讲） Apriori 算法 理论 重点 【手撕算法】【Apriori】关联规则Apriori原理、代码…...
Flutter与FastAPI的OSS系统实现
作者：孙嘉成 目录 一、对象存储 二、FastAPI与对象存储 2.1 缤纷云S4服务API对接与鉴权实现 2.2 RESTful接口设计与异步路由优化 三、Flutter界面与数据交互开发 3.1 应用的创建 3.2页面的搭建 3.3 文件的上传 关键词：对象存储、FastAPI、Flutte…...
Kubernetes控制平面组件：API Server详解（二）
云原生学习路线导航页（持续更新中） kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计（一）Kubernetes架构原则和对象设计（二）Kubernetes架构原则和对象设计（三）Kubernetes控…...
MySQL-锁机制3-意向共享锁与意向排它锁、死锁
文章目录 一、意向锁二、死锁应该如何避免死锁问题？ 总结 一、意向锁 在表获取共享锁或者排它锁时，需要先检查该表有没有被其它事务获取过X锁，通过意向锁可以避免大量的行锁扫描，提升表获取锁的效率。意向锁是一种表级锁…...
报告系统状态的连续日期 mysql + pandas(连续值判断)
本题用到知识点：row_number(), union, date_sub(), to_timedelta()…… 目录 思路 pandas Mysql 思路 链接：报告系统状态的连续日期 思路： 判断连续性常用的一个方法，增量相同的两个列的差值是固定的。 让日期与行号 * 天数…...
pytest自动化中关于使用fixture是否影响用例的独立性
第一个问题：难道使用fixture 会影响用例独立吗？ ✅ 简单回答： 使用 fixture ≠ 不独立。 只要你的 fixture 是每次测试都能自己运行、自己产生数据的，那么测试用例依然是“逻辑独立”的。 ✅ 怎么判断 fixture 是否影响独立性&a…...
Token与axios拦截器
目录 一、Token 详解 1. Token 的定义与作用 2. Token 的工作流程 3. Token 的优势 4. Token 的安全实践 5. JWT 结构示例 二、Axios 拦截器详解 1. 拦截器的作用 2. 请求拦截器 3. 响应拦截器 4. 拦截器常见场景 5. 移除拦截器 三、完整代码示例 四、总结 五、…...
unity3d实现物体闪烁
unity3d实现物体闪烁，代码如下: using UnityEngine;public class Test : MonoBehaviour {//创建一个常量，用来接收时间的变化值private float shake;//通过控制物体的MeshRenderer组件的开关来实现物体闪烁的效果private MeshRenderer BoxColliderClick…...
)
C#—Lazy＜T＞ 类型(延迟初始化/懒加载模式)
C# 的 Lazy<T> 类型 Lazy<T> 是 C# 中的一个类，用于实现延迟初始化（懒加载）模式。它提供了一种线程安全的方式来延迟创建大型或资源密集型对象，直到第一次实际需要时才进行初始化。 主要特点 延迟初始化：…...
Spring Boot 项目启动命令解析
Spring Boot 项目启动命令参数 一、启动命令基础格式 java [JVM参数] [Spring Boot参数] -jar your-project.jar必选部分：java -jar your-project.jar 启动可执行 JAR 包。 可选部分： JVM 参数：控制 Java 虚拟机行为（如内存、垃…...
为什么 Docker 容器中有额外的目录（如 `/dev`、`/proc`、`/sys`）？及 `docker run` 详细执行过程
、当你使用 docker run 启动一个基于极简镜像（如 scratch 或手动构建的镜像）的容器时，发现容器内出现了 /dev、/proc、/sys 等目录，即使你的镜像中并未包含这些目录。这是因为 Docker 在启动容器时，会自动挂载一些必要…...
Tailwind 武林奇谈：bg-blue-400 失效，如何重拾蓝衣神功？
前言 江湖有云，Tailwind CSS，乃前端武林中的轻功秘籍。习得此技，排版如行云流水，配色似御风随形，收放自如，随心所欲。 某日，小侠你奋笔敲码，正欲施展“蓝衣神功”（bg-blue-400），让按钮怒气冲冠、蓝光满面，怎料一招使出，画面竟一片白茫茫大地真干净，毫无半点杀气…...
【Docker 运维】Java 应用在 Docker 容器中启动报错：`unable to allocate file descriptor table`
文章目录 一、根本原因二、判断与排查方法三、解决方法1、限制 Docker 容器的文件描述符上限2、在执行脚本中动态设置ulimit的值3、升级至 Java 11 四、总结 容器内执行脚本时报错如下，Java 进程异常退出： library initialization failed - unable to a…...
开始放飞之先搞个VSCode
文章目录 开始放飞之先搞个VSCode重要提醒安装VSCode下载MinGW-w64回到VSCode中去VSCode原生调试键盘问题遗留问题参考文献 开始放飞之先搞个VSCode 突然发现自己的新台式机上面连个像样的编程环境都没有，全是游戏了！！！ÿ…...
基于SA模拟退火算法的车间调度优化matlab仿真,输出甘特图和优化收敛曲线
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于SA模拟退火算法的车间调度优化matlab仿真,输出甘特图和优化收敛曲线。输出指标包括最小平均流动时间，最大完工时间，最小间隙时间。 2…...
【仿Mudou库one thread per loop式并发服务器实现】SERVER服务器模块实现
SERVER服务器模块实现 1. Buffer模块2. Socket模块3. Channel模块4. Poller模块5. EventLoop模块5.1 TimerQueue模块5.2 TimeWheel整合到EventLoop5.1 EventLoop与线程结合5.2 EventLoop线程池 6. Connection模块7. Acceptor模块8. TcpServer模块 1. Buffer模块 Buffer模块&…...
基于Redis实现高并发抢券系统的数据同步方案详解
在高并发抢券系统中，我们通常会将用户的抢券结果优先写入 Redis，以保证系统响应速度和并发处理能力。但数据的最终一致性要求我们必须将这些结果最终同步到 MySQL 的持久化库中。本文将详细介绍一种基于线程池 Redis Hash 扫描的异步数据同步方案&#…...
SPL 量化 序言
序言 量化交易是通过数学模型、统计学方法和计算机技术，将市场行为转化为可执行的交易策略的自动化投资方式。其核心是通过大数据分析、机器学习和金融工程等技术，从历史数据中挖掘市场规律，预测价格趋势并生成交易信号。 量化交易的实现通…...
【LLM Prompt】CoT vs.ToT
CoT（Chain of Thought） Definition: CoT refers to the method of prompting a language model to generate responses in a step-by-step manner, explicitly showing the reasoning process leading to the final answer.定义: CoT 是一种提示语言模型…...
uniapp h5接入地图选点组件
uniapp h5接入地图选点组件 1、申请腾讯地图key2、代码接入2.1入口页面 （pages/map/map）templatescript 2.2选点页面（pages/map/mapselect/mapselect）templatescript 该内容只针对uniapp 打包h5接入地图选点组件做详细说明&#x…...