第一週-初識html之常用標籤
拉勾教育–大前端就業急訓營3期
作為一名小小的設計師，畢業後雖是順利找到了工作，但工作內容全是一些瑣碎的事。幾個月下來心生辭職再謀出路的想法，最長逛的拉勾招聘專注於網際網路招聘，與我想進網際網路公司的想法很是契合。在看拉勾招聘中課程專欄的時候看到了前端訓練營的資料,於是找拉勾的小姐姐拿到學習課程表，課程表模組清晰並有模擬專案，且與大學時候的網頁製作課程比較相近，並聽拉勾小姐姐說設計與前端兩門技術很是契合，於是進入了前端學習之旅。
第一週的學習感受
課程是錄播加直播的形式，在看錄播課程的時候可能會擔心自己不夠自覺，從而中途偷懶，但是班級的老師會時常提醒你注意學習的進度，並且主動詢問在學習上是否存在問題，對於我這靦腆的小夥汁來說簡直不要太好，有種被關心的感覺。在班級群眾，老師同學們都很熱情，同學門經常丟擲自己學習上出現的問題請教老師，老師也及時做出迴應。
以下是第一週的部分筆記
基本骨架
HTML檔案最基本的四個標籤，組成了網頁的基本骨架，包括：<html>、<head>、<title>、<body>四組標籤。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
<html>標籤
- 作用:定義HTML檔案的根元素，表示整個的HTML文件，所有的標籤要書寫在<html>標籤內部。
<head>標籤
- 作用：用於存放<title>,<meta>,<base>,<style>,<script>,<link>。內部用於對網頁的設定，除了<title>內部的文字，其他標籤都不顯示在瀏覽器上。
- 注意在<head>標籤中我們必須要設定的標籤是title。
<title>標籤
- 作用
- 1:讓頁面擁有一個屬於自己的標題。
- 2:title中的關鍵字可以作為搜尋引擎抓取時的關鍵字，提高SEO搜尋引擎優化。
- 3:內部的內容會顯示在搜尋結果的標題部分。
- 4:作為瀏覽器收藏夾預設的網頁標題。
- 5:建議網頁必須新增title標籤內部內容，內容儘量精簡，提取網頁的關鍵字。
<body>標籤
- 作用：定義網頁的主體部分，用於存放所有的HTML顯示內容的標籤<p>,<h1>,<a>,<div>等。
- <body>內部的元素內容會顯示在瀏覽器的視窗中。
html常用標籤
###註釋語法
在很多程式碼技術中都可以添加註釋內容，我們也可以向 HTML 原始碼添加註釋。
- HTML註釋語法：
<!-- 書寫註釋內容 -->
- vscode快捷鍵：ctrl+/
- 特點：註釋僅再原始碼中顯示，瀏覽器視窗不顯示
- 用途：
- 1.在原始碼中新增描述性的提示資訊，便於我們閱讀程式碼。
- 2.對於 HTML 糾錯也大有幫助，可以通過註釋某一行 HTML 程式碼，以便檢索錯誤的位置。
- 3.暫時註釋掉一部分不用的程式碼，便於後期恢復程式碼。
HTML常用標籤(標題)
標題標籤
- 標題（Heading），是通過<h1>-<h6> 六個標籤分別來對六個級別的標題進行定義的。
- <h1>定義最大的標題，<h6>定義最小的標題。
- <h1>-<h6> 標籤都是雙標籤，且是容器級標籤。
- 例如
一級標題
一級標題
一級標題
一級標題
一級標題
一級標題
標題級別
標題標籤之間是不能互相巢狀的，下一級標題與上級標題之間通過同級關係書寫，下一級標
題解釋說明的是前面距離最近的上一級標題
- 正確寫法
<h1>一級標題</h1>
<h2>二級標題</h2>
- 錯誤寫法
<h1>
<h2>二級標題</h2>
</h1>
權重
- 標題標籤對於呈現文件結構非常重要，使用時要根據標籤的重要程度進行選擇，其中<h1>標籤最重要，<h2>標籤次重要，以此類推。
- <h1>在整個HTML中的權重非常高，內部應該放置HTML中最重要的內容，比如logo。
- <h1>由於非常重要，內部的文字對於提高搜尋引擎排名也非常重要，為了防止作弊，如果
- 一個頁面出現多個<h1>，反而降低權重。約定俗成的，一個頁面中只會出現一個<h1>。
##HTML 常用標籤(段落和換行)
段落標籤
- 段落（paragraph）是通過<p>標籤進行定義的。
- <p>標籤是雙標籤，且為文字級標籤。內部只能放置文字、圖片、表單元素，或者廢棄的<font>標籤等。
<p>這是一個段落</p>
- 作用：
-
標籤的作用是給標籤內部的內容新增一個完整段落的語義，不負責內容自動換行的樣式。換行的效果是由css決定的。
-
換行標籤
- <br/>（breaking）標籤是HTML中一個簡單的換行符。
- <br/>標籤是一個單標籤。
- 在需要換行的位置可以使用<br/>標籤書寫，但是<br/>與<p>不同，<br/>沒有建立新的段落的語義，只是簡單的進行強制換行。
<p>這是第一<br/>個段落</p>
<p>這是第二個段落</p>
顯示如下：
這是第一
個段落
這是第二個段落
- 注意：
- 每一對兒<p>標籤內部的元素內容為一個完整的段落，如果有多個段落，需要分別使用不同的<p>標籤進行定義。
- 正確寫法
<p>這是第一個段落</p>
<p>這是第二個段落</p>
<p>這是第三個段落</p>
- 錯誤寫法
<>這是第一個段落<br/>這是第二個段落<br/>這是第三個段落</p>
HTML常用標籤(文字格式化標籤)
文字格式化
文字格式化的標籤均為雙標籤，且為文字級標籤，內部只能書寫文字。
| 標籤 | 描述 |
|---|---|
| b | 粗體文字，bold |
| big | 大號字 |
| em | 著重文字，emphasis，斜體效果 |
| i | 斜體字，italic |
| small | 小號字 |
| strong | 加重語氣，加粗效果 |
| sub | 下標字，subscript |
| sup | 上標字，superscript |
| ins | 插入字，下劃線效果，insert |
| del | 刪除字，delete |
| s | 不贊成食用，用del代替，strike的簡化 |
| strike | 不贊成食用，用del代替 |
| u | 定義下劃線，不贊成使用，使用css中樣式替代，underline |
- 演示如下
文字格式化-----b
文字格式化-----em
文字格式化-----i
文字格式化-----small
文字格式化-----strong
文字格式化文字格式化-----sub
文字格式化文字格式化-----sup
文字格式化-----ins
文字格式化-----del
文字格式化-----s
文字格式化-----u
HTML常用標籤(影象)
影象標籤
- 影象（image）由<img>標籤進行定義。
- <img>標籤是單標籤，本身相當於一個特殊的文字。
- <img>標籤的作用是在指定的位置插入一張圖片。
- 在HTML檔案，常用的插入圖片的型別有：jpg、png、gif。
- 標籤屬性
- 由於<img>為單標籤，所以它只能通過屬性進行相關的影象設定。
- <img>常用屬性展示：
| 標籤 | 描述 |
|---|---|
| src | 圖片路徑 |
| width | 圖片寬度 |
| height | 圖片高度 |
| border | 邊框屬性 |
| title | 提示文字 |
| alt | 設定影象沒找到事的替換文字 |
src屬性和路徑
如果需要插入一張圖片到HTML中，<img>標籤必須設定src屬性。
src：全稱source資源，屬性值是圖片查詢的路徑。
路徑：指的是尋找檔案時所歷經的線路，在HTML中有特殊的書寫語法。
路徑分為相對路徑和絕對路徑，不同的方式出發點和參考位置不同。
<img src="lagoujiaoyu.png">
寬度和高度
width：圖片的寬度
height：圖片的高度
屬性值：以px為單位的數值，或者省略px不寫。
如果不設定兩個屬性，會以圖片的原始尺寸載入。
如果設定屬性：只設置了其中一個，另一個會等比例變換；如果兩個都設定，按照設定值載入。
<img src="lagoujiaoyu.png" width="100px">
<img src="lagoujiaoyu.png" height="200px">
<img src="lagoujiaoyu.png" width="200" height="100">
邊框border
border：設定圖片的邊框。
屬性值：數值，數值是幾表示邊框寬度為幾畫素。
<img src="lagoujiaoyu.png" border="10">
注意：border屬性可以使用css進行設定，css中的邊框有更多的設定效果。
提示文字title
title：設定的是滑鼠懸停時的提示文字。
屬性值：自定義的提示文字內容。
<img src="lagoujiaoyu.png" title="拉勾教育">
滑鼠放置於圖片上檢視效果
替換文字alt
alt：設定的是圖片查詢錯誤時，出現的替換文字。
如果能正常找到圖片，替換文字是不顯示的。
屬性值：自定義的替換內容。
<img src="cuowulujing.png" alt="這是一張拉勾教育的圖片">
總結
<img>標籤最為重要的屬性為src，儘量使用alt屬性對圖片進行說明，新增相對關鍵詞可以有利
於SEO搜尋引擎優化。其他屬性可以根據需求進行設定。
<img src="smile01.png" alt="這是一張微笑的表情">
HTML常用標籤(路徑)
相對路徑
- 相對路徑查詢檔案時，需要從HTML檔案本身出發，根據相對的位置進行查詢，包含三種方向。
- 同級查詢：指目標檔案與HTML檔案位於同一級，直接書寫檔名+字尾格式；
\<img src="lagoujiaoyu.png">- 子級查詢：指目標檔案在與HTML檔案同一級的資料夾的內部，需要先查詢資料夾名稱，然後通過關閉符號/進入資料夾查詢裡面的檔案；如果有多層資料夾，需要/進入多層。
\<img src="images/lagoujiaoyu.png"> \<img src="images/tupian/lagoujiaoyu.png">- 上級查詢：指目標檔案在HTML檔案所在資料夾的更上一級，需要跳出當前資料夾到上一層，路徑寫法利用…/表示跳出一級，如果跳出多級書寫多次…/，直到找到檔案。
\<img src="../../lagoujiaoyu.png" /> \<img src="../images/lagoujiaoyu.png" />
絕對路徑
- 絕對路徑查詢檔案時，不需要從HTML檔案出發，而是直接從電腦的碟符出發進行查詢，或者使用網址形式查詢。
- 碟符出發：例如從c盤或者d盤出發查詢圖片，書寫時以c:/開頭，後續類似子級查詢寫法直至找到目標檔案。
<img src="C:/Users/teacher/Documents/html/case/images/lagoujiaoyu.png" />
- 網址形式：要查詢的檔案是來自網路資源，路徑寫法以http://開頭。
<img src="http://img3.imgtn.bdimg.com/it/u=1084243323,278941980&fm=26&gp=0.jpg" />
- 從碟符出發的絕對路徑的缺點：
- 1.碟符出發的路徑不可移植，不可移動。
- 2.碟符出發的路徑容易出現中文字元，中文的路徑容易出現錯誤。
路徑實際應用
- 1.建議多使用相對路徑，可以適當使用網址形式的絕對路徑。
- 2.使用相對路徑必須將圖片或檔案與HTML同時上傳，而且需要保持相對位置不變。
視訊&音訊標籤
- 音訊標籤audio
- 音訊檔案支援的格式包括：.mp3、.ogg、.wav。
<body>
<video src="音訊.mp3" controls="controls"></audio>
</body>
- 視訊標籤video
- 視訊檔案支援的格式包括：.mp4、.ogg、.webm。
<body>
<video src="視訊.mp4" controls="controls"></video>
</body>
- 控制條controls
- 音訊&視訊載入後不會自動顯示播放器的控制條，需要使用controls屬性進行設定，屬性值也是controls
controls="controls"