首页 > 博客列表 > HTML5入门

博主信息

博文 9

粉丝 0

访问量 4025

专题推荐

更多>

HTML5入门

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

一、有价值的资源站

3.EMMET命令集

二、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

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

学习Html5的前置工作

2022-10-15 23:12:04