前言

• 系列文章目录：
  • [目录]HTML CSS JS
• 根据视频和PPT整理
• 视频及对应资料：
• HTML CSS
  • 老师笔记： https://gitee.com/xiaoqiang001/html_css_material.git
  • 视频：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程
  • 视频对应资源
  • 链接：【https://pan.baidu.com/s/1k1dpC6iGA93c6gVsUvPqYw】
  • 提取码：1234
  • 【GitHub 仓库链接】

文章目录

• 前言
• 1. 浏览器调试工具
• • 1.1 打开方式
  • 1.2 使用调试工具
• 2. Emmet 语法
• • 2.1 快速生成HTML结构语法
  • 2.2 快速生成CSS样式语法
• 3. 快速格式化代码

1. 浏览器调试工具

1.1 打开方式

1. F12（笔记本电脑：Fn => F12）
2. 鼠标在页面右键 => 检查

   

1.2 使用调试工具

• ① Ctrl+滚轮 可以放大或缩小开发者工具代码大小。

• ② 左边是 HTML 元素结构，右边是 CSS 样式。

• ③ 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。

  
  

• ④ Ctrl + 0 复原浏览器大小。

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

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

2. Emmet 语法

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法.

Emmet 语法作用：

• 快速生成HTML结构语法
• 快速生成CSS样式语法

2.1 快速生成HTML结构语法

1. 生成标签直接输入标签名 按tab键或回车键即可，比如 div 然后tab 键或回车键， 就可以生成 <div></div>

2. 如果想要 生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div

   

     <div></div>
     <div></div>
     <div></div>
   

3. 如果有父子级关系的标签，可以用 > 比如 ul > li 就可以了

   

     <ul>
       <li></li>
       <li></li>
       <li></li>
     </ul>
   

   

     <ul>
       <li></li>
       <li></li>
       <li></li>
     </ul>
     <ul>
       <li></li>
       <li></li>
       <li></li>
     </ul>
     <ul>
       <li></li>
       <li></li>
       <li></li>
     </ul>
   

4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p

   

     <div></div>
     <div></div>
     <div></div>
     <p></p>
     <p></p>
     <p></p>
   

   

     <div></div>
     <p></p>
     <div></div>
     <p></p>
     <div></div>
     <p></p>
   

5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键或回车键就可以了

   

     <div class="demo1"></div>
     <div id="demo2"></div>
   

6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $

   

     <div class="demo1"></div>
     <div class="demo2"></div>
     <div class="demo3"></div>
     <div id="de1"></div>
     <div id="de2"></div>
     <div id="de3"></div>
   

7. 如果想要在生成的标签内部写内容可以用 { } 表示

   

     <div>hello1</div>
     <div>hello2</div>
     <div>hello3</div>
     <div>hello4</div>
   

2.2 快速生成CSS样式语法

CSS 基本采取简写形式即可.

1. 比如 w200 按tab 可以 生成 width: 200px;

   

     <style>
       div {
         width: 100px;
         height: 100px;
       }
     </style>
   

2. 比如 lh26px 按tab 可以生成 line-height: 26px;
   取属性每个单词的第一个字母，有属性值可以再加上属性值，也可以属性输入完成再写入属性值。

   
   

         text-align: center;
         line-height: 100px;
   

3. 快速格式化代码

快捷键：
shift + alt + F

设置当我们保存页面的时候自动格式化代码：

切换到 settings.json

写入配置项：

"editor.formatOnType": true, 
"editor.formatOnSave": true,

测试：

ctrl + s

完成