前端三層：內容層(結構層)HTML、樣式層(表現層)CSS、行為層JavaScript
|
層 |
語言 |
含義 |
|
結構層 |
HTML |
由 HTML 或 XHTML之類的標記語言負責建立。標籤，也就是那些出現在尖括號裡的單詞，對網頁內容的語義含義做出了描述，但這些標籤不包含任何關於如何顯示有關內容的資訊。例如，P標籤表達了這樣一種語義：“這是一個文字段。” |
|
表示層 |
CSS |
由 CSS 負責建立。 CSS對“如何顯示有關內容”的問題做出了回答。 |
|
行為層 |
JavaScript |
負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM主宰的領域。 |
<html> <head> <title>網頁標題</title> </head> <body> 網頁主體內容，給使用者看的。 </body> </html>
- <html> 標籤標示整個網頁
- <head> 標籤標示網頁頭部，用於放當前網頁配置資訊，除了title標籤，其他內容在瀏覽器上都不可見
- <body> 標籤標示網頁主體，放置使用者可見的內容
- <title>標籤標示網頁標題，巢狀在<head>標籤對中
下面這一行程式碼，在設定頁面的字符集編碼：
|
<meta charset="UTF-8"> |
|
UTF-8 國際碼，有世界上所有國家的文字和符號，佔用空間大 GB2312 國家碼（中文字符集） GBK 國家碼（中文字符集），GBK是GB2312的超集（也就是說GB2312的字GBK都有，GBK有的,GB2312未必有） |
工作中用哪種？
|
1、如果網頁中，沒有怪異符號和其他國家文字（除了英文），那麼使用GBK或GB2312，因為檔案體積小 2、如果網頁中，有少數民族、韓語、日語、阿拉伯語等，就要用UTF-8 |
註釋：
作用：實際工作中，註釋是給程式設計師看的。
程式碼註釋：瀏覽器看不見（程式不執行，忽略），人能看見
HTML註釋基本語法：
|
<!--註釋的內容--> |
區分單雙標籤的方法：
需要劃分範圍的肯定是雙標籤，不需要劃分範圍的肯定是單標籤
區分首尾：結束標籤比開始標籤多了“/”關閉
|
<p></p> <hr /> 水平線，自封閉單標籤 <br /> 換行，自封閉標籤 |
空白摺疊現象
HTML對換行、空格、縮排不敏感，如果出現都視為一個空格。
總結：瀏覽器只認識標籤。
特殊符號（轉義符號）
影象標籤（img）
網頁中能插入的圖片格式：jpg、png、gif、bmp、webp
img是英語image單詞的縮寫，即影象的意思
img是自封閉單標籤。
src是英語，source資源的意思
img標籤語法
|
<img /> |
|
<img src="01.jpg" /> |
任何語言寫屬性都要遵循鍵值對規則，html屬性規則是：k="v"，一個標籤可以有多個屬性，要求各個屬性之間用空格隔開
| <p k="v" k="v"></p> |
|
屬性名 |
屬性值 |
|
src |
圖片的路徑 |
|
width="300" height="500" |
300的寬度 500的高度 |
|
title |
1、滑鼠懸停在圖片上，顯示的提示文字 2、提升搜尋引擎優化（SEO） |
|
alt |
當瀏覽器載入不到圖片時才顯示的文字 |
|
border |
圖片邊框 |
路徑：
1.相對路徑
從A檔案（HTML檔案）出發尋找B檔案（資原始檔），怎麼找到對方，這個過程的路徑叫做“相對路徑”。
相對路徑是最常用的，一個網站都是使用相對路徑，直接把整個專案拷走，都不影響整個專案的檔案路徑。
【同級路徑】：
A檔案和B檔案都在同一個資料夾目錄，路徑寫法：直接寫檔名字。
【下一級路徑】：
路徑寫法：資料夾名稱/。“/”表示開啟下一級資料夾目錄
|
<img src="images/1.jpg"> |
【上一級】：
路徑寫法：../表示返回上一級，../../返回上兩級
|
<img src="../images/1.jpg"> |
2.絕對路徑
【網際網路絕對地址】：
一般以http://或https://開頭的
|
<img src="https://img.alicdn.com/simba/img/TB1OgnIbxWYBuNjy1zkSutGGpXa.jpg"> |
【本地碟符地址】：
絕對路徑：以file:\\\開頭
|
<img src="file:///E:\廣州愛前端3期\2018年03月06日-HTML基礎第1天\案例\images\2.jpg"> |
注意：工作中使用相對路徑和網際網路地址，禁止使用本地路徑。
<a>標籤
網際網路之所以稱為“網”，就是因為網頁和網頁之間有超連結，使用者可以點選連結進行互相跳轉。
HTML中，製作超連結用a標籤，a是單詞anchor錨的簡寫。
http:// 超文字傳輸協議
https:// 安全的HTTP協議
|
<a></a> |
|
<a href="http://www.baidu.com">百度</a> |
|
a標籤常用屬性 |
|
|
屬性名 |
屬性值 |
|
href |
連結地址 |
|
title |
提示的文字 |
|
target |
_blank 新視窗開啟 _self 當前視窗開啟（預設） |
當不知道連結地址是什麼的時候，使用href地址寫法為“#”，在當前頁面跳轉:
|
1 <a href="#">空連結</a> 缺點：返回頂部並重新整理頁面 2 <a href="">空連結</a> 缺點：某些瀏覽器會開啟資源管理器 |
以下兩個空連結解決了以上兩種連結的bug，推薦使用：
|
<a href="###">空連結</a> <a href="javascript:;">空連結</a> |
錨點連結:
錨點是網頁製作中超連結的一種，能夠迅速定位到某個位置的連結。
使用語法：
|
1、在被點選的位置新增<a href="#abc">跳轉到20的位置</a> 2、在目標錨點的位置新增id屬性，屬性值可以自定義，也可以用name屬性（name必須給a標籤） <p id="abc">20</p>
|
|
<a href="#abc">跳轉到20的位置</a> <a href="02-頁面外部的錨點連結.html#hello"></a> |
圖片連結:
點選圖片實現頁面跳轉的連結就是圖片連結
做法：圖片連結和文字連結一樣，只不過把原來放文字的地方換成img標籤即可。
| <a href="http://www.baidu.com"><img src="images/2.jpg"></a> |
base標籤:
作用：統一設定當前html頁面超連結的跳轉地址和頁面開啟方式。
|
<base href="http://www.xxx.com" target="_blank"> <base target="_blank"> |
語義化：
一個好的標籤語義化的網站，就是刪除CSS樣式表後，整個結構依然清晰，閱讀好。
標籤語義化概念：根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）
標籤語義化意義：
1.網頁結構合理
2.有利於seo和搜尋引擎建立良好溝通，有了良好的結構和語義你的網頁內容自然容易被搜尋引擎抓取；
3.方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）
4.便於團隊開發和維護
列表:
為了描述列表語義，我們使用列表標籤，列表分3種：無序列表、有序列表、定義列表
無序列表（ul）：
ul是一個組合標籤，這個標籤要用，就必須要一組用，ul巢狀li。ul代表無序列表的整體，li代表列表的每一項。
規範結構：li列表項可以有無限個
<ul><li>水果</li><li>蔬菜</li><li>零食</li><li>零食</li> </ul>
列表巢狀，列表可以無限巢狀列表：
<ul> <li>水果 <ul> <li>葡萄 <ul> <li>紅葡萄</li> <li>青葡萄</li> </ul> </li> <li>香蕉</li> <li>橙子</li> </ul> </li> <li>蔬菜</li> <li>零食</li> <li>零食</li> </ul>
經驗：網站導航都使用ul結構製作
有序列表（ol）：
ol是一個組合標籤，這個標籤要用，就必須要一組用，ol巢狀li。ol代表無序列表的整體，li代表列表的每一項。
規範結構：li列表項可以有無限個
<ol> <li>趙麗穎</li> <li>迪麗熱巴</li> <li>柳巖</li> <li>林志玲</li> </ol>
規定列表順序為降序。(9,8,7...)
<ol reversed="reversed"> <li>趙麗穎</li> <li>迪麗熱巴</li> <li>柳巖</li> <li>志玲姐姐</li> </ol>
規定有序列表的起始值。
<ol start="20"> <li>趙麗穎</li> <li>迪麗熱巴</li> <li>柳巖</li> <li>林志玲</li> </ol>
規定在列表中使用的標記型別，type型別有：1、A、a、I、i
<ol type="I"> <li>趙麗穎</li> <li>迪麗熱巴</li> <li>柳巖</li> <li>林志玲</li> </ol>
重點：ul、ol標籤對中，就是列表項，只能出現li標籤，不允許出現其他內容和標籤，但是li標籤可以巢狀任意的內容。
定義列表（dl）：
自定義列表不僅是一列專案，而是專案及其註釋的組合。
自定義列表以<dl>標籤開始，每個自定義列表項以<dt>開始，每個自定義列表項的定義以<dd>開始。
我們更加習慣稱呼它們為總分列表。
結構：dl巢狀dt和dd
dl是定義專案列表的意思
dt是定義專案標題的意思
dd是定義專案描述或詳情的意思
|
寫法1： <dl> <dt>專案標題</dt> <dd>專案描述1</dd> <dd>專案描述2</dd> <dd>專案描述3</dd> </dl> |
寫法2： <dl> <dt>專案標題1</dt> <dd>專案描述1.1</dd> <dd>專案描述1.2</dd> <dd>專案描述1.3</dd>
<dt>專案標題2</dt> <dd>專案描述2.1</dd> <dd>專案描述2.2</dd> <dd>專案描述2.3</dd> </dl> |
工作中注意：
1、圖文混排效果可以用dl製作，比較簡單
2、dl中只允許出現dt和dd，dt和dd中可以放任意的內容和標籤
表格（table）：
表格基本結構：
在2005年之前，國內的網站都是使用表格佈局，缺點就是載入速度慢，現階段只用表格製作資料統計佈局
<table border="1" width="500" height="200"> <tr> <th>姓名</th> <th>年齡</th> <th>民族</th> <th>性別</th> </tr> <tr> <td>趙麗穎</td> <td>18</td> <td>漢</td> <td>女</td> </tr> <tr> <tr> <td>劉德華</td> <td>58</td> <td>漢</td> <td>男</td> </tr> </table>
表格屬性：
|
<table>標籤屬性 |
|
|
border="1" |
表格邊框 |
|
width="500" height="300" |
表格的寬度和高度，會自動平分 |
|
align="center" |
水平對齊方式left、center、right，這些屬性也可以寫在tr和td身上 |
合併單元格：
|
rowspan 合併行 colsapn 合併列 |
<table border="1" width="500" height="200" align="center"> <tr> <th>姓名</th> <th>年齡</th> <th>民族</th> <th>性別</th> </tr> <tr> <td>柳巖</td> <td>28</td> <td rowspan="2">漢</td> </tr> <tr> <td>劉德華</td> <td>58</td> <td>男</td> </tr> </table>
表單
表單的作用：收集使用者的資訊，輸入框、單選、多選、按鈕等，都是表單。
<input>表單元素：
input表單元素是一個自封閉標籤，它有一個type屬性用於限定表單的型別。
|
型別 |
語法 |
描述 |
|
文字框 |
<input type="text"> |
|
|
密碼框 |
<input type="password" /> |
|
|
單選框 |
<input type="radio" name="sex" /> |
1、實現單選功能，必須新增name屬性，並且屬性值要一致，將所有radio歸為一類 |
|
核取方塊 |
<input type="checkbox" /> |
checked="checked" 設定預設選中屬性 disabled="disabled"設定表單禁用屬性 |
|
上傳檔案 |
<input type="file" /> |
|
|
提交按鈕 |
<input type="submit" value="提交哦"> |
|
|
重置按鈕 |
<input type="reset" value="重置哦"> |
|
|
圖片按鈕 |
<input type="image" src="reg.png"> |
|
|
普通按鈕 |
<input type="button" value="普通按鈕"> |
以上大部分表單都有三個共同屬性：value和name、disabled，name屬性可以和後端互動資料，vlaue屬性可以設定預設值，disabled規定當前input元素應該被禁用。
擴大觸發區域：
為了提升使用者體驗，點選文字也能選中表單。
寫法1：在文字上巢狀label標籤，並且給標籤新增for屬性，在觸發的表單元素上新增id屬性，保證for和id的值是一致。
|
1 <input type="radio" id="abc"> <label for="abc">男</label> 2 <input type="checkbox" id="bbb"> <label for="bbb">我已閱讀並同意相關服務條款</label> |
寫法2：
|
1 <label><input type="radio" >女</label> |
下拉選單（select）：
結構：select巢狀option，select表示下拉選單的整體，option表示下拉選單的選項。可以在響應option的標籤：selected="selected"設定預設選中狀態
<select> <option value="北京">北京</option> <option value="廣州">廣州</option> <option value="上海">上海</option> <option value="深圳">深圳</option> <option value="東莞">東莞</option> </select>
文字域（textarea）：
|
<textarea cols="50" rows="10">請仔細閱讀！！！！</textarea> |
|
cols 水平方向顯示的列表（寬度） rows 垂直方向顯示的行數（高度） |
form標籤（表單域）：
所有要提交的表單元素，都必須放在form標籤中。
|
<form action="aaa.php" method="post" > .... </form> |
有兩個屬性，這兩個屬性是和後臺互動的，這是後臺叔叔的工作，不歸我們前端管。
|
action 規定這個表單的內容，被提交到什麼頁面去處理 method 規定以什麼協議來提交給後臺，可選：get、post |
|
get 是偽裝url形式提交資料 post是以報文體的形式提交資料 |