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

页面技术基础-html

news 2025/6/26 13:00:55

页面技术基础-html

环境准备：在JDBC中项目上完成代码定义
1. 新建一个 Module:filr->右键 -》Module -》Java-》next->名字(html_day1)->finish
2. 在 Moudle上右键-》第二个选项：add framework .. -> 选择JavaEE下第一个选项 Web Apllication
3. 在 web文件夹上右键 -》新建 file，后缀以.html

在这里插入图片描述

一、前言

  1. 替换JDBC中三层中的 View(视图)

    (1) 作用：收集用户信息、并给用户展示信息
(2) 技术：HTML、CSS、Bootstrap、JavaScript、jQuery、EasyUI(前端做界面的相关技术)

  2. html

    (1) html：Hypertext  Markup  Language，超文本标记语言
(2) html用于制作静态网页，数据不发生改变制作动态的技术：Servlet、jsp等，数据会因时间不同发生改变
(3) html为解释型的语言，网页运行在浏览器上，浏览器自带解释器，无需安装新的软件浏览器建议使用谷歌、火狐等兼容器较好的浏览器

    在这里插入图片描述

二、基本语法

  1. html的源码文件以 .html / .htm 结尾

  2. 基础结构

    <html><head>网页的头信息，对网页进行设置</head><body 属性="值"  属性='值'>网页内容</body>
</html>
注意：html的语法不严谨，大小写不区分

    在这里插入图片描述

  3. head部分：

    (1) head中定义的内容在网页中不显示，用于定义网页的附属信息；如标题、字符编码等
(2) head中常见的标签：a. <title>网页标签标题</title>b. 设置网页中的字符编码：<meta charset="UTF-8"> 【h5写法：重点-设置编码格式】

  4. body部分：主体部分

    (1) body中常见的属性：<body bgcolor="网页的背景颜色" text="字体颜色"></body>颜色的方式两种：a. 颜色对应的英语单词：red、green、blue、pink、yellow等<body text="red">b. 使用 RGB(三基色 红绿蓝)取色方式：#RRGGBB：7EE4C3 (采用十六进制)注意：借助取色软件获取颜色对应数据(例如 Faststone Captrue)
(2) 文本相关：a. 标题：<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3>...<h6>三级标题</h6>注意：标题为1~6级，1最大，6最小标题属性：align="center|right|left(默认)" 标题水平位置：居中、靠右、靠左b. 段落：<p>段落的内容.....</p>注意：段落与段落之间有明显的间隔c. 换行：<br/>空格： &nbsp;  注意：分号不能省版权号：&copy;d. 水平分割线：<hr width="宽度">属性：width两种设置方式I. 像素：300px/ 500px，固定宽度II. 比例：30% / 50% ，相对浏览器宽度发生改变size:宽度  size = "7"color：颜色align:水平对齐方式align="center(默认)|left|right"e. 字体设置：<font color="颜色" size="字体大小" face="字体类型"></font>size="1~7"  1最小，7最大face="楷体" 字体类型
(3) 图片相关：【重点】<img src="图片的路径及图片名"  width="宽度" height="高度" align="水平位置">src指定图片路径【开发重点】align="" 设置图片相对文字位置，left|right|top(顶部)|middle(中间)|bottom(底部)title:当鼠标移动到当前图片上时，对图片的描述文字
(4) 超链接：【开发重点！！！！！】<a href="目标资源路径"  target="目标资源打开的位置">热点文字</a>例如：<a href="first.html">热点文字</a><a href="http://baidu.com">热点文字</a>target="_blank" 在新的网页中打开目标资源target="_self" 在当前网页中打开目标资源  【默认】
(5) 表格：【重点】<table border="1" cellspacing="0"><tr>      --代表行<td>一行一列</td>     -- 代表列<td>一行二列</td><td>一行三列</td></tr><tr><td>二行一列</td><td>二行二列</td><td>二行三列</td></tr></table>a. table中常见属性：border：边框，默认为0cellspacing：边框间隙，设置为0，取消中间间隙bgcolor="green" ：表格背景色background="image/001.jpg"  背景图片width="700px"     宽度height="400px"    高度align="left(默认)|center(居中)|right"  表格水平位置b. tr中常见的属性：align：设置当前行中文字相对表格位置，center表格中间;left：表格左边,right(右边)

三、表单相关(属于 body内容)

  1. 表单作用：

    (1) 实现人机交互
(2) 收集用户数据，并将收集到数据发送给服务端

  2. 表单基本结构：

    语法1：
<form><fieldset><legend>表单样式标题</legend><!--这里写表单元素--></fiedlset>
</form>语法2：
<form><!--这里写表单元素-->
</form>详解：1. form标签：必须要有，用来包含表单元素的。2. fieldset标签：用来显示表单包含效果，非必须。3. legend标签：用来给fieldset标签的包含框指定标题。

    在这里插入图片描述

  3. 表单相关元素

    (1) 单行文本框：<input type="text" name="username" value="输入用户名...">常见的属性：name：为当前文本框命名，通过 name获取对应 value数据value：用户输入的信息，也可以设置默认值placeholder：提示文字，输入文字后消失readonly：只读，存在即为truedisabled ：不可用，存在即为truehidden：隐藏，存在即为true
(2) 密码框：<input type="password" name="password" value="....."   maxlength="最大字符个数">密码：<input type="password" name="" maxlength="10"/>属性：maxlength：最大字符个数(3) 单选按钮：<input type="radio" name="名字" value="值">注意：一组单选按钮的名字必须一致，才能互斥属性： checked 为默认选项，存在即为true男<input type="radio" name="sex" value="男" checked>女<input type="radio" name="sex" value="女"><br/><br/>
(4) 复选框：<input type="checkbox" name="名字" value="值">注意：建议一组复选框中name一致，便于后期开发获取对应value默认选中：checked(5) 下拉框：<select name="edu"><option>选项内容</option><option value="1">学前班</option><option value="2">小学</option><option selected>初中</option><option>高中</option><option>中专</option><option>大专</option><option>本科</option><option>研究僧</option></select>属性：selected 默认选项name：当前元素的数据的名字。以后发送数据以及服务器获取的标记option标签，表示一个选项标签体：显示在选项中的文字，不代表真实数据，仅仅是显示信息value：当前选项的默认值，真正收集并发送给服务器的数据selected：默认选中当前选项
(6) 文本域：<textarea name="" cols="" rows="" placeholder="" style="resize: none;"> 提示文字 </textarea>属性详情：readonly只读cols :单行中文字符数，可用来设置宽度rows :显示多少行，可用来设置高度style="resize: none;" :禁止拖拽
(7) 日期：<input type="date" name="名字">
(8) 邮箱：<input type="email" name="名字">注意：自动检测邮箱输入的格式，必须包含 @
(9) 数字格式：<input type="number" value="默认值" name="" max="最大值" min="最小值" step="步长"/>草莓数量：<input type="number" value="1" name="" max="12" min="3" step="2"/>
(9) 提交按钮：【现在不使用了】<input type="submit" name="名字" value="值"><input type="submit" name="bn1" value="提交">注意：value中内容对用户显示(10) 重置按钮：<input type="reset" name="bn2" value="重置">将表单中内容清空(11) 普通按钮：<input type="button" name="bn3" value="按钮">注意：目前普通按钮没有任何效果，为后期内容准备例如：也可以利用超链接进行按钮操作<a href="first.html"><input type="button" name="bn3" value="按钮"></a>

  4. form表单 【前后端分离-不使用了】

    <form action="目标资源"  method="提交方式:get|post">中间将<input>包含此处(用户输入信息)
</form>action：代表将当前表单中的数据提交到哪(提交目标)
method：代表此表单提交数据的方式，有 get(默认)和post两种：method="get"方式：直接将提交的数据追加到地址中a. form提交地址url?name1=值&name2=值&name3=值注意：此处name代表 input中的name，通过 name获取对应value值内容不加引号：url?username=zs&password=123456b. 特点：数据不安全、不能传输大量的数据、处理中文时容易乱码(相对不容易解决)method="post"方式：表单以数据包的形式打包发送、不会显示在地址栏中a. 特点：数据安全、允许传输大量数据、处理中文相对容易

四、iframe的应用

应用场景：可以在当前网页中，嵌套显示另一个网页。通常用来做局部跳转

在这里插入图片描述

  1. iframe语法：

    <iframe src="/pages/Main.html" name="mainPage" frameborder="0" scrolling="no"></iframe>

  2. 属性说明：

    `src`：被引用页面的路径。`name` ：iframe的名字，通常可以作为a超链接跳转的target指定在本iframe中跳转。（通过frame的名字指定展示跳转的网页(局部跳转)`frameborder` ：iframe的边框宽度`scrolling` ：是否显示滚动条，no就是不显示。`width`：设置宽度 `height`：设置高度

  3. iframe的应用

    (1) 超链接：<a href="/web/person.html" target="iframe的name">
(2) iframe框架：<iframe name="iframe的name"></iframe>
注意：保证a超链接的target的内容 和 iframe的name一致，即可完成超链接指定iframe处切换新页面。

  4. 案例：
    在这里插入图片描述

相关文章：

页面技术基础-html

页面技术基础-html 环境准备&#xff1a;在JDBC中项目上完成代码定义 1. 新建一个 Module:filr->右键 -》Module -》Java-》next->名字(html_day1)->finish 2. 在 Moudle上右键-》第二个选项&#xff1a;add framework .. -> 选择JavaEE下第一个选项 Web Apllicat…...

编程日记 2023/8/4 3:13:33

/lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.28‘ not found

某项目中&#xff0c;我要给别人封装一个深度学习算法的SDK接口&#xff0c;运行在RK3588平台上&#xff0c;然后客户给我的交叉编译工具链是 然后我用他们给我的交叉编译工具链报下面的错误&#xff1a; aarch64-buildroot-linux-gnu-gcc --version /data/chw/aarch64/bin/cca…...

编程日记 2023/8/4 3:12:28

解决SVN或GIT忽略提交文件的问题

背景 使用IDEA 的SVN插件提交文件是总是会提交一些不需要提交的文件; 我们可以通过一些简单设置忽略这些文件。 git 在项目根目录新建文本文件&#xff0c;修改后缀为.gitignore 文件中添加内容 *.iml .project .gradle/ .idea/ target/ build/ .vscode/ .settings/ .facto…...

编程日记 2023/8/4 3:11:27

Django框架之路由用法

简介 路由简单的来说就是根据用户请求的 URL 链接来判断对应的处理程序&#xff0c;并返回处理结果&#xff0c;也就是 URL 与 Django 的视图建立映射关系。 Django 路由在 urls.py 配置&#xff0c;urls.py 中的每一条配置对应相应的处理方法。 Django 不同版本 urls.py 配…...

编程日记 2023/8/4 3:10:22

回文链表 LeetCode热题100

题目 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 思路 利用快慢指针找到链表中间节点&#xff0c;反转后半段链表。前半段从头节点开始与后半段比较。 注意当链表节点…...

编程日记 2023/8/4 3:09:20

如何在群晖NAS中使用cpolar内网穿透

如何在群晖nas中使用cpolar内网穿透 文章目录 如何在群晖nas中使用cpolar内网穿透 今天&#xff0c;我们来为大家介绍&#xff0c;如何在群晖系统中&#xff0c;使用图形化界面的cpolar。 cpolar经过图形化改造后&#xff0c;使用方法已经简便了很多&#xff0c;基本与其他应用…...

编程日记 2023/8/4 3:08:18

无头单向不循环链表和带头双向循环链表的创建

Lei宝啊&#xff1a;个人主页 愿所有美好不期而遇 前言&#xff1a; 接下来我们将会了解最基础的链表--->单链表 以及最方便也是最爽的链表--->带头双向循环链表。 若有看不懂之处&#xff0c;可画图或者借鉴这里&#xff1a;反转单链表&#xff0c;对于数据结构而言&am…...

编程日记 2023/8/4 3:07:17

超简单的fastapi链接websocket用例

main.py from typing import Listfrom fastapi import FastAPI, WebSocket, WebSocketDisconnectapp FastAPI()class ConnectionManager:def __init__(self):# 存放激活的ws连接对象self.active_connections: List[WebSocket] []async def connect(self, ws: WebSocket):# 等…...

编程日记 2023/8/4 3:06:16

MySQL详解

目录 一、MySQL 概述二、MySQL 安装和配置三、MySQL 基础语法四、MySQL 高级语法五、MySQL 性能优化六、MySQL 应用场景和实例七、MySQL 开发工具和插件八、MySQL 学习资源和社区 一、MySQL 概述 MySQL 是一种开源的关系型数据库管理系统&#xff0c;最初由瑞典的 MySQL AB 公…...

编程日记 2023/8/4 3:05:10

Vue [Day2]

指令修饰符 v-model.trim v-model.number 事件名.stop click.stop 事件名.prevent keyup.enter <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-w…...

编程日记 2023/8/4 3:04:09

【前端｜Javascript第1篇】一文搞懂Javascript的基本语法

欢迎来到JavaScript的奇妙世界&#xff01;作为前端开发的基石&#xff0c;JavaScript为网页增色不少&#xff0c;赋予了静态页面活力与交互性。如果你是一名前端小白&#xff0c;对编程一无所知&#xff0c;或者只是听说过JavaScript却从未涉足过&#xff0c;那么你来对了地方…...

编程日记 2023/8/4 3:03:07

【Linux命令200例】cp用于复制文件和目录（常用）

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;本文已收录于专栏&#xff1a;Linux命令大全。 &#x1f3c6;本专栏我们会通过具体的系统的命令讲解加上鲜…...

编程日记 2023/8/4 3:02:05

C高级_第二讲_shell指令和shell脚本_递归练习

思维导图 递归实现&#xff0c;输入一个数&#xff0c;输出这个数的每一位 int funh(int num){if(0 num){return 0;}else{funh(num/10);printf("%d\n", num%10);} }int main(int argc, const char *argv[]) {puts("请输入一个数");int num 0;scanf(&quo…...

编程日记 2023/8/4 3:01:04

静态路由综合实验

实验拓扑如下&#xff1a; 实验要求如下&#xff1a; 【1】R6为isp&#xff0c;接口IP地址均为公有地址;该设备只能配置IP地址&#xff0c;之后不能再对其进行任何配置 【2】R1~R5为局域网&#xff0c;私有IP地址192.168.1.0/24&#xff0c;请合理分配 【3】所有路由器上环回…...

编程日记 2023/8/4 3:00:03

Spring核心IOC控制反转思想-----Spring框架

import org.junit.Test;public class TestPublic {Testpublic void Test(){//控制反转是一种思想,是为了提高程序扩展力降低耦合度,达到DIP(Dependency Inversion Principle依赖倒置)原则//其核心是将对象的创建权交出去,由第三方容器负责管理,将对象和对象之间的维护权交出去,…...

编程日记 2023/8/4 2:58:00

中小企业如何做好MES管理系统实施建设

中小企业在生产制造领域面临着诸多挑战&#xff0c;包括提升产品竞争力、规范生产制造等。为了应对这些挑战&#xff0c;越来越多的中小企业开始实施MES生产管理系统。然而&#xff0c;由于企业规模小、资源实力不足等原因&#xff0c;很多企业在实施MES管理系统时存在一定的困…...

编程日记 2023/8/4 2:56:58

java环境搭建 Ubuntu Linux

jdk的安装和配置环境变量 使用apt sudo apt install default-jdk若是安装成功了在终端输入java -version来查看是否安装成功 使用官网下载的jdk包 直接在百度上搜索jdk&#xff0c;选择图片这个 网址:jdk下载网址 若是arm就选择带有arm的&#xff0c;反之选择x64的&#…...

编程日记 2023/8/4 2:55:57

微信小程序使用mp-html遇到的问题并解决

1、在本地配置寻找勾选使用npm 查了之后发现2023了 不需要勾选了 默认使用npm 2、在微信小程序编辑器左上角的 工具-->构建npm 然后就报错了 于是搜索到以下的内容&#xff1a; 没有找到可以构建的NPM包&#xff0c;请确认需要参与构建的npm都在 miniprogramRoot 目录内 -…...

编程日记 2023/8/4 2:54:56

【VTK】基于读取出来的 STL 模型，当用户点击鼠标左键时，程序将获取点击位置的点，显示其坐标，并设置它为模型的旋转原点

知识不是单独的&#xff0c;一定是成体系的。更多我的个人总结和相关经验可查阅这个专栏&#xff1a;Visual Studio。 文章目录 class PointPickedSignal : public QObjectclass MouseInteractorCommand : public vtkCommandvoid A::on_pushButtonSelected_clicked()void A::on…...

编程日记 2023/8/4 2:53:55

【第一阶段】kotlin的when表达式

1.Java 的if /when是语句 kotlin的if/when是表达式&#xff0c;表达式是有返回值的 java中void是个关键字&#xff0c;Unit在kotlin中是个类 2.当使用when语句的时候必须有一个不满足的值即else: fun main() {var week:Int5val info when(week){1->"今天是星期一"…...

编程日记 2023/8/4 2:52:52

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/6/17 14:38:10

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/6/22 6:20:33

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/6/23 4:26:05

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2025/6/21 14:21:07

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/6/21 16:36:57

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/6/20 18:29:18

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2025/6/26 12:20:19

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2025/6/26 1:16:57

Leetcode33（ 搜索旋转排序数组）

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

编程新知 2025/6/21 10:07:27

Python 高效图像帧提取与视频编码：实战指南

Python 高效图像帧提取与视频编码：实战指南 在音视频处理领域，图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库（如 OpenCV、FFmpeg、PyAV），可以高效处理视频流，实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程，提高处理…...

编程新知 2025/6/16 17:50:54