VS?Code快速生成html(頭部)模板圖文教程
1、快速生成 html（頭部）模板
（1）快速打出<!DOCTYPE html>
① 打開 VS Code，創(chuàng)建一個(gè) html 文件；
② 輸入 ! ，選擇 !!! 選項(xiàng)。
（2）生成完整的 html（頭部）模板
輸入 ! 后按 tab鍵 可直接生成 html 模板。
2、html 頭部：<head> 元素
<head> 元素包含了所有的頭部標(biāo)簽元素。
可以添加在頭部區(qū)域的元素標(biāo)簽有：<title>，<style>，<meta>，<link>，<script>，<noscript> 和 <base>。
| 標(biāo)簽 | 描述 |
|---|---|
| <head> | 定義了文檔的信息 |
| <title> | 定義了文檔的標(biāo)題 |
| <base> | 定義了頁面鏈接標(biāo)簽的默認(rèn)鏈接地址 |
| <link> | 定義了一個(gè)文檔和外部資源之間的關(guān)系 |
| <meta> | 定義了HTML文檔中的元數(shù)據(jù) |
| <script> | 定義了客戶端的腳本文件 |
| <style> | 定義了HTML文檔的樣式文件 |
① <title> 元素
定義了瀏覽器工具欄的標(biāo)題
當(dāng)網(wǎng)頁添加到收藏夾時(shí)，顯示在收藏夾中的標(biāo)題
顯示在搜索引擎結(jié)果頁面的標(biāo)題
<head> <title>文檔標(biāo)題</title> </head>
<title> 標(biāo)簽在 HTML/XHTML 文檔中是 必需的。
② <base> 元素
<base> 標(biāo)簽描述了基本的鏈接地址/鏈接目標(biāo)，該標(biāo)簽作為 HTML 文檔中所有的鏈接標(biāo)簽的默認(rèn)鏈接：
<head> <base href="http://……" rel="external nofollow" target="_blank"> </head>
target=“_blank” 表示 在新的窗口中打開鏈接，如果不設(shè)置 target=“_blank” 屬性，點(diǎn)擊鏈接會(huì)進(jìn)入新的頁面并覆蓋之前的頁面。
注：target=“_blank” 屬性必須要和 herf 一起才會(huì)生效。
③ <link> 元素
<link> 標(biāo)簽定義了文檔與外部資源之間的關(guān)系，通常用于鏈接到樣式表：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" rel="external nofollow" > </head>
④ <meta> 元素
<meta> 標(biāo)簽描述了一些基本的元數(shù)據(jù)。元數(shù)據(jù)不顯示在頁面上，但會(huì)被瀏覽器解析。
<meta> 元素通常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時(shí)間，作者，和其他元數(shù)據(jù)。
元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他Web服務(wù)：
為搜索引擎定義關(guān)鍵詞：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網(wǎng)頁定義描述內(nèi)容：
<meta name="description" content="html 教程">
定義網(wǎng)頁作者：
<meta name="author" content="Evelyn">
每30秒鐘刷新當(dāng)前頁面：
<meta http-equiv="refresh" content="30">
⑤ <script> 元素
<script> 標(biāo)簽用于加載腳本文件，如： JavaScript。
⑥ <style> 元素
<style> 標(biāo)簽定義了 HTML 文檔的樣式文件引用地址。在 <style> 元素中也可以直接添加樣式來渲染 HTML 文檔：
<head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue
}
</style>
</head>
總結(jié)
到此這篇關(guān)于VS Code快速生成html(頭部)模板的文章就介紹到這了,更多相關(guān)VSCode快速生成頭部模板內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
kafka?rabbitMQ及rocketMQ隊(duì)列的消息可靠性保證分析
這篇文章主要介紹了kafka?rabbitMQ及rocketMQ隊(duì)列的消息可靠性保證分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
這篇文章介紹了Git配置.gitignore文件忽略被指定文件上傳的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
使用Python解決Windows文件名非用反斜杠問題(python 小技巧)
要想讓你的 Python 代碼同時(shí)在 Windows 和 Mac/Linux 上工作，你需要處理不同系統(tǒng)文件名用不同斜杠的問題。而 Python 3 有一個(gè)名為「pathlib」的新模塊，可以幫你解決這個(gè)麻煩，需要的朋友可以參考下2019-11-11
VSCode 安裝 Copilot 詳細(xì)過程和實(shí)例代碼(最新推薦)
Copilot 作為一款 AI 輔助編程工具,可以極大地提高開發(fā)效率,讓編程變得更加輕松愉快,在實(shí)際開發(fā)過程中,我們要注意審查和測(cè)試生成的代碼,確保其符合項(xiàng)目需求和標(biāo)準(zhǔn),這篇文章主要介紹了VSCode 安裝 Copilot 詳細(xì)過程和實(shí)例,需要的朋友可以參考下2024-05-05
網(wǎng)站程序員如何應(yīng)對(duì)web標(biāo)準(zhǔn)
網(wǎng)站程序員如何應(yīng)對(duì)web標(biāo)準(zhǔn)...2007-04-04
關(guān)于使用SQOOP抽數(shù)到Hive遇到的問題
這篇文章主要介紹了關(guān)于使用SQOOP抽數(shù)到Hive遇到的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
scratch-www 在Win10下的環(huán)境搭建詳細(xì)教程
scratch-www是scratch-gui的網(wǎng)頁版，功能包括gui的編輯，保存，播放，和gui的作品展示，這里主要介紹scratch-www在window系統(tǒng)下的安裝和運(yùn)行，感興趣的朋友跟隨小編一起看看吧2021-08-08
這篇文章主要介紹了VSCode自定義配色方案的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了詳解idea切換git賬號(hào)的兩個(gè)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要為大家介紹了pycharm中venv文件夾自定義處理方式圖解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04