JavaWeb知识学习（一）

01_HTML&&CSS

1. HTML

HTML(HyperText Markup Language)：超文本标记语言

特点：

• HTML 文件以.htm或.html为扩展名
• HTML 标签不区分大小写
• HTML 标签属性值 单双引皆可
• HTML 语法松散

1.1 基础标签

1.2 图片、音频、视频标签

• img：定义图片

• src：规定显示图像的 URL（统一资源定位符）
• alt：替换文本（图片不能显示时的文字）
• title：提示文本（鼠标放到图片上显示的文字）
• height：定义图像的高度
• width：定义图像的宽度
• border：设置图片边框

• audio：定义音频。支持的音频格式：MP3、WAV、OGG

• src：规定音频的 URL
• controls：显示播放控件

• video：定义视频。支持的音频格式：MP4, WebM、OGG

• src：规定视频的 URL
• controls：显示播放控件

资源路径：

资源路径有如下两种设置方式：

• 绝对路径：完整路径
  这里的绝对路径是网络中的绝对路径。 格式为： 协议://ip地址:端口号/资源名称。
• 相对路径：相对位置关系
  找页面和其他资源的相对路径。

./ 表示当前路径

../ 表示上一级路径

../../ 表示上两级路径

<!--在该页面找a.jpg，就需要先回到上一级目录，该级目录有img目录，进入该目录就可以找到 a.jpg图片-->
 <img src="../img/a.jpg" width="300" height="400">
 <!--该页面和aa.jpg 是在同一级下，所以可以直接写 图片的名称，也可以写成  ./aa.jpg-->
 <img src="aa.jpg" width="300" height="400">

1.3 超链接标签

超链接使用的是 a 标签， 标签属性：

• href：指定访问资源的URL
• target：指定打开资源的方式

• _self：默认值，在当前页面打开
• _blank：在空白页面打开

1.4 列表标签

• 有序列表

<ol type="A">
     <li></li>
     <li></li>
     <li></li>
 </ol>

• 无序列表

<ul type="circle">
     <li></li>
     <li></li>
     <li></li>
 </ul>

有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）

无序列表中的 type 属性用来指定标记的形状

1.5 表格标签

• table ：定义表格

• border：规定表格边框的宽度
• width ：规定表格的宽度
• cellspacing：规定单元格之间的空白

• tr ：定义行

• align：定义表格行的内容对齐方式

• td ：定义单元格

• rowspan:规定单元格可横跨的行数
• colspan:规定单元格可横跨的列数

• th：定义表头单元格
• 表格结构标签：<thead>、<tbody>，内部必须有<tr>

1.6 表单标签

表单就是用来采集用户输入的数据，然后将数据发送到服务端，服务端会对数据库进行操作，比如注册就是将数据保存到数据库中，而登陆就是根据用户名和密码进行数据库的查询操作。

表单通常由表单域和表单元素组成。

表单：在网页中主要负责数据采集功能，使用<form>标签定义表单

表单项(元素)：不同类型的 input 元素、下拉列表、文本域等

① form 标签属性

• action：规定当提交表单时向何处发送表单数据，该属性值就是URL
  会将数据提交到服务端，该属性需要书写服务端的URL。
• method ：规定用于发送表单数据的方式
  method取值有如下两种：

• get：默认值。如果不设置method属性则默认就是该值

• 请求参数会拼接在URL后边
• url的长度有限制 4KB
• 不太安全

• post：

• 浏览器会将数据放到http请求消息体中
• 请求参数无限制的
• 较安全

② 表单项标签

表单项标签有很多，不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个：

• <input>：表单项，通过type属性控制输入形式

除了type属性外，<input>还有其他属性：name、value、checked、maxlengh

• name和value时每个表单元素都有的属性，主要给后台人员使用
• 单选按钮（radio）复选框（checkbox）都要有相同的name
• checked主要用于单选框、复选框，默认选中

• <label>：定义标注，增强用户体验

<!--for与id相同-->
 <label for="sex">男</label>
 <input type="radio" name="sex" id="sex"/>

• <select>：定义下拉列表，<option> 定义列表项

<select>
     <option selected>--请选择--</option>
     <option>北京</option>
     <option>上海</option>
     <option>广州</option>
 </select>

• <textarea>：文本域
  常用于评论、留言板

<textarea rows="3",cols="20">
 
 </textarea>

2. CSS

Cascading Style Sheet（层叠样式表），用于控制网页表现。

2.1 css 导入方式

• 内联样式：在标签内部使用style属性，属性值是css属性键值对

<div style="color: red">Hello CSS~</div>

给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。

• 内部样式：定义<style>标签，在标签内部定义css样式

<style type="text/css">
     div{
         color: red;
     }
 </style>

这种方式可以做到在该页面中复用。

• 外部样式：定义link标签，引入外部的css文件
  编写一个css文件。名为：demo.css，内容如下:

div{
     color: red;
 }

在html中引入 css 文件。

<link rel="stylesheet"  href="demo.css">

这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 link 标签引入该css文件。

2.2 css 选择器

• 基础选择器

• 复合选择器

2.3 css 属性

① 字体属性

② 文本属性

③ 背景属性

2.4 css 三大特征

• 层叠性
  相同选择器设置相同的样式，此时样式会被覆盖，遵循原则是就近原则，解决样式冲突问题
• 继承性
  子标签会继承父标签的某些样式（text-，font-，line-height，color)，但盒子模型（border、margin，padding）不会继承
• 优先级

• 选择器相同，则执行层叠性，就近原则
• 选择器不同，根据选择器权重执行

注意：权重只会叠加，不会进位！

2.5 页面布局三大核心

① 盒子模型

• border 边框

• 语法：border: border-width border-style border-color

.box{
     border: 1px solid red;
 }

• border-radius：圆角边框
• border-shadow：盒子阴影

• padding 内边距
• margin 外边距

② 浮动

• float ：left \ right;
• 浮动特征：

• 脱离标准流的控制，浮动到指定位置
• 浮动的盒子不在占有原来位置
• 任何元素都可以浮动，浮动后就具有行内块的特征

• 清除浮动：
  如果父盒子本身没有高度，子盒子浮动后就会影响下面的标准流，故需要清除浮动

• clear: left \ right \ both
• 清除浮动的方法：

③ 定位

定位可以让盒子自由在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子

定位 = 定位模式 + 边偏移

定位模式：static(默认)、relative、absolute、fixed

边偏移：top、bottom、left、right

02_JavaScript

03_XML

1. 概念

Extensible Markup Language 可扩展标记语言

• 可扩展：标签都是自定义的。
• 功能：存储数据

• 配置文件
• 在网络上传输

• xml与html的区别

• xml标签都是自定义的，html标签是预定义。
• xml的语法严格，html语法松散
• xml是存储数据的，html是展示数据

2. 语法

2.1 基本语法

• xml文档的后缀名 .xml
• xml第一行必须定义为文档声明
• xml文档中有且仅有一个根标签
• 属性值必须使用引号(单双都可)引起来
• 标签必须正确关闭
• xml标签名称区分大小写

<?xml version='1.0' encoding='utf-8'?>
 <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>

2.2 组成部分：

• 文档声明

• 格式：<?xml 属性列表 ?>
• 属性列表：

• version：版本号，必须的属性
• encoding：编码方式。告知解析引擎当前文档使用的字符集，默认值：ISO-8859-1
• standalone：是否独立

• yes：不依赖其他文件
• no：依赖其他文件

• 指令(了解)：结合css的<?xml-stylesheet type="text/css" href="a.css" ?>
• 标签：标签名称自定义的

• 规则：

• 名称可以包含字母、数字以及其他的字符
• 名称不能以数字或者标点符号开始
• 名称不能以字母 xml（或者 XML、Xml 等等）开始
• 名称不能包含空格

• 属性：id属性值唯一
• CDATA区：在该区域中的数据会被原样展示

• 格式： 格式： <![CDATA[ 数据 ]]>

2.3 约束

• DTD：一种简单的约束技术

• 引入dtd文档到xml文档中

• 内部dtd：将约束规则定义在xml文档中
• 外部dtd：将约束的规则定义在外部的dtd文件中

• 本地：<!DOCTYPE 根标签名 SYSTEM "dtd文件的位置">
• 网络：<!DOCTYPE 根标签名 PUBLIC "dtd文件名字" "dtd文件的位置URL">

<!--dtd-->
 <!ELEMENT students (student*) >
 <!ELEMENT student (name,age,sex)>
 <!ELEMENT name (#PCDATA)>
 <!ELEMENT age (#PCDATA)>
 <!ELEMENT sex (#PCDATA)>
 <!ATTLIST student number ID #REQUIRED>
 
 <!--xml-->
 <?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE students SYSTEM "student.dtd">
 <students>
     <student number="itcast_0001">
         <name>tom</name>
         <age>18</age>
         <sex>male</sex>
     </student>
     
 </students>

• Schema：一种复杂的约束技术

• 引入：

• 填写xml文档的根元素
• 引入xsi前缀 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
• 引入xsd文件命名空间 xsi:schemaLocation="http://www.itcast.cn/xml student.xsd"
• 为每一个xsd约束声明一个前缀,作为标识 xmlns="http://www.itcast.cn/xml"

<students   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xmlns="http://www.itcast.cn/xml" 
            xsi:schemaLocation="http://www.itcast.cn/xml  student.xsd"
  >

2.4 解析

解析：操作xml文档，将文档中的数据读取到内存中

• 操作xml文档

• 解析(读取)：将文档中的数据读取到内存中
• 写入：将内存中的数据保存到xml文档中。持久化的存储

• 解析xml的方式：

• DOM：将标记语言文档一次性加载进内存，在内存中形成一颗dom树

• 优点：操作方便，可以对文档进行CRUD的所有操作
• 缺点：占内存

• SAX：逐行读取，基于事件驱动的。

• 优点：不占内存。
• 缺点：只能读取，不能增删改

• xml常见的解析器：

• JAXP：sun公司提供的解析器，支持dom和sax两种思想
• DOM4J：一款非常优秀的解析器
• Jsoup：jsoup 是一款Java 的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。
• PULL：Android操作系统内置的解析器，sax方式的。

• Jsoup解析器

• 步骤：

• 导入jar包
• 获取Document对象
• 获取对应的标签Element对象
• 获取数据

• 代码

//2.1获取student.xml的path
 String path = JsoupDemo1.class.getClassLoader().getResource("student.xml").getPath();
 //2.2解析xml文档，加载文档进内存，获取dom树--->Document
 Document document = Jsoup.parse(new File(path), "utf-8");
 //3.获取元素对象 Element
 Elements elements = document.getElementsByTag("name");
 
 System.out.println(elements.size());
 //3.1获取第一个name的Element对象
 Element element = elements.get(0);
 //3.2获取数据
 String name = element.text();
 System.out.println(name);

• 对象的使用

• Jsoup：工具类，可以解析html或xml文档，返回Document

• parse：解析html或xml文档，返回Document

• parse(File in, String charsetName)：解析xml或html文件的。
• parse(String html)：解析xml或html字符串
• parse(URL url, int timeoutMillis)：通过网络路径获取指定的html或xml的文档对象

• Document：文档对象。代表内存中的dom树

• 获取Element对象

• getElementById(String id)：根据id属性值获取唯一的element对象
• getElementsByTag(String tagName)：根据标签名称获取元素对象集合
• getElementsByAttribute(String key)：根据属性名称获取元素对象集合
• getElementsByAttributeValue(String key, String value)：根据对应的属性名和属性值获取元素对象集合

• Elements：元素Element对象的集合。可以当做 ArrayList<Element>来使用
• Element：元素对象

• 获取子元素对象

• 方法同上

• 获取属性值

• String attr(String key)：根据属性名称获取属性值

• 获取文本内容

• String text():获取文本内容
• String html():获取标签体的所有内容(包括字标签的字符串内容)

• Node：节点对象

• 是Document和Element的父类

• 快捷查询方式：

• selector:选择器

• 使用的方法：Elements select(String cssQuery)
• 语法：参考Selector类中定义的语法

• XPath：XPath即为XML路径语言，它是一种用来确定XML（标准通用标记语言的子集）文档中某部分位置的语言

• 使用Jsoup的Xpath需要额外导入jar包。
• 查询w3cshool参考手册，使用xpath的语法完成查询
• 代码

//1.获取student.xml的path
 String path = JsoupDemo6.class.getClassLoader().getResource("student.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");
 for (JXNode jxNode : jxNodes) {
     System.out.println(jxNode);
 }
 
 System.out.println("--------------------");
 
 //4.2查询所有student标签下的name标签
 List<JXNode> jxNodes2 = jxDocument.selN("//student/name");
 for (JXNode jxNode : jxNodes2) {
     System.out.println(jxNode);
 }
 
 System.out.println("--------------------");
 
 //4.3查询student标签下带有id属性的name标签
 List<JXNode> jxNodes3 = jxDocument.selN("//student/name[@id]");
 for (JXNode jxNode : jxNodes3) {
     System.out.println(jxNode);
 }
 System.out.println("--------------------");
 //4.4查询student标签下带有id属性的name标签 并且id属性值为itcast
 List<JXNode> jxNodes4 = jxDocument.selN("//student/name[@id='itcast']");
 for (JXNode jxNode : jxNodes4) {
     System.out.println(jxNode);
 }