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