web相关知识点

1.HTML基本知识

1.1定义

用来描述网页的一种语言，是超文本标记，是一种语言标记，是一套标记标签，用标记标签来描述网页。html标签分为三部分：标签名称，标签内容，标签属性。

1.2标签属性

• class属性：用于定义元素的类名
• id属性：用于指定元素的唯一 id，该属性的值在整个html文档中具有唯一性
• style属性：用于指定元素的行内样式，使用该属性后将会覆盖任何全局的样式设定
• title属性：用于指定元素的额外信息
• accesskey属性：用于指定激活元素的快捷键
• tabindex属性：用于指定元素在 tab 键下的次序
• dir属性：用于指定元素中内容的文本方向，属性只有 ltr 或 rtl 两种
• lang属性：用于指定元素内容的语言

1.3事件属性

• window窗口事件：
  onload，在网页加载结束之后触发
  onunload,在用户从网页离开时发生（点击跳转，页面重载，关闭浏览器窗口等）
• form表单事件：
  onblur，当元素失去焦点时触发
  onchange，在元素的值被改变时触发
  onfocus，当元素获得焦点时触发
  onreset，当表单中的重置按钮被点击时触发
  onselect，在元素中文本被选中后触发
  onsubmit，在提交表单时触发
• keyboard键盘事件：
  onkeydown,在用户按下按键时触发
  onkeypress，在用户按下按键后，按着按键时触发。
• mouse鼠标事件：
  onclick，当在元素上发生鼠标点击时触发
  onblclick，当在元素上发生鼠标双击时触发
  onmousedown，当元素上按下鼠标按钮时触发
  onmousemove，当鼠标指针移动到元素上时触发
  onmouseout，当元素指针移出元素时触发
  onmouseup，当元素上释放鼠标按钮时触发。
• Media媒体事件
  onabort,退出时触发
  onwaiting,当媒体已停止播放但打算继续播放时触发

1.4文本标签

段落标签：<p></p>，段落标签用来描述一段文字
标题标签：<h1~6></h1~6>，标题标签用来描述一个标题，标题标签总共有六个级别
强调语句标签：<em></em>，用于强调某些文字的重要性
更加强调标签：<strong></strong> 和 <em> 标签一样，用于强调文本，但它强调的程度更强一些
无语义标签：<span></span>，标签是没有语义的
短文本引用标签：<q></q>，简短文字的引用
长文本引用标签：<blockquote></blockquote>，定义长的文本引用
换行标签：<br/>

1.5多媒体标签

链接标签：<a></a>
图片标签：<img/>
视频标签：<video></video>
音频标签：<audio></audio>

1.6列表标签

无序列表标签：ul，li，<ul></ul> 列表定义一个无序列表；<li></li> 代表无需列表中的每一个元素
有序列表：ol,li
定义列表：<dl></dl>，定义列表通常和 <dt></dt> 和 <dd></dd> 标签一起使用

1.7表格标签

表格标签 <table></table>
表格的一行 <tr></tr>
表格的表头 <th></th>
单元格 <td></td>
表格合并，同一行内，合并几列colspan="2"，同一列内，合并几行rowspan="3"

1.8表单标签

1、<form></form> 表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
<form method="传送方式" action="服务器文件">
action，浏览者输入的数据被传送到的地方
method，数据传送的方式
2、输入标签<input/>
name：为文本框命名，用于提交表单，后台接收数据用。
value：为文本输入框设置默认值。
type：通过定义不同的type类型，input的功能有所不同。
text 单行文本输入框
password 密码输入框（密码显示为***)
radio 单选框 （checked属性用于显示选中状态）
checkbox 复选框（checked属性用于显示选中状态）
file 上传文件
button 普通按钮
reset 重置按钮（点击按钮，会触发form表单的reset事件）
submit 提交按钮（点击按钮，会吃饭form表单的submit事件）
email 专门用于输入 e-mail
url 专门用于输入 url
number 专门用于number
range 显示为滑动条，用于输入一定范围内的值
date 选取日期和时间（还包含：month、week、time、datetime、datetime-local）

color 选取颜色
button按钮，下拉选择框
选项 是下拉选择框里面的每一个选项
文本域：当用户想输入大量文字的时候，使用文本域。cols，多行输入域的列数，rows，多行输入域的行数。

1.9其他语义化标签

盒子：<div></div>
网页头部：<header></header>，html5新增语义化标签，定义网页的头部，主要用于布局，分割页面的结构
底部信息：<footer></footer>，html5新增语义化标签，定义网页的底部，主要用于布局，分割页面的结构
导航：<nav></nav>，html5新增语义化标签，定义一个导航，主要用于布局，分割页面的结构
文章：<article></article>，html5新增语义化标签，定义一篇文章，主要用于布局，分割页面的结构
侧边栏：<aside></aside>，语义化标签，定义主题内容外的信息，主要用于布局，分割页面的结构。
时间标签：<time></time>，语义化标签，定义一个时间

2.CSS基本知识

2.1定义

CSS成为层叠样式表，它主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能（如字体、颜色、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。

2.2编写CSS样式

• 样式

（1）缺省样式：浏览器样式
（2）内嵌样式：style属性
（3）内嵌样式：head标签中添加style标签
（4）外部样式：外联样式link->推荐方式
（5）导入样式：@import->不推荐使用的方式，会导致css不能并行下载，并且要求导入样式的书写必须在所有的css规则书写之前。

• 通配符选择器
  、* {
  margin: 0; /* 定义外边距 /
  padding: 0; / 定义内边距 */
  }

• 标签选择器
  p{
  color:red;
  }

• ID选择器
  只允许出现字母（大小写均可，严格区分）、下划线、数字。只允许以字母开头。命名没有长度限制，不过不建议过长。不允许出现标签名。
  #contentBody{
  color:blue;
  font-weight:bold;
  }

• 类选择器——对HTML标签中的class属性进行选择
  .demo{
  color:green;
  }

• ID选择器与class选择器的区别：
  相同的class属性值，可以在HTML中出现多次，ID属性值在页面中则只能出现一次。
  一个class的属性可以有多个值，也就是说一个标签可以有多个类。

• 复合选择器
  复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的：标签指定式选择器，后代选择器，并集选择器，子元素选择器，属性选择器。

• CSS伪类和伪元素
  状态是动态变化的，当一个元素到达一个特定状态时，它可能得到一个样式，当状态改变时，又失去这个样式。

它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

（1）CSS伪类

●　:link->该伪类将应用于未被访问过的链接，IE6不兼容。一般不用此伪类，直接使用a标签。

●　:hover->该伪类将应用于有鼠标指针悬停于其上的元素，在IE6只能应用于a标签，IE7+所有元素都兼容。

●　:active->该伪类将应用于被激活的元素，例如被点击的链接、被按下的按钮登等。

●　:visited->该伪类将应用于已经被访问过的链接。

●　:focus->该伪类将应用于拥有键盘输入焦点的元素。

（2）CSS伪元素

伪元素是控制内容，例如:

:first-line与:first-letter，这两个伪元素只能用于块级元素。前者用于选择第一行，后者用于选择第一个字符。

p.artcle:first-line
{
color:red;
}

p.artcle:first-letter
{
color:green;
}
:first-child伪元素选择属于第一个子元素的元素。

span:first-child{
vertical-align:middle;
}
:before与:after伪元素则可以设置元素之前和之后的内容，并且配合content设置相关内容。

#demo:after,#demo:before{
content:"–";
display:block;
}

3.JavaScript基本知识

javascript是一种运行在客户端 的脚本语言

• 客户端： 即接受服务的一端，与服务端相对应，在前端开发中，通常客户端指的就是浏览器。
• 脚本语言： 也叫解释型语言，特点是执行一行，解释一行，如果发现报错，代码就停止执行。
• javascript的三个组成部分：ECMAScript、BOM、DOM
  ECMAScript： 定义了javascript的语法规范。
  BOM： 一套操作浏览器功能的API
  DOM： 一套操作页面元素的API。

4.HTTP协议相关知识

• HTTP 协议构建于 TCP/IP 协议之上，是一个应用层协议，默认端口号是 80
• HTTP 是无连接无状态的

5.请求格式

HTTP请求部分信息由三部分组成：

• 请求方法/URI协议/版本
• 请求头——包含许多有关的客户端环境和请求正文的有用信息。请求头可以声明浏览器所用的语言，请求正文的长度等。
• 请求正文——请求头和请求正文之间是一个空行，这个行非常重要，它表示请求头已经结束，接下来的是请求正文。请求正文中可以包含客户提交的查询字符串信息。

6.响应格式

HTTP响应部分也由三个部分组成：
状态行——协议版本/状态代码/响应的状态描述
响应头——状态代码由3位数字组成，表示请求是否被理解或被满足
响应正文——状态描述给出了关于状态代码的简短的文字描述

（注：响应头中可能包括：

• Location：Location响应报头域用于重定向接受者到一个新的位置。
• Server：Server响应报头域包含了服务器用来处理请求的软件信息。
• WWW-Authenticate：WWW-Authenticate响应报头域必须被包含在401(未授权的)响应消息中，这个报头域和前面讲到的Authorization请求报头域是相关的，当客户端收到401响应消息，就要决定是否请求服务器对其进行验证。如果要求服务器对其进行验证，就可以发送一个包含了 Authorization报头域的请求，下面是WWW-Authenticate响应报头域的一个例子：WWW-Authenticate: Basic realm="Basic Auth Test!"从这个响应报头域，可以知道服务器端对我们所请求的资源采用的是基本验证机制。
• Content-Encoding：Content-Encoding实体报头域被使用作媒体类型的修饰符，它的值指示了已经被应用到实体正文的附加内容编码，因而要获得Content- Type报头域中所引用的媒体类型，必须采用相应的解码机制。Content-Encoding主要用语记录文档的压缩方法，下面是它的一个例子： Content-Encoding: gzip。如果一个实体正文采用了编码方式存储，在使用之前就必须进行解码。
• Content-Language：Content-Language实体报头域描述了资源所用的自然语言。
• Content-Language允许用户遵照自身的首选语言来识别和区分实体。如果没有指定Content-Language报头域，那么实体内容将提供给所以语言的阅读者。
• Content-Length： Content-Length实体报头域用于指明正文的长度，以字节方式存储的十进制数字来表示，也就是一个数字字符占一个字节，用其对应的ASCII码存储传输。要注意的是：这个长度仅仅是表示实体正文的长度，没有包括实体报头的长度。
• Content-Type实体报头域用于指明发送给接收者的实体正文的媒体类型。
• Last-Modified实体报头域用于指示资源最后的修改日期及时间。
• Expires实体报头域给出响应过期的日期和时间。Expires: Thu, 15 Sep 2005 16:00:00 GMT
  ）

7.常见请求方法及含义

8.常见响应状态及含义状态代码

• 第一个数字有五种可能的取值：

  • 1xx: 指示信息—表示请求已接收，继续处理。
  • 2xx: 成功—表示请求已经被成功接收、理解、接受。
  • 3xx: 重定向—要完成请求必须进行更进一步的操作。
  • 4xx: 客户端错误—请求有语法错误或请求无法实现。
  • 5xx: 服务器端错误—服务器未能实现合法的请求。

• 常见的状态代码及其描述
  200 OK 客户端请求成功
  301 (永久移动) 请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时，会自动将请求者转到新位置。
  302 (临时移动) 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
  400 Bad Request 由于客户端请求有语法错误，不能被服务器所理解。
  401 Unauthonzed 请求未经授权。这个状态代码必须和WWW-Authenticate报头域一起使用
  403 Forbidden 服务器收到请求，但是拒绝提供服务。服务器通常会在响应正文中给出不提供服务的原因
  404 Not Found 请求的资源不存在，例如，输入了错误的URL。
  500 Internal Server Error 服务器发生不可预期的错误，导致无法完成客户端的请求。
  503 Service Unavailable 服务器当前不能够处理客户端的请求，在一段时间之后，服务器可能会恢复正常。

9.常见的HTTP头

• 常见的HTTP请求头
  Accept-Charset——用于指定客户端接受的字符集
  Accept-Encoding——用于指定可接受的内容编码，如Accept-Encoding:gzip.deflate
  Accept-Language——用于指定一种自然语言，如Accept-Language:zh-cn
  Host——用于指定被请求资源的Internet主机和端口号，如Host:www.chaojijuhui.com
  User-Agent——客户端将它的操作系统、浏览器和其他属性告诉服务器l
  Connection——当前连接是否保持，如Connection: Keep-Alive

• 常见的HTTP响应头
  Server——使用的服务器名称，如Server: Apache/1.3.6 (Unix)
  Content-Type——用来指明发送给接收者的实体正文的媒体类型，如Content-Type:text/html;charset=GBK
  Content-Encoding——与请求报头Accept-Encoding对应，告诉浏览器服务端采用的是什么压缩编码-一般写全站压缩的时候需要用到的
  Content-Language——描述了资源所用的自然语言，与Accept-Language对应
  Content-Length——指明实体正文的长度，用以字节方式存储的十进制数字来表示
  Keep-Alive——保持连接的时间，如Keep-Alive: timeout=5, max=120

• 请求头和响应头，一般的浏览器进入开发者工具，监听网络都能看到的。

10.静态资源VS动态资源

10.1静态资源和动态资源的概念

• 静态资源：一般客户端发送请求到web服务器，web服务器从内存取到相应的文件，返回给客户端，客户端解析并渲染显示出来。

• 动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。

10.2静态资源和动态资源的区别

• 静态资源一般都是设计好的HTML页面，而动态资源依靠设计好的程序来实现按照需求的动态响应。
• 静态资源的交互性差，动态资源可以根据需求自由实现。
• 在服务器的运行状态不同，静态资源不需要数据库参与程序处理，动态可能需要多个数据库的参与与运算。

11.什么是JSP技术（模板技术）

11.1定义

JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。

JSP是一种Java servlet，主要用于实现Java web应用程序的用户界面部分。网页开发者们通过结合HTML代码、XHTML代码、XML元素以及嵌入JSP操作和命令来编写JSP。

JSP通过网页表单获取用户输入数据、访问数据库及其他数据源，然后动态地创建网页。

JSP标签有多种功能，比如访问数据库、记录用户选择信息、访问JavaBeans组件等，还可以在不同的网页中传递控制信息和共享信息。

11.2使用JSP的原因

JSP程序与CGI程序有着相似的功能，但和CGI程序相比，JSP程序有如下优势：

• 性能更加优越，因为JSP可以直接在HTML网页中动态嵌入元素而不需要单独引用CGI文件。
• 服务器调用的是已经编译好的JSP文件，而不像CGI/Perl那样必须先载入解释器和目标脚本。
• JSP 基于Java Servlet API，因此，JSP拥有各种强大的企业级Java API，包括JDBC，JNDI，EJB，JAXP等等。
• JSP页面可以与处理业务逻辑的 Servlet 一起使用，这种模式被Java servlet 模板引擎所支持。
  最后，JSP是Java EE不可或缺的一部分，是一个完整的企业级应用平台。这意味着JSP可以用最简单的方式来实现最复杂的应用。

11.3JSP的优势

• 与ASP相比：JSP有两大优势。首先，动态部分用Java编写，而不是VB或其他MS专用语言，所以更加强大与易用。第二点就是JSP易于移植到非MS平台上。
• 与纯 Servlet 相比：JSP可以很方便的编写或者修改HTML网页而不用去面对大量的println语句。
• 与SSI相比：SSI无法使用表单数据、无法进行数据库链接。
• 与JavaScript相比：虽然JavaScript可以在客户端动态生成HTML，但是很难与服务器交互，因此不能提供复杂的服务，比如访问数据库和图像处理等等。
• 与静态HTML相比：静态HTML不包含动态信息。

12. Servlet的生命周期

12.1 Serlvet简介

• Servlet是一种服务器端的Java应用程序，具有独立于平台和协议的特性,可以生成动态的Web页面。
• 它担当客户请求（Web浏览器或其他HTTP客户程序）与服务器响应（HTTP服务器上的数据库或应用程序）的中间层。
• Servlet是位于Web 服务器内部的服务器端的Java应用程序，与传统的从命令行启动的Java应用程序不同，
• Servlet由Web服务器进行加载，该Web服务器必须包含支持Servlet的Java虚拟机。

12.2 Servlet生命周期

Servlet 加载—>实例化—>服务—>销毁。

• init（）：

在Servlet的生命周期中，仅执行一次init()方法。它是在服务器装入Servlet时执行的，负责初始化Servlet对象。可以配置服务器，以在启动服务器或客户机首次访问Servlet时装入Servlet。无论有多少客户机访问Servlet，都不会重复执行init（）。

• service（）：

它是Servlet的核心，负责响应客户的请求。每当一个客户请求一个HttpServlet对象，该对象的Service()方法就要调用，而且传递给这个方法一个“请求”（ServletRequest）对象和一个“响应”（ServletResponse）对象作为参数。在HttpServlet中已存在Service()方法。默认的服务功能是调用与HTTP请求的方法相应的do功能。

• destroy（）：

仅执行一次，在服务器端停止且卸载Servlet时执行该方法。当Servlet对象退出生命周期时，负责释放占用的资源。一个Servlet在运行service()方法时可能会产生其他的线程，因此需要确认在调用destroy()方法时，这些线程已经终止或完成。

原文：https://www.jianshu.com/p/6f1282bdc11f
https://www.html.cn/web/css/11222.html
https://www.huaweicloud.com/articles/d634c17799428bf48c14156404f4a801.html
https://www.huaweicloud.com/articles/33ead256cc23b0753e9a8d4cbf533e61.html
https://www.runoob.com/jsp/jsp-intro.html
https://blog.csdn.net/weixin_40122615/article/details/78493744
https://www.huaweicloud.com/articles/4f6c3cbde2700e6cd25f4962fa8f807a.html
https://www.cnblogs.com/weibanggang/p/9454581.html