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

软件设计之HTML5

news 2025/5/29 4:15:21

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

k8s—Prometheus+Grafana+Altermaneger构建监控平台

目录 一、安装node-exporter 1.下载所需镜像 2.编写node-export.yaml文件并应用 3.测试node-exporter并获取数据 二、Prometheus server安装和配置 1.创建sa(serviceaccount)账号&#xff0c;对sa做rabc授权 1&#xff09;创建一个 sa 账号 monitor 2&#xff09;把 sa …...

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

Dijkstra算法求解最短路径 自写代码

#include <iostream> #define Max 503 #define INF 0xcffffffusing namespace std;typedef struct AMGraph { //定义图int vex, arc;int arcs[Max][Max]; //邻接矩阵 };int dist[Max], path[Max]; //dis保存最短路径总权值、path通过保存路径的前驱结…...

编程日记 2024/8/9 6:48:43

C#如何对某个词在字符串中出现的次数进⾏计数(LINQ)

文章目录 基础知识实现方法基础计数LINQ优化处理标点符号总结 LINQ&#xff08;Language-Integrated Query&#xff09;是C#和VB.NET中强大的查询语言&#xff0c;它可以用来查询集合、SQL数据库、XML文档等。在C#中&#xff0c;我们可以使用LINQ来简化对字符串中特定单词出现次…...

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

Linux篇之OS层内核参数的调优

Linux内核参数调优 Linux 内核参数的调优和分类是一个复杂的主题&#xff0c;这涉及到系统性能、稳定性和安全性等多个方面。 内核参数主要可以分为以下几类&#xff1a; 1. 内核参数的分类 1.1 系统性能参数 这些参数影响系统的整体性能&#xff0c;包括 CPU 调度、内存管理…...

编程日记 2024/8/9 6:46:41

DLMS/COSEM中的信息安全：安全密钥（上）

加密密钥是一个参数，和加密算法一起使用，加密算法决定了这样一种方式，带有密钥的实体，可以重现和进行逆操作，而没有密钥则不能。对DLMS/COSEM的用途，操作的例子包含： ——明文转换成密文； ——密文转换成明文； ——计算和验证认证码(MAC)； …...

编程日记 2024/8/9 6:45:40

Taro基础知识学习

一、安装及使用 CLI工具安装 需要使用 npm 或者 yarn 全局安装 tarojs/cli //使用 npm 安装 CLI npm install -g tarojs/cli//使用 yarn 安装 CLI yarn global add tarojs/cli//使用 cnpm 安装 CLI cnpm install -g tarojs/cli//使用npm info查看Taro的版本信息 npm info ta…...

编程日记 2024/8/9 6:44:39

浮点型在内存中的存储

前言 在上一期中我们讲到了有关于整型在内存中的存储&#xff0c;新朋友可以点开&#x1f517;了解一下&#xff0c;那这一期中我们将讲到的浮点数是不是存储方式和整型一致呢&#xff1f; 一、浮点数在内存中的存储 为了探究这个问题我们先来看一段代码 #include<stdio…...

编程日记 2024/8/9 6:43:38

微信小程序之behaviors

目录 概括 Demo演示 进阶演示 1. 若具有同名的属性或方法 2. 若有同名的数据 3. 若有同名的生命周期函数 应用场景 最后 属性&方法 组件中使用 代码示例&#xff1a; 同名字段的覆盖和组合规则 概括 一句话总结: behaviors是用于组件间代码共享的特性, 类似一…...

编程日记 2024/8/9 6:42:36

java.lang.NoClassDefFoundError: ch/qos/logback/core/util/StatusPrinter2

1、问题 SpringBoot升级报错&#xff1a; Exception in thread "main" java.lang.NoClassDefFoundError: ch/qos/logback/core/util/StatusPrinter2 类找不到&#xff1a; Caused by: java.lang.ClassNotFoundException: ch.qos.logback.core.util.StatusPrinter22、…...

编程日记 2024/8/9 6:41:35

WebRTC ICE配置类型

ICE&#xff08;Interactive Connectivity Establishment&#xff09;是一个用于建立WebRTC和其他实时通信会话中的点对点连接的框架。ICE协议通过尝试多个候选地址&#xff08;候选者&#xff09;来寻找最佳路径来连接两个对等端。ICE有多种配置类型&#xff0c;包括标准ICE、…...

编程日记 2024/8/9 6:40:35