1208-安裝vscode與初識(shí)html

1.谷歌插件

igg谷歌訪問助手
劃詞翻譯
簡閱-閱讀簡單文章
2.Vscode插件
Chinese 簡體中文語言包
Html CSS support
Html/CSS/Javascript snippets
Auto raname tag
one dark pro 主題
3.Vscode快捷鍵
!+tab補(bǔ)全代碼
Ctrl+k Ctrl+l 切換折疊
Ctrl+/ 注釋
Shift+alt+a 塊注釋
Html知識(shí)點(diǎn)
頁面中看到的內(nèi)容都是由元素組成的
元素都是標(biāo)簽描述，標(biāo)簽根據(jù)元素的類型分類雙標(biāo)簽和單標(biāo)簽
html內(nèi)容樣式，取決于標(biāo)簽，內(nèi)容是很多元素組成的
html中的所有內(nèi)容，如果想添加到html文檔中，就必須要使用一個(gè)標(biāo)簽
任何一個(gè)元素只要給他一個(gè)id，就是一個(gè)標(biāo)識(shí)點(diǎn)

標(biāo)題與段落

<h1>這是一個(gè)h1標(biāo)題</h1>
<h2>這是一個(gè)h2標(biāo)題</h2>
<p>這是p標(biāo)簽段落</p>
<gral sex="nv" sw="80,90,100" height="170" weight="200">女朋友</gral>
<!-- html中的所有內(nèi)容，如果想要添加到html文檔中，就必須要使用一個(gè)標(biāo)簽 -->
<!-- js代碼必須寫到一個(gè)script標(biāo)簽中 -->
<script>
const SITE = "Hello world!";
</script>
<!-- 標(biāo)題標(biāo)簽：除了設(shè)置文檔標(biāo)題之外，還可以用來劃分頁面結(jié)構(gòu)的 -->
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<!-- 內(nèi)容標(biāo)簽<p></p> -->
<p>程序員界有一句話：每一個(gè)程序員都應(yīng)該擁有一臺(tái)MacBook pro</p>

a標(biāo)簽使用

<!-- a標(biāo)簽當(dāng)前頁面跳轉(zhuǎn) -->
<a href="http://ipnx.cn/">php中文網(wǎng)</a>
<!-- a標(biāo)簽新窗口新頁面跳轉(zhuǎn) -->
<a href="http://ipnx.cn/" target="_blank">php中文網(wǎng)</a>

iframe內(nèi)聯(lián)

<!-- 點(diǎn)擊a標(biāo)簽在iframe訪問頁面 -->
<a href="https://www.baidu.com" target="baidu">打開百度</a>
<iframe srcdoc="<em>點(diǎn)擊上面打開百度</em>" name="baidu" width="400"></iframe>

使用iframe時(shí)，需要注意a標(biāo)簽的target值需要跟iframe內(nèi)的name屬性值相等

錨點(diǎn)使用

<!-- 通過錨點(diǎn)跳轉(zhuǎn)到底部 -->
<a href="#footer">點(diǎn)我跳轉(zhuǎn)到底部</a>
<div id="footer" style="margin-top: 1000px">我是底部</div>
<a href="#">回到頂部</a>

img使用

<!-- 通過src打開一張網(wǎng)絡(luò)圖片地址 -->
<img src="https://img.php.cn/upload/course/000/000/001/5d240e769553b901.jpg" />
<!-- 圖片設(shè)置大小的時(shí)候只需要設(shè)置一個(gè)如寬度，或高度，另一個(gè)會(huì)等比縮放 -->
<img src="https://img.php.cn/upload/course/000/000/001/5d240e769553b901.jpg" width="200" />