WebBasic(一)

一、 JavaWeb

（1）概述：

Web项目的三要素：浏览器、服务器、HTTP协议。

浏览器：向服务器发起请求，下载服务器中的网页（HTML），然后执行HTML显示出内容。
服务器：接收浏览器的请求，发送相应的页面到浏览器。
HTTP协议：浏览器与服务器的通讯协议

❤️ Web相关技术：

客户端技术：运行于客户端，由浏览器来解释运行。
— HTML
— CSS
— JavaScript
— 浏览器兼容问题
服务器端技术：运行于服务器端，可以和数据库交互。
—ASP.NET (Active Server Page)
—PHP(Hypertext Preprocessor)
—JSP(Java Server Page)

（2）软件架构：
- C/S: Client/Server 客户端/服务器端
  * 在用户本地有一个客户端程序，在远程有一个服务器端程序
  * 如：QQ，迅雷…
  * 优点：
  1. 用户体验好
  * 缺点：
  1. 开发、安装，部署，维护麻烦
- B/S: Browser/Server 浏览器/服务器端
  * 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
  * 优点：
  1. 开发、安装，部署，维护简单
  * 缺点：
  1. 如果应用过大，用户的体验可能会受到影响
  2. 对硬件要求过高
❤️ B/S架构详解:

❤️ 资源分类：
静态资源：
* 使用静态网页开发技术发布的资源。
* 特点：
所有用户访问，得到的结果是一样的。
如：文本，图片，音频、视频, HTML,CSS,JavaScript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源

动态资源：
* 使用动态网页及时发布的资源。
特点：
所有用户访问，得到的结果可能不一样。
如：jsp/servlet,php,asp…
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

❤️ 静态资源：
* HTML：用来勾勒出网页的结构和内容
* CSS：用于美化页面，布局页面
* JavaScript：让网页呈现出动态的数据和结果

❤️ 了解一下

jQuery是一个框架，用来提高JavaScript的开发效率。

(二) HTML

2.1 什么是HTML

HTML（HyperText Markup Language）：超文本标记语言，一种纯文本类型的语言
用来设计网页的标记语言
用该语言编写的文件，以.html或者.htm为后缀
由浏览器解释执行
HTML页面上，可以嵌套用脚本语言编写的程序段，如：VBScript、JavaScript

2.2 HTML基础语法

(1). 标记：

HTML用于描述功能的符号称为“标记”，比如 < p >、< h1 > 等。
1> 标记在使用时必须用尖括号括起来
2> 用封闭类型标记也有非封闭类型的标记
封闭类型标记必须成对出现：
eg: <标记>内容</标记>
非封闭类型标记，也叫作空标记，或者单标记
eg：

(2). 元素和属性：

元素：
—— 即标记
—— 每一对尖括号包围的部分，如< body > < /body >包围的部分就叫做body元素
属性：
—— 用来修饰元素
—— 每个属性都有值
—— 属性的声明必须位于开始标记里
—— 一个标记的属性可能不止一个，多个属性之间用空格隔开
—— 多个属性之间不区分先后顺序

(3). 注释：

添加注释的语法如下：

<!--注释部分-->

❤️ 注意：注释不可以嵌套在其他注释当中。

2.3 HTML的文档结构

文档类型声明
html页面：
—— 文件头：< head> < /head >
—— 文档主体部分： < body> < /body >

（1）文档类型声明的作用：

在文档的起始使用DOCTYPE声明指定版本和风格，目的是让浏览器清楚文档的版本、类型和风格。

（2）head元素

< head >元素用于为页面定义全局信息
—— 所有其他头元素的容器
—— 紧跟在起始标签< html >之后
可包含：
—— title、meta、script、style、link等。

（3）文档头部内容< title>

标题元素< title> < / title >用于为文档定义标题
—— 标题元素的内容出现在；浏览器的顶部
—— 没有属性
—— 必须出现在< head >元素中
—— 一个文档只能有一个标题元素

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>我的第一个网页</title></head><body>啦啦啦啦，是不是太简陋了，嘻嘻嘻嘻</body>
</html>

在这里插入图片描述

（4）文档头部内容< meta >

元数据元素< meta >用于定义网页的基本信息
为空标记
常用属性有：content、http-equiv

2.4 文本标记

2.4.1 文本标记的作用：

文本是网页上的重要组成部分
直接书写的文本会用浏览器默认的样式显示
包含在标记中的文本则会被显示为标记所拥有的样式
—— 特殊字符
—— 注释
—— 标题元素
—— 段落元素
—— 换行元素
—— 分区元素

（1）文本与特殊字符

空格折叠：多个空格或制表符压缩成单个空格，即只显示一个空格。
特殊字符（如空格），需要进行转义。

2.4.2 使用文本标记

（1）标题元素< hn >

标题元素让文字以醒目的方式显示，往往用于文章的标题
基本语法：< h# >… < /h# >
—— # = 1、2、3、4、5、6
—— 从< h1 >到 < h6 >，即标题1到标题6

（2）段落元素 < p >

< p >元素提供了结构化文本的一种方式
< p >元素中的文本会用单独的段落显示
—— 与前后的文本都换行分开
—— 添加一段额外的垂直空白距离，作为段落间距
—— 常用属性：align

（3）换行元素< br >

使用< br >元素在任何地方创建手工换行
—— 空标记

（4）分区元素< div >和< span >

分区元素用于元素分组，常用于页面布局
块分区元素：< div > < /div >
行内分区元素：< span > < /span >
——设置同一行文字中的不同格式。

（5）行内元素和块级元素

块级元素
—— 默认情况下，块级元素会独占一行，即元素前后都会自动换行
—— 如：< p >、< div > 、< hn >
行内元素
—— 不会换行，可以和其他行内元素位于同一行
—— 如：< span >、< a >

2.5 图像和链接

（1） URL

URL（Uniform Resource Locator）：统一资源定位器，用来标识网络中的任何资源。
—— 文本、图片、音视频文件，段落，或其他超文本
完整URL的组成：
—— 协议、机名、路径名、文件名
❤️ eg：

http://www.w3c.org/TR/CSS2/syndata.html
http：协议名（用：//分隔）
www.w3.org：主机名
/TR/CSS2/：路径
syndata.html：要链接的文件名

（2）相对路径和绝对路径

相对路径：
—— 指文件的位置是相对于当前文件的位置，它包括目录名，或指向一个可以从当前目录出发找到该文件的路径
eg：
…/default/a.html
Images/a.gif
- 绝对路径：
  —— 指的是文件从最高级目录下开始的完整的路径，无论当前路径是什么，使用绝对路径总是能找到要链接的文件
  eg:
  http://www.w3.org/TR/CSS2/syndata.html

（3）图像元素 < img >

使用< img >元素将图像添加到页面
—— 空标记
必须属性：src
常用属性：width、height
eg：
< img width=“100” src=“image/rose.jpg”/>

（4.1）链接元素< a >

使用< a >元素创建一个超级链接，语法如下：
< a href =" " target=" " > 文本< /a >
——href 属性：链接URL
——target属性：目标，可取值为_blank、_self等

（续4.1）链接（锚点）

锚点是文档中某行的一个记号
——用于链接到文档中的某个位置
定义锚点
——< a name="anchorname1 "> 锚点— < /a >
链接到锚点：在锚点名前加上#
——< a href="anchorname1 ">回到锚点—< /a >

（5）列表

（5.1）列表的作用

列表是指将具有相似特征或者具有先后顺序的几行文字进行对齐排列
所有的列表都由列表类型和列表项组成
——列表类型：有序列表< ol > 和无序列表< ul >
——列表项：< li >，用于指示具体的列表内容

（5.2）有序列表< ol >

< ol >元素编写有序列表，用于列出页面上有特定次序的一些项目
< ol >元素中也只能包含列表项元素< li >

（5.3）无序列表< ul >

< ul >元素表示无序列表，用于列出页面上没有特定次序的一些项目
< ul >元素中只能包含具体的列表项元素< li >
——列表中包含的每一项都必须包含在起始标记< li >和结束标记< /li >之间

（5.4）列表嵌套

将列表元素嵌套使用，可以创建多层列表
——常用于创建文档大纲、导航菜单等

（6）表格

（6.1）表格的作用

表格通常用来组织结构化的信息
表格是一些被称作单元格的矩形框按照从左到右，从上到下的顺序排列在一起而形成的
表格的数据保存在单元格里
——显示表格数据
——设置页面布局

（6.2）创建表格

定义表格：使用成对的< table > < /table >标记
创建表行：使用成对的< tr > < /tr >标记
创建单元格：使用成对的< td >< /td >标记

（6.3）表格的常用属性

< table >元素
——border
——width/height
——align
——cellpadding：单元格边框与内容之间的间距
——cellspacing：单元格之间的间距
< tr >元素
——align/valign
< td >元素
——align/valign/width/height/colspan/rowspan

（6.4）表格标题< caption >

使用< caption >元素为表格定义标题
——默认情况下，标题将在表格上方居中显示
< caption >标签必须紧随< table >标签之后，且只能对每个表格定义一个标题

（6.5）表格的复杂应用

（6.5.1）行分组

表格可以划分为3个部分：表头、表主体和表尾
表头行分组：< thead > < /thead>
表主体分组：< tbody >< /tbody >
表尾行分组：< tfoot >< /tfoot>
——包含一个或者多个元素

（6.5.2）不规则表格

设置单元格< td >的跨行或者跨列属性
跨列：colspan
——水平方向延伸单元格，值为一正整数，代表此单元格水平延伸的单元格数
跨行：rowspan
——垂直方向延伸单元格，值为一正整数，代表此单元格垂直延伸的单元格数

（6.5.3）表格的嵌套

嵌套表格
——在单元格中放置另外一个表
——即< td >元素中再包含< table>元素
使用嵌套的表格以设计复杂表格或者复杂布局

（7）表单

（7.1）表单的作用

表单用于显示、收集信息，并提交信息到服务器
表单有两个基本部分：
——实现数据交互的可见的界面元素，比如文本框或者按钮
——提交后的表单处理
界面元素
——使用< form >元素创建表单
——在< form >元素中添加其他表单可以包含的控件元素

（7.2）表单元素< form >

定义表单：使用成对的< form >< /form >标记
主要属性：
——action:定义表单被提交时发生的动作，通常包含服务方脚本的URL（比如JSP、PHP）
——method：指出表单数据提交的方式，取值为get或者post
——enctype：表单数据进行编码的方式
——name：表单名称

（7.3）表单控件

表单可以包含很多不同类型的表单控件
表单控件元素是包含在表单元素中具有可视化外观的HTML元素，用于访问者输入信息
表单控件元素有：
——input元素：文本输入控件、按钮、单选和复选按钮、选项框、文件选择框和隐藏控件等
——textarea元素
——select和option元素
——其他元素

（7.3.1）< input >元素

< input >元素用于收集用户信息
该元素是一个单标记，语法为：< input/>
主要属性：
——type：根据不同的type属性值，可以创建各种类型的输入字段，比如文本框、复选框等
——value：控件的数据
——name：控件的名称

（7.3.2）文本框与密码框

文本框：< input type = “text” />
密码框：< input type = “password” />
主要属性：
——value属性：由访问者自由的输入的任何文本
——maxlength属性：限制输入的字符数
——readonly属性：设置文本控件只读

（7.3.3）单选框和复选框

单选框：< input type = “radio” />
复选框：< input type = “checkbox” />
主要属性：
——value：文本，当提交form时，如果选中了此单选按钮，那么value就被发送到服务器
——name：用于实现分组，一组单选框或者复选框的名称必须相同
——checked：设置选中

（7.3.4）按钮

提交按钮：< input type = "submit " />
——传送表单数据给服务器端或其他程序处理
重置按钮：< input type = “reset” />
——清空表单的内容并把所有表单控件设置为最初的默认值
普通按钮：< input type = “button” />
——用于执行客户端脚本
主要属性：
——value：按钮的标题文本

（7.3.5）隐藏域和文件选择框

隐藏域：< input type = “hidden” />
——在表单中包含不希望用户看见的信息
文件选择框：< input type = “file” />
——选择要上传的文件

点赞
收藏
分享
- 文章举报

Alive~

发布了31 篇原创文章 · 获赞 42 · 访问量 1万+

私信关注

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Sql安全性
关于SQL安全性，不能不涉及到权限的问题，比如在CSDN，用户只能更改自己的信息，而不能改别人的信息，我们的身份证号，我们的电话号码我们的很多信息，都在数据库里存放着，数据库管理员可以有不同的权限，最高权限就所有的数据库的所有操作都可以，往下可能只能看到某些个数据…...
2024/4/20 1:49:08
深度学习基础问题总结（一）
激活函数；梯度消失梯度爆炸问题；损失函数；反向传播；文章目录一、激活函数1.什么是激活函数？激活函数是干什么的？2.常见的激活函数3.为啥relu用的比较多？relu的优点？4.为啥sigmoid会有梯度显示现象？二、梯度消失、梯度爆炸1.梯度消失的例子2.梯度消失与梯度爆炸3.分析…...
2024/4/20 17:18:14
redis 的数据类型
redis支持丰富的数据类型，从最基础的string到复杂的常用到的数据结构都有支持： string：最基本的数据类型，二进制安全的字符串，最大512M。 list：按照添加顺序保持顺序的字符串列表。 set：无序的字符串集合，不存在重复的元素。 sorted set：已排序的字符串集合。 hash：k…...
2024/3/29 11:26:55
100 个网络基础知识
1)什么是链接?链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。2)OSI 参考模型的层次是什么?有 7 个 OSI 层：物理层，数据链路层，网络层，传输层，会话层，表示层和应用层。3)什么是骨干网?骨干网络是集中的基础设施，旨在将不同的…...
2024/4/22 13:13:09
对现代工业行之有效的EDI解决方案
EDI解决方案用于许多需要数据交换的行业和分支机构，如，汽车制造、零售、医疗、化工、运输和物流等。WalMart(沃尔玛)、Target(塔吉特)、Costco(好市多)、Best Buy(百思买)、Carrefour(家乐福)等大型零售商都采用EDI解决方案与他们的贸易伙伴和供应商交换业务数据，如常见的业…...
2024/4/24 23:39:26
learn2reg-无监督的深度学习图像注册：颅顶之外
https://learn2reg.github.io/https://www.kaggle.com/adalca/learn2reghttps://github.com/learn2reg/tutorials2019Unsupervised deep learning image registration: Beyond the cranial vault通过Moving+变换模型->重采样器将重采样器作用在moving上生成warped通过warped…...
2024/4/19 18:38:23
【AI视野·今日CV 计算机视觉论文速览第171期】Tue, 3 Dec 2019
AI视野今日CS.CV 计算机视觉论文速览 Tue, 3 Dec 2019 Totally 82 papers 👉上期速览✈更多精彩请移步主页Interesting: 📚****三维点云补全模型, 提出了一种可以实现均匀、细致、完整的点云补全方法。通过由参数曲面片进行的粗粒度补全，到与输入点云进行融合的细粒度补全…...
2024/4/25 0:21:10
Algorand近期合作更新整理
Algorand基金会最近发布了Algorand 2.0，这是一项重要的协议升级，极大地扩展了可在Algorand平台上构建的去中心化应用程序的范围。借助所有直接内置在第1层中的新功能套件，可以创建企业级分布式应用程序的同时并不会牺牲其性能或安全性。 Algorand 与意大利作者和出版商协会S…...
2024/4/20 5:53:54
如何快速刷网课——直接修改学习状态为“已学完”
问题背景在某教师培训平台上刷网课，之前破解了其进度条无法拖动的限制：破解网课视频进度条无法拖动问题但就算进度条能拖动了，还得等视频缓存后才能拖过去。有时缓存很慢，仍然比较麻烦。于是开始探索如何不再看视频，直接将状态修改为“已学完”。思路是：找到视频播放结…...
2024/4/24 1:42:10
我的Java Web之路 - Spring MVC和Spring IoC初步使用
本系列文章旨在记录和总结自己在Java Web开发之路上的知识点、经验、问题和思考，希望能帮助更多码农和想成为码农的人。本文转发自头条号【普通的码农】的文章，大家可以关注一下，直接在今日头条的移动端APP中阅读。因为平台不同，会出现有些格式、图片、链接无效方面的问题…...
2024/4/19 20:50:59
部落冲突
题目背景在一个叫做Travian的世界里，生活着各个大大小小的部落。其中最为强大的是罗马、高卢和日耳曼。他们之间为了争夺资源和土地，进行了无数次的战斗。期间诞生了众多家喻户晓的英雄人物，也留下了许多可歌可泣的动人故事。其中，在大大小小的部落之间，会有一些道路相连…...
2024/4/12 18:16:18
Redis
Redis在互联网技术存储方面使用如此广泛，几乎所有的后端技术面试官都要在Redis的使用和原理方面对小伙伴们进行360的刁难。作为一个在互联网公司面一次拿一次Offer的面霸，打败了无数竞争对手，每次都只能看到无数落寞的身影失望的离开，略感愧疚（请允许我使用一下夸张的修辞…...
2024/4/23 22:33:38
走进大数据丨 Hadoop生态体系
Hadoop是一个由Apache基金会所开发的分布式系统的基础架构。用户可以在不了解分布式的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。Hadoop优点1.高可靠性：Hadoop按位存储和处理数据的能力值得人们信赖。2.高扩展性：Hadoop是在可用的计算机集簇间分配数据…...
2024/4/23 8:11:39
蠎周刊-398-MicroPython 物联网编程没问题
原文: PyCoders Weekly - Issue #398191211 Zoom.Quiet(大妈) 用时 42 分钟完成快译 191211 Zoom.Quiet(大妈) 用时 17 分钟完成格式转抄.------MicroPython: Python编程硬件简介REAL PYTHONAre you interested in the Internet of Things, home automation, and connected d…...
2024/4/22 19:55:02
假设你是个妹子
假设你是个妹子，你有一位男朋友，于此同时你和另外一位男生暧昧不清，比朋友好，又不是恋人。你随时可以甩了现任男友，另外一位马上就能补上。这是冷备份。假设你是个妹子，同时和两位男性在交往，两位都是你男朋友。并且他们还互不干涉，独立运行。这就是双机热备份。假设…...
2024/4/24 3:52:16
傅里叶分析之掐死教程
傅里叶分析之掐死教程（完整版）更新于2014.06.06Heinrich生娃学工打折腿知乎日报收录作者：韩昊知乎：Heinrich微博：@花生油工人知乎专栏：与时间无关的故事谨以此文献给大连海事大学的吴楠老师，柳晓鸣老师，王新年老师以及张晶泊老师。转载的同学请保留上面这句话，谢谢…...
2024/4/24 8:36:21
pyspark相关配置
hadoop(配置文件都在$HADOOP_HOME/etc/hadoop)hadoop.env.sh#export JAVA_HOME=${JAVA_HOME} export JAVA_HOME=/opt/modules/jdk1.8.0_11#配置java_homecore-site.xml<configuration><property><name>fs.default.name</name><value>hdfs://pysp…...
2024/4/18 19:30:13
final,finally,finalize的区别
一.简单区别：final用于声明属性，方法和类，分别表示属性不可交变，方法不可覆盖，类不可继承。 finally是异常处理语句结构的一部分，表示总是执行。 finalize是Object类的一个方法，在垃圾收集器执行的时候会调用被回收对象的此方法，供垃圾收集时的其他资源回收，例如关闭文…...
2024/4/19 18:04:40
python中的递归
python中的递归在函数内部调用自己本身就是递归例如阶乘和累加累加 def sum(n):if n == 1:return 1return n + sum(n-1) print(sum(3)) 运行结果 6 ===> sum(3) ===> 3 + sum(2) ===> 3 + (2 + sum(1)) ===> 3 + (2 + 1) ===> 6 阶乘 def fact(n):if n == 1:…...
2024/4/24 17:28:52
sql基础教程--4
1.数据插入insert insert into 表名(列名1，列名2，列名3) values(值1，值2，值3); 字符型要是’’ 列名可以省，这样的话，从左到右进行插入数据。可以插入null ，但是插入null值的时候，列的约束可以为空。在创建表的时候，可以指定默认值 default 值在插入的时候可以用关…...
2024/4/19 12:28:16