Web 前端開發之小白入門

Rick-Boston發表於2018-11-23
原文網址 : https://blog.csdn.net/qq_36630770/article/details/84378146
Web前端

Web 前端筆記

 

HTML 指的是超文字標記語言 (Hyper Text Markup Language)

HTML 不是一種程式語言，而是一種標記語言 (markup language) 標記語言是一套標記標籤 (markup tag)

HTML 使用標記標籤來描述網頁

HTML標記本質上是用來描述頁面內容的語義的，用文字描述文字的語義

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--文件結構型別說明-->

 

*為什麼要用正確的標籤表達語義？

  • 便於SEO（Search Engin Optimization）

  • 能提高可訪問性（對於使用者）

  • 能提高程式碼的可閱讀性（對於開發人員)

*文件結構說明（文件型別說明）

有7種文件型別

HTML4.0-4.1       strict , Trannsitional , Formset

不嚴謹的HTML文件

快捷鍵：html:xt   tab鍵

XHTML1.0        strict , Trannsitional , Formset

嚴謹的HTML文件：所有的標記都要小寫

快捷鍵：html:xs  tab鍵

HTML5 快捷鍵：html:5   tab鍵

*Sublime的用法

需要安裝一個外掛，叫做「emmet」

---PackageControl中直接安裝即可

  • 先儲存網頁

  • 不需要完全的輸入一個標籤，你只需要輸入標籤的名字，然後點選Tab鍵

  • Ctrl + 滑鼠滾輪 ： 調整當前文件的顯示字號大小

  • Ctrl + Shift + D :  複製當前游標所在行

  • Ctrl + Shift + K :  刪除游標所在行

  • 標籤名 * n 然後點選Tab鍵 ： 自動連續生成 n 個相同的標籤 

  • Ctrl + Shift + ↑ ： 上移當前行

  • Ctrl + Shift + ↓ ： 下移當前行

  • Ctrl + n : 建立新頁面

  • Ctrl + z : 返回

  • div>p>img 然後點選 Tab 鍵 <=> <div><p><img src="" alt="" /></p></div>

  • li * 10 > a > img 然後點選 Tab 鍵

  • 快捷鍵 F12 開啟網頁

*mate標籤（只能出現在<head></head>標籤裡）

  • 宣告當前頁面所使用的字符集 

          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

          需要注意的是，一定要讓你宣告的當前頁面所使用的編碼格式與當前頁面檔案的儲存格式一致，否則就會出現亂碼

           

           我們中文的世界裡，目前採用的編碼格式 ： UTF-8   GB2312(GBK/GB ： 國標）

  •  <meta name="description" content=" "/>給網站新增描述資訊，便於搜素引擎搜尋

  • <meta name = "keywords" content=" "/>給網站新增搜素關鍵字

 

*在 body 體裡出現的 html 標籤，可以分成兩大類： 容器級--div、文字級--span （文字、圖片、表單元素）

連結站外的地址要注意Http：//協議

*a標籤

    注意：”~“ 符號在 ASP.NET 裡表示當前網站的根目錄，但是這個符號對於Html的相對路徑來說是不管用的

    錨點 ： <a href = "#zhuzuo">點選我的著作</a>.....<a name="zhuzuo">我的著作</a>  name屬性是標準用法，用id也可以達到相同的效果

*ul標籤

  unordered list 無序列表，用來表示一組語義相同的項

  li : list item 

  ul標籤和li標籤是成組出現的，即ul不能脫離li單獨存在，li也不能脫離ul單獨存在

  ul標籤裡只能放li

  li標籤裡可以放任何東西，可以非常複雜，甚至還可以在li裡套ul

  ul 可以用來做網頁的導航

*ol標籤

ordered list 有序列表，用來表示一組語義相關的項

ol標籤和ul標籤一樣，ol也不能脫離li單獨存在，必須成組出現

一般情況下，既然ul和ol都是表示一組語義相同的項，所以我們很少用ol，一般只用ul

*dl定義列表

   dl : definition list

   dt : definition title

   dd : definition description

*label標籤

   它往往和表單元素（input標籤）搭配使用

 

 

 

相關文章