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

软件设计之HTML5

news 2026/4/7 11:26:48

软件设计之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

uosc：革命性MPV播放器UI，基于接近度智能显示界面元素

uosc&#xff1a;革命性MPV播放器UI&#xff0c;基于接近度智能显示界面元素 【免费下载链接】uosc Feature-rich minimalist proximity-based UI for MPV player. 项目地址: https://gitcode.com/gh_mirrors/uo/uosc uosc是一款为MPV播放器打造的功能丰富且极简的基于接…...

编程新知 2026/4/7 11:21:09

效率提升：用快马ai一键生成直播数据监控与管理面板代码

最近在开发直播后台管理工具时&#xff0c;发现很多功能模块其实都有固定套路。比如数据看板、弹幕管理这些常见需求&#xff0c;每次都要从零开始写类似的代码结构&#xff0c;特别浪费时间。后来尝试用InsCode(快马)平台的AI生成功能&#xff0c;效率直接翻倍。 1. 为什么需…...

编程新知 2026/4/7 10:36:45

打造专属海拉鲁冒险：塞尔达传说旷野之息个性化存档编辑指南

打造专属海拉鲁冒险&#xff1a;塞尔达传说旷野之息个性化存档编辑指南 【免费下载链接】BOTW-Save-Editor-GUI A Work in Progress Save Editor for BOTW 项目地址: https://gitcode.com/gh_mirrors/bo/BOTW-Save-Editor-GUI 在塞尔达传说旷野之息的广阔世界中&#xf…...

编程新知 2026/4/7 9:35:26

3分钟解锁B站缓存价值：m4s格式转换工具让离线视频真正为你所用

3分钟解锁B站缓存价值&#xff1a;m4s格式转换工具让离线视频真正为你所用 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾遇到这样的困…...

编程新知 2026/4/7 9:31:25

Recaptcha2 图像识别 API 集成指南

在本篇文章中&#xff0c;我们将介绍如何集成 Recaptcha2 图像识别 API。该 API 可以识别用户输入的内容和 Recaptcha2 验证图像&#xff0c;最终返回需要点击的小图像的坐标&#xff0c;以完成验证。 环境准备 在使用 API 之前&#xff0c;您需要在 Recaptcha2 图像识别 API…...

编程新知 2026/4/7 9:02:16

IntelliJ IDEA 2019安装教程及下载

软件介绍&#xff1a; IntelliJ IDEA 是捷克 JetBrains 公司研发的集成开发环境&#xff08;IDE&#xff09;&#xff0c;主打 Java 和 Kotlin 开发&#xff0c;被誉为 “最佳 Java IDE”&#xff0c;适配不同层级开发者需求&#xff1b;它具备智能代码补全、静态分析、一键重…...

编程新知 2026/4/7 8:18:56

2025医药AI全景：数智赋能新纪元，Linux基础开发工具 --- vim。

2025医药行业数智赋能与AI应用全景分析 行业背景与核心驱动力 全球医药行业正经历数字化转型浪潮&#xff0c;AI技术、大数据分析、物联网成为关键驱动力。2025年市场规模预计突破2.5万亿美元&#xff0c;年复合增长率达12%。政策支持&#xff08;如FDA加速AI医疗审批&#xff…...

编程新知 2026/4/7 8:06:49

告别复杂配置！Qwen-Image-2512图片生成服务保姆级部署教程

告别复杂配置&#xff01;Qwen-Image-2512图片生成服务保姆级部署教程 1. 为什么选择这个镜像&#xff1f; 在AI图片生成领域&#xff0c;Qwen-Image-2512模型以其出色的中文理解和图像质量著称。但传统部署方式往往需要面对以下挑战&#xff1a; 复杂的Python环境配置数十G…...

编程新知 2026/4/7 7:28:05

OpenClaw内存优化：在16G设备上高效运行Qwen3-32B任务的技巧

OpenClaw内存优化&#xff1a;在16G设备上高效运行Qwen3-32B任务的技巧 1. 为什么需要内存优化&#xff1f; 去年冬天&#xff0c;当我第一次尝试在16G内存的MacBook Pro上运行Qwen3-32B模型时&#xff0c;系统几乎立刻崩溃。这让我意识到&#xff0c;想要在资源有限的设备上…...

编程新知 2026/4/7 6:31:53

程序员必看！高质量免费源码网推荐

在数字化浪潮席卷全球的今天&#xff0c;代码已成为驱动创新的核心动力。无论是初创企业快速搭建商业平台&#xff0c;还是开发者优化项目架构&#xff0c;高质量的源码资源都能显著缩短研发周期、降低开发成本。然而&#xff0c;面对网络上鱼龙混杂的源码平台&#xff0c;如何…...

编程新知 2026/4/7 6:21:07