ascto

JavaWeb基础零散总结(一)

1.JavaSE C/S Client Server （客户端/服务器）

JavaWeb B/S Broswer Server (浏览器/服务器)

2.网页由三部分内容组成：内容、表现、行为。

HTML

3.bgcolor是背景颜色

4.br换行 hr水平线

5.标签不可以交叉嵌套

6.属性加引号

7.注释不可以嵌套

8.特殊字符：

空格的特殊字符是：

9.h1-h6都是标题标签，align="left",align="right"

10.超链接：百度self表示当前页面跳转，black表示打开新的页面

11.列表标签：有序列表，无序列表

12.img标签：显示图片 alt设置当指定路径找不到图片时，用来替代显示的文本内容

13.路径：

在javase中相对路径：从工程名开始算，绝对路径：盘符：/目录/文件名

在web中相对路径：

. 表示当前文件所在的目录 … 表示当前文件所在的上一级目录文件名：表示当前文件所在目录的文件，相当于 ./文件名

绝对路径：http://ip:port/工程名/资源路径

14.表格：

table标签是表格标签

tr是行标签

th是表头标签

td是单元格标签

单元格跨行跨列：

ifarme标签可以在一个页面上，打开一个小窗口，去单独加载一个页面。

ifarme标签与a标签组合使用的步骤如下：

1.在ifarme上面使用name属性，定义一个名称

2.在a标签的target属性上设置ifarme的name属性值。

<iframe src="hhh.html" width="400" height="500" name="abc">iframe>


    <ul>
        <li><a href="hhh.html" target="abc">111a>li>
        <li><a href="ssss.html" target="abc">222a>li>
    ul>

15.表单标签：

表单就是html页面中用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。

form标签就是表单

<form action="http://baidu.com" method="post or get">

表格格式化：利用table tr td 将表单放入到表格中。

表单提交的细节

form中：action属性设置提交的服务器地址，method属性设置提交的方式GET/POST

如action=“hhtp://baidu.com” method="get"

表达提交的时候，数据没有发送给服务器的三种情况：

1.表单项没有name属性值

2.单选、复选（下拉列表中的option）都需要添加value属性，以便发送给服务器。

3.表单项不在提交的form标签中。

GET请求的特点是：

1.浏览器地址栏中的地址是，action属性【+？+请求参数】

请求参数的固定格式是：name=value&name=value

2.不安全

3.它有数据长度的限制。

POST请求的特点是：

1.浏览器地址栏中只有action属性值

2.相对于get请求要安全

3.理论上没有数据长度的限制

16.div,span,p

div独占一行，span 他的长度为封装数据的长度，p标签：默认会在段落的上方或者下方各空出来一行来，（如果有就不再空了）。

css

注释是/**/

把css样式写成一个单独的css文件，再通过HTML标签引入即可。

css选择器：

标签名选择器:标签名选择器可以决定哪些标签被动的使用这个样式。

id选择器：#id 属性值{属性：值}，id选择器可以让我们通过id属性选择性去使用这个样式。

class选择器：.class属性值{属性:值;}:

组合选择器的格式是：选择器1,选择器2,…选择器n{属性：值;}组合选择器可以让多个选择器共用一个css样式代码

每个元素只能有一个id，而可以在同一元素上使用多个class。

css常用样式：color height width background-color font-size border

JavaScript

JS是弱类型语言（类型可变）

特点：

1.交互性（它可以做的就是信息的动态交互）

2.安全性（不允许直接访问本地硬盘）

3.跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

src引入js文件，

script标签可以用来定义js代码，也可以引入js文件，二者选一，不可以同时使用。

javascript变量和数据类型

变量类型：数值类型、字符串类型、对象类型、布尔类型、函数类型（function）。

特殊的值：undefined未初始化 null空值 NAN非数值非数字

关系运算：

等于== 等于是简单的做字面值的比较

全等于=== 除了做字面值的比较之外，还会比较两个变量的数据类型

逻辑运算：在JavaScript语言中，所有类型的变量都可以做为一个Boolean类型变量去使用。

数组

JS中数组的定义：

格式： var 数组名=[];

var 数组名=[1,‘abc’,true];

函数

函数有两种定义方式：

1.利用function关键字来定义

function 函数名(形参列表){

函数体

}

2.var 函数名 = function(形参列表){函数体}

Java中有重载，但是在JS中函数的重载会直接覆盖掉上一次的定义。

隐形参数：就是在function函数不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。

隐形参数特别像java中的可变长参数 public void fun(Object … args);可变长参数其实是一个数组。

JS中自定义类型对象:

object形式的自定义对象

对象的定义：

var 变量名 = new object();//对象实例（空对象）

变量名.属性名=值;//定义一个属性

变量名.函数名=function(){}//定义一个函数

对象的访问：变量名.属性/函数名();

{}花括号形式的自定义对象

var 变量名={

属性名:值,

函数名：function(){}

};

JS中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应。

常见的事件：

onload加载完成事件; //页面加载完成之后，常用于做js代码初始化操作

onclick单击事件 //常用于按钮的点击响应操作。

onblur失去焦点事件 //常用于输入框，失去/离开焦点后验证输入的内容是否符合条件

onchange内容发生改变事件 //常用于下拉列表和输入框内容发生改变后操作

onsubmit表单提交事件 //常用于表单提交前，验证所有表单项是否合法。

事件的注册又分为静态注册和动态注册：

什么是事件注册（绑定）：其实就是告诉浏览器，当事件响应后要执行哪些操作代码。

静态注册事件：通过HTML标签的事件属性直接赋予事件响应后的代码

动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码。

动态注册基本步骤：1.获取标签对象2.标签对象.事件名=function=(){}

onload加载事件：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type="text/javascript" >

        //onload事件的方法
        function onloadFun() {
      

            alert('静态注册的onload事件，所有代码');
        }
        window.onload=function () {
      
            alert('动态注册的onload方法');
        }

    script>
head>

<body onload="onloadFun();">

body>
html>

onclick点击事件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type="text/javascript" >
        function onclickFun() {
      
            alert('静态注册onclick事件');
        }
        window.onload=function () {
      
            //1.获取标签对象
            /*document是js提供的一个对象（整个页面）
            * get  获取
            * Element   元素（标签）
            * ById  （目标）
            * */
            var obj=document.getElementById("btn01");
            obj.onclick=function () {
      
                alert('动态注册的onclick');
            }
            //2.通过标签对象.事件名=function(){}
        }
    script>
head>
<body>
<button onclick="onclickFun();">按钮一button>
<button id="btn01">按钮二button>
body>
html>

onblur失去焦点事件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type="text/javascript">

        //静态注册失去焦点事件
        function onblurfun() {
      
            //console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
            //log()是打印的方法
            console.log("静态注册失去焦点事件");
        }
        //动态注册onblur事件
        window.onload=function () {
      
            //1.获取标签对象
            var obj=document.getElementById("mima");
            obj.onblur=function () {
      
                console.log("动态注册失去焦点");
            }
        }
    script>
head>
<body>
用户名：<input type="text" onblur="onblurfun();"><br/>
密码：<input type="password" id="mima"><br/>
body>
html>

onchange内容发生改变事件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        // function onchangeFun() {
      
        //     alert('女神改变');
        // }
        window.onload=function () {
      
            var obj=document.getElementById("123");
            obj.onchange=function () {
      
                alert('男神改变');
            }
        }
    script>
head>
<body>
请选择你心中的女神：

    <select onchange="onchangeFun();">
            <option>--女神--option>
            <option>1option>
            <option>2option>
            <option>3option>
    select>

请选择你心中的男神：