search

博客列表 >HTML5入门

HTML5入门

孤独求败的博客
孤独求败的博客原创
2022年10月16日 23:46:51454浏览

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

上一条：markdown常用语法下一条：自主练习2_Emmet 语法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多