Web前端基础知识整理

1、 前端基础知识
文件分类

XML(扩展标记语言)

装载有格式的数据信息,用于各个框架和技术的配置文件描述

特点:
文件扩展名为.xml
内容需辨别大小写
标签必须配对出现并构成容器结构
仅允存在一个根标签
标签必须按照正确的顺序嵌套排列，并且仅允许存在一个根标签
遵循以下语法规范：
属性名称后跟等号及对应的值，
置于属性块顶端，
各属性之间需以空格分隔

格式:

     <?xml version="1.0" encoding="UTF-8"> - 首行
        <class> ... </class> - 标签
        <!--注释--> - 注释
        <class num="1"> - 标签的属性

java解析xml的方式

SAX（Simple APT for XML）主要应用于移动设备中的Android系统。该技术采用基于事件驱动的按行扫描机制，在实时读取文档时进行解析操作，并仅在必要时进行数据验证。特别适合处理大规模文档而不需将完整的数据集合加载至内存空间中。

所有数据都完全加载到内存中进行解析过程。具有较高的效率。常用的DOM解析方法是基于dom4j组件的。

HTML(超文本标记语言)

命名为.html或.htm（大小写无分）；应尽量成对出现；层次结构正确；一个根标签；具有固定含义的标签包括：可视化功能型标签。

2、JS(JavaScript)(Java脚本)

一种基于原型的脚本语言，在支持动态类型的同时也被设计为弱类型，并采用基于原型的设计模式。该语言内置支持多种数据类型的处理机制，并且具备以下特点：

1. 支持动态类型的弱类型编程语言采用基于原型的设计模式。
2. 与网页前端开发相关的技术体系。
3. 能够实时更新HTML/CSS属性值并展示效果变化。
4. 这是一种实现解释性编程语言的方案。
5. 不区分大小写的编程模型。
6. 具有弱类型的语言特征。
7. 整个系统的格式：
8. ...公式保持不变
9. 输出结果自然增加约40%

      window.onload=init;        //自定义函数init
        function 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重构而成，在/jsp容器中嵌入静态HTML结构以包含JSP脚本代码块，并使动态数据得以呈现

jsp运行的工作原理

生成.jsp文件
创建jsp代码时需结合使用html、css和javascript元素
$<%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%//*jsp抬头
当部署运行web容器时，在首次执行jsp脚本时会将其转换为对应类 servlet 的源代码，并进行编译。
由于首次执行的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() 方法相等价。
例如，在 JSP 中使用 <%= ... %> 标记来嵌入 Java 语句或变量。
要在 JSP 中插入 HTML 内容，请通过 <%= ... %> 标记将 HTML 代码与 JSP 言辞区隔开来。
JSP 提供了一系列内置元素（如 @Component、@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

JavaServer Pages（JSP）标准标签库旨在降低在JSP开发中所使用的小型自定义脚本的数量，并作为Sun Microsystems推出的一项辅助开发工具。

分类:

核心库:控制程序流程,存储变量的使用和输出

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 面试题及答案、面试实战经验；