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

Web开发-html篇-下

news 2026/2/7 13:05:25

这篇是接着上篇的内容，接着介绍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篇-下

这篇是接着上篇的内容&#xff0c;接着介绍html的其他标签及属性的用法&#xff0c;感兴趣的可以从我的html上篇看起 1. 超链接示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport&…...

编程日记 2024/8/4 22:56:54

【C++从小白到大牛】多态那些事儿（上）

一、多态的概念 1.1概念: 通俗来说&#xff0c;就是多种形态&#xff0c;具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会产生出不同的状态。 二、 多态的定义及实现 2.1多态的构成条件 多态是在不同继承关系的类对象&#xff0c;去调用同一函数&#xff0c;产…...

编程日记 2024/8/4 22:54:52

网站在线查询工具箱源码分享

终极网络工具系统”(SAAS)&#xff0c;是一款功能强大的PHP脚本在线查询工具。本版集合了超过470种快速且易用的Web工具&#xff0c;为日常任务处理和开发人员提供了极大的便利。作为一款综合性的网络工具系统&#xff0c;66toolkit不仅满足了用户的基本网络需求&#xff0c;更…...

编程日记 2024/8/4 22:53:51

SSH简写且免密登陆终端设备

问题 通常使用ssh连接远程设备时&#xff0c;需要先执行ssh <username><ip>&#xff0c;然后再输入终端设备的用户密码。比较麻烦。 解决 可以用如下方法设置命令缩写以及免密登陆&#xff1a; 免密 首先在本地生成私钥&#xff1a; ssh-keygen -t rsa # or …...

编程日记 2024/8/4 22:51:49

算力共享中神经网络切片和算力分配策略

目录 神经网络切片 按照算力的分布进行网络层数切片；就是算力越强，运算神经网络层数越多 神经网络切片和算力占比进行映射 算力分配策略 get_current_shard 神经网络切片 按照算力的分布进行网络层数切片；就是算力越强，运算神经网络层数越多 神经网络切片和算力占比进…...

编程日记 2024/8/4 22:50:48

3章4节：R的逻辑运算和矩阵运算

逻辑运算和矩阵运算是R语言中两个重要的功能模块，前者用于逻辑判断和条件筛选，后者用于处理多维数据结构和执行线性代数运算。本文章详细介绍R语言中的逻辑运算和矩阵运算，帮助读者掌握这两类运算的基本概念、操作方法和实际应用。 一、逻辑运算 逻辑运算在编程语言中扮演着…...

编程日记 2024/8/4 22:47:44

使用EasyAR打包安卓操作注意

EasyAR for Scene 4.6.3 丨Unity2020.3.15f2 打包Unity注意事项 一、默认渲染管线 官方参考链接&#xff1a;ARFoundation 简单注意 1.打包设置为Android平台 2.PackageName和EasyAR中保持一致 3.Scripting Backend设置为IL2CPP&#xff0c;以及设置为ARM64 4.取消Auto …...

编程日记 2024/8/4 22:44:41

驾驭PyCharm：破解环境配置的迷宫

驾驭PyCharm&#xff1a;破解环境配置的迷宫 PyCharm&#xff0c;作为Python开发者的首选IDE之一&#xff0c;以其强大的功能和用户友好的界面而广受好评。然而&#xff0c;即便是最强大的工具&#xff0c;环境配置问题也可能成为开发者的拦路虎。本文将带你深入探索PyCharm中…...

编程日记 2024/8/4 22:43:40

大数据技术原理-Hadoop的安装

摘要 随着大数据时代的到来&#xff0c;Hadoop作为一项重要的分布式计算框架&#xff0c;其安装与配置是大数据技术学习者必须掌握的技能。本文通过实验报告的形式&#xff0c;详细记录了在虚拟机环境下安装Hadoop并配置其为伪分布式模式的全过程。实验过程中&#xff0c;遇到…...

编程日记 2024/8/4 22:42:38

从根儿上学习spring 八 之run方法启动第四段(2)

图2 我们接着上一篇接着来看refresh方法&#xff0c;我们上一小节说完了invokeBeanFactoryPostProcessors(beanFactory)方法&#xff0c;这一节我们来看registerBeanPostProcessors(beanFactory)方法。 从方法名称定义我们就能看出这个方法主要是用来注册BeanPostProcesor的。…...

编程日记 2024/8/4 22:41:37

牛顿插值法代替泰勒公式

引入 例题 近似函数&#xff1a; 通过这个近似函数可以看出&#xff0c;若要证的函数超过二阶可导&#xff0c;那么就不适合用牛顿插值法代替泰勒公式 因为&#xff0c;后面的操作非常复杂&#xff0c;不划算了… 总结 我们可以通过牛顿插值法生成一个逼近曲线的直线&#xf…...

编程日记 2024/8/4 22:39:35

为 Laravel 提供生产模式下的容器化环境：打造现代开发环境的终极指南

为 Laravel 提供生产模式下的容器化环境&#xff1a;打造现代开发环境的终极指南 在现代开发中&#xff0c;容器化已经成为一种趋势。使用 Docker 可以让我们轻松地管理和部署应用程序。本文将带你一步步构建一个高效的 Laravel 容器化环境&#xff0c;确保你的应用程序在开发…...

编程日记 2024/8/4 22:38:34

Visual Studio 和 VSCode 哪个好?

​ 您好&#xff0c;我是程序员小羊&#xff01; 前言 想要对Visual Studio 和 VSCode 进行比较&#xff0c;就要充分了解Visual Studio (VS) 和 Visual Studio Code (VSCode) 各有其优势和适用场景进行分析。Visual Studio (VS) 和 Visual Studio Code (VSCode) 都是由微软开发…...

编程日记 2024/8/4 22:37:33

百款精选的HTML5小游戏源码，你可以下载并直接运行在你的小程序或者自己的网站上

今天我带来了一份特别的礼物——百款精选的HTML5小游戏源码&#xff0c;你可以下载并直接运行在你的小程序或者自己的网站上&#xff0c;只需双击index.html即可开始。无论你是在寻找创意引流&#xff0c;还是想为你的网站增添互动性&#xff0c;这些小游戏都能帮你实现&#x…...

编程日记 2024/8/4 22:36:32

01 LVS负载均衡群集

集群 在互联网应用中&#xff0c;随着站点对硬件的性能、响应速度、服务稳定性、数据可靠性等要求越来越高&#xff0c;单台服务器越来越力不从心 集群的含义 Cluster&#xff0c;集群也叫群集由多台主机构成&#xff0c;但对外只表现为一个整体 集群分类 类型 负载均衡集…...

编程日记 2024/8/4 22:32:28

Redis结合Lua脚本的简单使用

我们就拿购物车举例子 现在有5个东西免费送&#xff0c;我们只能选择1个 例如 可乐 美年达 香蕉 苹果 薯片 我们选择后就放进redis里面 然后我们不能选重复&#xff0c;只能选不同 Lua脚本 我们redis使用lua脚本的时候&#xff0c;会传两个参数进去 一个是List<Strin…...

编程日记 2024/8/4 22:30:25

Java使用zip4j加密压缩和解压文件与文件夹

最近项目中有个需求需要对文件夹进行压缩后传输&#xff0c;考虑数据泄露安全性问题&#xff0c;需要对压缩包进行加密&#xff0c;特地查找了下开源压缩加密类库&#xff0c;找到了Java语言开发的zip4j库&#xff0c;觉得挺好用的&#xff0c;在这分享给大家&#xff01; Jav…...

编程日记 2024/8/4 22:28:24

一款好用的开源网站内容管理系统

今天给大家介绍的是一款开源网站内容管理系统&#xff08;灵活、易用&#xff0c;性能良好、运行稳定&#xff0c;轻松管理建设网站&#xff09; 官网&#xff1a;https://www.ujcms.com/ 介绍 客户端兼容Edge&#xff08;Chromium版&#xff09;、谷歌浏览器&#xff08;Chro…...

编程日记 2024/8/4 22:27:22

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…...

编程日记 2024/8/4 22:26:21

centos安装es、kibana、ik

这里es使用的是7.10.2版本的es&#xff0c;物料包下载地址如下 #注意安装的插件需和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…...

编程日记 2024/8/4 22:25:20

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

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

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

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2026/1/28 9:04:29

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2026/2/4 18:09:49

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2026/1/29 3:25:02

DBLP数据库是什么？

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...

编程新知 2026/2/4 20:54:56

sshd代码修改banner

sshd服务连接之后会收到字符串&#xff1a; SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢&#xff1f; 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头&#xff0c…...

编程新知 2026/2/5 22:05:56

2025.6.9总结（利与弊）

凡事都有两面性。在大厂上班也不例外。今天找开发定位问题&#xff0c;从一个接口人不断溯源到另一个 接口人。有时候&#xff0c;不知道是谁的责任填。将工作内容分的很细&#xff0c;每个人负责其中的一小块。我清楚的意识到&#xff0c;自己就是个可以随时替换的螺丝钉&…...

编程新知 2025/10/14 3:13:44

【Ftrace 专栏】Ftrace 参考博文

ftrace、perf、bcc、bpftrace、ply、simple_perf的使用Ftrace 基本用法Linux 利用 ftrace 分析内核调用如何利用ftrace精确跟踪特定进程调度信息使用 ftrace 进行追踪延迟Linux-培训笔记-ftracehttps://www.kernel.org/doc/html/v4.18/trace/events.htmlhttps://blog.csdn.net/…...

编程新知 2026/1/20 3:30:27

DriveGPT4: Interpretable End-to-end Autonomous Driving via Large Language Model

一、研究背景与创新点 （一）现有方法的局限性 当前智驾系统面临两大核心挑战：一是长尾问题，即系统在遇到新场景时可能失效，例如突发交通状况或非常规道路环境；二是可解释性问题，传统方法无法解释智驾系统的决策过程，用户难以理解车辆行为的依据。传统语言模型（如 BERT…...

编程新知 2025/9/14 11:27:03

设计模式域——软件设计模式全集

摘要 软件设计模式是软件工程领域中经过验证的、可复用的解决方案&#xff0c;旨在解决常见的软件设计问题。它们是软件开发经验的总结&#xff0c;能够帮助开发人员在设计阶段快速找到合适的解决方案&#xff0c;提高代码的可维护性、可扩展性和可复用性。设计模式主要分为三…...

编程新知 2026/2/2 0:48:37