HTML基礎教程

時間 2019-11-11

標籤 html 基礎教程欄目 HTML 简体版

原文原文鏈接

VScode 經常使用插件：javascript

vscode-icons : 方便展現各類後綴文件
View In Browser & Open in Browser : 右鍵使用瀏覽器打開文件
Live Server ： 模擬服務器方式打開文件
HTML CSS Support： 補全代碼或提示css 樣式

vs code 其餘經常使用插件css

一、Auto Rename Tag 修改html標籤，自動幫你完成尾部閉合標籤的同步修改，和webstorm同樣。
二、Auto Close Tag 自動閉合HTML標籤
四、Beautiful 格式化代碼的工具
五、Ejs Snippets ejs 代碼提示
六、ESLint 檢查javascript語法錯誤與提示
七、File Navigator 快速查找文件
八、Git History(git log)查看git log
九、Gulp Snippets 寫gulp時用到，gulp語法提示。
十、HTML Snippets 超級好用且初級的H5代碼片斷以及提示
十一、Debug for Chrome讓vs code映射chrome的debug功能，靜態頁面均可以用vscode來打斷點調試
十二、Document this Js的註釋模板
1三、jQuery Code Snippets jquery提示工具
1四、Html2jade html模板轉pug模板
1五、JS-CSS-HTML Formatter 格式化
1六、Npm intellisense require 時的包提示工具
1七、Path Intellisense 自動路徑補全、默認不帶這個功能
1八、Project Manager多個項目之間快速切換的工具
1九、Pug(Jade) snippets pug語法提示
20、React Components 根據文件名建立反應組件代碼。
2一、React Native Tools reactNative工具類爲React Native項目提供了開發環境。
2二、Stylelintcss/sass代碼審查
2三、Typings auto installer 安裝vscode 的代碼提示依賴庫，基於typtings的
2四、VueHelper Vue2代碼段（包括Vue2 api、vue-router二、vuex2）
2五、Vue 2 Snippets vue必備vue代碼提示
2六、Vue-color vue語法高亮主題

自定義快捷方式html

ctrl + win + z ： 快速註釋
shift+ctrl+alt+z：代碼格式化

自動加載默認VScode 模板vue

英文狀態下，輸入!+tab

html元信息設置自適應語句html5

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  #設置當前文檔的視窗、視口的寬度直接就等同於瀏覽此也沒得設備得寬度，而且初始化縮放比例爲 1

html自定義代碼片斷方法：java

位置： File --> Peference --> user Snippets
  編寫規則：每一個代碼段都要以代碼段名稱進行定義，並具備前綴、範圍、內容和描述幾個重要參數。
         Print to console : 代碼段名稱，也就是自定義代碼片斷名稱。
         scope： 範圍，指定代碼片斷應用的語言範圍。
         prefix：前綴，觸發代碼段的快捷鍵
         body：代碼段內容
         $1, $2: 光標停留位置
         description： 該代碼段的說明或概述
   示例：
    "snippets html5": {
        "prefix": "ht",
        "body" : [
        "<!DOCTYPE html>",
        "<html>",
        "<head>",
        "\t<meta charset=\"UTF-8\">",
        "\t<title>${1:網頁標題}</title>",
        "</head>\n",
        "<body>\n",
        "</body>\n",
        "</html>"
        ],
        "description": "Most basic code for html5 doc"
    }

html 格式化常見標籤react

文本雙標籤名稱：h1/h2/h3/h4/h5/h6 -->標題
       p  --> 段落、正文
       strong/em  --> 重點強調/通常強調
       b/i   --> 粗體/斜體
       ul/ol/dl --> 列表區域
       li/dt/dd --> 列表項目
多媒體標籤： a --> 超級連接
       img --> 圖片
       audio --> 音頻
       video -->  視頻
       canvas --> 畫布(能夠繪製圖形的區域)
表格表單標籤：table --> 總體表格區域
       tr --> 表格內的行
       td --> 表格內的單元格
       form --> 總體表單區域
       input --> 表單中的組件元素
       button --> 表單中的按鈕元素
       select --> 表單中的下拉列表
佈局常見標籤：div --> 通用的欄目、板塊區域
       section --> 通用的欄目、板塊區域（比div小的範圍，「部分」的區域）
       span --> 通用的小組合區域(最小範圍的)
       header --> 頁面頭部
       footer --> 頁面底部
       aside --> 頁面側邊欄
       nav --> 導航區域
       article --> 文本區域

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。