Java学习笔记——前端基础知识

html书写规范
1. 标签的格式：<标签名>封装的数据</标签名>
2. 标签名大小写不敏感
3. 标签拥有自己的属性
  - 基本属性:bgcolor="red" 可以直接修改简单样式
  - 事件属性:onclick= "alert('hello');" 可以定义事件响应之后的代码
4. 标签又分为单标签和双标签
  - 单标签格式：<标签名 />
  - 双标签格式：<标签名>封装的数据</标签名>

html标签介绍

标签的基本语法要求
- 标签不能交叉嵌套
- 标签必须正确的关闭
- 属性必须要有值，属性值必须加引号
- 注释不可以嵌套

常用的特殊字符

<           &lt;
>           &gt;
space       &nbsp;

<h1>标签
- 只有h1至h6，再多就识别不出来了
- 在可以通过align属性设置标题的对齐方式
img标签用来显示图片，src属性可以设置图片的路径
- 相对路径
  1. JavaSE中：从工程名开始算起
  2. JavaWeb中：.表示当前文件所在的目录、..表示当前文件所在的上一级目录
- 绝对路径
  1. JavaSE中：盘符:/目录/文件名
  2. JavaWeb中：http://ip:port/工程名/资源路径

table标签

<table align="center" border="2" cellspacing="2" width="600">
    <tr>
        <td colspan="2">1.1</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

height属性设置表格高度
width属性设置表格宽度
align属性设置表格在html页面中的对齐方式
border属性设置表格边框宽度
cellspacing属性设置各个单元格之间的距离
colspan属性设置跨列
rowspan属性设置跨行

iframe标签，在页面上开辟一个小区域，显示一个单独的页面
- name属性指定iframe的名称
- 通过a标签中的target属性，可以将超链接指向特定name的iframe

form标签

form标签本身是表单标签
1. action属性设置提交的服务器地址
2. method属性设置提交的方式GET(默认值)/POST
表单项提交的时候，数据没有发送给服务器的三种情况
1. 表单项没有name属性
2. 单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3. 表单项不在提交的form标签中
get请求方式的特点
1. 浏览器地址栏中的地址是：action属性[ + ? + 请求参数]
  请求参数的格式是：name=value&name=value
2. 不安全，参数信息直接暴露在地址栏中
3. 有数据长度的限制
post请求方式的特点
1. 浏览器地址栏中只有action属性值
2. 相对于get请求，比较安全
3. 理论上没有数据长度的限制

各种不同的表单项

类型	作用	说明
input type=text	文本输入框	value设置默认内容
input type=password	密码输入框	value设置默认显示内容
input type=radio	单选框	name属性对其进行分组 checked="checked"表示默认选中
input type=checkbox	复选框	checked="checked"表示默认选中
input type=reset	重置	value属性修改按钮上的文本
input type=submit	提交	value属性修改按钮上的文本
input type=file	提交文件	会显示一个对话框用于选择上传文件
input type= hidden	隐藏域	当我们要发送某些信息，而这些信息不需要用户参与时使用该标签
select	下拉列表框	需要与option表单项配合使用
option	下拉列表框中的选项	select="selected"设置默认选中
textarea	多行文本输入框	rows设置文本框高度，cols设置文本框宽度，起始标签和结束标签之间的内容就是默认值

div、span、p标签的使用
- div标签：默认独占一行
- span标签：它的长度就是所封装数据的长度
- p标签(段落标签)：默认会在段落的上方和下方各空出一行

CSS语法规则

选择器+属性+值模式
- 选择器：浏览器根据选择器决定受CSS样式影响的HTML元素（标签）
- 属性：是你要改变的样式名，并且每个属性都有一个值。属性和值之间用冒号分开，
  并由花括号包围，这样就构成了一个完整的样式声明。
- 多个声明：包含多个键值对，用分号将每个键值对之间分开。
  最后一个键值对后面可以不再追加分号。
HTML与CSS结合使用的方式
- 在标签的style属性上"key:value value;",修改标签样式
  1. 标签一旦过多，代码量会非常庞大
  2. 可读性比较差
  3. CSS代码几乎没有任何复用性
- 在head标签中，使用style标签来定义自己所需的各种CSS样式
```
<head>
    <meta charset="UTF-8">
    <title>2-CSS</title>
    
    <style type="text/css">
        div{
            border:1px solid blue;
        }
        span{
            border:2px solid black;
        }
    </style>
</head>
```
- 将CSS样式写成一个单独的CSS文件，再通过link标签引入即可实现复用
标签名选择器的使用

id选择器的使用

基本格式

#id 属性值{
    属性:值
}

<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        #id001{
            color:blue;
            font-size: 30px;
            border:1px yellow solid;
        }
        #id002{
            color:red;
            font-size: 20px;
            border:5px blue dotted;
        }
    </style>
</head>
<body>
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>

class选择器

<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        .class1{
            border: 1px indianred solid;
            color: indianred;
            font-size: 10px;
        }
        .class2{
            border: 3px blanchedalmond solid;
            color: blanchedalmond;
            font-size: 20px;
        }
    </style>
</head>
<div class="class1">div标签1</div>
<div class="class2">div标签2</div>
<span class="class1">span标签1</span>
<span class="class2">span标签2</span>
</body>

组合选择器

基本格式

选择器1,选择器2,选择器n{
    属性:值
}

JavaScript代码与html代码结合使用的方式
1. 在head标签中，或者在body标签中，使用script标签来书写JavaScript代码
```
<head>
    <meta charset="UTF-8">
    <title>Js+HTML</title>
    <script type="text/javascript">
        alert("hello javascript");
    </script>
</head>
```
1. 在html页面中，使用script标签，引入单独的JavaScript文件
```
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="1.js">
    </script>
</head>
```
1. 在两种方式中都用到了script标签。它可以用来定义JS代码，
  也可以用来引入JS文件，对于同一个script标签，只能二选一
JavaScript中的变量的使用
1. 变量类型
  
  数值类型字符串类型对象类型布尔类型函数类型
  
  number string object boolean function
2. 变量的特殊值
  
  undefined 未定义，所有js变量未赋初始值的时候，默认值都是undefined
  
  null 空值
  
  NAN 非数字、非数值

数值类型	字符串类型	对象类型	布尔类型	函数类型
number	string	object	boolean	function

undefined	未定义，所有js变量未赋初始值的时候，默认值都是undefined
null	空值
NAN	非数字、非数值

JavaScript中的运算

比较运算

type	info
==	判断符号两端的变量，在数值上是否相等
===	判断符号两边的变量是否完全相等，包括数值、变量类型

逻辑运算

type	info	notes
!	取反运算	null
&&	且运算，last true，first false	全部为true时返回最后一个true变量值有一个为false返回第一个false变量值
\|\|	或运算，last false first true	全部为false时返回最后一个false变量值有一个为true返回第一个true变量值

需要注意的是，JS中，所有的变量，都可以作为一个Boolean类型的变量使用
0、null、undefined、""均看作false

函数的使用

使用function函数来定义

function 函数名(形参列表){
    函数体
    return 返回值
}

函数式编程

var 函数名 = function(参数列表){
    函数体
    return 返回值
}

JavaScript中不允许函数重载，新定义的函数会直接覆盖之前定义的同名函数
默认参数的使用

//使用方法类似于Java中的可变参数，也是当作数组来用即可
var fun = function(a){
    for(var i=0; i< argument.length; i++){
        alert(argument[i]);
    }
    alert("a = " + a);
}

fun(1,12,123,1234);
//输出结果应该是
//1 12 123 1234
// a = 1

JavaScript中的自定义对象的使用

使用new 运算符

var obj = new Object();
obj.name = "fmr";
obj.age = 24;
obj.show = function(){
    alert("name = " + this.name + " age = " + this.age);
}

直接使用大括号定义

        var obj = {
            name: "fmr",
            age: 24,
            info: function () {
                alert("name = " + this.name + " age = " + this.age);
            }
        };

JavaScript中的事件

常用事件

type	meaning
onload加载完成事件	页面加载完成之后常用于页面js做代码初始化
onclick单击事件	常用于按钮的点击响应操作
onblur失去焦点事件	鼠标不再聚焦于当前组件
onchange内容发生改变事件	常见于下拉列表和输入框内容发生改变后的操作
onsubmit表单提交事件	常用于表单提交前验证提交内容是否合法

事件注册
- 什么是事件的注册（绑定）：
  其实就是告诉浏览器，当事件响应后要执行哪些操作代码
- 静态注册：
  通过html标签的事件属性直接赋予事件响应后的代码
- 动态注册：
  先通过JS代码得到标签的dom对象，
  然后再通过dom对象.事件名 = function()
  这种形式赋予事件响应后的代码。

DOM模型的理解

基本特点

index	info
1	Document管理了所有的html文档内容
2	document是一种树结构的文档，有层级关系
3	通过Document对象可以将所有的标签对象化
4	可以通过Document对象访问所有的标签对象

常用方法

document.getElementByID

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documnet有关要点</title>
    <script type="text/javascript">
        function onclickFun() {
            var usernameObj = document.getElementById("username");
            var usernameText = usernameObj.value;
            var resultObj = document.getElementById("checkResult");
            var pattern = /^\w{5,12}$/;
            if(pattern.test(usernameText)){
                resultObj.innerHTML = "legal user name";
            }else{
                resultObj.innerHTML = "unlegal user name";
            }
        }
    </script>
</head>
<body>
    user name<input type="text" id="username" value="fmr">
    <span id="checkResult"></span><br>
    <button onclick="onclickFun();">check</button>
</body>
</html>

document.getElementByName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documnet有关要点</title>
    <script type="text/javascript">
        function each() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = true;
            }
        }
        function none() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies; i++) {
                hobbies[i].checked = false;
            }
        }
        function turn() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies; i++) {
                if(hobbies[i].checked)
                    hobbies[i].checked = false;
                else
                    hobbies[i].checked = true;
            }
        }
    </script>
</head>
<body>
    <input type="checkbox" name="hobby" value="cpp"> C++
    <input type="checkbox" name="hobby" value="java"> Java
    <input type="checkbox" name="hobby" value="python"> Python
    <br>
    <button onclick="each();">全选</button>
    <button onclick="none();">全不选</button>
    <button onclick="turn();">反选</button>
    <br>
</body>
</html>

document.getElementByTagName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documnet有关要点</title>
    <script type="text/javascript">
        function selectGirl(){
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {inputs[i].checked = true;}
        }
    </script>
</head>
<body>
    <input type="checkbox" name="beauty" value="btmf"> 北条麻妃
    <input type="checkbox" name="beauty" value="bdl"> 北岛玲
    <input type="checkbox" name="beauty" value="xzclz"> 小早川怜子
    <button onclick="selectGirl();"> 全选</button>
    <br>
</body>
</html>

节点的常用属性和方法

节点指的就是标签对象
方法：

name	usage
getElementByTagName()	获取当前节点的指定标签名孩子节点
appendChild(aChildNode)	添加一个子节点 aChildNode是要添加的孩子节点

属性

name	usage
childNodes	获取当前节点的所有子节点
firstChild	获取当前节点的第一个子节点
lastChild	获取当前节点的最后一个子节点
parentNode	获取当前节点的父节点
nextSibling	获取当前节点的下一个节点
previousSibling	获取当前节点的上一个节点
className	用于获取或设置标签的class属性值
innerHTML	获取、设置起始标签和结束标签之间的内容
InnerText	获取、设置起始标签和结束标签之间的文本