简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML5入门
Blogger Information
Blog 9
fans 0
comment 0
visits 3343
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML5入门
孤独求败的博客
Original
453 people have browsed it

HTML5入门

本节课比较简单，不少内容都是上节课的复习
所以只记录要掉，重复部分不在赘述

一、有价值的资源站

  1. VSCode 可用的主题网站

  2. MDN网站

3.EMMET命令集

二、VSCode有价值的插件

1、老师建议插件

  1. 吸血鬼主题 （Dracula Official ）
  2. 图标主题（Helium Icon Theme）
  3. 材料产品图标 (Material Product Icons)
  4. MarkDown预览插件（Markdown Preview Enhanced）
  5. MarkDown语法校验（markdownlint）
  6. 拼写检查器，可检查英文单词错误（Code Spell Checker）
  7. 代码格式化程序插件（Prettier - Code formatter）
    注意：需要经过配置才能生效
    管理->设置（快捷键 Ctrl+’）->搜索“默认格式化”->将文本编辑器的格式化程序设置为（Prettier - Code formatter）
  8. 代码通过浏览器预览插件（Live Server）

2、特殊设置

1.连写功能的开启，需要在设置的json文件里增加一句
“editor.fontLigatures”: true,
还需要字体支持
修改后字体：
JetBrains Mono Thin, Monaco, Fira Code Light
系统默认字体
Consolas, ‘Courier New’, monospace

  1. 开启HTML自动生成的中文标记
    设置->扩展->Emmet->Variables->添加项
    lang zh-CN
    charset UTF-8

3、其他同学贡献

从老师给的参考资料中，可以看到其他同学的建议插件

3.1主题 UI

序号 名称 描述
1 Chinese(Simplified) Lanuage Pack 简体中文语言包(安装完会自动提示安装)
2 Dracula Official 吸血鬼主题
3 One Dark Pro Atom经典主题(下载量全球第一)
4 Helium Icon Theme 文件图标主题

3.2 前端辅助

序号 名称 描述
1 HTML CSS Support 智能感知HTML中的CSS
2 Auto Rename Tag 自动更名配对的HTML/XML标签名
3 CSS Peek 自动跳转到CSS定位的位置查看
4 Iimage preview 自动预览HTML/CSS中的图像
5 IntelliSense for CSS class in HTML HTML中CSS类名的智能感知
6 Highight Matching Tag 高亮匹配到结束或起始标签
7 Live Server 实时预览html(php需要配置代理)
8 JavaScript(ES6)code snippets 可快速输入JS/ES6代码片断
9 px to rem & rpx & vw 移动端布局单位自动计算转换(原cssrem)
10 Vue Language Features(Volar) Vue/Vite/petite-vue扩展(要禁用Vetur)
11 Vue VSCode Snippets vue2/vue3代码片断提示
12 Vetur Vue工具箱(如果只能安装一个,我选它)
13 Vue Peek 跳转到Vue组件定义位置查看

3.3 PHP开发辅助

序号 名称 描述
1 php cs fixer php 代码格式化
2 PHP Debug PHP Xdebug插件
3 PHP Extension Pack PHP 功能扩展 (依赖Xdebug)
4 PHP Intelephense PHP智能提示
5 PHP Intellisense 功能与上面类型,任何安装一个即可
6 PHP Namespace Resolver PHP命名空间导入支持
7 SQL Formatter SQL文档格式化
8 REST Client RESTful 接口测试客户端

3.4 Markdown 支持

序号 名称 描述
1 Markdown Preview Enhanced Markdown预览增强插件
2 markdownlint Markdown语法检查器
3 Markdown All in One 快速编写Markdown文档的工具

3.5 效率提升

序号 名称 描述
1 Better Comments 自定义注释文本高亮颜色
2 CodeSnap 代码截图生成器(Mac风格)
3 Prettier-Code formatter 非常流行的代码格式化插件
4 TabOut 按Tab跳过括号

三、HTML文档结构

  1. element = tag + attribute
    元素 = 标签 + 属性
  2. 注释写法 小于号 + 叹号 + 两个斜杠

    <!-- -->

1.标签

序号 类型 样式 案例
1 预定义 浏览器预置,可重定义 <div><h1><p>
2 自定义 用户自定义 <lecture><email>

2. 属性

序号 类型 名称与值 案例
1 预定义 浏览器预置 <div class="box">
2 自定义 用户自定义 <div data-user="admin">

元素三大通用属性: id, class, style

3. 元素

  • 元素 = 标签 + 属性
  • 元素 === 标签
    标签在很多时候可以直接当元素，无需特殊说明

4. 文档

  • 文档中的任何内容,必须用标签引入,css,js,php
  • 呈现出树状层级结构: DOM模型 (Document Object Model)
    黑话：DOM

html 文档 = <!DOCTYPE> + <html>
html 根元素 = <head> + <body>

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Title</title>
  6.     </head>
  7.     <body>
  8.         // php
  9.         <?php $site = 'php.cn'>
  10.         <h1 class="title">Hello, <?=$site> </h1>
  12.         // css
  13.         <style>
  14.             .title {color: red}
  15.         </style>
  17.         // js
  18.         <script src="my.js"></script>
  19.     </body>
  20. </html>

5. html 渲染方式

  1. 自动修复: 校正语法,缺失元素
  2. 显示顺序: 书写顺序一致,左->右,上->下,同步/异步

6. html 页面三宝

  1. element: DOM 元素
  2. css: 层叠样式表
  3. JavaScript: 前端脚本

7. 常用标签

  1. 双标签: 描述文档自己的内容,如文本

  2. 单标签: 通常是引用外部资源,如图像,css文档 

    1. <a href="https://php.cn" target="_blank">php中文网</a>
    2. <h2>星期五</h2>
    3. <p>今天是周未</p>
    4. <img src="dog.jpg" alt="" />
    5. <link rel="stylesheet" href="style.css" />

  3. 部分标签不规范，这是历史遗留问题

    1. <script src="my.js"></script>
    2. <video src="dog.mp4" controls></video>
    1. 属性: 预定义,自定义 —>
  • 属性写到起始标签中(双标签 )
  • 预定义: 字符串,数字,布尔,通常是预定义的,id,class,style,title
  • 布尔属性(true/false),如required:没有值, 只要写上就是true,不写就是false
    1. <input type="text" size="20" value="admin" required />
    2.   <!-- 自定义: 前缀`data-`, 用js中的`dataset`来处理 -->
    3.   <div data-name="admin" data-email="admin@qq.com">用户信息</div>
  • 页面三宝实例，展示元素、JS、CSS
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <title>页面三宝</title>
    5. </head>
    6. <body>
    7.   <!-- 1. element -->
    8.   <h1>php.cn</h1>
    9.   <!-- 2. css -->
    10.   <style>
    11.     h1 {
    12.       color: red;
    13.     }
    14.   </style>
    15.   <!-- 3. js  -->
    16.   <script>
    17.     document.body.style.background = 'wheat'
    18.   </script>
    19. </body>
    20. </html>

四、快速编写代码方法

Emmet已经被VSCode内置，免安装
通过学习Emmet语法，有助于快速编写代码

1. 简单生成

  • ！ + tab
    通过 这个快捷键能快速生成标准代码
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <title>Document</title>
    8. </head>
    9. <body>
    10. </html>
  • Ctrl+/
    通过此命令快速生成注释，应该是VSCode提供，但是VSCode里面的 Ctrl+

2. 标签与内容

常见标签 输入前面，后面会自动补齐
比如输入<h3> 通过 tab 可以 自动补齐

  1. <h3></h3>

默认就是div，也就是 没特殊指定，输入其他属性，会默认变成<div>
比如输入 .title + tab 生成的是<div>

  1. <div class="title"></div>

3. 属性和语法糖:

语法糖属于黑话，可以理解为快捷方式
通过一定的操作 简化了代码的编写
<!-- [id=app]{app} -->
<!-- [class=title]{title} -->
输入[id] + tab 成为

  1. <div id=""></div>

输入[id]=”app” + tab 成为

  1. <div id="app"></div>

<div class="title">title</div>

id,class是高频,通用属性,emmet为它定制了”语法糖”

<!-- `id => #, class => .` -->

<!-- #app{app1} -->

直接输入 #app1 同 输入[id] + tab 成为，这就是语法糖
注意输入# 自动就提示了app 可以tab ，再按tab 生成完整代码
点title 替代了 class

这部分的关键点在 点和井号，因为class和id都是高频应用，干脆用点和井号形成语法糖，快速输入

4. 重复: *

这部分的重点在于乘号，通过乘号加数字，快速生成多行代码，大大节约时间

  1.     <!-- .container{box}*3 -->
  2.     <div class="container">box</div>
  3.     <div class="container">box</div>
  4.     <div class="container">box</div>

5. 父子: >

这部分重点是大于号规定了父子关系，包含关系，示例中 li 包含在 ul中

  1.     <!-- ul>li{item}*3 -->
  2.     <ul>
  3.       <li>item</li>
  4.       <li>item</li>
  5.       <li>item</li>
  6.     </ul>

6. 兄弟: +

这部分重点是平级关系，大家同一级别，用加好连写

  1.     <!-- h3{标题}+p{内容} -->
  2.     <h3>标题</h3>
  3.     <p>内容</p>
  4.     <hr />

7. 父级: ^

这部分重点是跳出，本身已经有了上下父子关系，通过^，跳到顶级

  1.     <!-- .box>span{text}^h3{小标题} -->
  2.     <div class="box">
  3.       <span>text</span>
  4.     </div>
  5.     <h3>小标题</h3>
  6.     <hr />

8. 分组: (...)

这部分重点是括号，有点像四则运算，有括号的单独处理，和外面分开了

  1.  <!-- nav>h3{导航}+ul>li*3>a{link} -->
  2.     <!-- nav>h3{导航}+(ul>li*3>a{link}) -->
  3.     <nav>
  4.       <h3>导航</h3>
  5.       <ul>
  6.         <li><a href="">link</a></li>
  7.         <li><a href="">link</a></li>
  8.         <li><a href="">link</a></li>
  9.       </ul>
  10.     </nav>
  12.     <hr />

9. 序号: $,$@

这部分重点是通过$符号计数，有点变量+1和变量-1的感觉

  1.     <!--默认从1开始: ul>li{item-$}*3 -->
  2.     <ul>
  3.       <li>item-1</li>
  4.       <li>item-2</li>
  5.       <li>item-3</li>
  6.     </ul>
  8.     <!--自定义起始序号: ul>li{item-$@6}*3 -->
  9.     <ul>
  10.       <li>item-6</li>
  11.       <li>item-7</li>
  12.       <li>item-8</li>
  13.     </ul>
  15.     <!--逆序: ul>li{item-$@-1}*3 -->
  16.     <ul>
  17.       <li>item-3</li>
  18.       <li>item-2</li>
  19.       <li>item-1</li>
  20.     </ul>

Emmet这块需要做1小时专项练习，方便掌握

附录可参考资源
Emmet快速语法
https://code.z01.com/Emmet/#a1

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！