HTML笔记-狂神
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、特殊符号-->
空 格：<br/>
大于号：> <br/>
小于号：< <br/>
版权符号：©<!--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） 表现标…...
python自动化测试工具selenium
概述 selenium是网页应用中最流行的自动化测试工具，可以用来做自动化测试或者浏览器爬虫等。官网地址为：Selenium。相对于另外一款web自动化测试工具QTP来说有如下优点： 免费开源轻量级，不同语言只需要一个体积很小的依赖包支持…...
输入/输出应用程序接口和设备驱动程序接口
文章目录 1.输入/输出应用程序接口1.字符设备接口2.块设备接口3.网络设备接口1.网络设备套接字通信 4.阻塞/非阻塞I/O 2.设备驱动程序接口1.统一标准的设备驱动程序接口 1.输入/输出应用程序接口 1.字符设备接口 get/put系统调用:向字符设备读/写一个字符 2.块设备接口 read/wr…...
Python---Socket 网络通信
Socket ：进程之间通信的工具,进程之间想要进行网络通信需要Socket，两个进程之间通过socket进行相互通讯,就必须有服务端和客服端。 Socket服务端编程 # 1.创建socket对象 import socketsocket_server socket.socket()# 2. 绑定socket_server到指定IP和…...
使用 jdbc 技术升级水果库存系统（优化版本）
抽取执行更新方法抽取查询方法 —— ResultSetMetaData ResultSetMetaData rsmd rs.getMetaData();//元数据,结果集的结构数据 抽取查询方法 —— 解析结果集封装成实体对象提取 获取连接 和 释放资源 的方法将数据库配置信息转移到配置文件 <dependencies><depend…...
网络协议--广播和多播
12.1 引言 在第1章中我们提到有三种IP地址：单播地址、广播地址和多播地址。本章将更详细地介绍广播和多播。 广播和多播仅应用于UDP，它们对需将报文同时传往多个接收者的应用来说十分重要。TCP是一个面向连接的协议，它意味着分别运行于两主…...
python爬虫入门（三）正则表达式
开源中国提供的正则表达式测试工具 http://tool.oschina.net/regex/，输入待匹配的文本，然后选择常用的正则表达式，就可以得出相应的匹配结果了 常用的匹配规则如下 模 式描 述\w匹配字母、数字及下划线\W匹配不是字母、数字及下划线的…...
fabric.js介绍
fabric.js是可以简化canvas编写的js库，提供canvas缺少的对象模型，包含动画、数据序列化和反序列化的等高级功能的js库，开源项目，在GitHub有很多人贡献。 官网：Fabric.js Javascript Canvas Library (fabricjs.com) 文档…...
YOLOv5源码中的参数超详细解析（3）— 训练部分（train.py）| 模型训练调参
前言：Hello大家好，我是小哥谈。YOLOv5项目代码中，train.py是用于模型训练的代码，是YOLOv5中最为核心的代码之一，而代码中的训练参数则是核心中的核心，只有学会了各种训练参数的真正含义，才能使用YOLOv5进行最基本的训练。🌈 前期回顾： YOLOv5源码中的参数超详细解析…...
Linux高性能编程学习-TCP/IP协议族
一、TCP/IP协议族结构与主要协议 分层：数据链路层、网络层、传输层、应用层 1. 数据链路层 功能：实现网卡驱动程序，处理数据在不同物理介质的传输 协议： ARP：将目标机器的IP地址转成MAC地址RARP：将MAC地…...
用爬虫代码爬取高音质音频示例
目录 一、准备工作 1、安装Python和相关库 2、确定目标网站和数据结构 二、编写爬虫代码 1、导入库 2、设置代理IP 3、发送HTTP请求并解析HTML页面 4、查找音频文件链接 5、提取音频文件名和下载链接 6、下载音频文件 三、完整代码示例 四、注意事项 1、遵守法律法…...
深度学习与计算机视觉（一）
文章目录 计算机视觉与图像处理的区别人工神经元感知机 - 分类任务Sigmoid神经元/对数几率回归对数损失/交叉熵损失函数梯度下降法- 极小化对数损失函数线性神经元/线性回归均方差损失函数-线性回归常用损失函数使用梯度下降法训练线性回归模型线性分类器多分类器的决策面 soft…...
【vector题解】杨辉三角 | 删除有序数组中的重复项 | 只出现一次的数字Ⅱ
杨辉三角 力扣（LeetCode）官网 - 全球极客挚爱的技术成长平台 给定一个非负整数 numRows，生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中，每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1…...
金字塔切分注意力模块PSA学习笔记 （附代码）
已有研究表明：将注意力模块嵌入到现有CNN中可以带来显著的性能提升。比如，SENet、BAM、CBAM、ECANet、GCNet、FcaNet等注意力机制均带来了可观的性能提升。但是，目前仍然存在两个具有挑战性的问题需要解决。一是如何有效地获取和利用不同尺度…...
Jenkins自动化测试
学习 Jenkins 自动化测试的系列文章 Robot Framework 概念Robot Framework 安装Pycharm Robot Framework 环境搭建Robot Framework 介绍Jenkins 自动化测试 1. Robot Framework 概念 Robot Framework是一个基于Python的，可扩展的关键字驱动的自动化测试框架。 它…...
python 字典dict和列表list的读取速度问题, range合并
嗨喽，大家好呀~这里是爱看美女的茜茜呐 python 字典和列表的读取速度问题 最近在进行基因组数据处理的时候，需要读取较大数据（2.7G）存入字典中， 然后对被处理数据进行字典key值的匹配，在被处理文件中每次…...
测试用例的设计方法（全）：等价类划分方法
一.方法简介 1.定义 是把所有可能的输入数据,即程序的输入域划分成若干部分（子集）,然后从每一个子集中选取少数具有代表性的数据作为测试用例。该方法是一种重要的,常用的黑盒测试用例设计方法。 2.划分等价类： 等价类是指某个输入域的…...
Office技巧（持续更新）（Word、Excel、PPT、PowerPoint、连续引用、标题、模板、论文）
1. Word 1.1 标题设置为多级列表 选住一级标题，之后进行“定义新的多级列表” 1.2 图片和表的题注自动排序 正常插入题注后就可以了。如果一级标题是 “汉字序号”，那么需要对题注进行修改： 从原来的 图 { STYLEREF 1 \s }-{ SEQ 图 \* A…...
Java实现ORM第一个api-FindAll
经过几天的业余开发，今天终于到ORM对业务api本身的实现了，首先实现第一个查询的api 老的C#定义如下 因为Java的泛型不纯，所以无法用只带泛型的方式实现api，对查询类的api做了调整，第一个参数要求传入实体对象 首先…...
HFSS笔记——求解器和求解分析
文章目录 1、求解器2、求解类型3、自适应网格剖分4、求解频率选择4.1 求解设置项的含义4.2 扫频类型 1、求解器 自从ANSYS将HFSS收购后，其所有的求解器都集成在一起了，点击Project，会显示所有的求解器类型。 其中， HFSS design&…...
jenkins配置gitlab凭据
下载Credentials Binding插件（默认是已经安装了） 在凭据配置里添加凭据类型 点击保存 Username with password： 用户名和密码 SSH Username with private 在凭据管理里面添加gitlab账号和密码 点击全局 点击添加凭据（版本不同…...
0基础学习PyFlink——用户自定义函数之UDTF
大纲 表值函数完整代码 在《0基础学习PyFlink——用户自定义函数之UDF》中，我们讲解了UDF。本节我们将讲解表值函数——UDTF 表值函数 我们对比下UDF和UDTF def udf(f: Union[Callable, ScalarFunction, Type] None,input_types: Union[List[DataType], DataTy…...
【Java 进阶篇】Java Request 原理详解
在网络应用开发中，HTTP请求是一项常见而关键的任务。当我们使用Java编写网络应用时，了解HTTP请求的工作原理变得至关重要。本文将详细介绍Java中HTTP请求的原理，包括请求的结构、发送请求的方法以及处理请求的过程。 HTTP请求的基本结构 HT…...
13 结构性模式-装饰器模式
1 装饰器模式介绍 在软件设计中,装饰器模式是一种用于替代继承的技术,它通过一种无须定义子类的方式给对象动态的增加职责,使用对象之间的关联关系取代类之间的继承关系. 2 装饰器模式原理 //抽象构件类 public abstract class Component{public abstract void operation(); }…...
支持向量机（SVM）
一. 什么是SVM 1. 简介 SVM，曾经是一个特别火爆的概念。它的中文名：支持向量机（Support Vector Machine, 简称SVM）。因为它红极一时，所以关于它的资料特别多，而且杂乱。虽然如此，只要把握住SV…...
Rabbitmq----分布式场景下的应用
服务异步通信-分布式场景下的应用 如果单机模式忘记也可以看看这个快速回顾rabbitmq,在做学习 消息队列在使用过程中，面临着很多实际问题需要思考： 1.消息可靠性 消息从发送，到消费者接收，会经理多个过程： 其中的每一…...
springboot + redis实现签到与统计功能
在很多项目中都会有签到与统计功能，最容易想到的方案是创建一个签到表来记录每个用户的签到记录，比如设计一个mysql数据库表： CREATE TABLE tb_sign id bigint(20) unsigned NOT NULL AUTOINCREMENT COMMENT 主键, user_id bigint(20) unsig…...
Redis | 数据结构（02）SDS
一、键值对数据库是怎么实现的？ 在开始讲数据结构之前，先给介绍下 Redis 是怎样实现键值对（key-value）数据库的。 Redis 的键值对中的 key 就是字符串对象，而 value 可以是字符串对象，也可以是集合数据类型…...
Linux C语言开发-D7D8运算符
算术运算符：-*/%，浮点数可以参与除法运算，但不能参与取余运算 a%b：表示取模或取余 关系运算符：<,>,>,<,,! 逻辑运算符:!,&&,|| &&,||逻辑运算符是从左到右，依次运算&#…...
redis 配置主从复制,哨兵模式案例
哨兵(Sentinel)模式 1 . 什么是哨兵模式？ 反客为主的自动版，能够自动监控master是否发生故障，如果故障了会根据投票数从slave中挑选一个 作为master，其他的slave会自动转向同步新的master，实现故障自动转义 2 . 原理…...