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

HTML笔记-狂神

news 2026/1/13 20:24:57

1. 初识HTML

什么是HTML？
Hyper Text Markup Language : 超文本标记语言

超文本包括：文字、图片、音频、视频、动画等

目前使用的是HTML5，使用 W3C标准

W3C标准包括：

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准语言（DOM、JavaScript）

2. 网页基本元素

HTML基本结构

网页头部
主体部分

网页基本信息

DOCTYPE声明：告诉浏览器，我们要使用什么规范
标签：网页标题
标签：描述性标签，用来描述网站的一些信息

<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head><meta charset="UTF-8"><!--meta一般用来做SEO--><meta name="keyboards" content="Java"><meta name="description" content="学习Java"><!--网页标题--><title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
HelloWorld
</body>
</html>

3. 网页基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签</title>
</head>
<body>
<!--1、标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h6>六级标签</h6><!--2、段落标签-->
<p>
这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段
</p>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p><!--3、换行标签-->
<!--br、hr是自闭合标签，习惯上最好加/结尾-->
第一行 <br/>
第二行
<!--4、水平线标签-->
<hr/><!--5、字体样式标签-->
粗体：<stronge>I LOVE YOU </stronge>
斜体：<em>I LOVE YOU </em><hr/><!--6、特殊符号-->
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：<br/>
大于号：&gt;      <br/>
小于号：&lt;     <br/>
版权符号：&copy;<!--7、注释-->
</body>
</html>

4. 图像标签

常见图像格式：

JPG
GIF
PNG
BMP：位图
…
语法：

<body>
<img src="path" alt="text" title="标题" width="x" height="y">
src：图像地址
alt：图像的替代文字（找不到该图片时，才会显示）
title：鼠标悬停提示文字
width:图像宽度
height:图像高度</body>

练习：新建放置图片的目录
在这里插入图片描述

<body>
<!--src:图片地址相对地址：../   1.html文件的上一级目录           (不推荐)绝对地址：C:\Users\15642\IdeaProjects\HTML\resources\image\1.JPG
-->
<img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500"></body>

5. 链接标签

文本超链接：点击文本进行跳转

图像超链接：点击图片进行跳转

语法：

<!--链接标签-->
<a href="path" target="目标窗口位置">链接文本或图像</a>
href：必填 ，表示要跳转到那个页面
target:表示窗口在哪里打开，默认是当前页面打开_blank：在新的标签页打开_self:在自己的网页中打开

练习：

<body><!--文字超链接-->
<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a><br><!--图像超链接-->
<a href="http://www.baidu.com"><img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
</a></body>

锚链接：

通过# 实现页面间的跳转
跳转到另一个页面指定的位置

练习：

<body><!--锚链接1.需要一个标记2.然后跳转到标记3.使用 #
-->
<!--先设置一个标记-->
<a id="top">我是顶部</a><!--图片1-->
<p><a href="http://www.baidu.com"><img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500"></a>
</p>
<!--图片2-->
<p><a href="http://www.baidu.com"><img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500"></a>
</p>
<!--图片3-->
<p><a href="http://www.baidu.com"><img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500"></a>
</p>
<!--图片4-->
<p><a href="http://www.baidu.com"><img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500"></a>
</p>
<!--也可以跳转到另一个页面的指定位置 : href="2.html#top"-->
<a href="#top">跳转到顶部</a></body>

功能性链接

<!--邮件链接：mailto-->
<a href="mailto:156420xxxx@qq.com">点击联系我！</a>

6. 行内元素和块元素

块元素

无论内容多少，该元素独占一行
p标签、h1-h6…

行内元素

内容撑开宽度，左右都是行内元素的可以在排一行
a 标签、strong 标签、em 标签…

7. 列表

列表的分类：

有序列表
无序列表
自定义列表

<body><!--有序列表-->
<ol><li>Java</li><li>python</li><li>运维</li>
</ol>
<!--无序列表-->
<ul><li>Java</li><li>python</li><li>运维</li>
</ul>
<!--自定义列表dl：标签dt:列表名称dd：列表内容
-->
<dl><dt>学科</dt><dd>Java</dd><dd>python</dd><dd>运维</dd><dt>位置</dt><dd>北京</dd><dd>珠海</dd>
</dl></body>

效果：
在这里插入图片描述

8. 表格

为什么使用表格？

简单通用
结构稳定

基本结构：

单元格
行 tr
列 td
跨行 rowspan
跨列 colspan

<body>
<table border="1px"><!--加个边框--><tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td></tr></table></body>

效果：
在这里插入图片描述

<table border="1px"><!--加个边框--><tr><!--让这个单元格跨两列--><td colspan="2">1-1</td><td>1-2</td><td>1-3</td></tr><tr><!--让这个单元格跨两行--><td rowspan="2">2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr><tr><td>3-2</td><td>3-3</td><td>3-4</td></tr></table>

效果：
在这里插入图片描述

9. 媒体元素

视频元素：video

音频元素：audio

<!--媒体元素
视频：controls:滚动条autoplay：自动播放
-->
<video src="../resources/video/4.mp4" controls autoplay></video><audio src="../resources/audio/萤火虫和你.mp3" controls></audio>

10. 页面结构分析

在这里插入图片描述

<body>
<header><h2>网页头部</h2>
</header><section><h2>网页主体部分</h2>
</section><footer><h2>网页脚部</h2>
</footer>
</body>

11. iframe内联框架

语法：

<iframe src="path" frameborder="0" name="mainFrame"></iframe>引用页面地址                 框架标示名

<body>
<!--iframe内联框架-->
<iframe src="//player.bilibili.com/player.html?aid=68373450&bvid=BV12J41137hu&cid=118499718&page=1"scrolling="no"border="0"frameborder="no"framespacing="0"allowfullscreen="true">
</iframe><iframe src="https://www.bilibili.com/" frameborder="1px" name="mainFrame" width="400px" height="100px"></iframe><!--通过a标签往iframe里加东西-->
<iframe src="" frameborder="1px" name="hello" width="400px" height="300px"></iframe>
<!--通过target属性绑定指定的iframe-->
<a href="https://www.bilibili.com/" target="hello">点击我跳转到B站</a></body>

12. 初识表单post和get提交

表单语法：

<!--初识表单post和get提交method:规定如何发送表单数据，常用值：：post、getget方式提交：可以在url中看到提交的信息post方式提交：比较安全，可以传输大文件action:表示向何处发送表单数据,可以是一个网站，或者一个请求处理地址
-->
<form method="get" action="2.基本标签.html"><!--文本输入框：text--><p>姓名：<input type="text" name="username"></p><!--密码框：password--><p>密码：<input type="password" name="password"></p><!--提交--><input type="submit"><!--重置--><input type="reset">
</form>

效果：
在这里插入图片描述
表单元素格式

13. 文本框和单选框

单选框：

<!--单选框标签：input type="radio"value：单选框的值name：表示组，name相同为一个组，即只能选择一个
-->
<radio><!--checked表示默认选中--><input type="radio" value="boy" name="sex" checked/>男<input type="radio" value="girl" name="sex"/>女
</radio>

多选框：

<!--多选框-->
<p> 爱好：<!--checked表示默认选中--><input type="checkbox" value="sleep" name="hobby" checked>睡觉<input type="checkbox" value="book" name="hobby">看书<input type="checkbox" value="swimming" name="hobby">游泳<input type="checkbox" value="write" name="hobby">写作</p>

14. 按钮和多选框

普通按钮：

<!--按钮-->
<p> 按钮：<input type="button" name="btn1" value="点击查看">
</p>

效果：
在这里插入图片描述
图片按钮：

<input type="image" name="bt2" src="../resources/image/1.jpg"><!--可以点击提交，相当于submit-->

下拉框：

<p>国家：<select name="country"><option value="china">中国</option><option value="us">美国</option><!--selected表示默认选中--><option value="ruishi" selected>瑞士</option></select>
</p>

15. 文本域和文件域

文本域：

<!--文本域-->
<p>反馈：<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>

文件域：

<!--文件域-->
<input type="file" name="files">

16. 搜索框滑块和简单验证

<!--邮件验证-->
<p> 邮箱：<input type="email" name="email">
</p><p> URL：<input type="url" name="url">
</p><p> number：<input type="number" name="number" max="100" min="0" step="10">
</p><!--滑块：-->
<p>音量：<input type="range" name="voice" min="0" max="10">
</p><!--搜索框-->
<p>搜索：<input type="search" name="search">
</p>

17. 表单的应用

隐藏域 hidden
只读 readonly
禁用 disabled

<body>只读：<p>姓名：<input type="text" name="username" value="lisa" readonly></p><p>禁用：<!--disabled可以放到任何地方，无法选择"男"--><input type="radio" value="boy" name="sex" disabled/>男<input type="radio" value="girl" name="sex"/>女</p><!--隐藏域：hidden，密码框不见了，但值依然在--><p>密码：<input type="password" name="password" hidden value="123456"></p></body>

增强鼠标的可用性：

<p>增强鼠标的可用性：<br><label for="mark">你点我试试！！</label><input type="text" id="mark">
</p>

点击文字，自动跳转到对应的输入框
在这里插入图片描述

18. 表单初级验证

思考：

减轻服务器的压力
安全性

常用方式：

placeholder 提示信息
required 元素不能为空，应用于所有的文本框中
pattern 正则表达式

<body><p>姓名：<input type="text" name="username" placeholder="请输入用户名"></p><p>姓名：<input type="text" name="username" placeholder="请输入用户名" required></p><p> 自定义邮箱：<input type="text" name="diyEmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"></p></body>

HTML笔记-狂神

1. 初识HTML 什么是HTML？ Hyper Text Markup Language : 超文本标记语言超文本包括：文字、图片、音频、视频、动画等目前使用的是HTML5，使用 W3C标准 W3C标准包括： 结构化标准语言（HTML、XML） 表现标…...

编程日记 2023/10/27 1:45:32

python自动化测试工具selenium

概述 selenium是网页应用中最流行的自动化测试工具，可以用来做自动化测试或者浏览器爬虫等。官网地址为：Selenium。相对于另外一款web自动化测试工具QTP来说有如下优点： 免费开源轻量级，不同语言只需要一个体积很小的依赖包支持…...

编程日记 2023/10/27 1:44:30

输入/输出应用程序接口和设备驱动程序接口

文章目录 1.输入/输出应用程序接口1.字符设备接口2.块设备接口3.网络设备接口1.网络设备套接字通信 4.阻塞/非阻塞I/O 2.设备驱动程序接口1.统一标准的设备驱动程序接口 1.输入/输出应用程序接口 1.字符设备接口 get/put系统调用:向字符设备读/写一个字符 2.块设备接口 read/wr…...

编程日记 2023/10/27 1:43:29

Python---Socket 网络通信

Socket ：进程之间通信的工具,进程之间想要进行网络通信需要Socket，两个进程之间通过socket进行相互通讯,就必须有服务端和客服端。 Socket服务端编程 # 1.创建socket对象 import socketsocket_server socket.socket()# 2. 绑定socket_server到指定IP和…...

编程日记 2023/10/27 1:42:29

使用 jdbc 技术升级水果库存系统（优化版本）

抽取执行更新方法抽取查询方法 —— ResultSetMetaData ResultSetMetaData rsmd rs.getMetaData();//元数据,结果集的结构数据抽取查询方法 —— 解析结果集封装成实体对象提取获取连接和释放资源的方法将数据库配置信息转移到配置文件 <dependencies><depend…...

编程日记 2023/10/27 1:41:28

网络协议--广播和多播

12.1 引言在第1章中我们提到有三种IP地址：单播地址、广播地址和多播地址。本章将更详细地介绍广播和多播。广播和多播仅应用于UDP，它们对需将报文同时传往多个接收者的应用来说十分重要。TCP是一个面向连接的协议，它意味着分别运行于两主…...

编程日记 2023/10/27 1:40:26

python爬虫入门（三）正则表达式

开源中国提供的正则表达式测试工具 http://tool.oschina.net/regex/，输入待匹配的文本，然后选择常用的正则表达式，就可以得出相应的匹配结果了常用的匹配规则如下模　　式描　　述\w匹配字母、数字及下划线\W匹配不是字母、数字及下划线的…...

编程日记 2023/10/27 1:39:25

fabric.js介绍

fabric.js是可以简化canvas编写的js库，提供canvas缺少的对象模型，包含动画、数据序列化和反序列化的等高级功能的js库，开源项目，在GitHub有很多人贡献。官网：Fabric.js Javascript Canvas Library (fabricjs.com) 文档…...

编程日记 2023/10/27 1:38:24

YOLOv5源码中的参数超详细解析（3）— 训练部分（train.py）| 模型训练调参

前言：Hello大家好，我是小哥谈。YOLOv5项目代码中，train.py是用于模型训练的代码，是YOLOv5中最为核心的代码之一，而代码中的训练参数则是核心中的核心，只有学会了各种训练参数的真正含义，才能使用YOLOv5进行最基本的训练。🌈 前期回顾： YOLOv5源码中的参数超详细解析…...

编程日记 2023/10/27 1:37:22

Linux高性能编程学习-TCP/IP协议族

一、TCP/IP协议族结构与主要协议分层：数据链路层、网络层、传输层、应用层 1. 数据链路层功能：实现网卡驱动程序，处理数据在不同物理介质的传输协议： ARP：将目标机器的IP地址转成MAC地址RARP：将MAC地…...

编程日记 2023/10/27 1:35:20

用爬虫代码爬取高音质音频示例

目录一、准备工作 1、安装Python和相关库 2、确定目标网站和数据结构二、编写爬虫代码 1、导入库 2、设置代理IP 3、发送HTTP请求并解析HTML页面 4、查找音频文件链接 5、提取音频文件名和下载链接 6、下载音频文件三、完整代码示例四、注意事项 1、遵守法律法…...

编程日记 2023/10/27 1:34:18

深度学习与计算机视觉（一）

文章目录计算机视觉与图像处理的区别人工神经元感知机 - 分类任务Sigmoid神经元/对数几率回归对数损失/交叉熵损失函数梯度下降法- 极小化对数损失函数线性神经元/线性回归均方差损失函数-线性回归常用损失函数使用梯度下降法训练线性回归模型线性分类器多分类器的决策面 soft…...

编程日记 2023/10/27 1:33:17

【vector题解】杨辉三角 | 删除有序数组中的重复项 | 只出现一次的数字Ⅱ

杨辉三角力扣（LeetCode）官网 - 全球极客挚爱的技术成长平台给定一个非负整数 numRows，生成「杨辉三角」的前 numRows 行。在「杨辉三角」中，每个数是它左上方和右上方的数的和。示例 1: 输入: numRows 5 输出: [[1],[1,1…...

编程日记 2023/10/27 1:32:17

金字塔切分注意力模块PSA学习笔记（附代码）

已有研究表明：将注意力模块嵌入到现有CNN中可以带来显著的性能提升。比如，SENet、BAM、CBAM、ECANet、GCNet、FcaNet等注意力机制均带来了可观的性能提升。但是，目前仍然存在两个具有挑战性的问题需要解决。一是如何有效地获取和利用不同尺度…...

编程日记 2023/10/27 1:30:14

Jenkins自动化测试

学习 Jenkins 自动化测试的系列文章 Robot Framework 概念Robot Framework 安装Pycharm Robot Framework 环境搭建Robot Framework 介绍Jenkins 自动化测试 1. Robot Framework 概念 Robot Framework是一个基于Python的，可扩展的关键字驱动的自动化测试框架。它…...

编程日记 2023/10/27 1:29:11

python 字典dict和列表list的读取速度问题, range合并

嗨喽，大家好呀~这里是爱看美女的茜茜呐 python 字典和列表的读取速度问题最近在进行基因组数据处理的时候，需要读取较大数据（2.7G）存入字典中， 然后对被处理数据进行字典key值的匹配，在被处理文件中每次…...

编程日记 2023/10/27 1:28:08

测试用例的设计方法（全）：等价类划分方法

一.方法简介 1.定义是把所有可能的输入数据,即程序的输入域划分成若干部分（子集）,然后从每一个子集中选取少数具有代表性的数据作为测试用例。该方法是一种重要的,常用的黑盒测试用例设计方法。 2.划分等价类： 等价类是指某个输入域的…...

编程日记 2023/10/27 1:27:07

Office技巧（持续更新）（Word、Excel、PPT、PowerPoint、连续引用、标题、模板、论文）

1. Word 1.1 标题设置为多级列表选住一级标题，之后进行“定义新的多级列表” 1.2 图片和表的题注自动排序正常插入题注后就可以了。如果一级标题是 “汉字序号”，那么需要对题注进行修改： 从原来的图 { STYLEREF 1 \s }-{ SEQ 图 \* A…...

编程日记 2023/10/27 1:26:05

Java实现ORM第一个api-FindAll

经过几天的业余开发，今天终于到ORM对业务api本身的实现了，首先实现第一个查询的api 老的C#定义如下因为Java的泛型不纯，所以无法用只带泛型的方式实现api，对查询类的api做了调整，第一个参数要求传入实体对象首先…...

编程日记 2023/10/27 1:25:04

HFSS笔记——求解器和求解分析

文章目录 1、求解器2、求解类型3、自适应网格剖分4、求解频率选择4.1 求解设置项的含义4.2 扫频类型 1、求解器自从ANSYS将HFSS收购后，其所有的求解器都集成在一起了，点击Project，会显示所有的求解器类型。其中， HFSS design&…...

编程日记 2023/10/27 1:24:02

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...

编程新知 2026/1/8 4:28:03

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/11/1 5:21:39

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文｜魏琳华编｜王一粟一场大会，聚集了中国多模态大模型的“半壁江山”。智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...

编程新知 2026/1/7 22:58:26

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...

编程新知 2025/10/6 4:03:40

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M：百万（Million） B：十亿（Billion） 1 B 1000 M 1B 1000M 1B1000M 参数存储精度模型参数是固定的，但是一个参数所表示多少字节不一定，需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

python/java环境配置

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

编程新知 2026/1/10 4:51:48