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標籤)搭配使用
相關文章
- web前端開發怎麼入門?Web前端
- 小白怎麼入門前端 Web前端都學些什麼前端Web
- Web前端開發入門之網頁製作三要素Web前端網頁
- Web前端開發入門之網頁製作三要素!Web前端網頁
- 4步帶你從Web前端小白到入門!Web前端
- 前端小白的入門前端
- Web開發初探之JavaScript 快速入門WebJavaScript
- web前端開發教程,最全JavaScript入門講解Web前端JavaScript
- Web 前端小白入門(一):心路歷程,非技術指南Web前端
- 小白如何入門Web前端?你可以從這幾方面入手Web前端
- openresty前端開發入門三之JSON篇REST前端JSON
- openresty前端開發入門四之Redis篇REST前端Redis
- openresty前端開發入門五之Mysql篇REST前端MySql
- Web前端之 CSS入門第六天Web前端CSS
- 前端開發快速入門前端
- openresty前端開發入門二REST前端
- 致剛入門的Web前端小白,這些知識你瞭解嗎?Web前端
- Web前端開發零基礎入門學習路線圖Web前端
- web前端新手入門建議Web前端
- web前端小白科普集Web前端
- Java開發小白入門前的工具安裝Java
- 機器學習之小白入門機器學習
- ctfshow web入門之web259Web
- 好程式設計師web前端分享web前端入門知識程式設計師Web前端
- 後端小白的VUE入門筆記, 前端高能慎入後端Vue筆記前端
- HTML之小白的入門Day1HTML
- 前端框架開發之Niu框架——從零學框架的小白前端框架
- 好程式設計師web前端乾貨之web前端開發框架彙總程式設計師Web前端框架
- Web前端開發概述Web前端
- web_前端開發JS框架篇-Vue基礎入門版-基礎語法Web前端JS框架Vue
- web前端開發入門,學習路徑以及具體的學習內容Web前端
- 入門web前端需要掌握的技術Web前端
- Web 前端開發之js正規表示式用法Web前端JS
- java web 之 網頁前端開發基礎(1)JavaWeb網頁前端
- Python和前端開發哪個更好入門?Python前端
- web前端入門到實戰:css騷操作之表單驗證Web前端CSS
- Web閱讀器開發系列教程(入門篇)Web
- Go Web開發(Gin框架)簡易入門教程GoWeb框架