JavaWEB学习笔记（一）------- HTML、CSS、JavaScript、Tomcat10

HTML

HTML文件本质上是文本文件，主要用于网页主体结构的搭建。

html文件是浏览器负责解析和展示。

html文件文件是纯文本文件，普通编辑工具都可以编辑。

1.html文件有根标签 <html></html> 所有的其他标签都要在这之中。

2.html根标签下有两个一级子标签

<head></head> 头标签。 定义那些不直接展示在页面主体上，但是又很重要的内容。

（字符集<meta charset="utf-8"/> ：告诉浏览器用什么字符集对文件解码。

css引入、js引入、其他）。

<title></title> 标题

<body></body> 体标签。定义要展示到页面主题的标签。

<h1></h1> 一级标题。

3.注释： 。

4.文档声明：<!DOCTYPE html>。在html5版本中使用。

HTML专业词汇

标签tag：页面的一对<>。

属性attibute：对标签特征进行设置的一种方式，属性一般在开始标签中定义。

文本text：双标签中间的文字。

元素element：开始标签+属性+文本+结束标签称为一个元素。

语法细节

1. 根标签有且只能有一个。

2.无论是双标签还是但标签都需要正确关闭。

3.标签可以嵌套但不能交叉嵌套。

4.注释语法为，注意不能嵌套。

5.属性必须有值，值必须加引号，H5中属性名和值可以同时省略属性值。

6.HTML中不严格区分字符串使用单双引号。

7.HTML标签不严格区分大小写，但是不能大小写混用。

8.HTML中不允许自定义标签名，强行自定义则无效。

HTML常用标签

1.标题标签。（<h1-h6></h1-h6>）。

2.段落。（<p></p>）

3.换行。（<br/> <hr>）br：普通换行标签。hr：带分割线的换行。

4.列表标签。（<ol><li>) ol：有序列表。ul：无序列表。li：列表项。

5.超链接标签。（<a href="跳转目标资源地址"target="_self or target">文本</a>）href：用于定义要跳转的目标资源的地址。target：用于定义目标资源的打开方式。_self当前页面跳转。和_blank跳转新的页面。

6.图片标签。（<img src="" title="" alt="" />）。src：定义图片的路径。title：定义鼠标悬停时显示的文字。alt：定义图片加载失败时显示的提示文字。

7.表格标签。（<table><thead><tbody><tfoot>）。<table>：整张表格。<thead>表头。<tbody>：表主体。<tfoot>：表尾。<tr>：表格中的一行。<td>：行中的一个单元格。<th>：自带加粗居中效果的td。如果想表格跨行或跨列。则跨行<td rowspan="跨多少格">。<td colspan="跨多少列">。

8.表单标签。(<form action=" " method="post or get>)。action：定义数据的提交地址，url、相对路径、绝对路径。method：定义数据的提交方式，GET：参数会以键值对形式放在url后提交，数据直接暴露在地址栏上，不安全。地址栏长度有限制，提交的数据量不大。地址栏上只能是字符，不能提交文件。相对于post效率高。POST：参数默认不放到url后。数据不会直接暴露在地址栏上，相对安全。数据单独打包通过请求体发送，提交的数据量比较大。请求体中，可以是字符也可以是字节数据，可以提交文件。

9.input：表单项标签。（表单项标签一定要定义name属性，该属性用于明确提交时的参数名。表单项还需要定义value属性，该属性用于明确提交时的实参）

type：输入信息的表单项类型。

text：单行普通文本框。

password：密码框。

submit：提交按钮。

reset：重置按钮。

radio：单选框，多个选项选其一。多个单选框使用相同的name属性值，则会有互斥效果。

checkbox：复选框，多个选项选多个。

hidden：隐藏域，不显示在页面上，但是提交时会显示。

readonly：只读。提交时携带。

disable：不可用提交时不携带。

file：文件上传框。

10.textarea：多行文本框。

11.select：下拉框。

option：选项。

布局相关标签

1.div：块元素。自己独占一行。块元素的CSS样式的宽、高等往往是生效的。

2.span：行内元素。自己不会占一行。行内的CSS样式的宽、高等。很多是不生效的。（可以帮助将样式划定到某个范围之内。）

特殊字符

对于html来说，某些符号是有特殊含义的（这些特殊含义字符称为字符实体），如果想显示这些特殊符号，需要进行转义。

具体转义字符需要进行百度。

CSS

主要用于页面元素美化。对网页中元素位置的排版进行像素级精准控制。

引入方式

1.行内式。通过元素的style属性样式引入。

语法：style="样式名：样式值；样式名：样式值;"

缺点：（1）代码复用度低，不利于维护。

（2）css样式代码和html结构代码交织在一起，影响阅读，影响文件大小，影响性能。

2.内嵌式。通过在head标签中的style标签定义本页面的公共样式。通过选择器确定样式的作用元素。

3.外部样式表。将css代码单独放入一个.css文件中，哪个html需要这些代码就在head中通过link标签引入。<link href=".css文件的路径" rel="stylesheet">

css选择器

1.元素选择器。

语法：标签名{ }

缺点：某些同名的元素不希望使用某些样式，某些不同名的元素也使用该样式，都无法协调。

2.id选择器。根据标签的id值确定样式的作用元素。一般每个元素都有id属性，但是在一个页面中，id的值不应该相同，id具有唯一性。

语法：#id值{ }

缺点：id值有唯一性，样式只能作用到一个元素上。

3.class选择器。根据元素的class属性值确定样式的作用元素。元素的class属性值可以重复，而且一个元素的class属性可以有多个值。

语法：.class属性值{ }

css浮动

可以使多个块元素保持原本块元素特征，还能使块元素保持其原有的特征。

css定位

position：static 默认。

absolute 绝对。

relative 相对。相对元素原本的位置。

fixed 相对。相对浏览器窗口。

盒子模型

容量：width：xxpx height：xxpx。

边线：border：xxpx。

内边距：padding。可以有padding-left、padding-top、padding-right、padding-bottom。如果padding后写一个值默认是各个方向、默认写两个值默认是上下和左右、写四个值默认上右下左方向。

外边距：margin。同padding。

JavaScript

主要用于页面元素的动态处理。

js引入方式

1.内嵌式：在head中通过一对script标签定义脚本代码。(用的多)

2.引入外部脚本文件：在head中通过一对script标签引入外部js文件。

<script src="js文件路径" type="text/javascript"> </script>

注意：

（1）一个html中可以有多个script标签。

（2）一对script标签不能在引入外部js文件的同时定义内部脚本。

（3）一对script标签如果引入外部js文件，中间最好不要有任何字符，包括空格和换行。

js声明函数

java中声明函数：public void 函数名（）{}

js中声明函数：function 函数名（）{}

函数和单击或者双击按钮的行为绑定到一起：在标签中加入οnclick=“函数名()" （单击）οndblclick="函数名()" (双击)

弹窗提示：函数体中加入alter("弹窗提示")

js的数据类型

js是弱类型的，不是没有类型。是变量在声明时不指定类型，赋值时才确定类型。js中变量的声明都使用的是var。

1.数值类型：number 整数小数。

2.字符串类型：string。

3.布尔类型：boolean。

4.引用类型：Object。

5.function类型：function。

6.命名未赋值：undefined 值也是undefined。

7.赋予null：Object 值是null。

8.判断数据类型的运算符：typeof。

9.控制台上打印用的语句是：console.log()。

js中使用var声明变量的特点

1.弱类型变量可以统一声明成var。

2.var声明的变量可以再次声明。

3.变量可以使用不用的数据类型多次赋值。

4.js的语句可以以“；” 结尾，也可以不用“；” 结尾。

5.变量标识符严格区大小写。

6.标识符的命名规则参照java。

7.如果使用了一个没有声明的变量，那么运行时会报uncaught ReferenceError：*** is not defined at index.heml

8.如果一个变量只声明，没赋值，那么值是undefined。

js的运算符

1.算术运算符：

/ ：除零 Infinity。

%：模零 NaN not a number。

2.关系运算符：

==：如果两端的数据类型不一致，会尝试将两端的数据都转换为number再对比。

'123' -> 123 true->1 false->0

===：如果两端的数据类型不一致，直接返回false，相同则会继续对比。

3.其他运算符和java相同。

js分支结构

1.if：

（1）非空字符串会判断为true。

（2）非空对象会判断为true。

（3）非0的number会判断为true。

（4）其他同java。

2.switch：同java。

3.prompt()：控制台输入命令。

js循环结构

1.while：同java。

2.for：

（1）增强for循环for(var 索引 in 数组){}。注意：in前面的是数组中的索引，而java中是数组的内容。而java中是将in换成“：”。

（2）其他和java相同。

js函数

函数声明：

1.function 函数名() {}

2.var 函数名 = function (){}

和java相比有如下特点：

1.没有访问修饰符。

2.没有返回值类型也没有void，如果有值要返回，则直接return即可。

3.没有异常列表。

4.调用方法时，实参和形参可以在数量上不一致，在方法内部可以通过arguments获得调用时的实参。

5.函数也可以作为参数传递给另一个方法。

js声明对象的语法

1. new Object()

2.{属性名：属性值，... ...，函数名：function() {}}

JSON格式

一个特定的字符串语法结构，JSON格式的字符串，在前后端都可以很方便的和对象之间转换。

JSON格式的语法

var 字符串名 = '{"属性名"：“属性值”，"属性名"：“属性值”，"属性名"：{"属性名"：“属性值”}，"属性名"：{" "," "," "}，"属性名"：[{},{},{}] }

注意：属性名必须用 “ ” 包裹。属性值：字符串必须用 “ ” 包裹，数字可以不用处理。

通过 JSON.parse(字符串名) 可以将一个JSON串转换为一个对象。

通过 JSON.stringify(对象名) 将一个对象转换为JSON串。

JSON在服务端的使用

JSON转Map和Array List

JS常见对象

数组

1.数组的创建方式：

（1）var arr = new Array()

（2）var arr = new Array(长度)

（3）var arr = new Array(数组中的属性，可以为任意类型的属性)、

（4）var arr = [ 属性元素 ]

2.数组的API：

Boolean对象

Date对象

Math对象

Number对象

Sting对象

事件

HTML事件可以是浏览器行为，也可以是用户行为。当这些一些行为发生时，可以自动触发对应的JS函数的运行，我们称之为事件的发生。JS事件驱动指的就是是行为触发代码运行的这种特点。

常见事件

鼠标事件：

键盘事件：

表单事件：

界面加载事件：onload。

事件的绑定

方式1：通过元素的属性绑定 on***

方式2：通过DOM编程动态绑定。

注意：

（1）一个事件可以同时绑定多个函数。

（2）一个元素可以同时绑定多个事件。

事件通过DOM编程动态绑定

或者是通过下面

事件的触发

1.行为触发。

2.DOM编程触发：

BOM编程

windows中常用的API

window对象是由浏览器提供给我们使用的，无需自己new。可以直接window点什么。window点可以省略。

1.三种弹窗方式：

        alert()：信息提示框。

        prompt()：信息输入框。

        confirm()：信息确认框。

2.定时任务：

widow.Timeout()

3.

window对象常见属性

history：窗口的访问历史

        1.向前翻页浏览器前进按钮：history.forward()

        2.后退，浏览器后退按钮：history.back()

        3.向前翻几页：history.go(翻的页数)

location：

1.修改地址栏中的url：location.herf="url"

sessionStorage：用于存储一些会话级数据（浏览器关闭数据清除）。

localStorage：用于存储一写持久级数据（浏览器关闭数据还在）。

console.log：在控制台打印输出。

DOM编程

DOM编程相关API

1.获得document dom树。

        window.document

2.从docum中获取要操作的元素。

（1）直接获取。

（2）间接获取。

3.对元素进行操作

（1）操作元素的属性。

元素名.属性=“”

（2）操作元素的样式

元素名.style.样式名=“” （样式名”-“要进行驼峰转换）。

（3）操作元素的文本。

元素名.innerText ：只识别文本。

元素名.innerHTML ：同时可以识别html代码。

（4）增删元素。

正则表达式

正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

XML(可扩展标记语言)

xml配置文件

1.根标签只能有一个。

2.第一行永远都是：<?xml version="1.0" encoding="UTF-8"?> 前面不能有任何东西

3.xml是有约束，约束用于限定xml内部能编写的内容。

（1）dtd约束：简单、上手快、约束没有schema细致。

（2）schema约束：复杂、上手慢、约束要比dtd约束细致。

DOM4J进行XML解析

Tomcat10

Tomcat目录及测试

conf：里面放的都是配置文件。

lib：导入的一些jar包。

logs：日志文件。后续使用多了可以选择性删除一些日志。

temp：一些临时文件。不需特别关注。

work：和jsp技术有关。现在一般不关注。

webapps：部署服务端web项目。（重要文件夹）

其他是一些法律文件。

项目上下文路径和项目的部署目录可以不同。需要配置。