Web前端基础知识整理

1. 前端基础知识

文件分类

文件类型中文备注
SGML标准通用标记语言HTML和XML的前身
HTML超本文标记语言B/S(浏览器/服务器)
XML扩展标记语言加载数据/配置信息

XML(扩展标记语言)


  1. 装载有格式的数据信息,用于各个框架和技术的配置文件描述
  2. 特点:
    1. 扩展名为.xml
    2. 内容区分大小写
    3. 标签要成对出现,形成容器,只能有一个
    4. 标签按正确的嵌套顺序,只有一个根标签
    5. 标签属性的语法:属性名=”值”,写在头上,空格隔开
  3. 格式:
       <?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(超文本标记语言)

  1. 扩展名为.html或.htm
  2. 内容不区分大小写
  3. 标签建议成对出现
  4. 嵌套顺序正确,一个根标签
  5. 标签具有固定含义: 可视化和功能性

2. JS(JavaScript)(Java脚本)

  1. 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型
  2. 特点:
    1. 与html和css结合客户端的技术
    2. 能够动态修改html,css中的属性等内容,形成动态效果
    3. 解释型语言
    4. 区分大小写
    5. 弱类型的语言
  3. 格式:
       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对象简谱)

  1. JS对象标记,JavaScript Object Notation,可以当做字符串传输,能被java,python等多种语言处理,通用性高
  2. 格式:
    1. json对象:
      {key:value,key:value,key:value}
    2. 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与字符串直接转换

  1. java向js传输的是json格式的字符串,要转换成json对象才能被js使用
  2. 代码:
str=eval(str);//str是传来的字符串,转换后变为json对象
eval()//函数:将字符串按照表达式的形式转换为对应的具体类型
//如果传来的是'1+1'放入eval函数会转换成数值进行计算返回结果

4. JSP(java server page)(Java服务器界面)

  1. 由servlet改编而成,用静态的html去嵌套jsp脚本,完成动态数据的显示
  2. /src/main/webapp下创建.jsp文件

jsp运行的工作原理

  1. 编写.jsp文件
  2. 编写jsp代码:jsp元素+html/css/javascript
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>//jsp抬头
  3. 在web容器部署运行时,首次运行jsp会将它翻译成类servlet源文件.java并编译.class
    第一次jsp运行比较慢是因为要翻译成.java文件
  4. web容器执行.class文件

jsp元素

  1. jsp元素运行级别高于静态元素,如果出现相同属性仅执行jsp元素
  2. jsp指令,指示页面执行动作属性
    <%@指令名 属性="值"...%>
  3. page指令:规定整个页面的属性特征
    1. language=”java” ,规定整个页面的编程语言
    2. contentType=”text/html; charset=UTF-8”,规定当前页面基于html编写
    3. isErrorPage=”true”,规定当前页面主要用于显示错误信息
    4. include
    5. taglib

小脚本

  1. 作为web服务器运行的java代码,相当于servlet的service()方法
    <% java语句,结构或jsp内置元素 %>
  2. 如果想在jsp中写html部分,需要用<% %>将jsp语句隔开
  3. jsp内置元素
jsp元素功能
out页面输出对象,如out.print()
page得到整个页面对象
pageContext得到页面的上下文
config得到web配置信息web.xml
request代表请求
session代表会话
application代表应用
response代表响应
exception代表运行错误对象,仅当jsp的page指令为isErrorPage=”true”时可用

全局声明

  1. 语法:<%! 全局属性或方法 %>
  2. 写在声明中的全局声明会当做类的属性/方法
  3. 写的脚本中的局部变量/方法会写入service方法中

jsp表达式

  1. 语法:<%=表达式%>
  2. 用于显示表达式的值页面

jsp注释

  1. 语法:<%--注释内容 --%>
  2. 不能在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分类

  1. ModelI:jsp+javaBean

  2. MdoelII:jsp+servlet+javaBean,mvc

EL(expression language)

  1. 用于输出存储范围对象

  2. 语法: 表达式常量表达式,{2*5}

获取存储在jsp上下文四个存储范围中的对象,依次查找当前页面和三块存储区,可简化javaBean对象属性的获取

范围关键字${pageScope.x.sage}

  1. pageScope

  2. requestScope

  3. sessionScope

  4. applicationScope

判断空对象,empty,not empty

判断大小,ge,gt,le,lt

6. jstl(jsp标准标签库语言)

目的是减少jsp上小脚本的数量,作为sun公司推出的jsp辅助技术

分类:

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

  2. jstl sql库:直接在页面上使用sql语句

  3. jstl fmt库:按指定形式格式化数值

使用:

  1. maven中添加jstl依赖库

  2. 在jsp页面上通过<%@taglib%>指令引入jstl对应类型库

  3. 在jsp中使用具体的标签

案例:

输出控制

  1. uri=依赖库,引入的是当前标签库的标识

  2. prefix=前缀,代表在jsp中代码当前引入的标签库的标识

  3. out标签:向页面输出

  4. value:引用EL表达式将存储猚中的对象引出

  5. 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前端知识,可访问 web前端学习!!

以上就是Web前端基础知识整理的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » 前端答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

1/1