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)擊鏈接會進(jìn)入新的頁面并覆蓋之前的頁面。
注：target=“_blank” 屬性必須要和 herf 一起才會生效。
③ <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ù)不顯示在頁面上，但會被瀏覽器解析。
<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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
有很多理由都能說明為什么我們應(yīng)該寫出清晰、可讀性好的程序。最重要的一點(diǎn)，程序你只寫一次，但以后會無數(shù)次的閱讀2011-10-10
訪客站點(diǎn)停留時(shí)間和頁面停留時(shí)間的實(shí)現(xiàn)方案
這篇文章主要介紹了訪客站點(diǎn)停留時(shí)間和頁面停留時(shí)間的實(shí)現(xiàn)方案,需要的朋友可以參考下2015-01-01
即時(shí)通訊軟件在網(wǎng)頁上啟動(dòng)臨時(shí)對話的鏈接代碼
旺旺臨時(shí)對話的鏈接，MSN臨時(shí)對話的鏈接，Skype臨時(shí)對話的鏈接2008-11-11
在日常開發(fā)中,我們經(jīng)常會創(chuàng)建臨時(shí)分支用于開發(fā)新功能或修復(fù) Bug,隨著時(shí)間推移,這些分支被合并、刪除,但本地倉庫中仍可能保留大量過期分支,這篇文章帶你一步步徹底清理本地?zé)o用分支,并同步遠(yuǎn)程狀態(tài),需要的朋友可以參考下2025-10-10
這篇文章主要介紹了git之如何把本地文件上傳到遠(yuǎn)程倉庫的指定位置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了Sublime Text3快捷鍵匯總，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
五步完成unity與微信(游戲)小程序交互創(chuàng)建視頻
這篇文章主要介紹了unity與微信(游戲)小程序交互創(chuàng)建視頻的步驟，非常簡單，只需要五步就可完成，有需要的朋友可以借鑒參考下，希望可以有所幫助2021-09-09
在WordPress中創(chuàng)建自定義頁面模板方法詳解
在本文中，我們將學(xué)習(xí)如何在 WordPress 中創(chuàng)建自定義頁面模板，以及我們?nèi)绾螌⒆远x模板分配給 WordPress 中的特定頁面或頁面組，感興趣的朋友跟隨小編一起看看吧2021-09-09
使用noopener和noreferrer讓HTML中的外部鏈接更安全
在跳轉(zhuǎn)時(shí),不再把“從哪個(gè)頁面來的”這個(gè)信息,?通過?HTTP?Referer?頭部傳給目標(biāo)站點(diǎn),你以為你只是好心把外鏈丟到新標(biāo)簽頁,?結(jié)果人家順著這條“繩子”,直接把你的原頁面拖走了,使用noopener和noreferrer可以讓HTML中的外部鏈接更安全2025-12-12
12種實(shí)現(xiàn)301網(wǎng)頁重定向方法的代碼實(shí)例（含Web編程語言和Web服務(wù)器）
這篇文章主要介紹了11種實(shí)現(xiàn)301網(wǎng)頁重定向方法的代碼實(shí)例,文中包含9種編程語言和3種WEB服務(wù)器配置方法,共計(jì)12種,需要的朋友可以參考下2014-07-07