浅谈并小结一下web前端的知识点
Posted 逝去日子1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浅谈并小结一下web前端的知识点相关的知识，希望对你有一定的参考价值。
1.web概念概述
1.1JavaWeb
使用Java语言开发基于互联网的项目。
1.2 软件架构
1.2.1 C/S: Client/Server 客户端/服务器端
在用户本地有一个客户端程序，在远程有一个服务器端程序。如：QQ，迅雷...
优点：
1. 用户体验好。
缺点：
1. 开发、安装，部署，维护较后者麻烦。
1.2.2 B/S: Browser/Server 浏览器/服务器端
只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序。
优点：
1. 开发、安装，部署，维护较前者简单。
缺点：
1. 如果应用过大，用户的体验可能会受到影响。
2. 对硬件要求过高。
1.2.3 B/S架构详解
资源分类：
1. 静态资源：
使用静态网页开发技术发布的资源。
特点：
所有用户访问，得到的结果是一样的。
如：文本，图片，音频、视频, html,CSS,javascript。
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
2. 动态资源：
使用动态网页及时发布的资源。
特点：
所有用户访问，得到的结果可能不一样。
如：jsp/servlet,php,asp...
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。
3. 我们要学习动态资源，必须先学习静态资源！
静态资源：
HTML：用于搭建基础网页，展示页面的内容。
CSS：用于美化页面，布局页面。
JavaScript：控制页面的元素，让页面有一些动态的效果。
2.HTML
2.1 概念
是最基础的网页开发语言Hyper Text Markup Language 超文本标记语言。
超文本:
超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
标记语言:
由标签构成的语言。<标签名称> 如 html，xml.
标记语言不是编程语言。
2.2 快速入门
语法：
1. html文档后缀名 .html 或者 .htm
2. 标签分为:
1. 围堵标签：有开始标签和结束标签。如 <html> </html>
3. 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
正确：<a><b></b></a>
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
5. html的标签不区分大小写，但是建议使用小写。
2.2.1 hello world案例代码实现
<html>
<head>
<title>title</title>
</head>
<body>
<font color='green'>Hello World</font>
</body>
</html>
2.3 常用标签学习
2.3.1 文件标签：构成html最基本的标签
html:html文档的根标签。
head：头标签。用于指定html文档的一些属性。引入外部的资源。
title：标题标签。
body：体标签。
<!DOCTYPE html>：html5中定义该文档是html文档。
2.3.2 文本标签：和文本有关的标签
注释：<!-- 注释内容 -->
<h1> to <h6>：标题标签、h1~h6:字体大小逐渐递减、<p>：段落标签、<br>：换行标签、<hr>：展示一条水平线...
属性： color：颜色、width：宽度、size：高度、align：对其方式(center：居中，left：左对齐， right：右对齐)
<b>：字体加粗、<i>：字体斜体、<font>:字体标签、 <center>:文本居中
属性：color：颜色、size：大小、 face：字体...
属性定义
color：
1. 英文单词：red,green,blue。
2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)。
3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF。
width：
1. 数值：width='20' ,数值的单位，默认是 px(像素)。
2. 数值%：占比相对于父元素的比例。
2.3.3 表单标签：和表单有关的标签
表单概念：用于采集用户输入的数据的。用于和服务器进行交互。
form标签：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。
form标签的重要属性：
action：指定提交数据的URL
method:指定提交方式
method值 分类：一共7种，2种比较常用
get：
1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2. 请求参数大小是有限制的。
3. 不太安全。
post：
2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)。
2. 请求参数的大小没有限制。
3. 较为安全。
注意：表单项中的数据要想被提交：必须指定其name属性！
2.3.4 表单项标签
input：可以通过type属性值，改变元素展示的样式 type属性： text：文本输入框，默认值placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息。
password：密码输入框 radio:单选框 1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。 2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 3. checked属性，可以指定默认值 checkbox：复选框。
注意： 1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 2. checked属性，可以指定默认值。
file：文件选择框
hidden：隐藏域，用于提交一些信息。
按钮：
submit：提交按钮。可以提交表单。
button：普通按钮。
image：图片提交按钮。
src属性指定图片的路径。
abel：指定输入项的文字描述信息
注意：label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
select: 下拉列表
子元素：option，指定列表项。
textarea：文本域
cols：指定列数，每一行有多少个字符。
rows：默认多少行。
3.CSS：页面美化和布局设置
3.1 概念
Cascading Style Sheets 层叠样式表，层叠：多个样式可以作用在同一个html的元素上，同时生效
3.2 CSS的使用：CSS与html结合方式
1. 内联样式：在标签内使用style属性指定css代码。
如：<div style="color:red;">hello css</div>
2. 内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color:blue;
}
</style>
</head>
<body>
<div>hello css</div>
</body>
</html>
3. 外部样式
1). 定义css资源文件。
2). 在head标签内，定义link标签，引入外部的资源文件
引入hello.css文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/hello.css">
div{
color:green;
}
</head>
<body>
<div>hello css</div>
<div>hello css</div>
</body>
</html>
4. css语法：
格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
选择器:筛选具有相似特征的元素
注意： 每一对属性需要使用";"隔开，最后一对属性可以不加";"。
5. 选择器：筛选具有相似特征的元素
分类：
1). id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一，语法：#id属性值{}。
2). 元素选择器：选择具有相同标签名称的元素，语法： 标签名称{}。3. 类选择器：选择具有相同的class属性值的元素。语法：.class属性值{}。4.选择所有元素：语法： *{}。
4.Javascript
4.1 概念与功能
概念：一门客户端脚本语言。运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，脚本语言：不需要编译，直接就可以被浏览器解析执行了
功能：可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
4.2 基本语法
基本语法与Java类似。
数据类型：
1. 原始数据类型(基本数据类型)：
1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
2. string：字符串。 字符串 "abc" "a" 'abc'
3. boolean: true和false
4. null：一个对象为空的占位符
5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
2.引用数据类型：对象(常用对象)
//Function：函数(方法)对象
//创建
var a=3;
var b=4;
function fun(a) {
alert(a);
}
fun=function (b) {
document.write(b);
}
//Array:数组对象
//1. 创建：
var arr = new Array(1,'a','abc');
var arr = new Array(5);
var arr = [1,'a','abc'];
//2. 方法
//join(参数):将数组中的元素按照指定的分隔符拼接为字符串
//push() 向数组的末尾添加一个或更多元素，并返回新的长度
//length:数组的长度,JS中，数组元素的类型可变的。JS中，数组长度可变的
//Date：日期对象
//1. 创建：
var date = new Date();
//2. 方法：
//toLocaleString()：返回当前date对象对应的时间本地字符串格式
//getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
5.BootStrap
5.1 概念
1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
好处：
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 响应式布局。
同一套页面可以兼容不同分辨率的设备。
5.2 快速入门
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>5.3 响应式布局
同一套页面可以兼容不同分辨率的设备。
实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。
步骤：
1. 定义容器。相当于之前的table。
容器分类：
1. container：两边留白。
2. container-fluid：每一种设备都是100%宽度。
2. 定义行。相当于之前的tr 样式：row。
3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
设备代号：
1. xs：超小屏幕 手机 (<768px)：col-xs-12
2. sm：小屏幕 平板 (≥768px)
3. md：中等屏幕 桌面显示器 (≥992px)
4. lg：大屏幕 大桌面显示器 (≥1200px)
注意：
1. 一行中如果格子数目超过12，则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
6.XML
6.1 概念
1. 概念：Extensible Markup Language 可扩展标记语言，可扩展：标签都是自定义的。 <user> <student>
功能： 存储数据
1. 配置文件
2. 在网络中传输
xml与html的区别
1. xml标签都是自定义的，html标签是预定义。
2. xml的语法严格，html语法松散
3. xml是存储数据的，html是展示数据
2. 语法：
基本语法：
1. xml文档的后缀名 .xml
2. xml第一行必须定义为文档声明
3. xml文档中有且仅有一个根标签
4. 属性值必须使用引号(单双都可)引起来
5. 标签必须正确关闭
6. xml标签名称区分大小写
6.2 快速入门
<?xml version='1.0' ?>
<users>
<user id='1'>
<name>zhangsan</name>
<age>23</age>
<gender>male</gender>
<br/>
</user>
<user id='2'>
<name>lisi</name>
<age>24</age>
<gender>female</gender>
</user>
</users>6.3 xml常见的解析器
1. JAXP：sun公司提供的解析器，支持dom和sax两种思想。
2. DOM4J：一款非常优秀的解析器。
3. Jsoup：jsoup 是一款Java 的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。
4. PULL：android操作系统内置的解析器，sax方式的。
6.3.1 示例代码
package xml;
import cn.wanghaomiao.xpath.model.JXDocument;
import cn.wanghaomiao.xpath.model.JXNode;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.select.Elements;
import java.io.File;
import java.util.List;
public class JsoupDemo {
public static void main(String[] args) throws Exception {
//以下是Xpath语法查询
//1.获取students.xml文件的path
String path = ClassLoader.getSystemClassLoader().getResource("students.xml").getPath();
//2.获取Document 文档对象
Document document = Jsoup.parse(new File(path), "utf-8");
//3.根据 Document对象船舰JXDocument对象
JXDocument jxDocument=new JXDocument(document);
//4.结合Xpath语法查询
//4.1查询根结点student下的所有子结点
List<JXNode> jxNodes = jxDocument.selN("//student");
//遍历查询结果
jxNodes.forEach(System.out::println);
System.out.println("------------------");
//4.2查询根结点student下的name结点内容
List<JXNode> jxNodes1 = jxDocument.selN("//student/name");
jxNodes1.forEach(System.out::println);
System.out.println("------------------");
//4.3获取student下number id属性=itcast的name值
List<JXNode> jxNodes2 = jxDocument.selN("//student[@id='itcast']/name");
jxNodes2.forEach(System.out::println);
System.out.println("------------------");
//以下是selector选择器查询(不用导入第三方API)
Elements age = document.select("age");
age.forEach(System.out::println);
System.out.println("------------------");
Elements elements = document.select("student[number='heima_0002'] >age");
elements.forEach(System.out::println);
}
}以上是关于浅谈并小结一下web前端的知识点的主要内容，如果未能解决你的问题，请参考以下文章
浅谈并查集 By cellur925内含题目食物链银河英雄传说等