HTML5基本介紹
其他HTML5相關(guān)文章
HTML5學(xué)習(xí)筆記之HTML5基本介紹
HTML5學(xué)習(xí)筆記之基礎(chǔ)標(biāo)簽
HTML5學(xué)習(xí)筆記之表格標(biāo)簽
HTML5學(xué)習(xí)筆記之表單標(biāo)簽
HTML5學(xué)習(xí)筆記之音視頻標(biāo)簽
一.網(wǎng)頁(yè)固定格式
1.編寫(xiě)網(wǎng)頁(yè)的步驟:
- 新建一個(gè)文本文檔
- 利用記事本打開(kāi)
- 編寫(xiě)THML代碼
- 保存并且修改純文本文檔的擴(kuò)展名為.html
- 利用瀏覽器打開(kāi)編寫(xiě)好的文件
1.1 WebStorm常見(jiàn)快捷鍵
-
如何在WebStorm中利用快捷鍵創(chuàng)建一個(gè)新的.html的文件
- 同時(shí)按下鍵盤(pán)上的Ctrl + Alt + Insert
-
如何在WebStorm中讓光標(biāo)移動(dòng)到當(dāng)前行的末尾
- 按下鍵盤(pán)上的End鍵即可
-
如何在WebStorm中讓光標(biāo)移動(dòng)到當(dāng)前行的最前面
- 按下鍵盤(pán)上的Home鍵即可
-
如何在WebStorm中讓光標(biāo)在多行中閃爍
- 按住鍵盤(pán)上的Alt鍵不放, 然后再按住鼠標(biāo)的左鍵不放, 然后再拖動(dòng)鼠標(biāo)即可
-
如何在WebStorm中快速的復(fù)制光標(biāo)所在的那一行
- 按下鍵盤(pán)上的Ctrl + D
-
如何在WebStorm中快速的刪除光標(biāo)所在的那一行
- 按下鍵盤(pán)上的Ctrl + X
-
如何在WebStorm中讓標(biāo)簽包裹一段內(nèi)容, 也就是自動(dòng)在一段內(nèi)容前后加上標(biāo)簽
- 按下鍵盤(pán)上的Ctrl + Alt + T, 然后按下回車(chē), 然后輸入對(duì)應(yīng)的標(biāo)簽即可
2.網(wǎng)頁(yè)基本結(jié)構(gòu)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音視頻測(cè)試</title>
</head>
<body>
</body>
</html>
- 通過(guò)觀察我們發(fā)現(xiàn), HTML基本結(jié)構(gòu)中所有的標(biāo)簽都是成對(duì)出現(xiàn)的, 這些成對(duì)出現(xiàn)的標(biāo)簽中有一個(gè)帶/有一個(gè)不帶/, 那么這些不帶/的標(biāo)簽我們稱之為開(kāi)始標(biāo)簽, 這些帶/的我們稱之為結(jié)束標(biāo)簽
二.網(wǎng)頁(yè)標(biāo)簽
1.HTML標(biāo)簽
- 作用: 用于告訴瀏覽器這是一個(gè)網(wǎng)頁(yè), 也就是說(shuō)告訴瀏覽器我是一個(gè)HTML文檔
注意點(diǎn): 其它所有的標(biāo)簽都必須寫(xiě)在html標(biāo)簽里面, 也就是寫(xiě)在html開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽中間
2.head標(biāo)簽
- 作用:
用于給網(wǎng)站添加一些配置信息 - 例如:
- 指定網(wǎng)站的標(biāo)題 / 指定網(wǎng)站的小圖片
- 添加網(wǎng)站的SEO相關(guān)的信息(指定網(wǎng)站的關(guān)鍵字/指定網(wǎng)站的描述信息)
- 外掛一些外部的css/js文件
- 添加一些瀏覽器適配相關(guān)的內(nèi)容
注意點(diǎn):
一般情況下, 寫(xiě)在head標(biāo)簽內(nèi)部的內(nèi)容都不會(huì)顯示給用戶查看, 也就是說(shuō)一般情況下寫(xiě)在head標(biāo)簽內(nèi)部的內(nèi)容我們都看不到
3.title標(biāo)簽
- 作用:
專門(mén)用于指定網(wǎng)站的標(biāo)題, 并且這個(gè)指定的標(biāo)題將來(lái)還會(huì)作為用戶保存網(wǎng)站的默認(rèn)標(biāo)題
注意點(diǎn):
title標(biāo)簽必須寫(xiě)在head標(biāo)簽里面
4.body標(biāo)簽
- 作用:
專門(mén)用于定義HTML文檔中需要顯示給用戶查看的內(nèi)容(文字/圖片/音頻/視頻)
注意點(diǎn):
雖然說(shuō)有時(shí)候你可能將內(nèi)容寫(xiě)到了別的地方在網(wǎng)頁(yè)中也能看到, 但是千萬(wàn)不要這么干, 一定要將需要顯示的內(nèi)容寫(xiě)在body中
一對(duì)html標(biāo)簽中(一個(gè)html開(kāi)始標(biāo)簽和一個(gè)html結(jié)束標(biāo)簽)只能有一對(duì)body標(biāo)簽
5.meta標(biāo)簽
- 作用 : 在編寫(xiě)網(wǎng)頁(yè)的時(shí)候指定字符集,可避免出現(xiàn)亂碼現(xiàn)象
<meta charset="UTF-8">
GBK(GB2312)和UTF-8區(qū)別
- GBK(GB2312)里面存儲(chǔ)的字符比較少, 僅僅存儲(chǔ)了漢字和一些常用外文
體積比較小 - UTF-8里面存儲(chǔ)的世界上所有的文字,提交比較大
個(gè)人推薦:所有一律都寫(xiě)UTF-8
3.HTML標(biāo)簽分類(lèi)
1.單標(biāo)簽
- 只有開(kāi)始標(biāo)簽沒(méi)有結(jié)束標(biāo)簽, 也就是由一個(gè)<>組成的
<meta charset="UTF-8" />
2.雙標(biāo)簽
- 有開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽, 也就是由一個(gè)<>和一個(gè)</>組成的
<html>
</html>
4.HTML標(biāo)簽關(guān)系分類(lèi)
1.并列關(guān)系(兄弟/平級(jí))
<head>
</head>
<body>
</body>
2.嵌套關(guān)系(父子/上下級(jí))
<head>
<meta charset="UTF-8" />
<title>音視頻測(cè)試</title>
</head>
對(duì)HTML5語(yǔ)言有興趣的同學(xué),給大家極力推薦:江哥的視頻HTML5 + 跨平臺(tái)開(kāi)發(fā),只是不知道會(huì)不會(huì)繼續(xù)更新
