HTML5入门

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

一、有价值的资源站

二、VSCode有价值的插件

1、老师建议插件

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

2、特殊设置

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

开启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文档结构

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

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>

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
        // php
        <?php $site = 'php.cn'>
        <h1 class="title">Hello, <?=$site> </h1>
        // css
        <style>
            .title {color: red}
        </style>
        // js
        <script src="my.js"></script>
    </body>
</html>

5. html 渲染方式

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

6. html 页面三宝

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

7. 常用标签

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

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

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

部分标签不规范，这是历史遗留问题
```
<script src="my.js"></script>
<video src="dog.mp4" controls></video>
```
1. 属性: 预定义,自定义 —>

属性写到起始标签中(双标签 )
预定义: 字符串,数字,布尔,通常是预定义的,id,class,style,title

布尔属性(true/false),如required:没有值, 只要写上就是true,不写就是false

<input type="text" size="20" value="admin" required />
  <!-- 自定义: 前缀`data-`, 用js中的`dataset`来处理 -->
  <div data-name="admin" data-email="admin@qq.com">用户信息</div>

页面三宝实例，展示元素、JS、CSS

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>页面三宝</title>
</head>
<body>
  <!-- 1. element -->
  <h1>php.cn</h1>
  <!-- 2. css -->
  <style>
    h1 {
      color: red;
    }
  </style>
  <!-- 3. js  -->
  <script>
    document.body.style.background = 'wheat'
  </script>
</body>
</html>

四、快速编写代码方法

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

1. 简单生成

！ + tab
通过这个快捷键能快速生成标准代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</html>

Ctrl+/
通过此命令快速生成注释，应该是VSCode提供，但是VSCode里面的 Ctrl+

2. 标签与内容

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

<h3></h3>

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

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

3. 属性和语法糖:

语法糖属于黑话，可以理解为快捷方式
通过一定的操作简化了代码的编写


输入[id] + tab 成为

<div id=""></div>

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

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

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

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

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

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

4. 重复: `*`

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

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

5. 父子: `>`

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

    <!-- ul>li{item}*3 -->
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>

6. 兄弟: `+`

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

    <!-- h3{标题}+p{内容} -->
    <h3>标题</h3>
    <p>内容</p>
    <hr />

7. 父级: `^`

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

    <!-- .box>span{text}^h3{小标题} -->
    <div class="box">
      <span>text</span>
    </div>
    <h3>小标题</h3>
    <hr />

8. 分组: `(...)`

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

 <!-- nav>h3{导航}+ul>li*3>a{link} -->
    <!-- nav>h3{导航}+(ul>li*3>a{link}) -->
    <nav>
      <h3>导航</h3>
      <ul>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
      </ul>
    </nav>
    <hr />

9. 序号: `$`,`$@`

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

    <!--默认从1开始: ul>li{item-$}*3 -->
    <ul>
      <li>item-1</li>
      <li>item-2</li>
      <li>item-3</li>
    </ul>
    <!--自定义起始序号: ul>li{item-$@6}*3 -->
    <ul>
      <li>item-6</li>
      <li>item-7</li>
      <li>item-8</li>
    </ul>
    <!--逆序: ul>li{item-$@-1}*3 -->
    <ul>
      <li>item-3</li>
      <li>item-2</li>
      <li>item-1</li>
    </ul>

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

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

HTML5入门

HTML5入门

一、有价值的资源站

二、VSCode有价值的插件

1、老师建议插件

2、特殊设置

3、其他同学贡献

3.1主题 UI

3.2 前端辅助

3.3 PHP开发辅助

3.4 Markdown 支持

3.5 效率提升

三、HTML文档结构

1.标签

2. 属性

3. 元素

4. 文档

5. html 渲染方式

6. html 页面三宝

7. 常用标签

四、快速编写代码方法

1. 简单生成

2. 标签与内容

3. 属性和语法糖:

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

4. 重复: *

5. 父子: >

6. 兄弟: +

7. 父级: ^

8. 分组: (...)

9. 序号: $,$@

相关文章

4. 重复: `*`

5. 父子: `>`

6. 兄弟: `+`

7. 父级: `^`

8. 分组: `(...)`

9. 序号: `$`,`$@`