HTML、CSS、JavaScript · 忠哥帶你入門PHP

# Web開發基礎 > 學習目標 1. 復習HTML、CSS、JavaScript的基礎知識 2. 掌握HTML的常用標簽及屬性 3. 掌握CSS基本語法及選擇器 4. 了解JavaScript常用功能 # 網頁組成要素網頁主要有HTML、CSS、JavaScript構成。 ## 結構層 HTML/HTML5 網頁的骨架，HTML是網頁內容的載體，內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。 ## 樣式層 CSS/CSS3 CSS樣式是表現。就像網頁的外衣，比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等，所有這些用來改變內容外觀的東西稱之為表現。 ## 行為層 Javascript JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現的。 # HTML標記語言 HTML是用來描述網頁的一種語言。 HTML指的是超文本標記語言: HyperText Markup Language HTML不是一種編程語言，而是一種標記語言 HTML標記語言是一套標記標簽 (markup tag) HTML使用標記標簽來描述網頁 HTML文檔包含了HTML 標簽及文本內容 HTML文檔也叫做 web 頁面 ## HTML網頁結構下面是一個可視化的HTML頁面結構 ![image-20200910143029680](images\image-20200910143029680.png) 說明：只有 `<body> `區域 (白色部分) 才會在瀏覽器中顯示。 HTML代碼示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>頁面標題</title> </head> <body> <h1>這是一個標題</h1> <p>這是一個段落。</p> <p>這是另一個段落。</p> </body> </html> ``` 瀏覽器的運行效果 ![image-20200910143200413](images\image-20200910143200413.png) ## HTML標簽 HTML標記標簽通常被稱為 HTML 標簽 (HTML tag)。 HTML標簽是由尖括號包圍的關鍵詞，比如 `<html>` HTML標簽通常是成對出現的，比如 `<b>` 和 `</b>` 標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽開始和結束標簽也被稱為開放標簽和閉合標簽 HTML標簽也稱為HTML元素 > 格式 ```html <標簽>內容</標簽> ``` > 例如 ```html <p>這是一個段落。</p> ``` > 提示 HTML 標簽對大小寫不敏感：`<P>` 等同于 `<p>`，推薦使用小寫方式。 ## HTML屬性 HTML標簽可以設置屬性屬性可以在元素中添加附加信息屬性一般描述于開始標簽屬性總是以名稱/值對的形式出現，比如：name="value"。 > 屬性示例 ```html <a href="http://www.runoob.com">這是一個鏈接</a> ``` 下面列出了適用于大多數 HTML 元素的屬性 | 屬性 | 描述 | | ----- | ------------------------------------------------------------ | | class | 為html元素定義一個或多個類名（classname）(類名從樣式文件引入) | | id | 定義元素的唯一id | | style | 規定元素的行內樣式（inline style） | | title | 描述了元素的額外信息 (作為工具條使用) | ## HTML常用標簽 ### HTML標題標題（Heading）是通過`<h1> - <h6>` 標簽進行定義的。 > 示例代碼 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML標題元素/title> </head> <body> <h1>這是標題 1</h1> <h2>這是標題 2</h2> <h3>這是標題 3</h3> <h4>這是標題 4</h4> <h5>這是標題 5</h5> <h6>這是標題 6</h6> </body> </html> ``` **說明:** 瀏覽器會自動地在標題的前后添加空行。 > 標題很重要請確保將 HTML 標題標簽只用于標題。不要僅僅是為了生成**粗體**或**大號**的文本而使用標題。搜索引擎使用標題為您的網頁的結構和內容編制索引。因為用戶可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文檔結構是很重要的。應該將 `h1 `用作主標題（最重要的），其后是 `h2`（次重要的），再其次是 `h3`，以此類推。 ### HTML段落 HTML段落標簽可以將文檔分割為若干段落。段落是通過 <p> 標簽定義的。 `<hr>` 標簽在 HTML 頁面中創建水平線。 ```html <html> <head> <title>HTML段落</title> </head> <body> <p>靜夜思</p> <hr/> <p>床前明月光，疑似地上霜。</p> <hr/> <p>舉頭望明月，低頭思故鄉。</p> </body> <html/> ``` ### HTML文本格式化 HTML相關標簽可以對文本進行格式化 ![image-20200910150923891](images\image-20200910150923891.png) ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML文本格式化</title> </head> <body> <b>這個文本是加粗的</b> <br /> <strong>這個文本是加粗的</strong> <br /> <big>這個文本字體放大</big> <br /> <em>這個文本是斜體的</em> <br /> <i>這個文本是斜體的</i> <br /> <small>這個文本是縮小的</small> <br /> 這個文本包含 <sub>下標</sub> <br /> 這個文本包含 <sup>上標</sup> </body> </html> ``` > 文本格式化標簽 | 標簽 | 描述 | | ---------- | ------------ | | `<b>` | 定義粗體文本 | | `<em>` | 定義著重文字 | | `<i>` | 定義斜體字 | | `<small>` | 定義小號字 | | `<strong>` | 定義加重語氣 | | `<sub>` | 定義下標字 | | `<sup>` | 定義上標字 | | `<ins>` | 定義插入字 | | `<del>` | 定義刪除字 | > "計算機輸出" 標簽 | 標簽 | 描述 | | -------- | ------------------ | | `<code>` | 定義計算機代碼 | | `<kbd>` | 定義鍵盤碼 | | `<samp>` | 定義計算機代碼樣本 | | `<var>` | 定義變量 | | `<pre>` | 定義預格式文本 | > 引文, 引用, 及標簽定義 | 標簽 | 描述 | | -------------- | ------------------ | | `<abbr>` | 定義縮寫 | | `<address>` | 定義地址 | | `<bdo>` | 定義文字方向 | | `<blockquote>` | 定義長的引用 | | `<q>` | 定義短的引用語 | | `<cite>` | 定義引用、引證 | | `<dfn>` | 定義一個定義項目。 | ### HTML鏈接 HTML 使用超級鏈接與網絡上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。 HTML使用標簽 `<a>`來設置超文本鏈接。 > 示例 ```html <a href="https://www.runoob.com/">訪問菜鳥教程</a> ``` 點擊這個超鏈接會把用戶帶到菜鳥教程的首頁。 > target 屬性使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。 ```html <a href="https://www.runoob.com/" target="_blank">訪問菜鳥教程!</a> ``` target屬性值 | 值 | 描述 | | :---------- | :----------------------------------- | | _blank | 在新窗口中打開被鏈接文檔。 | | _self | 默認。在相同的框架中打開被鏈接文檔。 | | _parent | 在父框架集中打開被鏈接文檔。 | | _top | 在整個窗口中打開被鏈接文檔。 | | *framename* | 在指定的框架中打開被鏈接文檔。 | ### HTML表格 HTML表格由 `<table>` 標簽來定義。每個表格均有若干行（由 `<tr>` 標簽定義），每行被分割為若干單元格（由 `<td> `標簽定義）。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。 ```html <table border="1"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> </thead> <tbody> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> </tbody> </table> ``` ### HTML列表 HTML 支持有序、無序和定義列表: ![image-20200910153343253](images\image-20200910153343253.png) 示例 ```html <h4>有序列表：</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>無序列表：</h4> <ul> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> ``` ### HTML區塊大多數 HTML 元素被定義為**塊級元素**或**內聯元素**。塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。常用的區塊元素有: `<h1>`, `<p>`, `<ul>`, `<table>`,`<div>` 內聯元素在顯示時通常不會以新行開始。內聯元素常用的有： `<span>`,`<b>`, `<td>`, `<a>`, `<img> ` > HTML <div> 元素 HTML `<div>` 元素是塊級元素，它可用于組合其他 HTML 元素的容器。 <div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。如果與 `CSS` 一同使用，`<div>` 元素可用于對大的內容塊設置樣式屬性。 `<div>` 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 `<table>` 元素進行文檔布局不是表格的正確用法。 `<table>` 元素的作用是顯示表格化的數據。 > HTML <span> 元素 HTML `<span> `元素是內聯元素，可用作文本的容器 `<span> `元素也沒有特定的含義。當與` CSS` 一同使用時，`<span>` 元素可用于為部分文本設置樣式屬性。 ### HTML表單 HTML 表單用于收集不同類型的用戶輸入。表單元素是允許用戶在表單中輸入文本域內容。常用的文本域如下： - 文本輸入框`<input>` - 文本域`<textarea>` - 下拉列表`<select>` - 單選框`<input type="radio">` - 復選框`<input type="checkbox">` - 密碼字段` <input type="password" >` - 隱藏字段` <input type="hidden" >` - 提交按鈕` <input type="submit" value="提交"> ` 表單使用表單標簽 `<form>` 來設置 > 注冊表單示例 ```html <form> <div> 用戶名: <input type="text" name="username"/> </div> <div> 密碼: <input type="password" name="password"/> </div> <div> 性別: <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 </div> <div> <input type="checkbox" name="agree" value="1">我已閱讀并同意相關服務條款和隱私政策 </div> <input type="submit" value="立即注冊"> </form> ``` 運行結果 ![image-20200910155641790](images\image-20200910155641790.png) ## HTML小結 HTML參考菜鳥教程如下： http://www.runoob.com/html/html-tutorial.html # CSS樣式表 - CSS 指層疊樣式表 (Cascading Style Sheets) - 樣式定義如何顯示 HTML 元素 - 樣式通常存儲在樣式表中 - 把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題 - 外部樣式表可以極大提高工作效率 - 外部樣式表通常存儲在 CSS 文件中 - 多個樣式定義可層疊為一一個HTML文檔可以顯示不同的樣式，示例如下 http://www.runoob.com/try/demo_source/demo_default.htm ## CSS規則語法格式 ``` 選擇符{屬性:屬性值;} 選擇器通常是您需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成。屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。 ``` > 示例代碼 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS樣式表</title> <style> /* 其中body h1 h2 p都是選擇器，background-color、font-size、color、margin-left都是屬性*/ body {background-color:yellow;} h1 {font-size:36pt;} h2 {color:blue;} p {margin-left:50px;} </style> </head> <body> <h1>這個標題設置的大小為 36 pt</h1> <h2>這個標題設置的顏色為藍色：blue</h2> <p>這個段落的左外邊距為 50 像素：50px</p> </body> </html> ``` ## CSS語法 CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明： ![image-20200910161116217](images\image-20200910161116217.png) 選擇器通常是您需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成。屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。 > 代碼示例 ```css p {color:red;text-align:center;} ``` ## CSS選擇器 ### 標簽選擇器 HTML頁面由很多標簽組成，例如圖像標記`<img>`、超鏈接標記`<a>`、表格標記`<table>`等 > 示例代碼 ```html <!DOCTYPE html> <html> <head> <style> /*所有p標記設置背景顏色，黃色*/ p { background-color:yellow; } </style> </head> <body> <h1>Welcome to My Homepage</h1> <div> <p id="firstname">My name is Donald.</p> <p id="hometown">I live in Duckburg.</p> </div> <p>My best friend is Mickey.</p> </body> </html> ``` ### 類別選擇器使用標記選擇器非常快捷，但是有一定的局限性。如果聲明標記選擇器，那么頁面中所有該標記內容會有相應變化。假如頁面有三個`<h2>`，如果想每個`<h2>`顯示效果不一樣，這樣標記選擇器就無法實現，這時候需要引入類別選擇器。 > 示例代碼 ```html <!DOCTYPE html> <html> <head> <style> /*三個h2，不同顏色*/ .one { color:yellow; } .two { color:red; } .three { color:black; } </style> </head> <body> <h2 class="one">應用了選擇器one</h2> <p>正文內容1</p> <h2 class="two">應用了選擇器two</h2> <p>正文內容2</p> <h2 class="three">應用了選擇器three</h2> <p>正文內容3</p> </body> </html> ``` ### id選擇器 id選擇器是通過HTML頁面中的id屬性來選擇添加樣式，與類別選擇器相同。但是要注意的是，由于HTML頁面中不能包含兩個相同的id標記，因此定義的id選擇器也就只能被使用一次。命名id選擇器要以"#"號開始，后加HTML標記id的屬性值。 > 示例代碼 ```html <!DOCTYPE html> <html> <head> <style> #firstname { background-color:yellow; } </style> </head> <body> <h1>Welcome to My Homepage</h1> <div class="intro"> <p id="firstname">My name is Donald.</p> <p id="hometown">I live in Duckburg.</p> </div> <p>My best friend is Mickey.</p> </body> </html> ``` ## 在頁面中包含CSS 行內式就是代碼寫在具體網頁中的一個元素內；比如：`<div style="color:#f00"></div>` 內嵌式就是在`</head>`前面寫；比如：`<style type="text/css">.div{color:#F00}</style>` 外部式就是引用外部css文件；比如：`<link href="css.css" type="text/css" rel="stylesheet" />` ### 行內式 > 示例代碼 ```html <!doctype html> <html> <head> <meta charset="UTF-8"> <title>css行內樣式</title> </head> <body> <div style="width:100px;height:100px;background:red;"></div>> </body> </html> ``` ### 內嵌式 > 示例代碼 ```xml <!!doctype html> <html> <head> <meta charset="UTF-8"> <title>css內嵌樣式</title> </head> <body> <style type="text/css"> #div{width:100px;height:100px;background:red;} </style> <div id="div"></div>> </body> </html> ``` ### 鏈接式 > 示例代碼 ```xml <!doctype html> <html> <head> <meta charset="UTF-8"> <title>css內嵌樣式</title> <link rel="stylesheet" type="text/css" href="ccss.css"> </head> <body> <div id="div"></div>> </body> </html> ``` ## CSS小結 CSS 可以來添加背景、格式化文本、以及格式化邊框，并定義元素的填充和邊距等。如果需要更多關于 CSS 的信息，請參閱 CSS 實例, CSS 參考手冊和CSS3 教程。 CSS參考教程如下： http://www.runoob.com/css/css-tutorial.html # JavaScript JavaScript 是互聯網上最流行的腳本語言，這門語言可用于 HTML 和 Web，更可廣泛用于服務器、PC、筆記本電腦、平板電腦和智能手機等設備。 ## 為什么學習 JavaScript? Web前端開發人員必須學會HTML、CSS和JavaScript技術。 HTML 定義了網頁的內容 CSS 描述了網頁的布局和樣式 JavaScript 網頁的行為 ## JavaScript 是腳本語言 JavaScript 是一種輕量級的編程語言。 JavaScript 是可插入 HTML 頁面的編程代碼。 JavaScript 插入 HTML 頁面后，可由所有的現代瀏覽器執行。 JavaScript 很容易學習。 ## 常用的一些功能 ### 直接寫入 HTML 輸出流 > 代碼示例 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript教程</title> </head> <body> <p> JavaScript 能夠直接寫入 HTML 輸出流中： </p> <script> document.write("<h1>這是一個標題</h1>"); document.write("<p>這是一個段落。</p>"); </script> <p> 您只能在 HTML 輸出流中使用 <strong>document.write</strong>。如果您在文檔已加載后使用它（比如在函數中），會覆蓋整個文檔。 </p> </body> </html> ``` > 運行結果 ![1599749671914](images\1599749671914.png) > 說明您只能在 HTML 輸出中使用 `document.write`。如果您在文檔加載后使用該方法，會覆蓋整個文檔。 ### 對事件的反應 HTML 事件是發生在 HTML 元素上的事情。當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。代碼示例 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript教程</title> </head> <body> <p>點擊按鈕執行 <em>displayDate()</em> 函數.</p> <button onclick="displayDate()">點這里</button> <script> function displayDate(){ document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html> ``` > 常見的HTML事件 | 事件 | 描述 | | :---------- | :--------------------------- | | onchange | HTML 元素改變 | | onclick | 用戶點擊 HTML 元素 | | onmouseover | 用戶在一個HTML元素上移動鼠標 | | onmouseout | 用戶從一個HTML元素上移開鼠標 | | onkeydown | 用戶按下鍵盤按鍵 | | onload | 瀏覽器已完成頁面的加載 | ### 改變 HTML 內容 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <h1>我的第一段 JavaScript</h1> <p id="demo"> JavaScript 能改變 HTML 元素的內容。 </p> <script> function myFunction() { x=document.getElementById("demo"); // 找到元素 x.innerHTML="Hello JavaScript!"; // 改變內容 } </script> <button type="button" onclick="myFunction()">點擊這里</button> </body> </html> ``` `document.getElementById("some id")`。這個方法是 HTML DOM 中定義的。 `DOM (Document Object Model)`（文檔對象模型）是用于訪問 HTML 元素的正式 W3C 標準。 ### 改變 HTML 樣式 ```html <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <h1>我的第一段 JavaScript</h1> <p id="demo"> JavaScript 能改變 HTML 元素的樣式。 </p> <script> function myFunction() { x=document.getElementById("demo") // 找到元素 x.style.color="#ff0000"; // 改變樣式 } </script> <button type="button" onclick="myFunction()">點擊這里</button> </body> </html> ``` ### 驗證輸入 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <h1>我的第一段 JavaScript</h1> <p>請輸入數字。如果輸入值不是數字，瀏覽器會彈出提示框。</p> <input id="demo" type="text"> <script> function myFunction() { var x=document.getElementById("demo").value; if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){ alert("不是數字"); } } </script> <button type="button" onclick="myFunction()">點擊這里</button> </body> </html> ``` ## 小結更多學習內容參考 http://www.runoob.com/js/js-tutorial.html