关于Web前端的学习笔记，HTML、表格标签、框架标签、表单标签、CSS、JavaScript、JQuery、XML，超详细超完整

Web前端

1.Web前端:

前端基础: HTML、CSS、JavaScript
HTML: 内容 - 用于展示要显示的数据
CSS: 美化界面
JavaScript: 动态页面效果

前端框架:
vue.js node.js react

Web前端开发常见的IDE:
HBuilder/HBuilderX
VsCode
NetBeans
IDEA
…

2.系统架构:

1)B/S
Browser/Server (浏览器/服务器的交互)
* 只需要有一个浏览器,用户可以通过不同的网址(url),客户访问的不同服务器的程序

Browser支持哪些语言:HTML CSS JS
Server支持哪些语言: c++ java python php…

Browser的优缺点:
优点:升级方便,只需要升级服务器端代码即可,维护成本低
缺点: 速度慢,体验不好

2)C/S
Client/Server(客户端/服务器的交互)

Client的优缺点:
优点: 速度快,用户体验好,界面效果炫酷
缺点:安装,升级麻烦,维护成本高

3.B/S系统架构

资源分类:
1).静态资源
* 使用静态网页技术进行开发的资源
* 特点:
①.所有的用户访问时,显示的内容都是一样的
②.内容包括: 音视频,超链接…
③.因为浏览器中内置了静态资源的解析引擎,可以展示静态资源

2).动态资源

• 使用动态网页技术进行开发的资源
  • 特点:
    ①.所有的用户访问的页面,有可能是不一样的.
    ②.内容包含: servlet/jsp
    ③.如果用户请求的动态资源,那么服务器会执行动态资源转换成静态资源,在发送给浏览器.

4.HTML:超文本标记语言

全称:Hyper Text Markup Language

• 超文本:
  通文本之外还可以存放音视频/超链接/图片等资源…

• 标记语言:

  • 由标签构成的语言 <标签名称>
  • 标记语言不是编程语言

1.文件标签:

1)标签类型
* !DOCTYPE html: html文本类型,版本
* html: html文本根标签
* head: 头标签,一般用于指定html文本类型的一些属性,引入外部的资源
* body: 主体标签

2)标签的使用:
* 标签之间是可以进行嵌套的

* 标签中可以定义属性
属性是以键值对的方式进行存储,值可以使用(单/双引号)引起来
例如:属性 = “属性值”

2.文本标签: 和文本相关的标签

1)标题标签:
a.hn标签:

* n的范围: 1 ~ 6 数字越大字体越小
* 标题标签都是自占一行,也就是自动换行
* hn标签属于块元素

c.hr标签: 线标签

• 控制大小的属性: size
• 控制颜色的属性: color
• 控制实线的属性: noshade=“noshade”
  意: 属性 = 属性值时,属性值可以省略

2)实体定义符:
> - >
< - $lt;
空格 -  
& - &
" - "

3)段落标签
* 段落标签:

* 段落和段落之间会有留白一行
* 自带换行功能
* 换行标签:

* 普通换行,中间不会留白一行
* 属于单文本标签,自闭和标签

4)字体样式标签
* 加粗
*
*
* 变斜
*
* 下划线
*

5)字体标签
* 字体标签:
* 作用: 控制颜色大小和颜色,如果直接使用字体标签会没有效果,需要配合属性使用
* 控制大小的属性: size
* 控制颜色的属性: color
属性值:
* 英文直接表示
* 16进制的数:以#开始的rgb
* #简写16进制

6）预定义标签：pre

7）分隔线：hr

3.多媒体标签

1)图片标签:
特点:图片标签不会自动换行,是行内元素
属性:

• src:图片路径
  L:网络路径 -> ip + 端口/资源路径

  • width:图片的宽/height:图片的高

    宽和高都是以像素px为单位
    如果不设置,就是默认图片大小
    自动等比例缩放

    • title:鼠标移动上则显示内容
      alt:图片不能正常加载时显示的文本内容

2)音频标签:
属性:
src:路径
controls:控制按钮,播放控制器,需要点击播放
autoplay:自动播放
loop: 循环播放
3)视频标签:
属性:
src:路径
controls:控制按钮,播放控制器,需要点击播放
autoplay:自动播放
loop: 循环播放

4.列表标签

列表标签分为两类:配合<li>使用
a.有序（ordered lists）：带有序号的 <ol>
属性：type
		1 - 数字
        a - 小写字母
        A - 大写字母
        i - 小写罗马字母
        I - 大写罗马字母
start：开始序号   只需要写数字即可
b.无序（unordered lists）：带符号的 <ul>
disc:实心圆--默认方式
circle：空心圆
square：方块

5.超链接

1)格式:
注意: 标签必须配置href属性使用,否则就不是超链接
2)属性:
href:超链接地址
* 网站内的站点网址

target:超链接打开方式

• _self:当前页面打开
• _blank:在新的页面打开

name:标记名字,配置锚点使用

3)锚点:也是超链接的一种,属于页内跳转
使用步骤:
a.打锚点(设置锚点):也是就设置标签
然后再这里给name属性做一个标记
b.跳转到指定的锚点
#:表示当前页面
#top:跳转到当前页面的top的这个位置

5.表格标签

1)属性:
border - 边框
cellspacing - 单元格之间的空隙
cellpadding - 单元格内容和内边框之间的距离
width/height - 宽和高
align - 表格居中/左/右

2)子标签:
caption: 表的标题
thead:标记是表头
tbody:标记是表主体,并且可以有多个
tfoot:标记是表末尾
tr:表示一行
属性:
* align:设置内容居中显示
* bgcolor: 设置背景颜色
td:表示一列
属性:
* align:设置内容居中显示
* bgcolor: 设置背景颜色
* rowspan: 跨几行
* colspan: 跨几列

6.框架标签

1):窗口集合
a.属性:
rows:上下排列 -> 值:给百分比
cols:左右排列
b.rameset 不能和body共存

2): 一个窗口
属性:
src: 引入的子页面
name: 给当前窗口标签起名字
要结合a标签中的target属性使用
例如: target = “name”

7.表单标签(重要!!!)

1)作用: 将数据提交给服务器

2)属性:

* action:服务器资源地址(servlet)
* method:方式,方法,提交方式[发送请求的方式]
    两种提交方式:
        get - 默认
        post
* enctype:数据的类型(表单的类型) - 后面传文件的时候需要修改 

3)子标签:

input标签:自闭和标签

​ 属性:

type类型:

​ text - 普通文本框
​ password - 密码框
​ radio - 单选按钮
​ checkbox - 复选按钮
​ file - 文件框
​ date - 时间,日历 H5
​ submit - 提交按钮,将数据提交到服务器中
​ reset - 重置按钮
​ button - 普通按钮
​ hidden - 隐藏域,通常用来存储id值

name:用来给input标签命名的

​ 作用:因为只有命名过的form标签,内容才能提交到服务器上

value:给input命名

​ a.从地址上知道有单选框和复选框的值是不能直接获取的,所以需要通过value属性值获取
​ b.不是所有的input标签都能使用

​ checked: 设置默认选中状态
​ 注意:只有type属性值是 radio和checkbox有效

select标签: 下拉列表标签

属性:
name:加在select标签上,因为选中的时候只需要一个值

​ value:加在option标签上,每个下拉列表的选项都会对应不同的值

​ selected:默认选项,加在option标签上

textarea标签:多行文本域

属性:
cols:默认显示列数
rows:默认显示行数

label标签:

作用:使表单中的文字和input标签关联在一起
属性: for -> 想要关联谁就for谁
使用步骤:
a.label标签中添加属性for
b.input标签中添加id
c.for的值 = id的值 -> 使他们关联起来

8.CSS:层叠样式表

1.添加css的方式

1)内嵌式
a.添加方式:在标签中添加style属性
b.特点:只对当前标签有效

2)内联式
a.添加方式:在html文件中的head标签中添加style标签
b.特点:只对当前文件有效

3)外联式
a.添加方式: link标签进入外部的css文件
b.添加步骤:
a.在css文件夹中创建一个css文件
b.添加需要修改的样式标签
c.在需要添加样式的html文件中添加link标签,表示引入css样式
c.特点:可以给所有的文件添加样式,但是必须配合link标签使用
link标签的属性:
href: 表示引入的是放在外联式标签的css文件

2.CSS的选择器

1)简单选择器
a.元素选择器: 元素(标签)
b.id选择器: [#id]
c.类选择器: [.class]
d.组合选择器: 使用[,]进行拼接
e.所有元素选择器: [*]

2)派生选择器
a.后代选择器: 使用[空格]连接
b.子代选择器: 使用[>]连接
c.相邻兄弟选择器: 使用[+]连接

3)伪类选择器
注意:[:]后+的,都是属于伪类/伪元素选择器
a.选出第一个元素:[:first-child]
b.选出最后一个元素:[:last-child]
c.和超链接相关:
a.已经访问过的状态[:visited]
b.悬停在连接上的状态[:hover]
c.普通状态[a]
d.鼠标单击状态[:active]

3.浮动效果: float

​ * left -> 向左浮动
​ * right -> 向右浮动
​ * 清除浮动效果: clear:both

3.盒子模型
1)特点:盒子模型是所有块元素都拥有的内容
2)组成部分:
* margin:外边距 - 元素和相邻元素之间的距离
注意: 取值不会做叠加
* padding:内边距 - 元素内容和边框之间的距离
* border:边框
* width/height: 元素内容的宽和高
3)行内元素和块元素之间的转换:
block: 转换成块元素
inline: 转换成行内元素
none: 不显示,隐藏

9.JavaScript:

1.使用方式

1)内嵌式
* 特点: 可以放在html文件中的任意位置
* 属性: type = “text/javascript”
= “text/css”
= “text/html”

2)外联式:
使用步骤:
1.在外部创建一个js文件夹
2.在html文件中添加一个script标签,标签必须存在属性src: 引入的js文件的地址

2.ECMA - 核心基础

1)变量:
特点:
a.js中的变量是弱类型,类型是可以随意进行切换的
b.可以不用声明变量,不声明是表示全局变量
typeof类型:
值: number - 数值类型
undefined - 没有定义类型
boolean - 布尔类型
String - 字符类型
Object - 引用或者null类型
2)逻辑控制语句
注意: java中的类型全部变成var即可

3)运算符:
== 和 === 的区别:
==: 比较内容是否相等
===: 比较 内容 + 类型

4)数组:
* 特点: js中的数组是可变长数组.
* 创建方式:
new Array();
new Array(size);
new Array(元素,元素,…)
var arr = [元素,元素,…];

5)JS的函数: function
特点:
a.没有访问修饰符,返回值类型等
b.没有方法重载,会直接覆盖
c.赋值时多给了值,不会有任何影响
d.赋值时少给了值,出现NaN
NaN -> not a number
e.返回值可写可不写

3.事件 - Events

1)常用事件属性:
onblur - 让元素失去焦点,结合input标签使用
onfocus - 让元素获取焦点,结合input标签使用
onchange - 内容改变,结合select标签使用
onclick - 单击,可以用于所有元素
onmouseover - 鼠标被移动到某个元素上
onmouseout - 鼠标被移除
onkeydown - 键盘按下,结合input标签使用
onload - 某个页面被加载,结合body标签
onsubmit - 提交按钮点击后会触发的事件

2)事件的使用方式
a.内嵌式
在标签内添加事件属性
例如: onclick = “”
b.内联式
①.在标签内添加事件属性
②.添加script标签
③.调用js函数 function,在函数中写内容
④.属性值 = 函数名
例如:onclick = “m1()”
function m1()

10.JQuery:

1.什么是JQuery?

jq就是js的代码库,也就是相当于java的jar包(工具类).

2.JQ对象和JS(dom)对象的区别

1)js对象使用:
var obj = document.getElementById(“id”)
obj是js对象
obj.value -> 获取标签对应的值

2)jq对象的使用:
jq对象表示都是数组.
var obj = $(“#id”);

3)jq和js对象之间可以进行转换
* jq对象 转换成 js对象
$(“#id”).get(0).函数/属性
* js对象 转换成 jq对象
var obj = document.getElementById(“id”)
$(obj).函数

3.JQuery的选择器

1)概念:
就是一个字符串,用来定位dom(js)对象的.
定位到dom对象,就可以通过JQuery的函数操作dom对象

2)基础选择器:

• id选择器:
  语法: $(“#dom对象的id值”)
  通过dom对象的id定位dom对象.
  通过id找对象,id就是页面中唯一的值

• class选择器:
  语法: $(“.class样式名”)

• 元素(标签)选择器:
  语法: $(“标签名称”)

• 所有选择器:
  语法: $(“*”)

• 组合选择器:
  语法: $(“选择器1,选择器2”)

3)过滤选择器:
:first : 表示第一个dom对象
:last : 表示最后一个dom对象
:eq(index): index代表数组的下标,从0开始
获取指定下标的dom对象 ==
:gt(index): index代表数组的下标,从0开始
获取大于下标的所有dom对象 >
:lt(index): index代表数组的下标,从0开始
获取小于下标的所有dom对象 <

4).表单选择器:
使用标签的type的属性值,用来定位dom对象的方式
语法: $(“:type的属性值”)
注意: :input表示所有的输入框
:button表示所有的按钮

5).表单对象属性选择器:
:enabled -> 启用状态
:disabled -> 不可用状态
:checked -> 选择状态
:selected -> 选择状态

4.文本相关:

innerHTML -> html()
innerText -> text()
value -> val()
注意: 调用方法是,空参代表获取(get),有参代表设置(set)

5.each方法的使用:

1)可以对数组,json,dom数组循环处理.
数组,json中每一个成员都会去调用一次处理函数
2)语法:
$.each(循环的内容,处理函数)3)$ -> 可以理解成java中的类名

* each:相当于java类中的静态方法
  静态方法的调用: 类名.方法名

11.XML:可扩展标记语言

全称:Extensible Markup Language
可扩展:标签都是自定义的. 如:

1.功能

• 存储数据

  1).配置文件
  2).在网络中传输

2.XML和HTML的区别

1).xml标签是可以自定义,html标签预定义标签
2).xml语法严格,html语法松散
3).xml是存储数据的,html是展示数据

3.语法

1).xml文件的后缀名 .xml
2).xml文件的第一行必须定义为文件声明
3).xml文件有且只有一个根标签
4).属性值必须使用引号(单双都可以)引起来
5).标签必须正确关闭,也就是要有开头和结尾
6).xml标签名称区分大小写

4.xml的组成部分

组成:文档声明/指令/标签/属性/文本…
1).文档声明
* version: 版本号,必须写的属性
* encoding: 编码方式,告知解析引擎当前文档中使用的字符集
默认值:IS08859-1
* standalone: 是否独立 (了解)
*取值
* yes: 不依赖其他文件
* no: 依赖其他文件

2).指令(了解) 结合css使用
* <?xml-stylesheet type="text/css" href="a.css" ?>

3).标签:标签名是自定义的
XML 元素必须遵循以下命名规则：
* 名称可以含字母、数字以及其他的字符
* 名称不能以数字或者标点符号开始
* 名称不能以字符 “xml”（或者 XML、Xml）开始
* 名称不能包含空格

4).属性
* 以键值对方式进行存储
* id属性用于标识唯一,使用时用(单/双引号)

5).文本
CDATA区:在这个区域内的数据会被原样显示出来
格式: <![CDATA[要显示的数据]]>

5.约束:规定xml文档的书写规则

• 分类:

• dtd约束: 一种简单的约束

• Schema约束: 一种复杂的约束

• DTD约束:

  • 引入dtd文档到xml文件中
    • 内部dtd: 将约束定义在xml文档中
    • 外部dtd: 将约束定义在外部的dtd文件中

6.解析xml文件

操作xml文件,将文件中的数据读取到内存中

1)操作xml文件
(1).解析(读取):将文件中的数据读取到内存的过程
(2).写入:将内存中的数据保存到xml文件中,可以做到持久化存储 -> 和IO的读写一样

2)解析xml方式:
(1)DOM:将标记文本中的内容一次性加载到内存中,会在内存中形成一个dom树
* 优点:操作方便,获取到数据之后可以针对数据进CRUD操作
* 缺点:占用内存空间大

(2)SAX:逐行读取,基于事件上进行操作
* 优点: 不占用内存空间
* 缺点: 只能做读取,不能做增删改操作

3)常见解析器:
Jsoup:支持dom 和 sax 两种思想的解析
DOM4j:仅支持dom思想的解析
PULL:仅支持sax思想的解析