Web前端开发
2024-07-03 16:01:57 0 举报AI智能生成
登录查看完整内容
Web前端开发是一种专注于创建网页用户界面的技术，它涵盖了HTML、CSS和JavaScript等核心语言。通过Web前端开发，我们可以创建具有吸引力和互动性的网站，为用户提供流畅、直观的浏览体验。这不仅包括设计和实现视觉元素，还要考虑网站的可访问性、性能和兼容性。Web前端开发是现代Web开发不可或缺的一部分，它有助于实现快速迭代、持续交付的开发流程，以及响应式设计等现代Web设计趋势。
作者其他创作
大纲/内容
页面结构
HTML 标题（Heading）是通过<h1></h1> - <h6></h6> 标签来定义的。
注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）
HTML 段落是通过标签 <p></p> 来定义的。
在HTML文档中创建一个链接到\"有用的提示部分(id=\"tips\"）\"：<a href=\"#tips\">访问有用的提示部分</a>
或者，从另一个页面创建一个链接到\"有用的提示部分(id=\"tips\"）\"：<a href=\"https://www.runoob.com/html/html-links.html#tips\">访问有用的提示部分</a>
在HTML文档中插入ID:<a id=\"tips\">有用的提示部分</a>
锚点
target=\"_blank\" ： 新窗口打开链接
target=\"_self\" ： 当前窗口打开链接
target属性
HTML 链接是通过标签 <a href=\"https://www.runoob.com\" title=\"鼠标悬浮提示\">这是一个链接</a> 来定义的
alt属性：为图像定义一串预备的可替换的文本
height（高度） 与 width（宽度）
HTML 图像是通过标签 <img src=\"/images/logo.png\" /> 来定义的.
HTML 换行是通过标签 <br> 来定义的.
<hr> 标签在 HTML 页面中创建水平线.
HTML 注释 <!-- 这是一个注释 -->
display: inline 转换为行内元素
块级元素(宽度占父级标签100%，可以设定宽高)，它可用于组合其他 HTML 元素的容器
HTML <div> 元素
display: block 转换为块级元素
行内元素（内容多大就多大，不可以设置宽高），可用作文本的容器
HTML <span> 元素
HTML标签列表
常见标签
显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格
粗体：<b></b> 或者 <strong></strong>
斜体：<i></i> 或者 <em></em>
<big>这个文本字体放大</big>
<small>这个文本是缩小的</small>
放大/缩小：
<sup>上标</sup>
<sub>下标</sub>
上标/下标：
格式化问题
HTML 表格由 <table></table> 标签来定义
<caption>表格标题</caption>
每个表格均有若干行（由 <tr></tr> 标签定义）
表格可以包含标题行（<th></th>）用于定义列的标题
每行被分割为若干单元格（由 <td></td> 标签定义）
<thead></thead>
<tbody></tbody>
<tfoot > 表格页脚</tfoot >
神器：HTML 表格生成器
HTML表格
用来分组
列表项目使用数字进行标记
有序列表始于 <ol> 标签
<ol> <li>Coffee</li> <li>Milk</li></ol>
有序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
无序列表使用 <ul> 标签
<ul> <li>Coffee</li> <li>Milk</li></ul>
list-style: none;
无序列表
HTML列表
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
action : 提交到服务器的地址
get（默认，不支持文件上传，低版本服务器端不可以处理中文）
post（可以处理中文）
method ： 提交方式
<form></form>
文本域（text）
密码字段（password）
name
value ： 传递到服务器的值
单选按钮（radio）
复选框（checkboxes）
提交文件(file)
提交按钮(submit)
重置按钮(reset)
type类型
name属性
placeholder属性
readonly ： 只读
required ： 必填
pattern : 正则表达式
输入标签 <input type=\"text\">
<option value=\" \"></option>
下拉框：<select name=\" \"></select>
文本域： <textarea name=\" \"></textarea>
HTML 表单
HTML5
<p style=\"color:blue;margin-left:20px;\">这是一个段落。</p>
内联样式- 在HTML元素中使用\"style\" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
<link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\">
外部引用 - 使用外部 CSS 文件（最好的方式）
元素/标签选择器
class选择器
id选择器
优先级：!important > id > class > 元素 > 浏览器默认
分组选择器（，）
div p 选择器将选择所有在 <div> 元素内的 <p> 元素。
div p { font-weight: bold;}
包含选择器（空格）
选择了<div>元素中所有直接子元素 <p>
div>p{ background-color:yellow;}
子代选择器（>）
选择器
color
font-size
font-family
italic
font-style
bold
lighter
font-weight
h-shadow
v-shadow
blur
text-shadow
underline
line-through
overline
text-decoration
center
right
left(default)
justify
text-align
This is some long text that w
clip
This is some long text that w...
span style=\
white-sapce：nowrap；
overflow：hidden；
text-overflow：ellipsis；
同时设置三个属性
text-overflow
文本属性：
a:linked 正常，未访问过的链接
a:visited 用户已访问过的链接
a:hover 用户已访问过的链接
a:active 链接被点击的那一刻
链接（伪类选择器）
translate() 方法:根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
rotate() 方法:在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
scale()方法:该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
2D 转换（transform）
CSS尺寸
display:none；可以隐藏某个元素，且隐藏的元素不会占用任何空间。
visibility：hidden； 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间
display:inline; 显示为内联元素
display: inline-block; 作为行内块元素：
CSS Display（显示）
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
static
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
Fixed定位使元素的位置与文档流无关，因此不占据空间
fixed
相对定位元素的定位是相对其正常位置。（相对于自身原始位置移动）
移动相对定位元素，但它原本所占的空间不会改变。
relative
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
absolute
Position(定位)
display：flex；
row
row-reverse
column
column-reverse
flex-direction(主轴方向)
nowrap
wrap
wrap-reverse
flex-wrap(换行)
flex-start
flex-end
space-between
space-around
justify-content（主轴方向对齐方式）
stretch：未设置高度（或height: auto）的项目占满整个容器高度
baseline
align-items（交叉轴方向布局对齐方式）
父项目属性
复合属性 flex-flow：flex-direction flex-wrap；
元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。
order（优先级排序）
flex-grow（放大）
flex-shrink（缩小）
flex-basis(定义在分配多余空间之前，项目占据的主轴空间)
尽可能使主轴（交叉轴）的份数总和为12
项目属性
弹性盒子模型
渐变工具
神器：渐变工具
指定要添加效果的CSS属性
过渡（transition）
div{ width:100px; height:100px; transition: width 2s;}div:hover{ width:300px;}
@keyframes 动画名称{ from {} to {} 或者 0% {} 50%{} 100%{}}
规定动画的时长
n
infinite
animation-iteration-count 属性定义动画应该播放多少次
简写：animation: mymove 5s infinite
动画
CSS3
解释型脚本语言，可以直接执行
基于对象，可以创建对象，也能使用现有对象
跨平台，通过js引擎就可以运行js代码
嵌入式，调用浏览器提供的操作html元素的接口操作html元素（DOM）
JavaScript特点
基本结构：<script type=\"text/javascript' language=\"JavaScript\"></script>
head部分中（head会先加载，所以进行页面初始化的js需放在head里）
body部分中（顺序执行）
在页面中的位置
let 变量名 = 变量值
var 变量名 = 变量值
变量声明数据类型由所赋值的类型来决定
number：任何数字
boolean
string
null
undifined：未被复制的变量
基本数据类型
function
Date
Array
object
引用数据类型
获取变量数据类型：typeof 变量名
减、乘、除可以自动隐式转换
强制类型转换parseInt（）、parse Float（）
数据类型转换
数据类型
function functionName (parm，parm) { 函数体}
函数声明
函数
let arr=[] / let arr=new Array();
创建
数组存储的数据可以是任何类型
数组
字符串
日期
alert('warning message')
confirm('Hello') 确认框
prompt('请输入信息') 用户输入弹窗，返回值为输入的内容
window（核心）
location.reload(); 刷新
location.href = 'url'; 跳转
location用于获取或设置地址栏中的url
history.back()
history.forward()
history.go()
history
BOM
getElementById() 通过元素的ID属性获取DOM对象
getElementsByTagName() 通过元素的标签名获取DOM对象
getElementsByClassName() 通过元素的class属性获取DOM对象
getElementsByName() 通过元素的name属性获取DOM对象
获取DOM对象
给DOM对象设置CSS样式: DOM对象.style.样式属性名 = '样式值'
javaScript代码要写在body的最后，必须要保证html代码全部加载完毕之后，才执行javaScript代码获取DOM对象
DOM
BOM（浏览器对象模型）& DOM（文档对象模型）
JavaScript
建立连接：浏览器根据IP地址和端口号（port）和服务器建立连接
打包：浏览器将请求数据按HTTP协议打成http请求数据包，http 请求数据包包含请求资源路径
发送请求：浏览器向服务器发送请求数据包
创建Request对象
创建Response对象
创建Servlet实例
访问参数
处理结果
取数据：Servlet引擎从Response 对象中取出数据
打包 ：Servlet引擎将取出的数据打包，该数据包符合http 协议要求
发送响应：浏览器将响应数据包中的数据取出，生成界面
servlet工作原理
404找不到资源(访问路径错误)
500系统错误(即程序代码有误）
200访问成功
http状态码分类
HTML状态消息
服务器向浏览器发送一个状态码302及一个消息头location，浏览器收到后，会立即向location所指向的地址发送请求。
response.sendRedirect(String url);
重定向之前，不能够有out.close()或者out.flush()操作
重定向之前，如果response对象缓存有数据，则这些数据会被清空。
客户端浏览器中进行的
重定向
转发的地址必须是同一个应用内部的某个组件（不能跨应用，不能跨服务器）
转发可以共享request对象
浏览器地址栏的地址不会发生变化
服务器内部完成的
转发
转发&重定向
Servlet加载
Servlet实例化
在Servlet的生命周期中，仅执行一次init()方法
初始化
当一个客户请求一个HttpServlet对象，该对象的service()方法就要调用
服务
在服务器端停止且卸载Servlet时执行destroy（）方法
销毁
servlet生命周期
重写构造方法和初始化方法证明
1、单例类只能有一个实例。
2、单例类必须自己创建自己的唯一实例。
3、单例类必须给所有其他对象提供这一实例。
注意
节省资源：每个Servlet实例都需要占用内存和其他系统资源。如果每个请求都创建一个新的Servlet实例，将会导致资源的浪费。通过使用单例模式，Servlet容器可以在启动时创建一个Servlet实例，并在请求到达时重用该实例，从而节省了资源。
提高性能：创建和销毁Servlet实例需要一定的时间和开销。如果每个请求都创建一个新的Servlet实例，将会增加服务器的负载和响应时间。而使用单例模式，Servlet容器可以维护一个池化的Servlet实例，通过重用实例来处理多个请求，从而提高了性能和响应速度。
状态共享：Servlet通常需要在多个请求之间共享状态信息，例如数据库连接、缓存等。如果每个请求都创建一个新的Servlet实例，那么状态信息将无法在请求之间共享。而使用单例模式，Servlet实例可以在多个请求之间共享状态，从而方便数据的传递和共享。
为什么要设计成单例
Servlet本身就是一个单例设计模式
浏览器在访问服务器时，服务器将一些数据以set-cookie 消息头的形式发送给浏览器。浏览器会将这些数据保存起来。当浏览器再次访问服务器时，会将这些数据以cookie 消息头的形式发送给服务器。通过这种方式，可以管理用户的状态。
启动浏览器后，操作系统会为浏览器开辟一块内存空间，在浏览器访问服务器时，服务器生会成消息头set-Cookie 发回给浏览器 ，浏览器将服务器生成的消息头保存到内存区域，当浏览器关闭后，系统回收为浏览器分配的内存，Cookie 也相应消失
seconds > 0 浏览器会将cookie 以文件的方式保存在硬盘上。在超过指定的时间以后，会删除该文件。
seconds < 0 默认值，浏览器会将cookie 保存在内存里面。只有当浏览器关闭之后，才会删除
seconds = 0 立即删除该Cookie
设置cookie保存时间c.setMaxAge(second);
cookie 可以禁止
cookie 的大小有限制（≈4k）
cookie 的数量也有限制（≈300）
cookie 的值只能是字符串
cookie 不安全
cookie的特性
浏览器禁用cookie后session也会失效（session依赖cookie机制）
使用cookie（在客户端管理用户的状态）
HttpSession session = request.getSession();
String session.getId();
session.getAttribute(String name);
session.invalidate();
一些方法
obj进行序列化的原因是可以写到硬盘上。 服务器上一般会保存中许多的Session对象，里面存放了大量用户状态的数据（比如网上购物信息）， 通常情况下内存是有限的，对于海量的访问，这些Session是不够的，所以一般情况 下，我们配备一些数据库（也可以文件的方式保存到硬盘），用于保存Session中的数据。Session中某个用户的数据进行序列化保存到数据库（或硬盘）时，该Session就可以空闲出来用于新用户的连接。
服务器在对session 进行持久化操作时，为什么obj 最好实现Serializable 接口
使用session（在服务器端管理用户的状态）
状态管理（解决http协议无状态特性）
Servlet
HTTP 协议是超文本传输协议，是用于从万维网服务器传输超文本到本地浏览器的传送协议。是一个基于 TCP/IP 通信协议来传递数据
HTTP 是无连接：无连接的含义是限制每次连接只处理一个请求，服务器处理完客户的请求， 并收到客户的应答后，即断开连接，采用这种方式可以节省传输时间。
HTTP 是媒体独立的：只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送
HTTP 是无状态的：无状态是指协议对于事务处理没有记忆能力，缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大，另一方面，在服务器不需要先前信息时它的应答就较快。
注意：
浏览器向服务器发送建立连接的请求
客户端发送一个HTTP请求到服务器的请求消息包括以下格式：请求行（request line）、请求头部（header）、空行和请求数据四个部分组成
浏览器将请求数据打包，向服务器发送请求。
HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。
服务器处理完请求，然后将数据打包，发送给浏览器。
服务器发送完数据，关闭连接
通讯过程
get携带数据有大小限制，不适合提交大量的数据
post无限制，适合大量数据的提交（post方式是将请求参数及参数值放在实体内容里面）
提交数据大小
get会将请求参数及值显示在浏览器地址栏
post请求参数及值存放在实体内容里面，但式并没有将数据加密
安全性
有非latin1字符的数据用post，提交文件必须用post
get/post请求
html文件中：<meta charset=\"utf-8\">
servlet访问参数：request.setCharacterEncoding(\"utf-8\");
servlet取数据：response.setContentType(\"text/html;charset=utf-8\");
中文乱码处理
http协议
HttpServletRequest request
HttpServletResponse response
JSPWriter out
HttpSession session
ServletContext application
需指定当前页面isErrorPage=“true”
Throwable exception
Object page
PageContext pagecontext
ServletConfig config
九大内置对象
pageScope：作用于当前页面
requestScope：作用于一次请求过程
sessionScope：作用于一次会话期（30分钟/关闭浏览器）
applicationScope：作用于整个服务器（服务器关机）
四大作用域
JSP
我们需要这样一种对象，来存储一个实体数据来作为前端与服务器端进行数据交互的载体
键值对形式
let user = { font color=\"#4669ea\" style=\"font-weight: bold;\
JSON对象形式
一个json数组中包含多个json对象
let userArr = [{ font color=\"#4669ea\" style=\"font-weight: bold;\
JSON对象获取： let user = userArr[0];
JSON属性获取：let userName = userArr[0].userName;
JSON数组
javaScript中内置了一个JSON对象，可以用来进行json与字符串之间的转换
JSON转字符串： JSON.stringify(jsonObject)
字符串转JSON ： JSON.parse(str)
JSON & 字符串
XML 是一种纯文本格式，格式比较复杂，解析困难
JSON是一种轻量级的数据交换格式
JSON易于阅读和编写，也易于机器解析和生成
JSON采用完全独立于语言的文本格式
与xml相比，JSON优势
JSON轻量级数据交换格式
jQuery引入：百度CDN，减少加载时间，提高加载速度<head> <script src=\"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js\"></script></head>
基本语法：$(selector).action()
文档就绪事件：$(document).ready(function(){ // 开始写 jQuery 代码...});
标签选择器 $(\"p\")
#id选择器 $(\"#test\")
.class选择器 $(\".test\")
选取第一个元素 $(\"p:first\")
$(\"[href]\")
$(\"a[target='_blank']\")
属性选择器
jQuery选择器
jQuery事件
举个栗子：$(document).ready(function(){ $(\"p\").click(function(){ $(this).hide(); });});
jQuery语法
jQuery（JavaScript库）
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest 对象 (异步的与服务器交换数据)JavaScript/DOM (信息显示/交互)CSS (给数据定义样式)XML(作为转换数据的格式)
创建XMLHttpRequest对象：var xmlhttp = new XMLHttpRequest();
method：get/post
url：xmlhttp.open(\"GET\
async：通过 AJAX，JavaScript 无需等待服务器的响应，而是： 在等待服务器响应时执行其他脚本 当响应就绪后对响应进行处理
xmlhttp.send（string）
向服务器发送请求
如果来自服务器的响应并非 XML，使用 responseText 属性返回字符串形式的响应。
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，使用 responseXML 属性
服务器响应
工作原理
xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById(\"myDiv\").innerHTML=xmlhttp.responseText; }}
等于 4 且状态为 200 时，表示响应已就绪
XMLHttpRequest 对象的三个重要的属性
Ajax
Web前端开发
0 条评论
回复 删除
下一页
