Web相关知识总结

最新推荐文章于 2023-12-23 20:25:38 发布

＿orange

最新推荐文章于 2023-12-23 20:25:38 发布

阅读量454

点赞数 6

分类专栏： Web 文章标签： web

本文链接：https://blog.csdn.net/qq_45113193/article/details/115250642

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.HTML 基本知识
HTML （Hyper Text Markup Language-超文本标记语言）不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内
容，使其以某种方式呈现或者工作。一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

<html>
<head>
    <title>欢迎来到我的网页</title>
    <meta charset="utf-8"/>
</head>
<body>
    希望大家能在我的网页中学到知识
</body>
</html>
插入代码片

在任意文件夹新建txt文件，将后缀名改为html.即可在编译器中打开该文件进行coding~
1.1 <!DOCTYPE html>：声明文档类型，这是很久以前使用的，现在基本都统一使用这个。

1.2 <html lang="zh-hans"></html> :

</html>:这个元素包裹了整个完整的页面，是一个根元素。也是HTML文档唯一的根元素。
lang=“zh-hans”:属性表示这个页面是一个简体中文的内容

1.3<head></head> :这个元素是一个容器，它包含了所有你想包含在HTML页面但不想在HTML页面中显示的内容。这些内容包含你现在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。

1.4 <meta charset="utf-8">：设置文档所使用utf-8字符集编码。

1.5<title></title> :设置页面标题，出现在浏览器标签上，当你标记/收藏页面时他可以用来描述页面。

1.6 <body></body> :包含了你访问页面时所有显示在页面上的内容，eg.文本，图片，音频，游戏等等。

1.7 实体引用：在HTML中，字符 < , > , " , ’ 和 & 是特殊字符。它们是HTML语法自身的一部分，我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号&开始, 以分号(;)结束。
在这里插入图片描述
1.8常见元素

标题： <h1> —— <h6>

<h1>学习 Java</h1> <h2>学习 Java 基础</h2> <h2>学习 数据结构</h2> <h3>学习线性表</h3> <h3>学习树</h3> <h2>学习 Java Web</h2>

段落： <p>

<h1>为什么数据结构很重要</h1> 
<p>因为在计算机的使用过程中，数据结构使用的非常频繁。</p>

列表：
无序列表(Unordered Lists)： <ul>
有序列表(Ordered Lists): <ol>
列表项目(List Items): <li>

<h1>早餐提供：</h1>
 <ul>
  	<li>豆浆</li> 
  	<li>油条</li> 
  	<li>豆腐脑</li>
  	 <li>米汤</li>
 </ul>
  

```c
<h1>学校怎么走？</h1>
 <ol>
  	<li>沿着条路走到头</li>
    <li>右转</li> 
    <li>直行穿过第一个十字路口</li> 
    <li>在第三个十字路口处左转</li>
    <li>继续走 300 米，学校就在你的右手边</li> 
 </ol>

超链接：<a>

 <p>创建了一个指向<a href="http://zhihu.com/">
 知乎</a>的超链接。</p>

图片：<img>

<h1>一张小狗的图片</h1> <img src="dog.jpg">

块级无语义元素： <div>
无语义元素，通常是用来组织内容，方便之后通过css或js对其进行布局或操作。

<!-- 某个版块 -->
 <div>
  	<h2>...</h2>
    <p>...</p> 
 </div> 

<!-- 另一个版块 --> 
<div>
 	<h2>...</h2> 
 	<p>...</p>
</div>

内联无语义元素：<span>

<p>大家一起往前<span>冲</span>啊！</p>

2.CSS基本知识
CSS（Cascading Style Sheets-叠层样式表）是一种样式规则语言，可将样式应用于HTML内容，例如，将背景颜色和字体，在多个列中布局内容。
2.1 使用CSS的方式：

内联（级别最高）：使用style属性，只是对当前标签有效，页面内容和样式高度吻合。
内部样式（后写的优先级别高）：在head中使用style标签，当前页面有效，内容和样式一定程度分离，但是不彻底。
外部样式（后写的优先级别高）：将样式写到一个单独的CSS文件中，需要运用到HTML文件，引用即可。

2.2CSS选择符

元素选择符/类型选择符
元素名称{属性：属性值；}
①元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body，div，p，img…
②所有页面元素都可以作为选择符
id选择器
#id名{属性：属性值；}
①当我们使用id选择符时，应该为每个元素定义一个属性
eg.<div id="div1"></div>
②id选择符的语法格式是“#”加上自定义id名
③起名时不要用关键字（标签和属性都是关键字）
④一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象
⑤主要用处为创建网页的外围结构
class选择器
class名{属性：属性值；}
①当我们使用class选择器时，应先为每个元素定义一个类的名称
②class选择符更适合定义一类样式。
eg.<div class="top"></div>

2.3浮动属性的简单应用

float:none/left/right

float:定义网页中其他文本如何环绕该元素显示
取值：
left：元素浮动在文本左边
right：元素浮动在文本右边
none：默认值，不浮动

2.4注释

html注释：
css注释：/*我是CSS的注释*/

2.5颜色表示方法

颜色通过三原色调和而成，即红、绿、蓝，每种颜色用8位表示，可以表示256种颜色，那么每个颜色有24位来表示，可以表示256256256种颜色。

16进制表示：#ff0000
RGB：rgb（128,0,0）——》#800000
RGBA：是在原有RGB上添加了透明底，alpha
HSL：用色调、饱和度、明度这三个分量来表示颜色
HSLA：在HSL上新增了透明度

2.3文本属性

文本大小：

 {font-size:value；}

①属性值为数值型，必须给属性值加单位，值为0除外
②单位9pt=12px

文本颜色：

 {color:颜色值；}

文本字体：

 {font-family:字体1，字体2；}

①浏览器首先会寻找字体1，若存在就使用该字体显示内容，不存在则寻找字体2，若存在就使用该字体显示内容，若都不存在，则使用系统默认字体。
②当字体是中文，需要加双引号
③当英文字体只有一个单词组成，不加双引号；当英文字体中有空格，需要加双引号

文字加粗

 font-weight:bolder(更粗的）/bold(加粗）/normal(常规）/100-900；

在css规范中，将字体的粗细分为9个等级，100-900，100对应最轻的字体变形，900对应最重的字体变形。

文字倾斜

 font-style:italic/oblique/normal(取消倾斜，常规显示）；

italic/oblique:都是向右倾斜的文字
oblique：倾斜的文字

水平对齐方式

 {text-align:left/right/center；}

文字行高
{line-heightnormal/value；}
文本修饰

text-decoration:none/underline/overline/line-through

none：没有修饰
underline：下划线
overline：添加下划线
line-through：添加删除线
3.javascript 基本知识
Javascript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很
多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。

4.HTTP 协议相关知识

4.1 Http（HyperText Transfer Protocol超文本传输协议），是因特网上应用最为广泛的一种网络传输协议，所有的www文件都必须遵守的标准。是基于TCP/IP的关于数据在万维网中如何通讯的协议。其主要分为两部分：Request请求头；Response响应头

Request请求头	释义
首行信息	主要请求方法类型（GET、POST）+URL+版本号（目前主流http/1.1）
header请求头	每个键值对以\n换行分割，key和value以：（冒号+空格方式分割）eg.key: value
空行	用来标识header结束
body	存放参数:GET请求时，body中无内容，url中直接传参；POST请求时，body中有内容，可能含多个参数，以&进行分割多个参数，以=分割key=value

Response响应头	释义
首行信息	版本号+状态码+状态码描述
header响应头	同上
空行	同上
body	同上

简单总结一下GET与POST的区别就是：GET:在url中直接传参；POST：form表单，包含多个参数的容器，使用form表单可以给后端传输数据
4.2URL
在这里插入图片描述
5.常见Header请求头

关键字：值
User-Agent：产生请求的浏览器类型
Accept：客户端可识别的内容类型列表
Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机

6.常见响应状态及含义

错误代码	含义
1xx	指示信息–表示请求已接收，继续处理
2xx	成功–表示请求已被成功接收、理解、接受
3xx	指示信息–表示请求已接收，继续处理
4xx	客户端错误–请求有语法错误或请求无法实现
5xx	服务器端错误–服务器未能实现合法的请求

常用状态码、状态描述
200 OK：客户端请求成功。

400 Bad Request：客户端请求有语法错误，不能被服务器所理解。

401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。

403 Forbidden：服务器收到请求，但是拒绝提供服务。

404 Not Found：请求资源不存在，eg.输入了错误的URL。

500 Internal Server Error：服务器发生不可预期的错误。

503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常
7.常见HTTP头

Content-Type	数据类型(text/html等)
Content-Length	Body的长度
Host:	客户端告知服务器, 所请求的资源是在哪个主机的哪个端口上
User-Agent	声明用户的操作系统和浏览器版本信息
referer	当前页面是从哪个页面跳转过来的
location	搭配3xx状态码使用, 告诉客户端接下来要去哪里访问
Cookie	用于在客户端存储少量信息. 通常用于实现会话(session)的功能

8.静态资源 vs 动态资源

静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。
动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。
区别
a.静态资源一般都是设计好的html页面，而动态资源依靠设计好的程序来实现按照需求的动态响应；
b.静态资源的交互性差，动态资源可以根据需求自由实现；
c.在服务器的运行状态不同，静态资源不需要与数据库参于程序处理，动态可能需要多个数据库的参与运算。

9.Servlet 的生命周期

初始化阶段
服务器会在客户端第一次访问Servlet，或服务器启动的时候为该Servlet创建实例。要想在服务器启动的时候就为Servlet创建实例，需要在web.xml中进行配置。当服务器为Servlet创建实例后，会在第一时间调用init()方法，完成Servlet的初始化操作。注意这个init()方法在Servlet的一生中，只会被服务器调用一次。
服务阶段
当服务器接收到请求时，会去调用Servlet的service()方法来处理请求，而且每次请求的时候，服务器都会调用service()方法，并且创建新的ServletRequest和ServletResponse对象，所以该方法在Servlet的一生中会被调用多次。
销毁阶段
当服务器关闭或者当前web应用被移出服务器时，Servlet会被销毁，在销毁之前，服务器会调用destroy()方法，可以把Servlet的“临终遗言“放在该方法中，例如把对某些资源的释放等代码放在destroy()方法中。

＿orange

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
4
评论
Web相关知识总结

1.HTML 基本知识HTML （Hyper Text Markup Language-超文本标记语言）不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。<html><head> <title>欢迎来
复制链接

扫一扫

专栏目录