【JavaEE】进入Web开发的世界-HTML

news2024/12/24 21:39:04

目录

 一、HTML 

1.1概念篇

1.2工具篇

1.2.1文本类型的标签

1.2.2多媒体标签

1.2.3超链接

1.2.4target

1.2.5表格相关的标签

 1.2.6 列表标签

1.2.7表单标签


进入Web开发的世界,了解html、css、JavaScript的使用。

Web开发的核心:准备各式各样的资源以及资源之间的相互关系。

主机 (host) 决定了资源位于网络中的哪台电脑 (主机) 上,通常是 IP 地址 或者是 域名。

端口(port)决定了 资源由主机上的哪个 进程 (process) 提供服务,这个进程就是我们所谓的 Web 服务器。

我们目前使用的是 Tomcat。认准我们平时使用的端口 :8080

资源路径 (path) 决定了请求的是 Web 服务器中的哪个资源。可以分成绝对路径 和 相对路径
我们所谓的 Web 开发,就是准备各种百相配合的 Web 资源的过程 

 一、HTML 

HTML属于前段的知识范畴,主要起到提供页面的结构和基本内容。目前不负责长什么样子。

1.1概念篇

1、超文本

比一般的文本能力跟更强,对于txt文本,可以有超链接。

2、怎么理解标记

HTML中的标签是有规定的,并不是任何标签都可以(最新的标准允许自定义标签)

通常标签是开始标签、内容和闭合标签组成的。有部分标签是单一标签

<h1>美好的一天</h1>(前面是开始标签 (open tag),后面是闭合标签 (close tag))

HTML 的结构也有规定,虽然大多数浏览器兼容不符合规定格式,但对于我们来说尽量去符合格式
IDEA 是可以帮我们生成内容的,一般写出来都符合格式。

 标签允许有属性 (attributes) 存在,放在 开始标签 里,基本格式是 key=value 的形式,注意,key=value,这个等号两边没有空格,其中,key 不需要引号引起来,value 需要引号引起来,单/双引号均可。

<meta charset="utf-8">代表 html 的字符集使用 utf-8。

1.2工具篇

大部分浏览器基本都有这套工具,但用法略有区别,所以我使用的是 chrome 浏览器,比较统一,由于版本的原因,也可能有所区别。

 介绍一些常见标签https://developer.mozilla.org/zh-CN/     mozilla 组织 (firefox 的开发团队)

1.2.1文本类型的标签

表示标题类型的标签 一级标题、二级标题...、六级标题
<h1>....</h1><h2>....</h2>默认的样式(以后是可以通过 css 修改的)... <h6>  一级标题最大,六级标题最小

html中的换行、空格最终显示的时候都是被视为一个空格。

html中有些标签是自带换行的(一般称为块级标签)还有一类标签是不带换行的一般称为内联标签。<p>也是块级标签,上述<h1>....<h6>也是块级标签。

<br>是单一标签,作用是换行,不用写闭合。

1.2.2多媒体标签

插入一个图片资源(多个资源配合)

 <img>是单一标签,关键属性是src = “图片资源的路径”,如果路径不正确,或者不支持访问,网页不会正常显示。

html/css/is 中书写路径的话

资源和当前资源 处于同一个 Web 服务器管理下 或者 没有处于同一个 Web 服务器管理下

1) 全 URL:

协议://主机:端口/资源路径  其中 端口 如果是协议的标准端口可以省略

http://127.0.0.1:8080/2023/01/z.html

http://61.135.81.24/a/b/2023.html  没有端口,同时是 http 协议,说明是 80 端

https://51.10.55.228/hello.html  没有端口,同时是 https 协议,说明是 443 端

jdbc:mysgl://127.0.0.1:3306/ccb 0101,JDBC 连接 MySQL (本机的 MySQL) 的 URL

dbc:mysql://61.185.22.37:3306/ccb 0101,JDBC 连接 非本机的 (处于 61.185.22.37 主机) 上的 MySQL

jdbc:mysql://127.0.0.1/ccb 0101  没有端口,同时 idbc:mysgl 协议,说明是 3306 端

2) 省略协议:

//主机:端口/资源路径   协议采用和当前资源同样的请求协议

//127.0.0.1:8080/2022/12/31/a.html   资源 和 当前资源 处于同一个 web 服务器管理下:

3) 只写资源路径 (省略协议 + 主机)  当前 web 服务器下的其他资源

绝对路径,以/开头  /index.html  /2023/01/z.html

相对路径,不是以,开头  a.html   ./a.html    ../../index.html

备注:当请求的不是同一个 Web服务器管理的资源时,可能遇到别人的防盗链限制,使得我们无法使用别的资源.

1.2.3超链接

<a href="另一个资源的地址">显示内容</a>,只会显示“显示内容”,点击能跳转地址。

1.2.4target

该属性指定在何处显示链接的资源。取值为标签 (tab),窗口 (window) ,或框架 (iframe) 等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:

_self:当前页面加载,即当前的响应到同一 HTML 4 frame (或 HTML5 浏览上下文) 。此值是默认的,如果没有指定属性的话。

_blank:新窗口打开,即到一个新的未命名的 HTML4 窗口或 HTML5 浏览器上下文。

_parent:加载响应到当前框架的 HTML4 父框架或当前的 HTML5 浏览上下文的父浏览上下文。如果没有 parent 框架或者浏览,上下文,此选项的行为方式与self 相同。

_top:IHTML4 中:加载的响应成完整的,原来的窗口,取消所有其它 frame。HTML5 中: 加载响
应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有 parent) 。如果没有parent 框架或者浏览上下文,此选项的行为方式相同_self。

1.2.5表格相关的标签

table标签:表示整个表格。

tr:表示表格的一行。

td:表示一个单元格。

th:表示表头单元格会居中加粗。

thead: 表格的头部区域(注意和th 区分范围是比th 要大的)。

tbody表格得到主体区域

table包含tr,tr包含td 或者 th。。

无论是 thead、tbody、 tfoot 都是先有 表行 (tr table row) 组成。

每一行里,又有多列组成,其中 thead 中的列使用 (th) 表示,tbody 中的列由 (td) 表示

<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>表格演示</title>
    <style>
      table {
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #000;
      }
      thead th {
        background-color: #3517fc;
      }
      tfoot td {
        background-color: #11fa58;
      }
    </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th rowspan="2">姓名</th>
        <th rowspan="2">年龄</th>
        <th colspan="3">成绩</th>
      </tr>
      <tr>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>28</td>
        <td>3</td>
        <td>5</td>
        <td>7</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>25</td>
        <td>7</td>
        <td>3</td>
        <td>6</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">总计</td>
        <td>10</td>
        <td>8</td>
        <td>13</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

<th rowspan="2">姓名</th>代表占了两行一列 ,<th colspan="3">成绩</th>代表占了三列一行,中间的则是展示的文字。

 1.2.6 列表标签

1)有序列表(ordered list <ol>)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<h1>某个菜谱</h1>
<h2>做菜步骤</h2>
<ol>
    <li>把油锅里倒</li>
    <li>把肉锅里放</li>
    <li>炖 10 分钟</li>
    <li>出锅装盘</li>
</ol>
</body>
</html>

 具体表现在并没有标注序号但是自动标注了序号。

2)无序列表 (unordered list <ul> )

列表项 (列表中的一个元素)(list item <li>)

备注: ol/ul 的孩子必须是 li 标签,<li> 标签之下,可以跟任意的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<h1>某个菜谱</h1>
<h2>需要的材料</h2>
<ul>
    <li><a href="https://cn.bing.com/search?q=西红柿">西红柿</a></li>
    <li><a href="https://cn.bing.com/search?q=胡萝卜">胡萝卜</a></li>
    <li>
        <h3>豆腐</h3>
        <p>豆腐是一种富有营养的常见食品。</p>
    </li>
    <li>
        <h3>土豆</h3>
        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.cac33fafb149995428a84f82bd79a7ab?rik=bnQwOoILMQpKKw&riu=http%3a%2f%2fimg.365diandao.com%2fStorage%2fShop%2f528%2fProducts%2f8128%2f1.png&ehk=Snvk9nO0Q3KwPEUkYcNWaqZbG7K5NpdydBeecUGWJxY%3d&risl=&pid=ImgRaw&r=0">
    </li>
</ul>
</body>
</html>

  具体表现在并没有自动标注了序号,每个标签前面有一个小圆点。

3)描述列表

HTML<d1>元素(或 HTML 述列表元素)是一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据(键 - 值对列表)。

小结

上述讲述的所有标签,都是单方面的信息传递: 从服务器到客户端(浏览器)的传递。

 但是在实际 web 场景中,经需要从 浏览器向服务器去传递一些信息(这些信息大部分来自用户的输入

比如:登录、注册场景下: 用户名 + 密码  用户输入-> 浏览器收集 -> 传递给服务器做下一步动作

使用 CSDN、B 站、痘印这种 UGC 场景: 内容 (博客 (文字) 、视频、音频)

UGC: User Generate Content 用户生成内容

用户输入 -> 浏览器收集 -> 传递给服务器做下一步动作。

1.2.7表单标签

平时填的各种表格、单子。<form>表单标签。

<form>里面有些关键属性,回头配合 HTTP 协议去讲述

<input type="text" name="姓名">这里使用中文,但实际中尽量不要用中文,因为可能有字符集编码的问题,但是用户填写写的内容可以用中文

<button>提交</button>

</form>

1、理解表单的整体流程:

1) 先发起一次请求,得到 要去填写的 表单

2)填写信息 + 点击提交(有其他提交方式): 再次发起一次请求,携带用户填写的信息到服务器

新的请求的 URL,由 <form> 标签的 action 届性决定备注: 如果没有 action 属性,则 URL 不变 (还是表单的 URL)通常都要指定 action 的

新的请求的资源路径,并不要求必须存在一个资源所以可能出现 404 (路径对应的资源不存在)

2、需要表单的场景

需要从用户向服务器提交信息时,比如: 注册场景、登录场景、发表文章、UGC 等

<input name="..."> 输入控件,name 属性对应的业务上的一个名字(尽量有语义,尽量用英文)最后会以 key=value 的形式提交给服务器,其中 key 就是 input 的 name 属性的值value 就是这个 input 中用户输入的内容! !

整个用户的输入,一般称为 请求参数(request parameters) ,经常使用动态资源的形式,读取这部分信息

3、简单的学生信息登记表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>学生信息登记表</h1>
  <label>
    姓名:
    <input type="text" name="username">
  </label>

  <label>
    性别:
    <input type="text" name="gender">
  </label>

  <label>
    生日:
    <input type="text" name="birthday">
  </label>

  <button>提交</button>
</form>
</body>
</html>

4、时序图(用来描述多个参与活动的角色,在活动中的前后次序形式体现的职责时非常好用)

(1)经由某些方式让浏览器去请求某个资源获取表单信息我们暂时采用的方式是在地址栏输入地址。

(2)浏览器发起请求例/form.html请求资源

(3)服务器返回对应路径的资源内容

(4)在刘览器上显示表单给用户

(5)用户根据、表单的要求填写各种信息。

(6)浏览器收集用户填写的信息拼装成 key-value 的格式将所有数据,经过一次新的请求发送给服务器,这次新的请求的资源路径根据 <form>标签的 action 属性解决。

(7)服务器根据用户填好的表单决定下一步怎么办,并给出合适的响应。

由于此处需要根据用户填写的信息给出不同的反应,所以通常使用动态资源的方式。

5、其中几个常见的type

1. type="text"  输入普通文本   注册/登录场景下的用户名、借书场景下的书名。

2. type="password",输入密码文本。在浏览器上隐藏用户的输入,通常显示的是一个点。

只在浏览器的显示处有区别,最终提交的时候没有任何区别,仍然采用 key=value 的形式
换言之,服务器是可以正确读取我们输入的密码的。

 3.单选框-在几个选项中,只能选取其中一个,是互斥的关系。

type="radio"  在单选项这种情况中是不能取消选择的·,多选项可以取消选择。

<h2>单选项 radio</h2>
<p>以下几个 input 都没有 name 属性,所以各自处于自己的一组,彼此之间没有互斥关系</p>
<input type="radio"> 选项1<br>
<input type="radio"> 选项2<br>
<input type="radio"> 选项3<br>
<input type="radio"> 选项4<br>
<input type="radio"> 选项5<br>
<input type="radio"> 选项6<br>

 checked 是一个比较特殊下属性,boolean 类型的属性!

只要有属性出现即可,不需要有后面的 =value,换言之,后面 = 什么都不影响结果。

<p>以下几个 input 设置了 name 属性,则 name 相同的处于一个组;处于一个组内的选项具有互斥关系</p>
<input type="radio" name="gender"> 男<br>
<input type="radio" name="gender"> 女<br>
<input type="radio" name="age"> 儿童<br>
<input type="radio" name="age"> 少年<br>
<input type="radio" name="age"> 青年<br>
<input type="radio" name="age"> 中年<br>
<input type="radio" name="age"> 老年<br>

  checked 属性,来区分 选中 or 未选中状态

<p>靠着 checked 属性,来区分 选中 or 未选中状态</p>
<input type="radio">                                  没有选中状态<br>
<input type="radio" checked>                    选中状态<br>
<!-- 下面的都是不标准用法,所以 IDEA 给出了警告 -->
<input type="radio" checked="true">        选中状态<br>
<input type="radio" checked="false">        选中状态<br>
<input type="radio" checked="你吃了么">  选中状态<br>
<input type="radio" checked="跟什么都不重要">  选中状态<br>

 form 表单提交时,单选项也可以提交。

<p>演示 form 表单提交时,单选项的提交情况</p>
<!-- form 没有写 action 属性,则代表提交的 URL,就是本资源的 URL,不变 -->
<form>
    <!-- 这组有 value 属性 -->
    <input type="radio" name="gender" value="是" checked> 男<br>
    <input type="radio" name="gender" value="否"> 女<br>
    <!-- 这组没有 value 属性 -->
    <input type="radio" name="age" checked> 儿童<br>
    <input type="radio" name="age"> 少年<br>
    <input type="radio" name="age"> 青年<br>
    <input type="radio" name="age"> 中年<br>
    <input type="radio" name="age"> 老年<br>
    <button>提交</button>
</form>

4.复选框

复选框选中之后是可以取消的。

<h2>复选项 checkbox</h2>
<form>
    <p>意向</p>
    <input type="checkbox" name="intend" value="0113"> 清华大学<br>
    <input type="checkbox" name="intend" value="0114"> 北京大学<br>
    <input type="checkbox" name="intend" value="0115"> 复旦大学<br>
    <input type="checkbox" name="intend" value="0116"> 人民大学<br>
    <p>爱好</p>
    <input type="checkbox" name="hobby" value="basketball" checked> 篮球<br>
    <input type="checkbox" name="hobby" value="football"> 足球<br>
    <input type="checkbox" name="hobby" value="pingpong"> 乒乓球<br>
    <button>提交</button>
</form>

 5.表单提交

<h2>点击可以提交的按钮 vs 点击没有反应的按钮</h2>
<p>点击之后会进行表单提交</p>
<form>
    <!-- input type="text" 下,也是 value 属性中的值 -->
    <input type="text" name="say" value="点击之后,这句话会被提交">
    <button>提交</button>
    <button type="submit">提交(写不写 type 都可以)</button>
</form>
<p>点击之后不会有任何反应</p>
<form>
    <input type="text" name="say" value="点击之后,这句话会被提交">
    <button type="button">提交(但实际点了之后没有反应)</button>
</form>

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

元壤:国内首家免费的数字藏品、DAO数字化营销SaaS平台

元壤&#xff1a;国内首家免费的数字藏品、DAO数字化营销SaaS平台 元壤是 Web3.0 时代 NFT 数字藏品与用户服务的数字化工具。元壤是中国企业数字资产化及数字藏品营销解决方案提供商。元壤致力于通过产品和服务,助力企业资产数字化,数字营销化,通过科技驱动数字商业变革,让数…

如何仿真MOS电容的电压-电容曲线?

一、原理 电容的阻抗为&#xff1a; 假设在电容两端施加频率为 f 的小信号电压 v &#xff0c;电容上流过的小信号电流为 i &#xff0c;那么三者有如下关系&#xff1a; 二、仿真 设置频率为1/2pi&#xff0c;这样算出来斜率即为1/C。设置f为0.159155 斜率就是1/C&#xff0c…

你问我答|DDR5对企业用户意味着什么?

自从2014年DDR4内存在市场推出以来,时间已经过去了八年,这对日新月异的计算机行业来说,无疑是相当长的一段时间了。这期间,更快的CPU和存储介质等产品的技术进步,促进了对更大容量的内存、更高内存带宽和更快速率的需求,服务器市场尤其如此。      而在2023年,我们终于迎来…

Sentinel 初始化监控以及流控规则简介

Sentinel 初始化监控 第一步&#xff1a;创建8401微服务 cloudalibaba-sentinel-service 并引入依赖 .yml 配置文件 server:port: 8401spring:application:name: cloudalibaba-sentinel-servicecloud:nacos:server-addr: localhost:8848 #Nacos服务注册中心地址sentinel:trans…

抖音搜索里的百科词条如何创建?

头条系的两大拳头产品&#xff0c;一个是抖音&#xff0c;一个是今日头条。现在头条系的运营重心向抖音倾斜&#xff0c;而抖音搜索里也存在一个固定的位置给快懂百科&#xff0c;这个位置不是像短视频一样滚动更新&#xff0c;做抖音搜索优化的话&#xff0c;小马识途营销顾问…

gateway网关的使用

今天与大家分享gateway网关的使用 1. gateway简介 1.1 是什么 SpringCloud Gateway 作为 Spring Cloud 生态系统中的网关&#xff0c;目标是替代 Zuul&#xff0c;在Spring Cloud 2.0以上版本中&#xff0c;没有对新版本的Zuul 2.0以上最新高性能版本进行集成&#xff0c;仍…

Java设计模式中外观模式是什么/外观模式有什么用,如何实现

继续整理记录这段时间来的收获&#xff0c;详细代码可在我的Gitee仓库SpringBoot克隆下载学习使用&#xff01; 5.6 外观模式 5.6.1 概述 又称门面模式&#xff0c;通过为多个子系统提供一个一致接口&#xff0c;而使这些子系统更加容易被访问的模式对外有一个统一接口&…

SAP工作流规则

代理人规则获取部分&#xff0c;灵活工作流和传统工作流一致 1. 事务代码&#xff1a;PFAC&#xff0c;用来创建规则 2. 规则用来确定代理&#xff0c;可通过如下下拉框中多种方式确定代理人 责任可在事务代码OOCU_RESP中配置代理人&#xff0c;可用来代替配置表确定代理人的…

Python蓝桥杯训练:数组和字符串 Ⅴ

Python蓝桥杯训练&#xff1a;数组和字符串 Ⅴ 文章目录Python蓝桥杯训练&#xff1a;数组和字符串 Ⅴ一、找到数组的中间位置二、使用最小花费爬楼梯一、找到数组的中间位置 给你一个下标从 0 开始的整数数组 nums &#xff0c;请你找到 最左边 的中间位置 middleIndex &#…

推荐系统实战5——EasyRec 在DSSM召回模型中添加负采样构建CTR点击平台

推荐系统实战5——EasyRec 在DSSM召回模型中添加负采样构建CTR点击平台学习前言EasyRec仓库地址DSSM实现思路一、DSSM整体结构解析二、网络结构解析1、Embedding层的构建2、网络层的构建3、相似度计算三、训练部分解析训练自己的DSSM模型一、数据集的准备二、Config配置文件的设…

一键生成分享链接的贺卡制作工具

不用自己动手设计&#xff0c;在线模板帮你轻松搞定新春贺卡设计&#xff0c;免下载的设计工具。跟着小编的设计教程&#xff0c;教你如何使用乔拓云工具&#xff0c;在线搞定你的新春祝福贺卡设计&#xff0c;不用任何设计经验&#xff0c;只需要跟着教程就能搞定的专属贺卡设…

论文笔记:RCLane: Relay Chain Prediction for Lane Detection

RCLane: Relay Chain Prediction for Lane Detection笔记摘要动机模型结构方法其他模型试验结果笔记摘要 该篇论文的核心创新点在于head。论文根据车道线既需要局部信息&#xff0c;也需要全局信息才能很好拟合的特性&#xff0c;设计了相应的算法head。并且论文实验证明该方法…

机器视觉(十一):条码识别

目录&#xff1a; 机器视觉&#xff08;一&#xff09;&#xff1a;概述 机器视觉&#xff08;二&#xff09;&#xff1a;机器视觉硬件技术 机器视觉&#xff08;三&#xff09;&#xff1a;摄像机标定技术 机器视觉&#xff08;四&#xff09;&#xff1a;空域图像增强 …

记一次虚拟机编译c程序错误

file included from /usr/include/stdio.h:74:0, from opendir.c:2: /usr/include/libio.h:302:3: error: unknown type name ‘size_t’ size_t __pad5; ^ /usr/include/libio.h:305:67: error: ‘size_t’ undeclared here (not in a function) ch…

黑马程序员 Maven 教程

Maven 简介 传统项目管理的缺点&#xff1a; (1) jar 包不统一&#xff0c;jar 包不兼容; (2) 工程升级维护过程操作繁琐; Maven 是什么 Maven 的本质是一个项目管理工具&#xff0c;将项目开发和管理过程抽象成一个项目对象模型 (POM) POM (Project Object Model) : 项目对…

二分搜索算法

目录1.概述2.代码实现2.1.最基本的二分搜索2.2.搜索最左侧边界2.3.搜索最右侧边界3.应用本文参考&#xff1a; LABULADONG 的算法网站 《大话数据结构》 1.概述 &#xff08;1&#xff09;二分搜索 (Binary Search)&#xff0c;又称为折半搜索 (Half-interval Search)。它的前…

云收藏系统|基于Springboot实现云收藏系统

作者主页&#xff1a;编程指南针 作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容&#xff1a;Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助 收藏点赞不迷路 关注作者有好处 文末获取源…

Java实现队列

目录 一、队列概述 二、队列的模拟实现 1、入队 2、出队 3、取队头元素 4、获取队列长度 三、循环队列 1、入队 2、出队 3、取队头元素 4、取队尾元素 四、面试题 1、用队列实现栈 2、用栈实现队列 一、队列概述 队列也是常见的数据结构&#xff0c;是一…

Mybatis源码解析二:DataSource数据源负责创建连接以及Transaction的事物管理

简介 对于一个成熟的ORM框架来说&#xff0c;数据源的管理以及事务的管理一定是不可或缺的组成&#xff0c;对于Mybatis来说&#xff0c;为了使用方便以及扩展简单也是做了一系列的封装&#xff0c;这一篇主要介绍mybatis是如何管理数据源以及事务的。 数据源DataSource Dat…

【深度学习】李宏毅2021/2022春深度学习课程笔记 - Adversarial Attack(恶意攻击)

文章目录一、基本概念1.1 动机1.2 恶意攻击的例子1.3 如何攻击&#xff1f;二、White Box vs Black Box三、One Pixel Attack四、Universal Adversarial Attack五、Beyond Image六、Attack in the Physical World七、Adversarial Reprogramming八、Backdoor in Model九、防御9.…