深入理解HTML基础【代码审计实战指南】

文章目录

  • JAVA技术体系的说明
    • 步骤
  • 前端和后端技术栈
  • 网页的组成
        • 1. 结构 (HTML)
        • 2. 表现 (CSS)
        • 3. 行为 (JavaScript / JQuery)
  • HTML的基本结构
  • 标签使用细节：
  • font标签的使用
  • 字符实体
    • 含义：
    • 常用的特殊字符：
  • 标题标签
  • 超链接标签
  • 列表标签
    • 无序列表
      • ul/li 基本语法
      • 代码示例：
    • 有序列表
      • ol/li 基本语法
      • 代码示例：
  • 图像标签
      • img标签简介
      • 代码举例
  • 表格标签
      • 基本语法
      • 代码示例

JAVA技术体系的说明

学习参考：HTML 教程 (w3school.com.cn)

在这里插入图片描述

步骤

  1. 浏览器 (B) 发送请求

    • 用户在浏览器中输入地址，例如 http://www.xx.com/login​。
    • 浏览器发出 HTTP 请求，请求被发送到指定的 URL。

  2. 服务器 (Server: S) 接收请求

    • 服务器运行在 Windows、Linux 或 Unix 系统上。
    • 服务器上配置了 Tomcat 和 Nginx 作为 容器和Web 服务器。

  3. Web 服务器处理请求

    • Tomcat+Nginx 负责接收和处理来自浏览器的 HTTP 请求。

    • Web 服务器的功能包括：

      1. 解析 HTTP 请求。
      2. 做相应的处理，比如调用对应的 Servlet 或返回对应的页面。

  4. 容器处理请求

    • 请求被传递到容器，容器中包含各种资源，如 Java、Servlet、HTML、CSS、JavaScript 等。
    • Servlet 处理业务逻辑，生成响应内容。

  5. 数据库 (DB) 交互

    • 如果请求需要访问数据库，Servlet 会与数据库进行交互。
    • 支持的数据库包括 MySQL、Oracle、DB2、SQL Server 等。
    • 数据库返回所需的数据给 Servlet。

  6. 生成响应并返回

    • Servlet 将处理结果生成 HTTP 响应。
    • Tomcat+Nginx 将响应发送回浏览器。

  7. 浏览器显示结果

    • 浏览器接收并解析服务器返回的 HTTP 响应。
    • 用户在浏览器中看到最终的结果页面。

前端和后端技术栈

  • 前端技术栈

    • HTML、CSS、JavaScript（前三个是主体） 、Vue、React、AJAX、jQuery 等。
    • 重点在于基本使用和前后端数据交互。

  • 后端技术栈

    • Java 技术，包括 Java 基础、组件、框架、模块等。（也可以是其他语言）
    • 主要工具和框架：Servlet、JavaBean、Spring、SpringMVC、MyBatis、SpringBoot、SpringCloud 等。
    • 数据库：MySQL、Oracle、DB2、SQL Server、Redis、MongoDB 等。
    • 消息中间件：RabbitMQ、RocketMQ 等。

网页的组成

1. 结构 (HTML)

  • HTML 是网页内容的载体。

    • 内容包括网页制作者放在页面上希望用户浏览的信息，如文字、图片、视频等。
2. 表现 (CSS)

  • CSS 样式是表现。

    • 就像网页的外衣，决定了网页的视觉呈现。

    • 示例：

      • 标题字体、颜色变化
      • 标题背景图片、边框等
3. 行为 (JavaScript / JQuery)

  • JavaScript 用来实现网页上的特效。

    • 示例：

      • 鼠标滑过弹出下拉菜单
      • 鼠标滑过表格背景色变化
      • 购物网站图片轮换

    • 交互和动画效果通常通过 JavaScript 实现。

HTML的基本结构

<!DOCTYPE html>   
<!-- DOCTYPE表示文档类型，html就是HTML超文本标记语言.<!>，表示警示标签。 -->  
<html lang="en">  <!-- lang：标签属性，表示语言，中文为：zh、cn、zh-CN --> <head>                   <!-- head标签：告诉浏览器，这是html网页的头部信息，例如：网页标题、编码类型、网页关键字 --><!-- meta标签:<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。--><meta charset="UTF-8">  <!-- character set：标签属性，字符集编码，表示当前网页的编码为UTF-8--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>   <!-- title标签：设置网页标题，就是在浏览器选项卡的区域显示的文字--></head><body><!-- body内编写网页的正文内容，浏览器可视区域 --></body>
<!-- html双标签：这对标签告诉浏览器，标签里面的内容就是网页内容 -->
</html>

标签使用细节：

  1. 标签不能交叉嵌套
  2. 标签必须正确关闭
  3. 注释不能能嵌套
  4. html语法不严谨，有时候标签不闭合，属性值不带""也不报错

font标签的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>font标签</title>
</head>
<body><!--字体标签应用实例1：在网页上显示北京，并修改字体为微软雅黑，颜色为蓝色。font标签是字体标签，它可以用来修改文本的字体，颜色，大小（1）color属性修改颜色（2）face属性修改字体（3）size属性修改文本大小多说一句，对应标签的属性，顺序不做要求--><font size="40px" face="微软雅黑" color="blue">北京</font>
</body>
</html>

在这里插入图片描述

字符实体

含义：

相当于转义字符

常用的特殊字符：

![

标题标签

  • 标题使用

    —

    标签进行定义。

    定义最大的标题。

    定义最小的标题

  • 应用实例：

    • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标题标签</title>
</head>
<body><!-- 标题标签应用实例：演示标题1到标题6的h1—h6都是标题标签h1：最大h6：最小align：属性是对齐属性left：左对齐（默认）center:居中 right:右对齐 --><h1>标签1</h1><h2>标签2</h2><h3 align="center">标签3</h3><h4>标签4</h4><h5>标签5</h5><h6 align="right">标签6</h6>
</body>
</html>

在这里插入图片描述

超链接标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接标签</title>
</head>
<body><!-- 老韩说明： a标签是超链接href属性设置连接的地址target 属性设置哪个目标进行跳转_self：表示当前页面（默认值），即使用当前替换目标页blank：表示打开新页面来进行跳转点击超链接，打开邮件--><a href="http://www.sohu.com">搜狐</a><br/><a href="http://www.sohu.com" target="_blank">搜狐2</a><br/><a href="mailto:tom@sohu.com">联系管理员</a>
</body>
</html>

在这里插入图片描述

列表标签

无序列表

  1. ul/li 基本语法

      • 列表内容
    2. 设定符号款式，其值有三种，如下：默认为 type=“disc”:
      type=“disc” 时的列项符号为实心圆点。
      type=“circle” 时的列项符号为空心圆。
      type=“square” 时的列项符号为空心正方形。

  2. 代码示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ul li 标签</title></head><body><!--ul: 表示无序列表li: 列表项type 属性：指定列表项前的符号--><h1>五虎将</h1><ul type="square"><li>jack</li><li>tom</li><li>smith</li><li>mary</li><li>milan</li></ul></body></html>

在这里插入图片描述

有序列表

  1. ol/li 基本语法

      1. 列表内容

      1. 解释：

        1. ​<ol>​ 称为顺序列表标签

          ​<li>​ 则用以标示列表项目，又称编号列表。

          ​<ol>​ 的属性设定（常用）：

        2. ​type​ 设定数目样式，其值有五种，默认为 type="1"​。type​ 可以取以下值中的任意一个：

          1. 阿拉伯数字：1，2，3，…
          2. 小写字母：a，b，c，…
          3. 大写字母：A，B，C，…
          4. 小写罗马数字：i，ii，iii，…
          5. 大写罗马数字：I，II，III，…

    2. 代码示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>有序列表 ol-li</title></head><body><!--ol: 表示有序列表li: 列表项type 属性：指定列表项前排序方式type 设定数目样式，其值有五种，默认为 start="1"。type 可以取以下值中的任意一个：1. 阿拉伯数字 1，2，3，...2. 小写字母 a，b，c，...3. 大写字母 A，B，C，...4. 小写罗马数字 i，ii，iii，...5. 大写罗马数字 I，II，III，...--><h1>五虎将</h1><ol type="I" start="3"><li>jack</li><li>tom</li><li>smith</li><li>mary</li><li>milan</li></ol></body></html>

    在这里插入图片描述

    图像标签

    1. img标签简介

       * 作用：可以在html页面上显示图片* 基本格式：<img src="图片路径">* 属性：* src：设置图片路径* width：设置图片宽度* height：设置图片高度* border：设置图片边框大小* alt：src属性设置的路径找不到图片时，用来替代显示的文本内容

    2. 代码举例

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><p>这是我女神</p><!--在进行图片缩放时，建议指定width或者height即可，游览器会按照比例显示--><img src="./1.png" width="400" border="10"><img src="./666.png" alt="找不到该图片"></body></html>

    表格标签

    1. 基本语法

    2. 代码示例

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表格标签</title></head><body><!--说明：table: 表格标签border: 设置表格边框宽度width: 设置表格宽度height: 设置表格高度align: 设置表格相对于页面的对齐方式cellspacing: 设置表格单元格间的空隙cellpadding: 设置表格单元格内的填充tr: 行标签th: 表头标签td: 单元格标签align: 设置单元格文本对齐方式b: 加粗标签--><table width="500" border="6" align="center"><h1 align="center">表格标签的使用</h1><tr><th>名字</th><th>住址</th><th>邮件</th></tr><tr><td>第1行第1列</td><td>第1行第2列</td><td>第1行第3列</td></tr><tr><td>第2行第1列</td><td>第2行第2列</td><td>第2行第3列</td></tr><tr><td>第3行第1列</td><td>第3行第2列</td><td>第3行第3列</td></tr></table></body></html>

    在这里插入图片描述

    文本来源：韩顺平java课程笔记

    本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/3249453.html

    如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

    相关文章

    谷粒商城-商品上架

    谷粒商城-商品上架

    1.sku在es中的存储模型分析(spring整和es) es中所有数据存在内存中,内存产品贵,能节省就节省,只保存有用的信息 两种保存方法:(空间换时间,时间换空间): 我们选空间换时间 ES中放这些东西: "mappings": { "properties": { "skuId"…
    阅读更多...
    verilog bug记录——正点原子spi_drive存在的问题

    verilog bug记录——正点原子spi_drive存在的问题

    verilog bug记录——正点原子spi_drive存在的问题 问题概述代码修改—spi_drive.v遗留问题 问题概述 因为项目需求&#xff0c;需要利用spi对flash进行擦除和写入操作&#xff0c;所使用的开发板是正电原子的达芬奇开发板&#xff0c;我事先往Flash里面存了两个bit&#xff0c…
    阅读更多...
    数据挖掘与分析部分实验与实训项目报告

    数据挖掘与分析部分实验与实训项目报告

    一、机器学习算法的应用 1. 朴素贝叶斯分类器 相关代码 import pandas as pd from sklearn.model_selection import train_test_split from sklearn.naive_bayes import GaussianNB, MultinomialNB from sklearn.metrics import accuracy_score # 将数据加载到DataFrame中&a…
    阅读更多...
    【已解决】Django连接MySQL启动报错Did you install mysqlclient?

    【已解决】Django连接MySQL启动报错Did you install mysqlclient?

    在终端执行python manage.py makemigrations报错问题汇总 错误1&#xff1a;已安装mysqlclient&#xff0c;提示Did you install mysqlclient? 当你看到这样的错误信息&#xff0c;表明Django尝试加载MySQLdb模块但未找到&#xff0c;因为MySQLdb已被mysqlclient替代。 【解…
    阅读更多...
    【删除排序链表中的重复元素 II】python刷题记录

    【删除排序链表中的重复元素 II】python刷题记录

    因为可能删除头结点&#xff0c;所以我们采用dummy哑结点&#xff08;跟上一篇类似&#xff09; dummy初始化 dummyListNode(0,head) # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # …
    阅读更多...
    黑客自学手册（网络安全）

    黑客自学手册（网络安全）

    前言 一、什么是网络安全 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域&#xff0c;都有攻与防…
    阅读更多...
    网络安全----防御----防火墙双机热备

    网络安全----防御----防火墙双机热备

    实验要求&#xff1a; 1&#xff0c;对现有网络进行改造升级&#xff0c;将当个防火墙组网改成双机热备的组网形式&#xff0c;做负载分担模式&#xff0c;游客区和DMZ区走FW4&#xff0c;生产区和办公区的流量走FW1 2&#xff0c;办公区上网用户限制流量不超过100M&#xff0…
    阅读更多...
    如何将PDF转换成可以直接编辑的CAD图纸？

    如何将PDF转换成可以直接编辑的CAD图纸？

    PDF图纸是为了让用户更好的阅览CAD文件&#xff0c;但是&#xff0c;当我们想要对其进行编辑的时候&#xff0c;PDF图纸就是一个麻烦了。那么PDF转换成CAD后可以编辑吗&#xff1f;如何将PDF转换成可以直接编辑的CAD图纸呢&#xff1f;本篇给你答案。 1、启动迅捷CAD编辑器&…
    阅读更多...
    不同业务场景下通过mars3d实现绕点旋转效果

    不同业务场景下通过mars3d实现绕点旋转效果

    1.鼠标单击地图某一处就对该点进行绕点旋转效果 相关代码&#xff1a; 1.相关绕点旋转的初始化代码&#xff1a; const rotatePoint new mars3d.thing.RotatePoint({direction: false, // 方向 true逆时针&#xff0c;false顺时针time: 50 // 给定飞行一周所需时间(单位 秒)&…
    阅读更多...
    python如何输入矩阵

    python如何输入矩阵

    使用numpy创建矩阵有2种方法&#xff0c;一种是使用numpy库的matrix直接创建&#xff0c;另一种则是使用array来创建。 首先导入numpy&#xff1a; &#xff08;1&#xff09;import numpy &#xff08;2&#xff09;from numpy import * &#xff08;3&#xff09;import …
    阅读更多...
    WPF/C#：实现导航功能

    WPF/C#：实现导航功能

    前言 在WPF中使用导航功能可以使用Frame控件&#xff0c;这是比较基础的一种方法。前几天分享了wpfui中NavigationView的基本用法&#xff0c;但是如果真正在项目中使用起来&#xff0c;基础的用法是无法满足的。今天通过wpfui中的mvvm例子来说明在wpfui中如何通过依赖注入与M…
    阅读更多...
    WinOS下获取dll中的方法列表

    WinOS下获取dll中的方法列表

    开发的Windows应用程序的安装环境从Win11 23H2切换到24H2时&#xff0c;出现获取电源模式不正确的问题&#xff0c;通过debug代码发现获取电源模式的方法是走的方法编号。由于Win11 24H2中增加了对外提供的方法&#xff0c;而增加的方法放在方法列表中间&#xff0c;导致其后面…
    阅读更多...
    SpringMVC的底层工作原理？

    SpringMVC的底层工作原理？

    1.用户发送请求至前端控制器DispatcherServlet. 2.DispatcherServlet 收到请求调用 HandlerMapping 处理器映射器 3.HandlerMapping找到具体的处理器(可以根据 xml 配置、注解进行查找&#xff09;&#xff0c;生成处理器及处理器拦截器(如果有则生成)一并返回给DispatcherSe…
    阅读更多...
    了解财税RPA的背景和意义

    了解财税RPA的背景和意义

    作为数字化转型的助推器&#xff0c;RPA近年来正掀起传统财务转型与变革的浪潮&#xff0c;企业想要在数字时代中持续发展繁荣&#xff0c;必须以财务转型为起点&#xff0c;以科技为手段&#xff0c;积极迎接智慧财务的未来。本文金智维将分析财税RPA在财务和税务领域的应用&a…
    阅读更多...
    php 小白新手从入门到精通教程（第3版）

    php 小白新手从入门到精通教程（第3版）

    前言 PHP&#xff08;PHP: Hypertext Preprocessor&#xff09;即“超文本预处理器”&#xff0c;是在服务器端执行的脚本语言&#xff0c;尤其适用于Web开发并可嵌入HTML中。PHP语法学习了C语言&#xff0c;吸纳Java和Perl多个语言的特色发展出自己的特色语法&#xff0c;并根…
    阅读更多...
    Pytorch基础应用

    Pytorch基础应用

    1.数据加载 1.1 读取文本文件 方法一&#xff1a;使用 open() 函数和 read() 方法 # 打开文件并读取全部内容 file_path example.txt # 替换为你的文件路径 with open(file_path, r) as file:content file.read()print(content)方法二&#xff1a;逐行读取文件内容 # 逐…
    阅读更多...
    GPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建

    GPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建

    原文链接&#xff1a;GPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247608565&idx3&snd4e9d447efd82e8dd8192f7573886dab&chksmfa826912cdf5e00414e01626b52bab83a96199a6bf69cbbef7f7fe…
    阅读更多...
    Web开发：ASP.NET CORE的后端小结（基础）

    Web开发：ASP.NET CORE的后端小结（基础）

    1.后端重定向到指定路由 public IActionResult Index(){return RedirectToAction("Index", "Main");//重定向>Main/Index} 【备注】如果在MainController的Index方法中return View();本质是 return View("Index")&#xff0c;返回和方法同名的…
    阅读更多...
    LabVIEW和Alicat Scientific质量流量计实现精确流量控制

    LabVIEW和Alicat Scientific质量流量计实现精确流量控制

    在现代工业自动化和科研实验中&#xff0c;精确的气体流量控制至关重要。这里将介绍一个使用LabVIEW与Alicat Scientific公司的质量流量计实现流量控制的项目。项目采用Alicat Scientific的质量流量计&#xff08;型号&#xff1a;M-200SCCM-D&#xff09;&#xff0c;通过LabV…
    阅读更多...
    memcached 高性能内存对象缓存

    memcached 高性能内存对象缓存

    memcached 高性能内存对象缓存 memcache是一款开源的高性能分布式内存对象缓存系统&#xff0c;常用于做大型动态web服务器的中间件缓存。 mamcached做web服务的中间缓存示意图 当web服务器接收到请求需要处理动态页面元素时&#xff0c;通常要去数据库调用数据&#xff0c;但…
    阅读更多...
    最新文章

    Copyright @ 2022~2023