Java學(xué)習(xí)筆記——前端基礎(chǔ)知識(shí)

html書寫規(guī)范
1. 標(biāo)簽的格式：<標(biāo)簽名>封裝的數(shù)據(jù)</標(biāo)簽名>
2. 標(biāo)簽名大小寫不敏感
3. 標(biāo)簽擁有自己的屬性
  - 基本屬性:bgcolor="red" 可以直接修改簡(jiǎn)單樣式
  - 事件屬性:onclick= "alert('hello');" 可以定義事件響應(yīng)之后的代碼
4. 標(biāo)簽又分為單標(biāo)簽和雙標(biāo)簽
  - 單標(biāo)簽格式：<標(biāo)簽名 />
  - 雙標(biāo)簽格式：<標(biāo)簽名>封裝的數(shù)據(jù)</標(biāo)簽名>

html標(biāo)簽介紹

標(biāo)簽的基本語法要求
- 標(biāo)簽不能交叉嵌套
- 標(biāo)簽必須正確的關(guān)閉
- 屬性必須要有值析桥，屬性值必須加引號(hào)
- 注釋不可以嵌套

常用的特殊字符

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

<h1>標(biāo)簽
- 只有h1至h6，再多就識(shí)別不出來了
- 在可以通過align屬性設(shè)置標(biāo)題的對(duì)齊方式
img標(biāo)簽用來顯示圖片，src屬性可以設(shè)置圖片的路徑
- 相對(duì)路徑
  1. JavaSE中：從工程名開始算起
  2. JavaWeb中：.表示當(dāng)前文件所在的目錄勺卢、..表示當(dāng)前文件所在的上一級(jí)目錄
- 絕對(duì)路徑
  1. JavaSE中：盤符:/目錄/文件名
  2. JavaWeb中：http://ip:port/工程名/資源路徑
table標(biāo)簽
```
<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屬性設(shè)置表格高度
- width屬性設(shè)置表格寬度
- align屬性設(shè)置表格在html頁(yè)面中的對(duì)齊方式
- border屬性設(shè)置表格邊框?qū)挾?/li>
- cellspacing屬性設(shè)置各個(gè)單元格之間的距離
- colspan屬性設(shè)置跨列
- rowspan屬性設(shè)置跨行
iframe標(biāo)簽辨图，在頁(yè)面上開辟一個(gè)小區(qū)域碌燕，顯示一個(gè)單獨(dú)的頁(yè)面
- name屬性指定iframe的名稱
- 通過a標(biāo)簽中的target屬性缺前，可以將超鏈接指向特定name的iframe

form標(biāo)簽

form標(biāo)簽本身是表單標(biāo)簽
1. action屬性設(shè)置提交的服務(wù)器地址
2. method屬性設(shè)置提交的方式GET(默認(rèn)值)/POST
表單項(xiàng)提交的時(shí)候培愁，數(shù)據(jù)沒有發(fā)送給服務(wù)器的三種情況
1. 表單項(xiàng)沒有name屬性
2. 單選井辜、復(fù)選（下拉列表中的option標(biāo)簽）都需要添加value屬性绎谦，以便發(fā)送給服務(wù)器
3. 表單項(xiàng)不在提交的form標(biāo)簽中
get請(qǐng)求方式的特點(diǎn)
1. 瀏覽器地址欄中的地址是：action屬性[ + ? + 請(qǐng)求參數(shù)]
  請(qǐng)求參數(shù)的格式是：name=value&name=value
2. 不安全，參數(shù)信息直接暴露在地址欄中
3. 有數(shù)據(jù)長(zhǎng)度的限制
post請(qǐng)求方式的特點(diǎn)
1. 瀏覽器地址欄中只有action屬性值
2. 相對(duì)于get請(qǐng)求粥脚，比較安全
3. 理論上沒有數(shù)據(jù)長(zhǎng)度的限制

各種不同的表單項(xiàng)

類型	作用	說明
input type=text	文本輸入框	value設(shè)置默認(rèn)內(nèi)容
input type=password	密碼輸入框	value設(shè)置默認(rèn)顯示內(nèi)容
input type=radio	單選框	name屬性對(duì)其進(jìn)行分組 checked="checked"表示默認(rèn)選中
input type=checkbox	復(fù)選框	checked="checked"表示默認(rèn)選中
input type=reset	重置	value屬性修改按鈕上的文本
input type=submit	提交	value屬性修改按鈕上的文本
input type=file	提交文件	會(huì)顯示一個(gè)對(duì)話框用于選擇上傳文件
input type= hidden	隱藏域	當(dāng)我們要發(fā)送某些信息窃肠，而這些信息不需要用戶參與時(shí)使用該標(biāo)簽
select	下拉列表框	需要與option表單項(xiàng)配合使用
option	下拉列表框中的選項(xiàng)	select="selected"設(shè)置默認(rèn)選中
textarea	多行文本輸入框	rows設(shè)置文本框高度，cols設(shè)置文本框?qū)挾人⒃剩鹗紭?biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容就是默認(rèn)值

div铭拧、span赃蛛、p標(biāo)簽的使用
- div標(biāo)簽：默認(rèn)獨(dú)占一行
- span標(biāo)簽：它的長(zhǎng)度就是所封裝數(shù)據(jù)的長(zhǎng)度
- p標(biāo)簽(段落標(biāo)簽)：默認(rèn)會(huì)在段落的上方和下方各空出一行

CSS語法規(guī)則

選擇器+屬性+值模式
- 選擇器：瀏覽器根據(jù)選擇器決定受CSS樣式影響的HTML元素（標(biāo)簽）
- 屬性：是你要改變的樣式名，并且每個(gè)屬性都有一個(gè)值搀菩。屬性和值之間用冒號(hào)分開呕臂，
  并由花括號(hào)包圍，這樣就構(gòu)成了一個(gè)完整的樣式聲明肪跋。
- 多個(gè)聲明：包含多個(gè)鍵值對(duì)歧蒋，用分號(hào)將每個(gè)鍵值對(duì)之間分開。
  最后一個(gè)鍵值對(duì)后面可以不再追加分號(hào)州既。
HTML與CSS結(jié)合使用的方式
- 在標(biāo)簽的style屬性上"key:value value;",修改標(biāo)簽樣式
  1. 標(biāo)簽一旦過多谜洽，代碼量會(huì)非常龐大
  2. 可讀性比較差
  3. CSS代碼幾乎沒有任何復(fù)用性
- 在head標(biāo)簽中，使用style標(biāo)簽來定義自己所需的各種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樣式寫成一個(gè)單獨(dú)的CSS文件吴叶，再通過link標(biāo)簽引入即可實(shí)現(xiàn)復(fù)用
標(biāo)簽名選擇器的使用

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標(biāo)簽1</div>
<div id="id002">div標(biāo)簽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標(biāo)簽1</div>
<div class="class2">div標(biāo)簽2</div>
<span class="class1">span標(biāo)簽1</span>
<span class="class2">span標(biāo)簽2</span>
</body>

組合選擇器

基本格式

選擇器1,選擇器2,選擇器n{
    屬性:值
}

JavaScript代碼與html代碼結(jié)合使用的方式
1. 在head標(biāo)簽中阐虚，或者在body標(biāo)簽中，使用script標(biāo)簽來書寫JavaScript代碼
```
<head>
    <meta charset="UTF-8">
    <title>Js+HTML</title>
    <script type="text/javascript">
        alert("hello javascript");
    </script>
</head>
```
1. 在html頁(yè)面中蚌卤，使用script標(biāo)簽实束，引入單獨(dú)的JavaScript文件
```
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="1.js">
    </script>
</head>
```
1. 在兩種方式中都用到了script標(biāo)簽。它可以用來定義JS代碼逊彭，
  也可以用來引入JS文件咸灿，對(duì)于同一個(gè)script標(biāo)簽，只能二選一
JavaScript中的變量的使用
1. 變量類型
  
  數(shù)值類型字符串類型對(duì)象類型布爾類型函數(shù)類型
  
  number string object boolean function
2. 變量的特殊值
  
  undefined 未定義侮叮，所有js變量未賦初始值的時(shí)候避矢，默認(rèn)值都是undefined
  
  null 空值
  
  NAN 非數(shù)字、非數(shù)值

數(shù)值類型	字符串類型	對(duì)象類型	布爾類型	函數(shù)類型
number	string	object	boolean	function

undefined	未定義侮叮，所有js變量未賦初始值的時(shí)候避矢，默認(rèn)值都是undefined
null	空值
NAN	非數(shù)字、非數(shù)值

JavaScript中的運(yùn)算

比較運(yùn)算

type	info
==	判斷符號(hào)兩端的變量囊榜，在數(shù)值上是否相等
===	判斷符號(hào)兩邊的變量是否完全相等审胸，包括數(shù)值、變量類型

邏輯運(yùn)算

type	info	notes
!	取反運(yùn)算	null
&&	且運(yùn)算卸勺，last true歹嘹，first false	全部為true時(shí)返回最后一個(gè)true變量值有一個(gè)為false返回第一個(gè)false變量值
\|\|	或運(yùn)算，last false first true	全部為false時(shí)返回最后一個(gè)false變量值有一個(gè)為true返回第一個(gè)true變量值

需要注意的是孔庭，JS中，所有的變量材蛛，都可以作為一個(gè)Boolean類型的變量使用
0圆到、null、undefined卑吭、""均看作false

函數(shù)的使用

使用function函數(shù)來定義

function 函數(shù)名(形參列表){
    函數(shù)體
    return 返回值
}

函數(shù)式編程

var 函數(shù)名 = function(參數(shù)列表){
    函數(shù)體
    return 返回值
}

JavaScript中不允許函數(shù)重載芽淡，新定義的函數(shù)會(huì)直接覆蓋之前定義的同名函數(shù)
默認(rèn)參數(shù)的使用

//使用方法類似于Java中的可變參數(shù)，也是當(dāng)作數(shù)組來用即可
var fun = function(a){
    for(var i=0; i< argument.length; i++){
        alert(argument[i]);
    }
    alert("a = " + a);
}

fun(1,12,123,1234);
//輸出結(jié)果應(yīng)該是
//1 12 123 1234
// a = 1

JavaScript中的自定義對(duì)象的使用

使用new 運(yùn)算符

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

直接使用大括號(hào)定義

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

JavaScript中的事件

常用事件

type	meaning
onload加載完成事件	頁(yè)面加載完成之后常用于頁(yè)面js做代碼初始化
onclick單擊事件	常用于按鈕的點(diǎn)擊響應(yīng)操作
onblur失去焦點(diǎn)事件	鼠標(biāo)不再聚焦于當(dāng)前組件
onchange內(nèi)容發(fā)生改變事件	常見于下拉列表和輸入框內(nèi)容發(fā)生改變后的操作
onsubmit表單提交事件	常用于表單提交前驗(yàn)證提交內(nèi)容是否合法

事件注冊(cè)
- 什么是事件的注冊(cè)（綁定）：
  其實(shí)就是告訴瀏覽器豆赏，當(dāng)事件響應(yīng)后要執(zhí)行哪些操作代碼
- 靜態(tài)注冊(cè)：
  通過html標(biāo)簽的事件屬性直接賦予事件響應(yīng)后的代碼
- 動(dòng)態(tài)注冊(cè)：
  先通過JS代碼得到標(biāo)簽的dom對(duì)象挣菲，
  然后再通過dom對(duì)象.事件名 = function()
  這種形式賦予事件響應(yīng)后的代碼富稻。

DOM模型的理解

基本特點(diǎn)

index	info
1	Document管理了所有的html文檔內(nèi)容
2	document是一種樹結(jié)構(gòu)的文檔，有層級(jí)關(guān)系
3	通過Document對(duì)象可以將所有的標(biāo)簽對(duì)象化
4	可以通過Document對(duì)象訪問所有的標(biāo)簽對(duì)象

常用方法

document.getElementByID

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documnet有關(guān)要點(diǎn)</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有關(guān)要點(diǎn)</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有關(guān)要點(diǎn)</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>

節(jié)點(diǎn)的常用屬性和方法

節(jié)點(diǎn)指的就是標(biāo)簽對(duì)象
方法：

name	usage
getElementByTagName()	獲取當(dāng)前節(jié)點(diǎn)的指定標(biāo)簽名孩子節(jié)點(diǎn)
appendChild(aChildNode)	添加一個(gè)子節(jié)點(diǎn) aChildNode是要添加的孩子節(jié)點(diǎn)

屬性

name	usage
childNodes	獲取當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)
firstChild	獲取當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
lastChild	獲取當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
parentNode	獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
nextSibling	獲取當(dāng)前節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)
previousSibling	獲取當(dāng)前節(jié)點(diǎn)的上一個(gè)節(jié)點(diǎn)
className	用于獲取或設(shè)置標(biāo)簽的class屬性值
innerHTML	獲取白胀、設(shè)置起始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容
InnerText	獲取椭赋、設(shè)置起始標(biāo)簽和結(jié)束標(biāo)簽之間的文本

最后編輯于：2020.06.15 15:10:11

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市或杠，隨后出現(xiàn)的幾起案子哪怔，更是在濱河造成了極大的恐慌，老刑警劉巖向抢，帶你破解...
沈念sama閱讀 217,406評(píng)論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件认境，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡挟鸠，警方通過查閱死者的電腦和手機(jī)叉信，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,732評(píng)論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來艘希，“玉大人硼身，你說我怎么就攤上這事∈嘣” “怎么了鸠姨？”我有些...
開封第一講書人閱讀 163,711評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)淹真。經(jīng)常有香客問我讶迁，道長(zhǎng)，這世上最難降的妖魔是什么核蘸？我笑而不...
開封第一講書人閱讀 58,380評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任巍糯，我火速辦了婚禮，結(jié)果婚禮上客扎，老公的妹妹穿的比我還像新娘祟峦。我一直安慰自己，他們只是感情好徙鱼，可當(dāng)我...
茶點(diǎn)故事閱讀 67,432評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布宅楞。她就那樣靜靜地躺著，像睡著了一般袱吆。火紅的嫁衣襯著肌膚如雪厌衙。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,301評(píng)論 1贊 301
城市分裂傳說
那天绞绒，我揣著相機(jī)與錄音婶希，去河邊找鬼。笑死蓬衡，一個(gè)胖子當(dāng)著我的面吹牛喻杈，可吹牛的內(nèi)容都是我干的彤枢。我是一名探鬼主播，決...
沈念sama閱讀 40,145評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼筒饰，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼缴啡！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起龄砰，我...
開封第一講書人閱讀 39,008評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤盟猖，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后换棚，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體式镐，經(jīng)...
沈念sama閱讀 45,443評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,649評(píng)論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年固蚤，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了娘汞。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,795評(píng)論 1贊 347
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡夕玩，死狀恐怖你弦，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情燎孟，我是刑警寧澤禽作，帶...
沈念sama閱讀 35,501評(píng)論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站揩页，受9級(jí)特大地震影響旷偿，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜爆侣，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,119評(píng)論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一萍程、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧兔仰，春花似錦茫负、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,731評(píng)論 0贊 22
一樁弒父案忍法，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至榕吼，卻和暖如春饿序，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背友题。一陣腳步聲響...
開封第一講書人閱讀 32,865評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國(guó)打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留戴质，地道東北人度宦。一個(gè)月前我還...
沈念sama閱讀 47,899評(píng)論 2贊 370
代替公主和親
正文我出身青樓踢匣，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親戈抄。傳聞我的和親對(duì)象是個(gè)殘疾皇子离唬，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,724評(píng)論 2贊 354