HTML：快速生成语法和调试工具

悠悠 2024-04-06 13:15 57阅读 0赞

**目录**

一、HTML快速生成语法

二、使用调试工具

--------------------

#### 一、HTML快速生成语法 ####

**此语法基于：HBuilder**

**1、生成标签直接输入标签名，然后按tab或回车（enter）键即可**

例如：p 按回车 直接生成：<p></p>

**2、生成多个标签，在标签名后面添加 “\*”然后按tab或回车（enter）键即可**

例如：p\*3 回车就可以生成3个p标签

**3、如果有父子关系，用“>”号，然后按tab或回车（enter）键即可**

例如：ul>li 按回车就可以直接生成：<ul><li></li></ul>

**4、如果有兄弟标签，用“+”号，然后按tab或回车（enter）键即可**

例如：div+p 按回车就可以直接生成：<div></div><p></p>

**5、如果带有类名或id名，直接写.class(类名)或\#id(id名) ，然后按tab或回车（enter）键即可**

例如：.demo 然后按回车可以直接生成：<div class="demo"></div>

\#demo 然后按回车可以直接生成：<div id="demo"></div>

p.demo 然后按回车可以直接生成：<p class="demo"></p>

**6、如果生成的div类名是有顺序的，可以用自增长$，按tab键生成**

例如：.div$\*3 按tab键生成

<div class="div1"></div>
       <div class="div2"></div>
       <div class="div3"></div>

#### 二、使用调试工具 ####

打开任意一个网页，按F12或者右键点击检查

![ba2db86fe0754de194063c218cb12418.png][]

会出如图所示的调试器

![f1cadc84ec4b48f9bd095788aecb1080.png][]

1、ctrl+滚轮可以放大页面大小

2、左边是HTML元素结构，右边是css样式

3、右边css样式可以改动数值（左右箭头或直接输入）和查看颜色

4、ctrl+0恢复浏览器

5、如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。

6、如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

[ba2db86fe0754de194063c218cb12418.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/591e4397fc3c4636b7bc15270d02adf6.png
[f1cadc84ec4b48f9bd095788aecb1080.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f9550c6c10414f61976f537407f4fae4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，57人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML：快速生成语法和调试工具

目录一、HTML快速生成语法二、使用调试工具 -------------------- 一、HTML快速生成语法此语法基于：HBuilder 1、生成标

悠悠/ 2024年04月06日 13:15/ 0 赞/ 58 阅读

相关快速生成HTML结构语法（HTML、CSS）

快速生成HTML结构语法（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <m

向右看齐/ 2023年10月03日 12:54/ 0 赞/ 12 阅读

相关快速生成CSS样式语法（HTML、CSS）

快速生成CSS样式语法（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

心已赠人/ 2023年10月03日 12:54/ 0 赞/ 23 阅读

相关 CSS中用Emmet语法快速生成HTML标签！！！

1.1快速生成html结构的语法 1. 生成标签：直接输入div，然后摁回车或者Tab键就行（别的标签也是，包括双标签和单标签） ![在这里插入图片描述][wa

今天药忘吃喽~/ 2023年01月07日 01:27/ 0 赞/ 158 阅读

相关 Emmet语法快速生成HTML标签和CSS样式

Emmet语法快速生成HTML标签和CSS样式 Emmet语法使用缩写，来提高html/css的编写速度。Vscode内部已集成该语法。快速生成HTML结构生

超、凢脫俗/ 2022年12月17日 04:27/ 0 赞/ 303 阅读

相关 JApiDocs —— 接口文档快速生成工具

是什么背景 > 在程序员的工作中, 代码编写虽然占了一很大部分, 但是编写接口文档也同样费时费力, 而我们常用的[swagger(丝袜哥)][swagger]已经

古城微笑少年丶/ 2022年11月13日 10:29/ 0 赞/ 434 阅读

相关 emmet语法快速生成HTML和CSS

emmet语法快速生成HTML结构 emmet语法旨在快速构建HTML结构，提高开发者的效率，以下是常用的几种输入标签名再按tab键快速生成标签

- 日理万妓/ 2022年10月22日 07:37/ 0 赞/ 154 阅读

相关 vscode快速生成html模板

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

╰+哭是因爲堅強的太久メ/ 2022年10月05日 00:56/ 0 赞/ 220 阅读

相关 HTML/CSS代码快速生成

一、快速编写HTML代码输入后按tab键 1. 初始化 HTML文档需要包含一些固定的标签，比如<html>、<head>、<b

╰+攻爆jí腚メ/ 2022年05月29日 04:25/ 0 赞/ 275 阅读

相关 AST介绍：解析html生成语法树

前言 -------------------- 这个名词一直不陌生，但是没有细致了解过，结合自己的项目，记录一下自己对AST的理解。 1. 什么是AST(抽象语法树

た入场券/ 2022年02月22日 05:18/ 0 赞/ 519 阅读