Web開發（一）HTML5

寫在前面

參考黑馬程序員前端Web教程做的筆記，主要是想后面自己搭建網頁玩。

這部分是前端HTML5+CSS3+移動web視頻教程的HTML5部分。主要涉及到HTML的基礎語法。

HTML基礎

標簽定義

HTML定義

HTML(HyperText Markup Language)，即超文本標記語言。

超文本：鏈接

標記：標簽，帶尖括號的文本。

標簽語法定義如下，但凡需要包裹內容的就是雙標簽，只有幾個是單標簽。

基本骨架

在vscode中按!后配合Enter/Tab可以快速生成

如下所示。

標簽的關系

包括父子關系（嵌套關系）、兄弟關系（并列關系）。

如下所示，head和body就是兄弟關系，外面的html和內層head、body屬于父子關系。

注釋

<!-- 注釋內容 -->

標題標簽

標題標簽同typora自帶的六級標題一樣。標題標簽會自動換行。一般來說h1標簽在一個網頁只用一次，用來放新聞標簽或網頁logo。

段落標簽

顧名思義，用于寫文字的一段。

換行和水平線標簽

這兩個都是單標簽。

換行中，瀏覽器不會識別代碼中的Enter換行。因為不管是一個間隙還是多個間隙，瀏覽器可以識別為1個空格。如果要多個空格，就得輸入 

  是 HTML 中的一個特殊字符實體（Entity），表示"不換行空格"（Non-Breaking Space）。它有以下幾個主要作用：

插入空格：在 HTML 中，多個連續的普通空格會被瀏覽器解析為一個空格，而  可以強制插入一個空格。

保持不換行：它可以防止文本在這個位置換行。

示例結果如下：

    <!-- 使用普通空格 -->第一行內容 第二行內容<br><!-- 使用&nbsp; -->第一行內容&nbsp;第二行內容<br><!-- 使用多個&nbsp;可以創建更大的間距 -->第一行內容&nbsp;&nbsp;&nbsp;第二行內容

文本格式化標簽

通常用strong、em、ins、del標簽寫文本格式化標簽（而不是b,i,u,s）。

em：emphasis

ins：insert

del：delete

b：bold，即粗體

i：italic，即斜體

u：underline，即下劃線

s：strike-through，指的是穿過文本的刪除線。

圖像標簽

圖片的URL存放圖片的位置，

vscode自帶alt參數，alt是圖片的替換文字，當圖片顯示錯誤時顯示alt的文字。

主要用到alt參數和title參數。

另外還有width和height屬性，但它們通常通過CSS得到。如果指定width（height），瀏覽器會等比例縮放height（width）。

路徑指定，友情鏈接也屬于絕對路徑的應用。本地一般用相對路徑。

超鏈接標簽

點擊后跳轉到其他頁面，為雙標簽。如下所示，href中寫目標網頁地址

<a href="">跳轉文字描述</a>

用target="_blank"可以選擇新窗口打開。

在開發初期，不知道超鏈接的跳轉地址，href屬性值寫#，來表示空鏈接，不會跳轉。

<a href="#">空鏈接</a>

音頻、視頻標簽

音頻標簽

音頻在默認情況下不會自動播放。

control用于顯示音頻控制面板。**在HTML5中，如果屬性名和屬性值完全一樣，那么可以簡寫為一個單詞。**即下兩者是等價的。

(1)controls = "controls"
(2)controls

對于loop、autoplay同樣可以簡寫為一個單詞。但是即使設置了autoplay屬性，仍然無法播放，因為瀏覽器一般禁用自動播放功能。

視頻標簽

autoplay需要配合muted屬性設置才能生效。否則不會自動播放。

綜合案例1——個人簡介

整體目標與代碼

思路如下，從上到下，先整體后局部。

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>個人簡介</title>
</head>
<body><h1><strong>尤雨溪</strong></h1><hr><p>尤雨溪，前端框架<a href="#">Vue.js</a>的作者，<a href="#">HTML5</a>版Clear的打造人，獨立開源開發者。曾就職于Google Creative Labs和Meteor Development Group。由于工作中大量接觸開源的<a href="#">JavaScript</a>項目，最后自己也走上了開源之路，現全職開發和維護<a href="#">Vue.js</a>。</p><img src="cat.gif" alt="一只貓的gif" title="一只貓的gif"><h2>學習經歷</h2><p>尤雨溪畢業于上海復旦附中，在美國完成大學學業，本科畢業于Colgate University，后在Parsons設計學院獲得Design & Technology藝術碩士學位，任職于紐約Google Creative Lab。</p><h2>主要成就</h2><p>尤雨溪<strong>大學專業并非是計算機專業</strong> ，在大學期間他學習專業是室內藝術和藝術史，后來讀了美術設計和技術的碩士，<ins>正是在讀碩士期間，他偶然接觸到了JavaScript ，從此被這門編程語言深深吸引，開啟了自己的前端生涯。</ins></p><p>2014年2月，開發了一個前端開發庫Vue.js。Vue.js 是構建 Web 界面的 JavaScript 庫，是一個通過簡潔的API提供高效的數據綁定和靈活的組件系統。</p><h2>社會任職</h2><p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex團隊，尤雨溪稱他將以技術顧問的身份加入Weex團隊來做 Vue 和 Weex 的 JavaScript runtime 整合，目標是讓大家能用 Vue 的語法跨三端。</p>
</body>
</html>

小tips

一段的文字過長，可以用alt+z快捷鍵換行，方便觀看。

如果要在段落中插入超鏈接，可以在光標后先打一個空格，這樣就可以有vscode的編譯提示。

綜合案例2——Vue簡介

完整代碼如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue簡介</title>
</head>
<body><h1>Vue.js</h1><p>Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式JavaScript框架。 [5] 與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用（SPA）提供驅動。</p><p>其作者為<a href="./test1_cv.html" target="_blank">尤雨溪</a></p><h2>主要功能</h2><p>Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。</p><p>Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。</p><p>Vue.js 自身不是一個全能框架——它只聚焦于視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時 [2] ，Vue.js 也能驅動復雜的單頁應用。<video src="./vue.mp4" controls></video></p>    
</body>
</html>

HTML進階語法

列表

一般來說，無序列表用的最多。

無序列表

注意事項

ul標簽中只能包裹li標簽，無法包裹如段落p其他標簽
li標簽中可以包裹任何內容。
ul：unorder list

有序列表

ol：ordered list

定義列表

dl：define list

dt：define title

dd：define detail

1736733240509

表格

與Excel表格類似。

tr（table row）

th（table headline）

td（table data）

表格的結構，這兒的thead、tbody是給瀏覽器看的，目的是代碼優化，瀏覽器更好識別內容。

合并單元格

跨行合并例子

跨列合并例子

不能跨結構標簽（thead，tbody，tfoot）合并，即不能合并tbody中的“李四”和tfoot中的“總結”。

表單

定義

input標簽

基礎

input為單標簽

占位文本

用于提示信息。

單選框radio

設置默認選擇“checked”，會默認選擇對應單選框。

上傳多個文件

多選框checkbox

下拉菜單

文本域

默認的col和row不用html設計，而是后面用css設計。

這里應該在前面的方括號后面添加placeholder=“請輸入評論”，否則會和用戶輸入混淆。

label標簽

label有兩種方法

完整寫法代碼示例

簡易寫法示例

按鈕button

默認type屬性為submit

需要定義form標簽，來定義表單區域。

無語義的布局標簽

div一般稱為大盒子，span稱為小盒子。

使用示例，三個紅框都是用div標簽隔出來的。

字符實體

lt：less than

gt：greater than

中文字符大小的空格字符：&emsp;

綜合案例1——體育新聞列表

對應實現代碼如下：

<!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><ul><li><img src="./img/1.jpg" alt="主帥安東尼奧回西班牙休假 國青抵達海口進行隔離"><h3>主帥安東尼奧回西班牙休假 國青抵達海口進行隔離</h3></li><li><img src="./img/2.jpg" alt="梅州主帥：申花有強有力的教練組 球員體能水平高"><h3>梅州主帥：申花有強有力的教練組 球員體能水平高</h3></li><li><img src="./img/3.jpg" alt="馬德興:00后球員將首登亞洲舞臺 調整心態才務實"><h3>馬德興:00后球員將首登亞洲舞臺 調整心態才務實</h3></li></ul>
</body>
</html>

綜合案例2——注冊信息

完成示例：

這兒的確認密碼和密碼相同是通過js確認的，現在只需要設計出樣式即可。

<!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><h1>注冊信息</h1><form action=""><h2>個人信息</h2><label>姓名：</label><input type="text" placeholder="請輸入真實姓名"><br><br><label>密碼：</label><input type = "password" placeholder="請輸入密碼"><br><br><label>確認密碼：</label><input type = "password" placeholder="請再次輸入密碼"><br><br><label>性別：</label><label><input type="radio" name="gender">男</label><label><input type="radio" name="gender" checked>女</label><br><br><label>居住城市：</label><select><option>北京</option><option>上海</option><option>廣州</option><option>深圳</option><option selected>武漢</option></select><h2>教育經歷</h2><label>最高學歷：</label><select><option>本科</option><option selected>碩士</option><option>博士</option><option>大專</option></select><br><br><label>學校名稱：</label><input type="text"><br><br><label>所學專業：</label><input type="text"><br><br><label>在校時間：</label><select><option>2015</option><option>2016</option><option>2017</option><option>2018</option></select>--<select><option>2019</option><option>2020</option><option>2021</option><option>2022</option></select><h2>工作經歷</h2><label>公司名稱：</label><input type="text"><br><br><label>工作描述：</label><br><textarea placeholder="請輸入工作描述"></textarea><br><br><label><input type="checkbox">已閱讀并同意以下協議:</label><br><ul><li><a href="#">《用戶服務協議》</a></li><li><a href="#">《隱私政策》</a></li></ul><br><br><button>免費注冊</button><button type="reset">重新填寫</button></form></body>
</html>