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 --> 文本区域