Web开发-html篇-下
这篇是接着上篇的内容，接着介绍html的其他标签及属性的用法，感兴趣的可以从我的html上篇看起
1. 超链接示例
<!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><dl><!--target属性，在新的浏览器窗口打开链接--><!--title属性，鼠标悬停显示信息--><p id="top"></p> <!-- 顶部id唯一 --><dt><h4>导航站</h4></dt><dd><a href="http://www.xiaomi.com" target="_self">小米</a></dd><dd><a href="http://www.baidu.com" title="点击一下，了解更多" target="_blank">百度</a></dd><dd><a href="http://www.Bing.com" target="_blank">必应</a></dd><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><a href="mailto:2052619274@qq.com">联系我</a> <!--向指定邮箱发送邮件--><a href="#top">点击回到顶部</a></dl></body>
</html>
<a>: 超链接。
href: 链接目标。target: 指定打开链接的方式（如_self、_blank）。（具体来说就是，_self实在自身页面打开新的超链接，而_blank是在浏览器中打开新的窗口打开超链接）title: 鼠标悬停时显示的文本。
效果展示：
1号：会利用a标签向指定邮箱发送一封邮件
2号：如果网页过长，可以方便快速回到网页最顶部
2. 图片标签示例
<!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><!--图片标签，img标签src属性--><!-- 这两张图片是其他网页上扒过来的 --><!-- alt属性用于图片无法加载是作为文本进行代替 --><!-- width，height属性为图片设置宽度和高度，如果只设置一项，另一项会默认按比例缩放 --><!-- title 属性，鼠标悬停显示信息 --><img src="https://pic1.zhimg.com/v2-ec477e4aa3f4c0edfee1fe943907476b_r.jpg" width="800" title="爱情是蓝色的" alt="蕾姆"><img src="https://i04piccdn.sogoucdn.com/b26e0f294db10d4d" height="800" alt="02"><!-- 注意src的相对路径与绝对路径--><!-- 下面两张都是同一张图片 --><img src="./images/20240604hlag8k.webp" alt="鬼灭之忍"> <!-- 这是相对路径 --><img src="D:\code\web\web_html\images\20240604hlag8k.webp" alt="鬼灭之忍"> <!-- 这个是图片在我本地电脑的绝对路径 --></body>
</html>
<img>: 图像元素。我的代码中的注释比较详细易懂，至于为什么是动漫角色的图片，因为我喜欢，只是为了做个示例，可以根据个人需要进行更改发挥
src: 图像的URL。alt: 替代文本（用于描述图片内容）。title: 鼠标悬停时显示的文本。width,height: 设置图像的宽高。
效果展示：
只截图了部分，我就不长截图了哈……感兴趣的自己复制试试哈。
3. 表单示例
form，表单主要用于和服务器交互，例如常见的登录，注册都需要交互校验用户信息
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form表单</title>
</head>
<body><!-- 将网页数据提交至服务器校验登录 --><form action="http://www.baidu.com" method="post"> <!-- 输入服务器地址 --><p><input type="text" placeholder="请输入用户名"></p><p><input type="password" placeholder="请输入密码"></p><!-- 单选框 --><p>男：<input type="radio" name="gender">女：<input type="radio" name="gender" checked="checked"></p><!-- 多选框 --><h4>购买课程</h4><p>web前端：<input type="checkbox">Python开发:<input type="checkbox">Java编程：<input type="checkbox">HTML:<input type="checkbox" checked="checked">CSS：<input type="checkbox"></p><hr><h3>下拉列表代替单选</h3><p><select name="class" id="001"><option value="a">web前端</option><option value="b" selected="selected">Python开发</option><option value="c">Java编程</option><option value="">HTML</option><option value="">CSS</option></select></p><hr><h3>下拉列表代替多选</h3><p><select name="class" id="002" multiple="multiple"><option value="a">web前端</option><option value="b" selected="selected">Python开发</option><option value="c">Java编程</option><option value="">HTML</option><option value="">CSS</option><option value="">Vue</option><option value="">React</option><option value="">JavaScript</option><option value="">Python爬虫</option></select></p><hr><h3>文本域多行输入</h3><p><strong>个人描述:<br></strong><textarea name="" id="" rows="10" cols="40"></textarea></p><p><input type="submit" value="登录"><input type="reset" value="清空购物车"></p></form></body>
</html>
<form>: 表单元素。
action: 提交数据的目标URL。method: 提交数据的方式（如GET或POST）。<input>: 输入控件。
type: 输入类型（如text、password、radio、checkbox、submit、reset）。
- text，单行文本输入框
- password，输入进去的会变成小黑点，跟平时输入密码一样，看不见
- radio，用于单选
- checkbox，用于多选
- submit，用于提交至服务器
- reset，清空表单，例如常见的购物时的清空购物车
placeholder: 提示文本。name: 输入的名称。value: 提交时的值。checked: 默认选中状态。<select>: 下拉列表。
multiple: 允许多选。
效果展示：
4.label标签
label标签最重要的功能是，可以通过id进行关联文本输入框，当然你也可以用上面中的placehoder
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>label标签</title>
</head>
<body><form action=""><p><label for="username">用户名：</label><input type="text" id="username"></p><p><label for="password">密码：</label><input type="text" id="password"></p><p><input type="submit" value="注册"><input type="reset" value="清空"></p></form><button>普通按钮</button>
</body>
</html>效果展示：
<label>: 标签，用于描述表单控件。
for: 指定与之关联的输入框的id。
5. div标签示例
div这是一个用的很多，很重要的标签，你可以随意打开一个网页，右键去查看源码，就会看到很多div
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>div标签</title>
</head>
<body><div>张三</div> <!-- 分组 --><div>李四</div> <!-- 分组 --><!-- div标签用于网页的区域划分 -->
</body>
</html>
总结
html中的大部分标签就已经写完了，这样的写出来的网页没有颜色，过于单调，过于简陋，这就要用到我们接下来要学的CSS和Javascript了，我会接着持续更新……
相关文章：
Web开发-html篇-下
这篇是接着上篇的内容，接着介绍html的其他标签及属性的用法，感兴趣的可以从我的html上篇看起 1. 超链接示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport&…...
【C++从小白到大牛】多态那些事儿（上）
一、多态的概念 1.1概念: 通俗来说，就是多种形态，具体点就是去完成某个行为，当不同的对象去完成时会产生出不同的状态。 二、 多态的定义及实现 2.1多态的构成条件 多态是在不同继承关系的类对象，去调用同一函数，产…...
网站在线查询工具箱源码分享
终极网络工具系统”(SAAS)，是一款功能强大的PHP脚本在线查询工具。本版集合了超过470种快速且易用的Web工具，为日常任务处理和开发人员提供了极大的便利。作为一款综合性的网络工具系统，66toolkit不仅满足了用户的基本网络需求，更…...
SSH简写且免密登陆终端设备
问题 通常使用ssh连接远程设备时，需要先执行ssh <username><ip>，然后再输入终端设备的用户密码。比较麻烦。 解决 可以用如下方法设置命令缩写以及免密登陆： 免密 首先在本地生成私钥： ssh-keygen -t rsa # or …...
算力共享中神经网络切片和算力分配策略
目录 神经网络切片 按照算力的分布进行网络层数切片；就是算力越强，运算神经网络层数越多 神经网络切片和算力占比进行映射 算力分配策略 get_current_shard 神经网络切片 按照算力的分布进行网络层数切片；就是算力越强，运算神经网络层数越多 神经网络切片和算力占比进…...
3章4节：R的逻辑运算和矩阵运算
逻辑运算和矩阵运算是R语言中两个重要的功能模块，前者用于逻辑判断和条件筛选，后者用于处理多维数据结构和执行线性代数运算。本文章详细介绍R语言中的逻辑运算和矩阵运算，帮助读者掌握这两类运算的基本概念、操作方法和实际应用。 一、逻辑运算 逻辑运算在编程语言中扮演着…...
使用EasyAR打包安卓操作注意
EasyAR for Scene 4.6.3 丨Unity2020.3.15f2 打包Unity注意事项 一、默认渲染管线 官方参考链接：ARFoundation 简单注意 1.打包设置为Android平台 2.PackageName和EasyAR中保持一致 3.Scripting Backend设置为IL2CPP，以及设置为ARM64 4.取消Auto …...
驾驭PyCharm：破解环境配置的迷宫
驾驭PyCharm：破解环境配置的迷宫 PyCharm，作为Python开发者的首选IDE之一，以其强大的功能和用户友好的界面而广受好评。然而，即便是最强大的工具，环境配置问题也可能成为开发者的拦路虎。本文将带你深入探索PyCharm中…...
大数据技术原理-Hadoop的安装
摘要 随着大数据时代的到来，Hadoop作为一项重要的分布式计算框架，其安装与配置是大数据技术学习者必须掌握的技能。本文通过实验报告的形式，详细记录了在虚拟机环境下安装Hadoop并配置其为伪分布式模式的全过程。实验过程中，遇到…...
从根儿上学习spring 八 之run方法启动第四段(2)
图2 我们接着上一篇接着来看refresh方法，我们上一小节说完了invokeBeanFactoryPostProcessors(beanFactory)方法，这一节我们来看registerBeanPostProcessors(beanFactory)方法。 从方法名称定义我们就能看出这个方法主要是用来注册BeanPostProcesor的。…...
牛顿插值法代替泰勒公式
引入 例题 近似函数： 通过这个近似函数可以看出，若要证的函数超过二阶可导，那么就不适合用牛顿插值法代替泰勒公式 因为，后面的操作非常复杂，不划算了… 总结 我们可以通过牛顿插值法生成一个逼近曲线的直线…...
为 Laravel 提供生产模式下的容器化环境：打造现代开发环境的终极指南
为 Laravel 提供生产模式下的容器化环境：打造现代开发环境的终极指南 在现代开发中，容器化已经成为一种趋势。使用 Docker 可以让我们轻松地管理和部署应用程序。本文将带你一步步构建一个高效的 Laravel 容器化环境，确保你的应用程序在开发…...
Visual Studio 和 VSCode 哪个好?
您好，我是程序员小羊！ 前言 想要对Visual Studio 和 VSCode 进行比较，就要充分了解Visual Studio (VS) 和 Visual Studio Code (VSCode) 各有其优势和适用场景进行分析。Visual Studio (VS) 和 Visual Studio Code (VSCode) 都是由微软开发…...
百款精选的HTML5小游戏源码，你可以下载并直接运行在你的小程序或者自己的网站上
今天我带来了一份特别的礼物——百款精选的HTML5小游戏源码，你可以下载并直接运行在你的小程序或者自己的网站上，只需双击index.html即可开始。无论你是在寻找创意引流，还是想为你的网站增添互动性，这些小游戏都能帮你实现&#x…...
01 LVS负载均衡群集
集群 在互联网应用中，随着站点对硬件的性能、响应速度、服务稳定性、数据可靠性等要求越来越高，单台服务器越来越力不从心 集群的含义 Cluster，集群也叫群集由多台主机构成，但对外只表现为一个整体 集群分类 类型 负载均衡集…...
Redis结合Lua脚本的简单使用
我们就拿购物车举例子 现在有5个东西免费送，我们只能选择1个 例如 可乐 美年达 香蕉 苹果 薯片 我们选择后就放进redis里面 然后我们不能选重复，只能选不同 Lua脚本 我们redis使用lua脚本的时候，会传两个参数进去 一个是List<Strin…...
Java使用zip4j加密压缩和解压文件与文件夹
最近项目中有个需求需要对文件夹进行压缩后传输，考虑数据泄露安全性问题，需要对压缩包进行加密，特地查找了下开源压缩加密类库，找到了Java语言开发的zip4j库，觉得挺好用的，在这分享给大家！ Jav…...
一款好用的开源网站内容管理系统
今天给大家介绍的是一款开源网站内容管理系统（灵活、易用，性能良好、运行稳定，轻松管理建设网站） 官网：https://www.ujcms.com/ 介绍 客户端兼容Edge（Chromium版）、谷歌浏览器（Chro…...
Qt Modbus 寄存器读写实例
一.线圈状态寄存器读写 项目效果如下 1. 写单个寄存器 MODBUS_API int modbus_write_bit(modbus_t *ctx, int coil_addr, int status); int addrui->spinBoxwirte_addr->value();int dataui->spinBoxwirte_data->value();int ret modbus_write_bit(mb,addr,d…...
centos安装es、kibana、ik
这里es使用的是7.10.2版本的es，物料包下载地址如下 #注意安装的插件需和es版本保持一致 #es https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.10.2-linux-x86_64.tar.gz #kibana https://artifacts.elastic.co/downloads/kibana/kibana-7.10…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）
HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...
大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 （1）设置网关 打开VMware虚拟机，点击编辑…...
spring：实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂ÿ…...
Selenium常用函数介绍
目录 一，元素定位 1.1 cssSeector 1.2 xpath 二，操作测试对象 三，窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四，弹窗 五，等待 六，导航 七，文件上传 …...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）
安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念（ACID） 事务是…...
Golang——9、反射和文件操作
反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一：使用Read()读取文件2.3、方式二：bufio读取文件2.4、方式三：os.ReadFile读取2.5、写…...
智能职业发展系统：AI驱动的职业规划平台技术解析
智能职业发展系统：AI驱动的职业规划平台技术解析 引言：数字时代的职业革命 在当今瞬息万变的就业市场中，传统的职业规划方法已无法满足个人和企业的需求。据统计，全球每年有超过2亿人面临职业转型困境，而企业也因此遭…...
LangChain 中的文档加载器（Loader）与文本切分器（Splitter）详解《二》
🧠 LangChain 中 TextSplitter 的使用详解：从基础到进阶（附代码） 一、前言 在处理大规模文本数据时，特别是在构建知识库或进行大模型训练与推理时，文本切分（Text Splitting） 是一个…...
Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程
鸿蒙电脑版操作系统来了，很多小伙伴想体验鸿蒙电脑版操作系统，可惜，鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机，来体验大家心心念念的鸿蒙系统啦！注意：虚拟…...