0基础跟班学习前端的第三天（因为上完一次课需要上一天自习啦~）内容整理归纳还有附带的小练习~希望大家多动手练习（二）
關于HTML
我們終于迎來了正題，開始學習前端基礎的第一部分，老師強調前端一般都是結構（HTML）丶樣式（CSS）和交互（JavaScript）相分離的。
我們的HTML只負責頁面的結構。
一丶<head>標簽內容
那么我們從它的頭部標簽<head>標簽說起吧~~
1.<title>標簽
作用：
- 它定義了一個HTML文件的標題，這個標題是顯示在網頁的標題欄中。一個HTML文件中只能有一個<title>
在瀏覽器顯示：
- 收藏網頁時，網頁的標題會作為默認的內容存在
- 搜索引擎會捕捉到標題中的內容（現在我們瀏覽的絕大部分網頁都是通過百度的搜索引擎來看到的）
2.字符集和編碼
字符集：就是我們HTML文件中的英文，中文或者標點符號等其他字符的集合。
<html lang="en"> <!-- 這里寫英文寫中文都可以 -->編碼：規定了各種字符以什么樣的形式儲存。
3.<meta />標簽
作用：
<meta charset="UFT-8" />- 更改字符集，規定了瀏覽器以什么樣的編碼來解析頁面
- name屬性取keywords值時，content里面要輸入頁面關鍵詞。為了便于被搜索引擎抓取，更容易被用戶瀏覽到。
可以有多個關鍵詞，每個關鍵詞之間用英文逗號隔開
越重要的關鍵詞要放在最前面
- name屬性取description值時，content里面要輸入的是對頁面的描述。也是為了方便被搜索引擎抓取到。
我來給你們舉個例子，下面是京東官網的網頁源代碼截圖：
4.其他標簽
當然 頭部標簽除了上面的標簽外，在是當時還可以放以下幾個標簽：
- <script>標簽：用來放javascript代碼
- <style>標簽：用來定義一些樣式
- <link />標簽：設置外部文件的鏈接標志，確定當前文件與其他文件的關系。最多的是用來引進我們的CSS樣式表
那<head>頭部標簽中的內容已經講的差不多啦！我們接著學習最最最最重要的<body>標簽里面都放什么啦~
二丶<body>標簽里的內容
1.<p>段落標簽
它用來定義一個段落，我們稱它為段落標簽
我先來舉個例子：
注意：
它會自動在后面創建空白（也就是自動換行）
2.<h1>~<h6>標題標簽
先來舉個例子：
注意：
- 被標題標簽標記的內容會自動換行并且變粗
- 標題標簽標記的內容是網頁中著重強調的內容，內容的重要程度隨著標題標簽等級的遞增而依次減弱
- 在實際的項目開發中，我們一般只用到<h1>~<h3>
- <h1>標簽應該每個HTML文件中只使用一次
3.<hr />水平線標簽
再來舉個例子：
1111111 <hr /> 2222222
作用：
定義一條水平線，用來分隔內容
4.語義化標簽
<b>這是一個可以讓文字加粗的標簽</b><br /> <strong>這是一個可以讓文字加粗的標簽</strong> <hr /> <i>這是一個可以讓文字變成斜體的標簽</i><br /> <em>這是一個可以讓文字變成斜體的標簽</em> <hr /> <u>這是一個可以給文字加下劃線的標簽</u><br /> <ins>這是一個可以給文字加下劃線的標簽</ins> <hr /> <s>這是一個可以讓給文字加刪除線的標簽</s><br /> <del>這是一個可以讓給文字加刪除線的標簽</del> <hr />瀏覽器顯示：
注意：也許你們跟我有一樣的迷惑，為什么每個語義化標簽都有兩種寫法，而且一種寫法很簡單，另一種寫法還有點難。我們為什么不以簡單的寫法作為主要的寫法呢？
是因為我們的語義化標簽<b><i><u><s>它們只能讓標記的內容顯型，而<strong><em><ins><del>這些看似復雜的標簽不僅可以顯型，還能起到強調的作用。
5.相對路徑Or絕對路徑
這塊知識是為下一塊知識做鋪墊的，為了你們更好懂，所以拿來講一下
絕對路徑
顧名思義就是絕對的路徑，就是從頭開始計算的路徑。
本地路徑：
C:\Program Files\Internet Explorer\images
網頁路徑：
https://www.baidu.com/
相對路徑
是相對于當前文件的位置來進行計算的
- 上一級:../
- 同級：.
- 下一級：/
6.<a>鏈接標簽
同樣來寫個例子：
<a href="https://www.baidu.com">百度</a>在網頁中：
當我們點擊這兩個字時，頁面會自動跳轉到百度網頁，這就是鏈接。
- Web中的頁面都是相互鏈接組成的，可以點擊并且會跳轉到另外一個頁面的我們叫它鏈接。
- <a>標簽的作用是點擊標記的內容使頁面跳轉到指定位置的文檔
- <a>標簽中有一個重要的屬性是href 它的值為要跳轉的頁面，也就是URL（可以是絕對路徑也可以是相對路徑）
關于href屬性的一些注意事項：
** 1.URL也可以定義到其他類型的文件上去，比如圖片或視頻等**
- <a>標簽中有一個重要的屬性是href 它的值為要跳轉的頁面，也就是URL（可以是絕對路徑也可以是相對路徑）
這樣的話整個圖片都會作為鏈接，點擊后即可完成跳轉
2.書寫路徑的時候要注意大小寫！
3.href的值不要寫本地的絕對路徑，因為本地協議file用于訪問計算機本地的文件
4.如果href要訪問其他網頁需要在網頁前面加上http://，否則它就找的是文件目錄下的值為URL的文件
5.空鏈接
target屬性：
取_blank值時：在新窗口中打開。
取_self值時：在本窗口中打開（默認）
7.錨點標簽
同樣先舉個例子：
<h2>個人簡歷</h2><a href="#name1">姓名</a><a href="#age">年齡</a><a href="#hight">身高</a><a href="#love">特長</a><hr><p><a name="name1">姓名：皮卡丘</a></p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p><a name="age">年齡：5歲半</a></p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p><a name="hight">身高：50cm</a></p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p><a name="love">特長：放電</a></p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p><p>皮卡丘</p>我們可以通過點擊鏈接快速跳轉到自己想看到的內容，這就是錨點鏈接的作用。
要實現錨點鏈接需要兩個步驟！！
1.先劃分區塊：就是將需要標記的區域用<a>標簽標記起來，然后給a標簽的name屬性賦一個英文名字的值即：
2.再標記劃分好的區塊
<a href="#love">特長</a>注意：
1.標記劃分好的區塊時一定不要忘了加“#”
2.劃分區塊時與標記區塊時的名稱要一致
這樣就實現了快速跳轉到自己想要的位置
好啦~今天老師就講啦這么多，每個標簽我都有例子，可以多照著練習一下，加深一下印象。那咱們下周一見啦！！
總結
以上是生活随笔為你收集整理的0基础跟班学习前端的第三天（因为上完一次课需要上一天自习啦~）内容整理归纳还有附带的小练习~希望大家多动手练习（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Dynamics 365 Online和
- 下一篇： 微信链接跳转浏览器 H5实现APP下载功