HTML5教程-基礎標籤-李南江

配套視頻下載地址

---

開發工具(工慾善其事必先利其器)

• 爲了讓大家更快的融入到編程的世界中, 不被繁瑣的英語單詞所困擾, 不用每天編寫很多沒有意義的重複代碼, 提升大家的開發效率今後的課程中我們統一採用最高級高發工具來編寫網頁

常見的前端開發工具

• 記事本: 提示功能較差

• editplus/nodepad++: 提示功能較差

• Dreamwaver: 更偏向設計

• Sublime: 輕量級,自帶功能不太全, 但是插件十分豐富

• WebStorm: 重量級, 自帶功能全面
  

  
  

• 其它ide(zend studio、netbean等)

• 爲了讓大家更快的融入到編程的世界中, 不被繁瑣的英語單詞所困擾, 今後的課程中我們統一採用最牛逼最高級的高發工具WebStorm

WebStorm安裝和使用

• 安裝軟件

1.png

2.png

3.png

4.jpg

5.jpg

6.png

7.jpg

8.png

• 破解軟件

9.png

10.png

11.jpg

12.jpg

13.png

14.png

• 漢化軟件

15.png

16.jpg

• 設置模版

• 創建文件

17.png

18.jpg

19.png

• WebStorm常見快捷鍵

• 如何在WebStorm中利用快捷鍵創建一個新的.html的文件

  • 同時按下鍵盤上的Ctrl + Alt + Insert

• 如何在WebStorm中讓光標移動到當前行的末尾

  • 按下鍵盤上的End鍵即可

• 如何在WebStorm中讓光標移動到當前行的最前面

  • 按下鍵盤上的Home鍵即可

• 如何在WebStorm中讓光標在多行中閃爍

  • 按住鍵盤上的Alt鍵不放, 然後再按住鼠標的左鍵不放, 然後再拖動鼠標即可

• 如何在WebStorm中快速的複製光標所在的那一行

  • 按下鍵盤上的Ctrl + D

• 如何在WebStorm中快速的刪除光標所在的那一行

  • 按下鍵盤上的Ctrl + X

• 如何在WebStorm中讓標籤包裹一段內容, 也就是自動在一段內容前後加上標籤

  • 按下鍵盤上的Ctrl + Alt + T, 然後按下回車, 然後輸入對應的標籤即可

---

基礎標籤學習

H系列標籤(Header 1~Header 6)

- 作用:
 - 用於給文本添加標題語義
- 格式:
 - <h1>xxxxxx</h1>
- 注意點:
 - H標籤是用來給文本添加標題語義的, 而不是用來修改文本的樣式的
 - H標籤一共有6個, 從H1~H6, 最多就只能到6, 超過6則無效
 - 被H系列標籤包裹的內容會獨佔一行
 - 在H系列的標籤中, H1最大, H6最小
 - 在企業開發中, 一定要慎用H系列的標籤, 特別是H1標籤. 在企業開發中一般情況下一個界面中只能出現一個H1標籤(和SEO有關)

P標籤(Paragraph)

- 作用:
 - 告訴瀏覽器哪些文字是一個段落
- 格式:
 - <p>xxxxxxxx</p>
- 注意點:
 - 在瀏覽器中會單獨佔一行

Hr標籤(Horizontal Rule)

- 作用:
 - 在瀏覽器上顯示一條分割線
- 格式:
 - <hr />
- 注意點:
 - 在瀏覽器中會單獨佔一行
 - 通過我的觀察發現HR標籤可以寫/也可以不寫/, 如果不寫/那麼就是按照HTML的規範來編寫, 如果寫上/那麼就是按照XHTML的規範來編寫.但是在HTML5中, 由於HTML5兼容HTML和XHTML所有寫不寫都可以.那麼以後我們在做前端開發時到底寫還是不寫呢? 按照高級開發工具的提示來寫即可.
 - 由於hr標籤是用來修改樣式的, 所以不推薦使用. 今後開發中添加水平線一般都使用CSS盒子來做

---

HTML註釋(Annotation)

• 什麼是註釋?

  • 註釋是在所有計算機語言中都非常重要的一個概念，從字面上看，就是註解、解釋的意思

  • 註釋可以用來解釋某一段程序或者某一行代碼是什麼意思，方便直接或程序員之間的交流

• 爲什麼要使用註釋?

  • 適當的註釋，能夠讓我們的程序更加可讀，所以用中文提示自己，這裏的程序是幹什麼的

• 註釋格式

  <!--被註釋的內容-->

• 注意點:

  • 被註釋的內容不會在瀏覽器中顯示, 註釋是寫給我們自己看的

  • 註釋不能嵌套使用

    <!--<!--被註釋的內容-->-->

• 快捷鍵: ctrl + /

---

img標籤(image)

• 作用: 在網頁上插入一張圖片

• 格式: <img src="圖片路徑" />

• 標籤的屬性

  • 寫在標籤中K="V"這種格式的文本我們稱之爲標籤屬性

屬性名稱	作用
src(source)	告訴瀏覽器需要插入的圖片路徑, 以便於瀏覽器到該路徑下找到需要插入的圖片
alt(alternate)	規定圖像的替代文本, 只有在src指定的路徑下找不到圖片,纔會顯示alt指定的文本
title	懸停文本(介紹這張圖片, 只有在鼠標移動到圖片上時纔會顯示)
height	設置圖片顯示的高度
width	設置圖片顯示的寬度

• 注意點:

  
  

  • img標籤添加的圖片默認不是佔一整行空間

  • 如果想讓圖片等比拉伸, 只寫高度或者寬度即可

br標籤(Break)

• 作用:

  • 讓內容換行

• 格式:

  • <br/>

• 注意點:

  • br的意思是不另起一個段落進行換行, 而網頁中99.99%需要換行時都是因爲另起了一個段落, 所以應該用p來做

相對路徑和絕對路徑

• 圖片路徑分爲兩種, 一種是絕對路徑, 一種是相對路徑, 我們重點學習相對路徑, 因爲在企業級開發中沒有人使用絕對路徑

• 絕對路徑

  • 從電腦的具體盤符開始尋找我們需要的資源

  • <img src="F:/lnj/girl.png" />

  • 以上代碼表示在F盤下查找lnj文件夾, 然後在lnj文件夾下查找girl.png圖片

• 相對路徑

  • 一個文件相對於另外一個文件的位置尋找我們需要的資源

  • <img src="girl.png" />

  • 假設html文件和girl.png都在lnj文件夾下, 以上代碼表示在lnj文件夾下查找girl.png圖片

• 爲什麼沒人使用絕對路徑?

  • 可以移植性太差.

• 什麼是可移植性?

  • 可以簡單的理解爲把寫到的代碼拷貝到另外一臺電腦上是否能夠正常運行

• 爲什麼絕對路徑可移植性差?

  • 假如我編寫的html文件放在我電腦的 F:/lnj 目錄下,  html文件中用到的圖片放在F:/lnj/images目錄下, 我給src指定的絕對路爲F:/lnj/images/girl.png. 那麼將來我將整個lnj文件夾拷貝給你, 如果你將lnj文件夾放在非F盤下, 那麼將無法顯示圖片

  • 例如你存放在C盤根目錄, 那麼圖片的絕對路徑會變爲C:/lnj/images/girl.png, 而src會去F盤找, 所以不會顯示

  • 你只有將lnj文件夾存放在F盤根目錄下時圖片纔會正常運行, 這就叫做可移植性不好

• 爲什麼相對路徑可移植性好?

  • 同上, 如果src指定的路徑爲images/girl.png, 那麼無論你拷貝到那個盤, 哪個文件夾. 系統都只會在當前文件夾中的images下去查找圖片, 不會受到盤符和存儲位置的影響, 只要保證頁面和圖片位置的相對關係不變就不會影響到圖片的顯示

• 相對路徑幾種查找方式

  • ../代表訪問上級目錄

  • 假設a文件夾下面有b文件夾, 圖片存放在a文件夾中, html文件存放在b文件夾中, 那麼路徑爲../girl.png

  • 因爲html文件在b文件夾中, 所以路徑是相對於b文件夾的, 所以../代表訪問b文件夾的上一級目錄, b文件夾的上一級目錄是a文件夾, 所以../girl.png就代表在a文件夾查找girl.png

  • 直接編寫, 例如abc/girl.png

  • 加上./ 編寫, 例如./abc/girl.png

  • 相對當前目錄有幾個文件夾,就在後面依次補全幾個文件夾名稱即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png

  • 直接編寫, 例如: girl.png

  • 加上./ 編寫, 例如./girl.png

  • ./代表當前目錄, ./girl.png代表在當前目錄下查找

  • 同級

  • 下級

  • 上級

• 注意事項:

  • 相對路徑不會出現這種格式aaa/../bbb/girl.png

  • 雖然可以顯示, 但是企業開發中千萬不要這麼寫

a標籤(anchor)

• 格式: <a href="http://www.it666.com">江哥博客</a>

• 作用: 用於從一個頁面鏈接到另一個頁面

• 注意事項:

  • 在a標籤之間一定要寫上文字, 如果沒有, 那麼在頁面上找不到這個標籤

  • a標籤也叫做超級鏈接或超鏈接

• a標籤的屬性

屬性名稱	作用
href(hypertext reference)	指定跳轉的目標地址
target	告訴瀏覽器是否保留原始界面, _blank保留, _self不保留
title	懸停文本(介紹這個鏈接, 只有在鼠標移動到超鏈接上時纔會顯示)

• base標籤和a標籤結合使用

  • 注意事項:

  • base必須嵌套在head標籤裏面

  • 如果標籤上指定了target,base中也指定了target,那麼會按照標籤上指定的來執行

  • 如果每個a標籤都想在新頁面中打開,那麼逐個設置a標籤的target屬性比較麻煩, 這時我們可以使用base和a標籤結合的方式,一次性設置有a標籤都在新頁面中打開

  • 格式: <base target="_blank" />

• a標籤其它用法

  • 例如<a href="girl.zip">下載福利資源<a/>

  • 格式: <a href="01-錨點鏈接.html#location">跳轉到指定位置</a>

  • 只需要在01-錨點鏈接.html頁面添加一個id位置即可

  • 格式<a href="#">江哥博客</a>

  • 格式<a href="javascript:">江哥博客</a>

  • 例如 <p id="location">這個是目標</p>

  • 跳轉到當前頁面指定位置(錨點鏈接)

  • 2.1.格式<a href="#location">跳轉到指定位置</a>

  • 2.2.在頁面的指定位置給任意標籤添加一個id屬性

  • 假鏈接(本質是跳轉到當前頁面)

  • 跳轉到指定頁面的指定位置

  • 下載(極力不推薦使用)

文／極客江南（簡書作者）
原文鏈接：http://www.jianshu.com/p/cc669b19f09f
著作權歸作者所有，轉載請聯繫作者獲得授權，並標註“簡書作者”。