目录
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项目。(重要文件夹)
其他是一些法律文件。
项目上下文路径和项目的部署目录可以不同。需要配置。