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

软件设计之HTML5

news 2025/9/19 5:56:05

软件设计之HTML5

【狂神说Java】HTML5完整教学通俗易懂

学习内容：

软件开发技能点参照：软件开发，小白变大佬，这套学习路线让你少走弯路是认真的，欢迎讨论
软件开发技能点参照：Java学习完整路线，强烈建议收藏转发

  1. HTML简介
  2. 常用标签
  3. 行内元素与块元素
  4. 页面结构框架
  5. iframe内联框架
  6. 框
  7. 文本域与文件域

1、HTML简介

HTML：Hyper Text Markup Language 超文本标记语言

DOCTYPE

DOCTYPE： 告诉浏览器使用规范

<!-- 注释内容-->
<!DOCTYPE html><!-- 告诉浏览器使用规范-->

title标签

用来命名网页标题
在这里插入图片描述

2、常用标签

<!-- 你好-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<!--  title标签：网页名字--><title>网页名字</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--段落标签-->
<!--一根水平线-->
<p>A</p>
<p>B</p>
<!--水平线标签-->
<hr>
<!--换行标签-->
C <br>
D <br>
<!--粗体、斜体-->
粗体：<strong>你好</strong>
斜体：<em>你好</em>
<!--特殊符号-->
空格： &nbsp; <br>
大于号：&gt;<br>
小于号：&lt; <br>
</body>
</html>

图像标签

在这里插入图片描述

超链接标签

<!--a标签
href:必填，表示要跳转的页面
target:表示窗口在哪里打开_blank 在新标签中打开_self 在自己的网页中打开-->
<a href="https://www.baidu.com"target="_blank"></a>

锚连接

<a id="top">顶部</a>
<!--锚链接
1、锚标记
2、跳转到标记-->
<a href="#top">回到顶部</a>

列表

<!--有序列表-->
<ol><li>Java</li><li>Python</li><li>C/C++</li>
</ol>
<!--无序列表-->
<ul><li>Java</li><li>Python</li><li>C/C++</li>
</ul>
<!--自定义列表-->
<!--dt:列表名称dd：列表内容-->
<dl><dt>学科</dt><dd>Java</dd><dd>Python</dd><dd>C/C++</dd>
</dl>

在这里插入图片描述

表格

HTML5 中不推荐使用 border 属性来设置表格边框。相反，建议使用 CSS 来实现同样的效果，这里先不阐述。

<!--
行：tr
列：td-->
<table><tr>
<!--colspan 跨列--><td colspan="4">1-1</td></tr><tr>
<!--rowspan 跨行--><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>

在这里插入图片描述

按钮

在这里插入图片描述)

3、行内元素与块元素

在这里插入图片描述

4、页面结构框架

在这里插入图片描述

5、 iframe内联框架

iframe 标签用于在一个网页内嵌入另一个 HTML 页面
src: 要嵌入的页面的 URL。
width 和 height: 指定 iframe 的宽度和高度。
此处代码功能是点击跳转，随后网页在所设置的内联框架中显示！

<body>
<iframe src="" name="show" width="1000px" height="800px"></iframe>
<a href="https://www.bilibili.com" target="show">点击跳转</a>
</body>

在这里插入图片描述

表单

Chrome的表单数据在Payload里：(每个浏览器的不一样)
在这里插入图片描述

在这里插入图片描述

<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get提交方式post：比较安全，传输大文件get：可以在url中看到提到的信息，不安全，高效-->
<form action="index.html" method="post"><!--  文本输入框：input type="text"--><p>名字：<input type="text" name="username"></p><!--  密码框：input type="password"--><p>名字：<input type="password" name="pwd"></p><p><input type="submit"><input type="reset"></p>
</form>

在这里插入图片描述

6、框

单选框

<p>性别<input type="radio" value="boy" name="sex">男<input type="radio" value="girl" name="sex">女
</p>

多选框

<p>爱好<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="code" name="hobby">写代码
</p>

下拉框

<p>下拉框<select name="列表名称"><option value="选择项">中国</option><option value="选择项">美国</option><option value="选择项">英国</option></select>
</p>

在这里插入图片描述

7、文本域与文件域

文本域

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

在这里插入图片描述

文件域

上传文件

<p><input type="file" name="files">
</p>

相关文章：

软件设计之HTML5

软件设计之HTML5 【狂神说Java】HTML5完整教学通俗易懂 学习内容&#xff1a; 软件开发技能点参照&#xff1a;软件开发&#xff0c;小白变大佬&#xff0c;这套学习路线让你少走弯路是认真的&#xff0c;欢迎讨论 软件开发技能点参照&#xff1a;Java学习完整路线&#xff…...

编程日记 2024/8/9 7:31:24

CnosDB 元数据集群 – 分布式时序数据库的大脑

CnosDB 是一个分布式时序数据库系统&#xff0c;其中元数据集群是核心组件之一&#xff0c;负责管理整个集群的元数据信息。 1. 概述 CnosDB 是一个分布式时序数据库系统&#xff0c;其中元数据集群是核心组件之一&#xff0c;负责管理整个集群的元数据信息。元数据包括数据库…...

编程日记 2024/8/9 7:30:23

白骑士的Matlab教学进阶篇 2.5 Simulink

Simulink是MATLAB的扩展工具&#xff0c;提供了一个图形化的建模和仿真环境。它广泛应用于系统设计、仿真、自动控制、信号处理等领域。本文将详细介绍Simulink的简介与基本使用、建立与仿真模型、控制系统设计与仿真、与MATLAB的集成。 Simulink简介与基本使用 什么是Simuli…...

编程日记 2024/8/9 7:28:21

linux安装anaconda

参考 如何在Linux服务器上安装Anaconda&#xff08;超详细&#xff09;_linux安装anconda-CSDN博客 官网 Index of / 安装网站 https://repo.anaconda.com/archive/Anaconda3-2024.06-1-Linux-x86_64.sh wget https://repo.anaconda.com/archive/Anaconda3-2024.06-1-Lin…...

编程日记 2024/8/9 7:27:20

python装饰器作用和使用场景

当谈到装饰器时&#xff0c;很多初学者很迷糊&#xff0c;有一个经典的例子可以帮助理解它们的作用。装饰器允许你在不修改函数代码的情况下&#xff0c;动态地改变函数的行为。 一、用法 假设我们有一个简单的函数&#xff0c;用来输出一条简单的问候语&#xff1a; 复制代码…...

编程日记 2024/8/9 7:26:19

Apache Tomcat 7下载、安装、环境变量配置 详细教程

Apache Tomcat 7下载、安装、环境变量配置 详细教程 Apache Tomcat 7下载Apache Tomcat 7 安装Apache Tomcat 7 环境变量配置启动 Apache Tomcat 7测试Tomcat7是否启动成功 Apache Tomcat 7下载 1、下载地址&#xff0c;找到Archives 链接: 官网下载地址 2、找到Tomcat 7&…...

编程日记 2024/8/9 7:25:18

SQL注入实例（sqli-labs/less-20）

0、初始页面 1、确定闭合字符 2、爆库名 3、爆表名 4、爆列名 5、查询最终目标...

编程日记 2024/8/9 7:19:13

Linux Shell面试题大全及参考答案（3万字长文）

目录 解释Shell脚本是什么以及它的主要用途 主要用途 Shell脚本中的注释如何编写？ 如何在Shell脚本中定义和使用变量？ Shell支持哪些数据类型？ 什么是Shell的命令替换？请举例说明。 管道（pipe）和重定向（redirection）有什么区别？ 如何在Shell脚本中使用条件语句…...

编程日记 2024/8/9 7:18:11

速盾：cdn优化静态资源加载速度机制

CDN&#xff08;Content Delivery Network&#xff09;是一种优化静态资源加载速度的机制。它通过在全球多个地点部署服务器&#xff0c;将静态资源缓存到离用户最近的服务器上&#xff0c;从而提高资源加载速度。 在传统的网络架构中&#xff0c;当用户访问一个网站时&#x…...

编程日记 2024/8/9 7:14:08

04.C++类和对象（中）

1.类的默认成员函数 默认成员函数就是用户没有显式实现&#xff0c;编译器会自动生成的成员函数称为默认成员函数。一个类&#xff0c;我们不写的情况下编译器会默认生成以下6个默认成员函数&#xff0c;需要注意的是这6个中最重要的是前4个&#xff0c;最后两个取地址重载不重…...

编程日记 2024/8/9 7:12:06

【代码随想录训练营第42期 Day23打卡 回溯Part2 - LeetCode 39. 组合总和 40.组合总和II 131.分割回文串

目录 一、做题心得 二、题目与题解 题目一&#xff1a;39. 组合总和 题目链接 题解&#xff1a;回溯 题目二&#xff1a;40.组合总和II 题目链接 题解&#xff1a;回溯 题目三&#xff1a;131.分割回文串 题目链接 题解&#xff1a;回溯 三、小结 一、做题心得 今天是代码随想录…...

编程日记 2024/8/9 7:11:05

书生.浦江大模型实战训练营——（三）Git基本操作与分支管理

最近在学习书生.浦江大模型实战训练营&#xff0c;所有课程都免费&#xff0c;以关卡的形式学习&#xff0c;也比较有意思&#xff0c;提供免费的算力实战&#xff0c;真的很不错&#xff08;无广&#xff09;&#xff01;欢迎大家一起学习&#xff0c;打开LLM探索大门&#xf…...

编程日记 2024/8/9 7:08:02

数据可视化Axure大屏原型制作分享

数据可视化大屏通过清晰、直观且易于理解的方式呈现大量复杂数据&#xff0c;已成为各行各业中不可或缺的工具。Axure作为一款功能强大的原型设计工具&#xff0c;为数据可视化大屏的制作提供了强大的支持和丰富的资源。 Axure RP 是一款强大的原型设计工具&#xff0c;非常适…...

编程日记 2024/8/9 7:05:59

Python3安装

更新镜像&#xff1a; yum -y install epel-release.noarch 1.安装Python3 [root18 ~]# yum -y install python3 2.查看版本&#xff1a; [root18 ~]# python3 --version Python 3.6.8 3.执行镜像包&#xff1a; pip3 install -i https://pypi.tuna.tsinghua.edu.cn/sim…...

编程日记 2024/8/9 7:04:58

基于Python的数据科学系列（4）：函数

引言 在前几篇文章中&#xff0c;我们探讨了Python中的基本数据类型、列表、元组和字典。在本文中&#xff0c;我们将深入研究Python中的函数。函数是编程中非常重要的概念&#xff0c;它允许我们将代码组织成模块化、可重用的组件。通过学习如何定义和使用函数&#xff0c;我们…...

编程日记 2024/8/9 7:01:55

高频焊接设备配电系统无源滤波系统的设计

1、高频焊机系统谐波状况简介 变压器容量&#xff1a;S11-M-1600/10KVA&#xff08;105%&#xff09;/0.4KV 短路阻抗&#xff1a;3.9% 谐波负载情况&#xff1a;一台600KW高频焊接设备 型号&#xff1a;GGP600-0.3-HC 输入电压&#xff1a;380V 输出电压&#xff1a;0…...

编程日记 2024/8/9 7:00:54

模拟退火的

题目链接 体验乱调参数而看天意的奇特体验 #include<bits/stdc.h> using namespace std; typedef long long ll; typedef unsigned long long ull; typedef pair<ll,ll> pii; const int inf0x3f3f3f3f; const int N1e510; const int mod1e97; //#define int long…...

编程日记 2024/8/9 6:58:52

为什么有的地方笔记本经常连不上wifi，而手机可以？

mm&#xff1a;程程&#xff0c;为什么我的笔记本在图书馆&#xff0c;老是连不上wifi&#xff1f;经常要手工连好几次&#xff0c;我的手机却没有这样的问题。 我&#xff1a;你先用手机热点连一下&#xff0c;我给你远程看一下吧。 mm&#xff1a;好了&#xff0c;我的远程代…...

编程日记 2024/8/9 6:55:50

组件化开发

iOS的组件化开发是一种将大型应用拆分成多个独立、可复用的组件的开发模式。每个组件负责完成特定的功能&#xff0c;并通过明确定义的接口与其他组件进行交互。这种开发模式有助于提高代码的可维护性、可读性和可扩展性&#xff0c;同时降低模块之间的耦合度。 组件化开发的概…...

编程日记 2024/8/9 6:54:49

java学习--文件

简介 文件,对我们并不陌生,文件是保存数据的地方,比如大家经常使用的word文档,txt文 件,excel文件 ... 都是文件。它既可以保存一张图片,也可以保持视频,声音 …. 文件流 常用的文件操作 创建文件的对象相关构造器和方法 示范 方式一&#xff1a; 方式二&#xff1a; 老师演示…...

编程日记 2024/8/9 6:52:47

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/9/10 13:55:45

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2025/9/7 1:36:13

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/8/13 21:32:37

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/9/18 12:51:18

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

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

编程新知 2025/9/16 2:01:11

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2025/9/11 8:54:35

在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南

在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点（小球运动模拟）6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...

编程新知 2025/7/7 1:11:39

Yii2项目自动向GitLab上报Bug

Yii2 项目自动上报Bug 原理 yii2在程序报错时, 会执行指定action, 通过重写ErrorAction, 实现Bug自动提交至GitLab的issue 步骤 配置SiteController中的actions方法 public function actions(){return [error > [class > app\helpers\web\ErrorAction,],];}重写Error…...

编程新知 2025/8/10 22:48:40

Easy Excel

Easy Excel 一、依赖引入二、基本使用1. 定义实体类&#xff08;导入/导出共用&#xff09;2. 写 Excel3. 读 Excel 三、常用注解说明&#xff08;完整列表&#xff09;四、进阶&#xff1a;自定义转换器&#xff08;Converter&#xff09; 其它自定义转换器没生效 Easy Excel在…...

编程新知 2025/9/16 7:40:00

Pandas 可视化集成：数据科学家的高效绘图指南

为什么选择 Pandas 进行数据可视化&#xff1f; 在数据科学和分析领域&#xff0c;可视化是理解数据、发现模式和传达见解的关键步骤。Python 生态系统提供了多种可视化工具&#xff0c;如 Matplotlib、Seaborn、Plotly 等&#xff0c;但 Pandas 内置的可视化功能因其与数据结…...

编程新知 2025/9/7 8:41:08