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

导读:本篇文章讲解 HTML:快速生成语法和调试工具,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

目录

一、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或者右键点击检查

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

 会出如图所示的调试器

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

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

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

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

4、ctrl+0恢复浏览器

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/97192.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!