Web前端基础知识整理
1、 前端基础知识
文件分类
XML(扩展标记语言)
装载有格式的数据信息,用于各个框架和技术的配置文件描述
特点:
扩展名为.xml
内容区分大小写
标签要成对出现,形成容器,只能有一个
标签按正确的嵌套顺序,只有一个根标签
标签属性的语法:属性名=”值”,写在头上,空格隔开
格式:
<?xml version="1.0" encoding="UTF-8"> - 首行<class> ... </class> - 标签<!--注释--> - 注释<class num="1"> - 标签的属性
java解析xml的方式
1、SAX(Simple APT for XML) - 常用于移动设备Android
基于事件的逐行扫描文档,边扫描边解析,只在读时检查数据,不需要把全数据加载到内存中,对于大型文档解析有优势
2、DOM(Document Object Model) - 文档对象模型
数据全部存到内存中解析,速度快,dom4j组件方式解析常用
HTML(超文本标记语言)
扩展名为.html或.htm
内容不区分大小写
标签建议成对出现
嵌套顺序正确,一个根标签
标签具有固定含义: 可视化和功能性
2、JS(JavaScript)(Java脚本)
一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型
特点:
与html和css结合客户端的技术
能够动态修改html,css中的属性等内容,形成动态效果
解释型语言
区分大小写
弱类型的语言
格式:
window.onload=init; //自定义函数initfunction init(){document.getElementById("btn")}document.getElementById("btna").onclick=function () {//按html元素id查找,将匿名函数与该元素的点击事件捆绑var arr=new Array(4); //向数组插入数据arr[0]="刘备"; //调用数组对象的方法arr.push("张飞","关羽");//动态追加2个数组元素var x=arr.pop();console.log("length:"+arr.length+",pop:"+x); for(i=0;i<arr.length;i++){console.log(arr[i]);}}
3、JSON(JS对象简谱)
JS对象标记,JavaScript Object Notation,可以当做字符串传输,能被java,python等多种语言处理,通用性高
格式:
json对象:
{key:value,key:value,key:value}
json数组:
{{key:value,key:value,key:value},{key:value,key:value,key:value}}
// 可以通过json对象的属性名获得相应的值
s['xage']=26;//修改xage的值为26
console.log(s['xname']+","+s2['tsex']); //打印对应值for...in:遍历语句//遍历json数组s[]for(var i in s){console.log("i:"+i+",type:"+typeof(i)+","+s[i]);
JSON与字符串直接转换
java向js传输的是json格式的字符串,要转换成json对象才能被js使用
代码:
str=eval(str);//str是传来的字符串,转换后变为json对象
eval()//函数:将字符串按照表达式的形式转换为对应的具体类型
//如果传来的是'1+1'放入eval函数会转换成数值进行计算返回结果
4.、JSP(java server page)(Java服务器界面)
由servlet改编而成,用静态的html去嵌套jsp脚本,完成动态数据的显示
/src/main/webapp下创建.jsp文件
jsp运行的工作原理
编写.jsp文件
编写jsp代码:jsp元素+html/css/javascript
<%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%>//jsp抬头
在web容器部署运行时,首次运行jsp会将它翻译成类servlet源文件.java并编译.class
第一次jsp运行比较慢是因为要翻译成.java文件
web容器执行.class文件
jsp元素
jsp元素运行级别高于静态元素,如果出现相同属性仅执行jsp元素
jsp指令,指示页面执行动作属性
<%@指令名 属性=“值”…%>
page指令:规定整个页面的属性特征
language=”java” ,规定整个页面的编程语言
contentType=”text/html; charset=UTF-8”,规定当前页面基于html编写
isErrorPage=”true”,规定当前页面主要用于显示错误信息
include
taglib
小脚本
作为web服务器运行的java代码,相当于servlet的service()方法
<% java语句,结构或jsp内置元素 %>
如果想在jsp中写html部分,需要用<% %>将jsp语句隔开
jsp内置元素
全局声明
语法:<%! 全局属性或方法 %>
写在声明中的全局声明会当做类的属性/方法
写的脚本中的局部变量/方法会写入service方法中
jsp表达式
语法:<%=表达式%>
用于显示表达式的值页面
jsp注释
语法:<%–注释内容 --%>
不能在html客户端源码中查看
jsp动作标签
<jsp:标签名称 属性="值"></jsp:标签名称>
<jsp:include>//引入,动态导入
//1 在导入另一个JSP页面前,编译该jsp页面成html后静态导入
<jsp:include page="x1.jsp"></jsp:include>
<%@include%>//引入,静态导入
//2 相当于把另一个文件的全部代码粘贴到当前页面内,代码有上下顺序
<%@include file="x1.jsp" %>
<jsp:forward page="跳转的页面"></jsp:forward>
//3 转发动作,不会执行转发后脚本内的代码,最后默认写了return
5、jsp开发模式
Model分类
ModelI:jsp+javaBean
MdoelII:jsp+servlet+javaBean,mvc
EL(expression language)
用于输出存储范围对象
语法: 表达式常量表达式,{2*5}
获取存储在jsp上下文四个存储范围中的对象,依次查找当前页面和三块存储区,可简化javaBean对象属性的获取
范围关键字${pageScope.x.sage}
pageScope
requestScope
sessionScope
applicationScope
判断空对象,empty,not empty
判断大小,ge,gt,le,lt
6.、jstl(jsp标准标签库语言)
目的是减少jsp上小脚本的数量,作为sun公司推出的jsp辅助技术
分类:
核心库:控制程序流程,存储变量的使用和输出
jstl sql库:直接在页面上使用sql语句
jstl fmt库:按指定形式格式化数值
使用:
maven中添加jstl依赖库
在jsp页面上通过<%@taglib%>指令引入jstl对应类型库
在jsp中使用具体的标签
案例:
输出控制
uri=依赖库,引入的是当前标签库的标识
prefix=前缀,代表在jsp中代码当前引入的标签库的标识
out标签:向页面输出
value:引用EL表达式将存储猚中的对象引出
escapeXml:默认true,表示输出内容有特殊字符也不识别直接打印出来
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>//写在首行
<%
String str="<h1>你好</h1>";
request.setAttribute("xw", str);
%>
${xw}
<hr>
<c:out value="${xw}" escapeXml="false"></c:out>
循环
var,表示当次循环对象的引用
items,使用EL表达式在四个存储范围加载集合对象
<c:forEach var="op" items="${ss }">
<tr>
<td>${pageScope.op.sname}</td>
<td>${op.sage}</td>
<td>${op.hobby}</td>
</tr>
</c:forEach>
以上就是Web前端基础知识整理的详细内容
关注微信公众号福利!!!
1、「web前端」获取一份最新 前端 架构资料,你要的都有!
(html/html5、css/css3、JavaScript、VUE系列教程)
2、「面试」获取各种 Java 面试题及答案、面试实战经验;
Web前端基础知识整理相关推荐
- Web前端基础知识整理(一)
1. typeof返回的数据类型 typeof返回的数据类型包括undefined.string.number.boolean.symbol.Object.Function类型. 2. 检查数组的方式 ...
- 前端基础知识整理汇总(中)
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...
- 前端基础知识整理汇总(上)
前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...
- html clear属性值,【Web前端基础知识】clear使用方法
[摘要] 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.下面是[Web前端基础知识]clear使用方法,小编建议有准备参加考试的备考生一定要合理规划时间,仔细阅读相关规定,提 ...
- WEB前端 基础知识汇总
javascript: JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === ...
- Web 前端基础知识面试大全
目录 一.HTML 1.对 HTML 语义化的理解 2.区别:src 和 href 3.DOCTYPE 的作用 4.HTML5 的新特性 5.script 标签中的 defer 和 async 6. ...
- web前端基础知识:html布局如何应用?
网站布局 大多数网站会把内容安排到多个列中(就像杂志或报纸那样). 可以使用 或者 元素来创建多列.CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观. 提示即使可以使用 HTML 表格 ...
- Web前端基础知识总结
一.HTML和CSS 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是pres ...
- web前端基础知识查漏补缺,JavaScript面试题,赶紧收藏
1介绍js的基本数据类型 js一共六种基本数据类型,分别是 undefined null boolean number string ,还有es6新增的symbol 和 es10新增的bigint. ...
最新文章
- 2019 ACM - ICPC 上海网络赛 E. Counting Sequences II (指数型生成函数)
- c语言获取按键,c语言获得键盘的按键
- win10死机频繁怎么解决
- 传智播客 Html基础知识学习笔记
- 如何在水晶报表显示上下标
- (04)FPGA学习基础
- 手把手!基于领域预训练和对比学习SimCSE的语义检索(附源码)
- 大学物理光学思维导图_思维导图真的需要学吗?(附资料)
- kotlin android中文文档,Kotlin(android)协程中文翻译
- 虚拟机服务器关机命令,ESXi主机定时开关机设置
- SAP License:SAP五大主流ERP一览
- 苏州新导智能养老:老人智能药箱+养老院人员定位
- python安装pytorch
- 3dsMax Biped骨骼缩放
- 指向性麦克风----8字形麦克风设计(四)
- 微商小白如何有效快速精准引流?哪里能找到精准顾客群体?
- GetAsyncKeyState()用法
- mysql停电_MySQL断电后报错处理
- uniapp运行到安卓模拟器
- NB-IoT介绍(PPT)
热门文章
- celery java_Python的Java Celery项目相当于什么?
- stm08S单片机C语言编,STM8S单片机入门1(开发环境搭建)
- 精益画布_这6本书让你成为精益高手
- Linux 更改共享内存tmpfs的大小
- SQLServer 可更新订阅数据冲突的一个原因
- 第一个网站制作上传的过程
- android The public type classname must be defined in its own file 报错
- SPOJ Problem 22:Triangle From Centroid
- 编写MR代码中,JAVA注意事项
- java开发_读写txt文件操作