NIMD （week_06)學習筆記--前端 HTML + CSS + JavaScript

第六週學習筆記

08月20日

一：HTML基礎知識

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML基礎知識</title>
</head>
<body>
    <h1>一號標題</h1>
    <h2>二號標題</h2>
    <h3>三號標題</h3>
    <h4>....</h4>
    <p>段落前後會換行相當於2個br標籤</p>
    <br>
    <a href="https://github.com/dengjiawen8955/NMID">a標籤是一個連接,在裏面用連接href=“你的網站”</a>
    <img src="https://avatars3.githubuserc
    ontent.com/u/60028085?s=400&u=ea114d1889d432b0e32fc8d6b17c9f7202dd6808&v=4">
    <span>img標籤是一個單身狗</span>
</body>
</html>

二：HTML超鏈接有哪些

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML超鏈接有哪些</title>
</head>
<body>
    <h3>1.超鏈接可以跳轉到網頁</h3>
    <a href="https://github.com/dengjiawen8955">跳轉到我的GItHub</a>
    <h3>2.跳轉到下載頁面</h3>
    <a href="XXX.mp3">跳轉到我的GItHub</a>
    <h3>3.超鏈接可以發送電子郵件</h3>
    <a href="[email protected]">使用默認的郵箱發送郵件</a>
    <h3>4.返回頂部鏈接到 # </h3>
    <a href="#">返回頂部（一般用於相對位置浮動的標籤）</a>
    <h3>5.鏈接到對應的JavaScript代碼執行特殊的功能（這個我還沒用過，改天試試）</h3>
    <a href="javascript:....">JavaScript代碼執行特殊的功能</a>
</body>
</html>

三：HTML創建表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML創建表格</title>
</head>
<body>
    <h3>一個簡單的HTML表格</h3>
    <table border="1">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </tr>
        <tr>
            <td>1</td>
            <td>張三</td>
            <td>13</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>14</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>15</td>
        </tr>
    </table>
</body>
</html>

四：HTML中From表單

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML中From表單</title>
    <style>
        fieldset
        {
            width: 400px;
        }
    </style>
</head>
<body>
    <h3>表單就是用來用戶輸入信息的工具</h3>
    <h3>簡單的表單的簡介</h3>
    <h3>input 表單是單身狗</h3>
    <form action="post">
        <fieldset>
            <legend>1.文本域表單（Text Field）用來輸入用戶和密碼</legend>
            <span>
                username: <input type="text" name="username">
            </span>
            <br>
            <span>
                password: <input type="password" name="password">
            </span>
        </fieldset>
    </form>
    <form action="post">
        <fieldset>
            <legend>2.單選按鈕（Radio Buttons）</legend>
            <span>
                <input type="radio" name="sex" value="男">
            </span>
            <br>
            <span>
                <input type="radio" name="sex" value="女">
            </span>
        </fieldset>
    </form>
    <form action="post">
        <fieldset>
            <legend>3.複選框（Checkboxes）</legend>
            <span>
                <input type="checkbox" name="like_things" value="apple" >
            </span>
            <span>
                <input type="checkbox" name="like_things" value="banana">
            </span>
        </fieldset>
    </form>
    <form action="post">
        <fieldset>
            <legend>4.提交按鈕summit</legend>
            <span>
                username: <input type="text" name="username">
            </span>
            <br>
            <span>
                password: <input type="password" name="password">
            </span>
            <span>
                <input type="submit" name="submit">
            </span>
        </fieldset>
    </form>
    <form action="post">
        <fieldset>5.預選下拉列表</fieldset>
        <select name="cars" id="">
            <option value="小車"></option>
            <option value="汽車"></option>
            <option value="公交車"></option>
        </select>
    </form>
    <form action="post">
        <fieldset>6.文本框</fieldset>
        <textarea name="diary" id="" cols="30" rows="10" style="width: 400px;" >
            hello HTML
        </textarea>
    </form>
</body>

</html>

五：CSS（層疊樣式）

內聯樣式
頁面內樣式
@inport樣式
link鏈接樣式

衝突時 – 1>2>3>4

六：CSS複合選擇器

https://www.w3school.com.cn/cssref/css_selectors.asp
選擇器是CSS的重點，難點

1. 普通選擇器

選擇器	例子	例子描述
element元素選擇器	p{color: red;}	全局p標籤變爲紅色
id選擇器	#name {}	全局選擇 id="name"的標籤
class選擇器	.name{}	全局選擇 class="name"的標籤，優先級：id>class > 元素
element1，element2	h2,h3{}	全局選擇h2和h3標籤
element 1 element2	div p{}	選擇全部div塊裏面的p段落標籤

2. 僞類選擇器

選擇器	例子	例子描述
:link	h3:link{color: red;}	h3標題在網頁打開後的默認顏色是紅色
:hover	h3:hover{}	h3標題在鼠標滑過的時候是紅色
:active	h3:active{}	h3在點擊的時候是紅色
:visited	h3:visited{}	h3在參觀後（點擊後）是紅色

還有很多選擇器，參考博客

七：CSS文字效果

效果	例子	描述
字體顏色color	color : red	字體顏色爲紅色
對齊方式text-align:left	text-align:left	對齊方式爲左對齊
文本修飾text-decoration	text-decoration : underline	下劃線修飾（還有overline上劃線,line-through 中間滑過刪除線）
text-transform文字轉換	text-transform : uppercase	轉換爲大寫字母（還有 lowercase 小寫字母，capitalize首字母大寫。
text-indent文本縮進	text-indent:50px	文本縮進 50 px
letter-spaceing字符間距	letter-spacing：30	字符字符之間的間距爲 30 px
line-height行高	line-height：50px	每行間距（行高）50 px
word-spacing單詞之間的空白	word-spacing：30px	單詞之間的空白爲 30px（區別於字符之間的空白letter-spacing ）
write-space寫空間	write-space：nowrap	禁止環繞
text-shadow添加陰影	text-shadow：2px 2px #FF0000	添加長寬爲 2px 的紅色陰影

八：用CSS設置圖像效果

    1、設置圖片邊框 
    border屬性
    2、設置圖片大小及縮放
     width 和 height
    3、圖文混排
     float
    4、設置圖片與文字的對齊方式 
    vertical-		align：middle

九：用CSS設置背景顏色和背景圖像

background-color : red
background-image: url()

十：盒模型

十一：用CSS設置樣式

內聯樣式
頁面內樣式
@inport樣式
link鏈接樣式
衝突時 – 1>2>3>4
樣式設計實例：

十二：JavaScript簡介

JavaScript是動態語言，現在所有的HTML 頁面都用JavaScript讓頁面動起來（比如說按鈕點擊的效果）

JavaScript（通常縮寫爲JS）是一種高級的、解釋型的編程語言。JavaScript是一門基於原型、函數先行的語言[9]，是一門多範式的語言，它支持面向對象編程，命令式編程，以及函數式編程。它提供語法來操控文本、數組、日期以及正則表達式等，不支持I/O，比如網絡、存儲和圖形等，但這些都可以由它的宿主環境提供支持。

十三：基本語法

1. 使用方法

1.直接寫入到HTML裏面
例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直接寫入到HTML裏面</title>
</head>
<body>
    <script>
        document.write("<h3>這是一個從由js寫入的h3標題");
        document.write("<p>這是一個從由js寫入的p段落");
    </script>
</body>
</html>

2。對事件的反應alter（）

    <button type="button" onclick="alert('hello world')">點擊彈出alter提示</button>

3.自定義函數然後onclick調用 改變內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定義函數然後調用</title>
</head>
<body>
    <h3 id="change">按下按鈕被改變的標題</h3>
    <button type="button" onclick="change()">單擊按鈕改變標題</button>
    <script>
        function change()
        {
            var x = document.getElementById("change");
            x.innerHTML = "已經改變";
        }
    </script>
</body>
</html>

4.改變圖片_點擊燈泡改變燈打開或者關閉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改變圖片_點擊燈泡改變燈打開或者關閉</title>
</head>
<body>
    <h3>點擊燈泡改變燈打開或者關閉</h3>
    <img src="https://www.runoob.com/images/pic_bulboff.gif" id="lamp" onclick="changeLamp()">
    <script>
        function changeLamp(){
            var lamp = document.getElementById("lamp");
            if(lamp.src.match("off"))
            {
                lamp.src = "https://www.runoob.com/images/pic_bulbon.gif";
            }
            else
            {
                lamp.src = "https://www.runoob.com/images/pic_bulboff.gif";
            }
        }
    </script>
</body>
</html>

5.改變CSS樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改變CSS樣式</title>
</head>
<body>
    <h3 id="changeColor" onclick="changeColor()">點擊改變顏色</h3>
    <script>
        function changeColor()
        {
            var x = document.getElementById("changeColor");
            x.style = "color: red;"
        }
    </script>
</body>
</html>

十四：JavaScript數組

JavaScript數組和java的數組不一樣的是他是弱語言類型的數組，不用標註具體的數據類型.

1.創建方法

1.創建然後賦值

var peroson=new Array();
person[0] = "張三";
person[1] = "李四";
perosn[2] = "王二麻子";

2.創建時候賦值

var peroson=new Array("張三","李四","王二麻子");

3.字面,直接數組，而不是對象.

var person = ["張三","李四","王二麻子"]

十五：JavaScript對象

JavaScript萬物皆對象
對象可以包含多個值
例如
對象的定義

var zhangsan={
name : "張三",
age： 13
sex ："男",
};

這裏面只有對象的屬性通過 zhangsan.name 來訪問他的name屬性和java一致，裏面還可以定義方法，定義方式和訪問方式和java一致。
對象也可以先聲明在定義。例如

var zhangsan  = new Object();
zhangsan.name = "張三";
zhangsan.age = 13;

也可以使用對象構造器定義類似構造函數

function person(name,age)
{
	this.name = name;
	this.age = age;
}
var zhangsan = new person("zhangsan",13);

十六：JavaScript對象函數

就是在對象裏添加函數，和java類似
例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript對象函數</title>
</head>
<body>
    <script>
    function person(name ,age ){
        this.name = "張三";
        this.age = 13;
        this.changeName = changeName;
        function changeName(newName)
        {
            this.name = newName;
        }
    }
    dog = new person("dog",13);
    dog.changeName("狗子");
    document.write(dog.name);
    
    </script>
</body>
</html>

十七：JavaScript中DOM(document)節點

1. 步驟

具體步驟看2點的註釋.

2. appendChild（）添加到末尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>appendChild（）添加到末尾</title>
</head>
<body>
    <h2>JavaScript中DOM(document)節點</h2>
    <h2> 2. appendChild（）添加到末尾</h2>
    <div id="demo01">
        <p>自然段落1</p>
        <p>自然段落2</p>
    </div>
    <script>
        var para = document.createElement("p");//1.新建一個p標籤
        var node = document.createTextNode("新建段落3");//2新建一個node
        para.appendChild(node);//3.將新建的節點添加到 元素裏
        //4.將組合好的元素添加到父框架裏。
        var parentElement = document.getElementById("demo01");
        parentElement.appendChild(para);

    </script>
</body>
</html>

3. insertBefore()插入到最前面

4. removeChild（）移除一個元素

5. replaceChild（）替換一個元素

十八：HTML CSS JavaScript三者的聯繫

1.

一個有趣的網站形象介紹了HTML，CSS，JavaScript的聯繫

2.

1. HTML像組成你身體的手和各個部分，手，腳，頭…（破碎的肢體）
1. CSS將他們按合適的拼接，美化，然後上合適的衣服。（完整的人體模特）
3.JavaScript爲人體模特賦予動的能力，賦予了靈魂。
HTML + CSS + JavaScript 就能構成完整的靜態頁面。