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

【Java Web】速通HTML

article 2025/6/2 0:12:32

参考笔记： JavaWeb 速通HTML_java html页面-CSDN博客

目录

一、前言

        1.网页组成

                1° 结构

                2° 表现

                3° 行为

        2.HTML入门

                1° 基本介绍

                2° 基本结构

        3. HTML标签

                1° 基本说明

                2° 注意事项

        4. HTML概念名词解释

二、HTML常用标签汇总 + 案例演示

        1. 字体标签 font

                （1）定义

                （2）案例

        2. 字符实体

                （1）定义

                （2）案例

        3. 标题标签 h

                （1）定义

                （2）案例 

        4. 超链接标签 a 

                （1）定义

                （2）案例

        5. 列表标签

                5.1 无序列表 ul

                        （1）定义

                        （2）案例

                5.2 有序列表 ol

                        （1）定义

                        （2）案例 

        6. 图像标签 img

                （1）定义

                （2）案例

         7.表格标签 table ⭐⭐

                （1）定义

                （2）案例

        8. 表单标签 form ⭐⭐⭐⭐

                （1）定义

                （2）常用的表单项标签

        （3）关于表单提交数据

        （4）get请求和post请求的区别

        9. p标签

                （1）定义

                （2）案例

        10. 布局相关标签 div 和 span

                （1）定义

                （2）案例

三、总结

一、前言

        1.网页组成

                1° 结构

         HTML 是网页内容的载体。"网页内容"就是指网页制作者放在页面上想要让用户浏览的信息，包括文字，图片，视频等。如下就是基础的没有任何 CSS 样式的 HTML 页面

                2° 表现

        CSS 样式是表现，就像网页的外衣。例如：标题字体，颜色变化，或为标题加入背景图片，边框等。所有这些用来改变内容外观的东西称之为表现。如下就是在上面的 HTML 页面中加入了 CSS 样式，使得页面更加好看

                3° 行为

        JavaScript 是用来实现网页上的特效效果。例如: 鼠标滑过就弹出下拉菜单；或点击某个按钮页面就发生跳转；亦或者购物网站中图片的轮换。一般地，有动画，有交互的需求都是用 JavaScript 来实现的。如下所示：

        2.HTML入门

                1° 基本介绍

      ①  HTML，全称 HyperText Mark-up Language ，即超文本标记语言。HTML 文本是由 HTML 标签组成的文本，可以包括文字，图形，动画，声音，表格，链接等。HTML 的结构主要包括头 Head 和身体 Body  两大部分，其中头部 Head 用于描述浏览器所需的信息，而身体 Body 则包含所要说明的具体内容

     ②  HTML 文件不需要编译，直接由浏览器进行解析执行

                2° 基本结构

                HTML  的基本结构如下图所示：

        3. HTML标签

                1° 基本说明

        ① HTML 标签使用一对尖括号 <> 括起来；

        ② HTML 标签一般都是双标签，如 <a></a>，前一个标签是起始标签，后一个标签是结束标签

        ③ HTML 中也有单标签，单独使用就能完整地表述信息。例如：换行标签 <br/> 、水平线标签 <hr/>

        ④ 起始标签 <> 内部的内容，称为标签的属性，属性值要用双引号 "" 引起来。例如：

 <font color = "red" >你好，我是小马</font>

上面代码中的 color  即为标签 <font></font> 的属性，表示设置字体颜色

                2° 注意事项

        ① 标签不能交叉嵌套，必须始末对应

        ② 标签必须正确关闭

        ③ 注释不能嵌套

        ④ HTML 语法不严谨（不同浏览器的解析方式不尽相同，因此不能太严谨）。有时候标签不闭合，属性值不带 "" 也不会报错

        4. HTML概念名词解释

        ① 标签：这个前面解释过了

        ② 属性：起始标签 <> 内部的内容，称为标签的属性，属性值要用双引号 "" 引起来。例如：

<font id = "id1" color = "red" >你好,我叫小马</font>

        上面代码中，id、 color  即为标签 <font></font> 的属性

        ③ 文本：双标签中间的文字内容，包含空格换行等结构

        ④ 元素：经过浏览器解析后，每一个完整的标签（标签 + 属性 + 文本）可以称之为一个元素

二、HTML常用标签汇总 + 案例演示

        1. 字体标签 font

                （1）定义

        font 是字体标签，它可以用户修改文本的字体、颜色，大小。其中：

                face 属性：修改字体的样式

                color 属性：修改字体的颜色

                size 属性：修改字体的大小

        PS : ① 标签中的属性没有顺序要求
                ② font 标签已经过时，一般使用 CSS 来代替

                （2）案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><font face = "consolas" color = "blue" size = "16px">show your content</font></body>
</html>

                运行效果：

        2. 字符实体

                （1）定义

        在网页上显示的一些特殊符号，称为字符实体，也叫符号实体

        常见特殊字符如下 : 

                ① &nbsp; —— 空格（每输入一个 ，显示一个空格)

                ② &lt; —— 左尖括号 <

                ③ &gt; —— 右尖括号 >

                常用的字符实体表如下：

                （2）案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>字符实体演示</title></head><body>&lt;hr/&gt;<hr/><!--水平线标签--><font color = "blue" size = "16px">小马&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;okk</font></body>
</html>

                运行效果：

相关文章：

【Java Web】速通HTML

参考笔记： JavaWeb 速通HTML_java html页面-CSDN博客 目录 一、前言 1.网页组成 1 结构 2 表现 3 行为 2.HTML入门 1 基本介绍 2 基本结构 3. HTML标签 1 基本说明 2 注意事项 4. HTML概念名词解释 二、HTML常用标签汇总 + 案例演示 1. 字体标签 font （1）定义 （2）案例 2…...

编程日记 2025/6/2 0:12:32

在线制作幼教早教行业自适应网站教程

你想知道怎么做自适应网站吗&#xff1f;今天就来教你在线用模板做个幼教早教行业的网站哦。 首先得了解啥是自适应网站。简单说呢&#xff0c;自适应网站就是能自动匹配不同终端设备的网站&#xff0c;像手机、平板、电脑等。那如何做幼早教自适应网站呢&#xff1f; 在乔拓云…...

编程日记 2025/5/31 13:52:17

WSL 开发环境搭建指南：Java 11 + 中间件全家桶安装实战

在WSL&#xff08;Windows Subsystem for Linux&#xff09;环境下一站式安装开发常用工具&#xff0c;能极大提升工作效率。接下来我将分步为你介绍如何在WSL中安装Java 11、Maven、Redis、MySQL、Nacos、RabbitMQ、RocketMQ、Elasticsearch&#xff08;ES&#xff09;和Node.…...

编程日记 2025/6/1 20:26:29

matlab天线阵列及GUI框架,可用于相控阵，圆形阵，矩形阵

构建天线阵列及GUI框架,可用于相控阵&#xff0c;圆形阵&#xff0c;矩形阵等 array/array.fig , 35384 array/array.m , 15582 array/circ_array.m , 5959 array/circular_array.m , 4238 array/fig8_5.m , 851 array/fig8_53.m , 441 array/fig8_7.m , 847 array/initialize…...

编程日记 2025/6/1 20:19:08

在 Ubuntu 终端中配置网络代理：优化 npm、apt等的下载速度

文章目录 背景步骤 1&#xff1a;测试网络连通性步骤 2&#xff1a;设置终端代理步骤 3&#xff1a;为 npm 配置代理步骤 4&#xff1a;为 apt 配置代理步骤 5&#xff1a;持久化代理设置注意事项总结 在开发中&#xff0c;网络环境有时会影响工具的下载速度&#xff0c;例如 …...

编程日记 2025/6/1 23:45:27

Apptrace：APP安全加速解决方案

2021 年&#xff0c;某知名电商平台在 “618” 大促期间遭遇 DDoS 攻击&#xff0c;支付系统瘫痪近 2 小时&#xff1b;2022 年&#xff0c;一款热门手游在新版本上线时因 CC 攻击导致服务器崩溃。观察发现&#xff0c;电商大促、暑期流量高峰和年末结算期等关键商业周期&#…...

编程日记 2025/6/1 20:11:20

Dockerfile 构建优化的方法

1.选择合适的 Base Image 使用轻量级基础镜像&#xff1a;尽量选择体积较小的基础镜像&#xff0c;例如 alpine 或 distroless。例如&#xff1a; FROM python:3.9-slim FROM alpine:3.14避免使用大型基础镜像&#xff1a;大型镜像会增加构建时间和镜像体积。 2. 减少镜像层数…...

编程日记 2025/6/1 19:50:22

Web攻防-SQL注入增删改查HTTP头UAXFFRefererCookie无回显报错

知识点&#xff1a; 1、Web攻防-SQL注入-操作方法&增删改查 2、Web攻防-SQL注入-HTTP头&UA&Cookie 3、Web攻防-SQL注入-HTTP头&XFF&Referer 案例说明&#xff1a; 在应用中&#xff0c;存在增删改查数据的操作&#xff0c;其中SQL语句结构不一导致注入语句…...

编程日记 2025/6/1 20:30:25

Python中openpyxl库的基础解析与代码实例

目录 1. 前言 2. 安装openpyxl 3. 创建一个新的工作簿 4. 打开一个已有的工作簿 5. 读取和写入单元格 6. 操作工作表 7. 样式设置 8. 插入图像 9. 插入图表 10. 数据验证 11. 条件格式 12. 工作簿保护 13. 保存和关闭工作簿 14. 总结 1. 前言 在数据分析和处理的…...

编程日记 2025/6/1 14:01:46

GoldenDB管理节点zk部署

目录 1、准备阶段 1.1、部署规划 1.2、硬件准备 1.3、软件准备 1.4、网络端口开通 1.5、环境清理 2、实施阶段 2.1、操作系统配置 2.1.1、主机名修改 2.1.2、修改hosts文件 2.1.3、禁用防火墙 2.1.4、禁用selinux 2.1.5、禁用透明大页 2.1.6、资源限制调整 2.1.…...

编程日记 2025/6/1 20:42:47

mac mini m4命令行管理员密码设置

附上系统版本图 初次使用命令行管理员&#xff0c;让输入密码&#xff0c;无论是输入登录密码还是账号密码&#xff0c;都是错的&#xff0c;百思不得其解&#xff0c;去网上搜说就是登录密码啊 直到后来看到了苹果官方的文档 https://support.apple.com/zh-cn/102367 https…...

编程日记 2025/6/1 18:33:39

计算机网络之差错控制中的 CRC（循环冗余校验码）

文章目录 1 概述1.1 简介1.2 特点1.3 基本原则 2 实现步骤3 例题 1 概述 1.1 简介 CRC&#xff1a;Cyclic Redundancy Check&#xff08;循环冗余校验&#xff09;是计算机网络中常用的一种差错控制编码方法&#xff0c;用于检测数据传输或存储过程中可能出现的错误。 1.2 特…...

编程日记 2025/5/31 13:41:52

红客 Linux 系统性全解析

红客 Linux 系统性全解析&#xff1a;从工具到实战的网络安全防御体系 一、红客与 Linux 的深度关联 红客&#xff08;Ethical Hacker&#xff09;作为网络空间的守护者&#xff0c;其核心使命是通过模拟攻击行为发现系统漏洞&#xff0c;从而强化防御能力。Linux 操作系统因…...

编程日记 2025/6/1 23:20:58

【深度学习】7. 深度卷积神经网络架构：从 ILSVRC、LeNet 到 AlexNet、ZFNet、VGGNet，含pytorch代码结构

深度卷积神经网络架构&#xff1a;从 ILSVRC 到 AlexNet 在2012年Alex出现之前&#xff0c;主要还是依赖于SVM&#xff0c;同时数据工程成为分类任务中很大的一个部分&#xff0c;对数据处理的专家依赖性高。 一、ILSVRC 与图像分类任务背景 ILSVRC 简介 ILSVRC&#xff08…...

编程日记 2025/6/1 22:14:19

基于cornerstone3D的dicom影像浏览器 第二十七章 设置vr相机，复位视图

文章目录 前言一、VR视图设置相机位置1. 相机位置参数2. 修改mprvr.js3. 调用流程1) 修改Toolbar3D.vue2) 修改View3d.vue3) 修改DisplayerArea3D.vue 二、所有视图复位1.复位流程说明2. 调用流程1) Toolbar3D中添加"复位"按钮&#xff0c;发送reset事件2) View3d.vu…...

编程日记 2025/6/1 23:21:55

2025年渗透测试面试题总结-匿名[校招]高级安全工程师(代码审计安全评估)（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。、 目录 匿名[校招]高级安全工程师(代码审计安全评估) 渗透基础 1. 自我介绍 2. SQL注入写Shell&#xff08;分数…...

编程日记 2025/6/1 13:51:55

Jenkins实践(7)：Publish over SSH功能

在 Jenkins 中使用Publish over SSH功能，需要安装对应的插件。以下是详细步骤： 1. 安装 Publish over SSH 插件 进入 Jenkins 管理界面 → Manage Jenkins → Manage Plugins。切换到 Available 选项卡，搜索 "Publish Over SSH"。勾选插件并点击 Install without…...

编程日记 2025/6/1 23:31:21

SQLite 中文写入失败问题总结

SQLite 中文写入失败问题总结与解决方案 在 Windows 下使用 C 操作 SQLite 数据库时&#xff0c;中文字段经常出现 写入成功但内容显示为 BLOB 或 乱码 的问题。根本原因在于 SQLite 要求字符串以 UTF-8 编码 存储&#xff0c;而默认的 std::string 中文通常是 GB2312/ANSI 编…...

编程日记 2025/5/31 13:35:32

JavaScript篇：闭包：JavaScript中的魔法口袋，装下你的编程智慧

大家好&#xff0c;我是江城开朗的豌豆&#xff0c;一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术&#xff0c;并深入掌握Vue、React、Uniapp、Flutter等主流框架&#xff0c;能够高效解决各类前端开发问题。在我的技术栈中&#xff0c;除了…...

编程日记 2025/6/1 18:38:19

ubuntu系统安装Pyside6报错解决

目录 1&#xff0c;问题&#xff1a; 2&#xff0c;解决方法&#xff1a; 2.1 首先查看pypi是否有你需要包的镜像&#xff1a; 2.2 其它方案&#xff1a; 2.3 如果下载很慢&#xff0c;可以换源&#xff1a; 2.4 查看系统架构 Windows Ubuntu 1&#xff0c;问题&#xf…...

编程日记 2025/6/1 23:21:27

DeepSeek 赋能智能零售：从数据洞察到商业革新

目录 一、智能零售的现状与挑战二、DeepSeek 技术特点剖析2.1 基于 Transformer 架构的深度优化2.2 多源数据的深度分析能力2.3 强大的学习与推理能力 三、DeepSeek 在智能零售中的应用场景3.1 精准需求预测3.2 智能补货决策3.3 库存优化布局3.4 个性化推荐与营销3.5 智能客服与…...

编程日记 2025/6/1 23:59:46

榕壹云医疗服务系统：基于ThinkPHP+MySQL+UniApp的多门店医疗预约小程序解决方案

在数字化浪潮下，传统医疗服务行业正面临效率提升与客户体验优化的双重挑战。针对口腔、美容、诊所、中医馆、专科医院及康复护理等需要预约或诊断服务的行业，我们开发了一款基于ThinkPHP+MySQL+UniApp的多门店服务预约小程序——榕壹云医疗服务系统。该系统通过模块化设计与开…...

编程日记 2025/6/1 14:30:27

苏州SAP代理公司排名：工业园区企业推荐的服务商

目录 一、SAP实施商选择标准体系 1、行业经验维度 2、实施方法论维度 3、资质认证维度 4、团队实力维度 二、SAP苏州实施商工博科技 1、SAP双重认证&#xff0c;高等院校支持 2、以SAP ERP为核心&#xff0c;助力企业数字化转型 三、苏州使用SAP的企业 苏州是中国工业…...

编程日记 2025/6/1 14:35:28

数据结构中无向图的邻接矩阵详解

在计算机科学的浩瀚宇宙中&#xff0c;数据结构无疑是那把开启高效编程大门的关键钥匙。对于计算机专业的大学生们来说&#xff0c;数据结构课程是专业学习路上的一座重要里程碑&#xff0c;而其中的图结构更是充满魅力与挑战&#xff0c;像一幅神秘的画卷等待我们去展开。今天…...

编程日记 2025/6/1 23:42:50

.NET 7 AOT 使用及 .NET 与 Go 语言互操作详解

.NET 7 AOT 使用及 .NET 与 Go 语言互操作详解 目录 .NET 7 AOT 使用及 .NET 与 Go 语言互操作详解 一、背景与技术概述 1.1 AOT 编译技术简介 1.2 Go 语言与 .NET 的互补性 二、.NET 7 AOT 编译实践 2.1 环境准备 2.2 创建 AOT 项目 2.3 AOT 编译流程 2.4 调试信息处…...

编程日记 2025/6/1 23:36:39

OpenCV 第7课 图像处理之平滑(一)

1. 图像噪声 在采集、处理和传输过程中，数字图像可能会受到不同噪声的干扰，从而导致图像质量降低、图像变得模糊、图像特征被淹没，而图像平滑处理就是通过除去噪声来达到图像增强的目的。常见的图像噪声有椒盐噪声、高斯噪声等。 1.1 椒盐噪声 椒盐噪声（Salt-and-pepper N…...

编程日记 2025/6/1 20:06:11

React 编译器

&#x1f916; 作者简介&#xff1a;水煮白菜王&#xff0c;一位前端劝退师 &#x1f47b; &#x1f440; 文章专栏&#xff1a; 前端专栏 &#xff0c;记录一下平时在博客写作中&#xff0c;总结出的一些开发技巧和知识归纳总结✍。 感谢支持&#x1f495;&#x1f495;&#…...

编程日记 2025/6/1 16:56:37

HCIP：MPLS静态LSP的配置及抓包

目录 一、MPLS的简单的一些知识点 1.MPLS的概述&#xff1a; 2.MPLS工作原理&#xff1a; 3.MPLS的核心组件&#xff1a; 4. MPLS标签 5.MPLS标签的处理 6.MPLS转发的概述&#xff1a; 7.MPLS的静态LSP建立方式 二、MPLS的静态LSP的实验配置 1.配置接口的地址和配置OS…...

编程日记 2025/5/31 13:25:17

VASP 教程：VASP 结合 Phonopy 计算硅的比热容

VASP 全称为 Vienna Ab initio Simulation Package&#xff08;The VASP Manual - VASP Wiki&#xff09;是一个计算机程序&#xff0c;用于从第一性原理进行原子尺度材料建模&#xff0c;例如电子结构计算和量子力学分子动力学。 Phonopy&#xff08;Welcome to phonopy — Ph…...

编程日记 2025/6/1 19:47:36

YOLO使用SAHI进行小目标检测

目录 一、环境配置二、使用ultralytics的YOLO模型进行训练和推理三、推理可视化的两种方法四、使用SAHI和ultralytics 训练的YOLO模型进行推理一、环境配置 下面是环境的配置过程，根据代码复杂度可以额外安装其他包。 #创建虚拟环境 conda create -n 环境名 python=3.9 #开启…...

编程日记 2025/6/1 16:20:53