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

HTML笔记-狂神

news 2025/7/14 6:04:48

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

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/6/15 12:05:47

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...

编程新知 2025/7/13 10:04:15

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/7/12 12:01:45

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机传统的知识图谱补全（KGC）模型通过…...

编程新知 2025/7/13 1:30:46

leetcodeSQL解题：3564. 季节性销售分析题目： 表：sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/6/20 12:42:23

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/7/11 17:41:53

如何在网页里填写 PDF 表格？

有时候，你可能希望用户能在你的网站上填写 PDF 表单。然而，这件事并不简单，因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件，但原生并不支持编辑或填写它们。更糟的是，如果你想收集表单数据&#xff…...

编程新知 2025/7/14 4:35:19

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/6/21 10:27:51

论文笔记——相干体技术在裂缝预测中的应用研究

目录相关地震知识补充地震数据的认识地震几何属性相干体算法定义基本原理第一代相干体技术：基于互相关的相干体技术（Correlation）第二代相干体技术：基于相似的相干体技术（Semblance）基于多道相似的相干体…...

编程新知 2025/7/13 17:32:32

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/7/12 16:22:49

1. 初识HTML

2. 网页基本元素

3. 网页基本标签

4. 图像标签

5. 链接标签

6. 行内元素和块元素

7. 列表

8. 表格

9. 媒体元素

10. 页面结构分析

11. iframe内联框架

12. 初识表单post和get提交

13. 文本框和单选框

14. 按钮和多选框

15. 文本域和文件域

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

17. 表单的应用

18. 表单初级验证

相关文章：