Emmet 常用语法

Emmet 插件: 快速生成 html 元素结构与内容，是 vscode 内置插件，无需安装

<body>
  <!-- 快速生成 class 标签.类名-->
  <!-- 默认标签是div, .title -->
  <div class="title"></div>
  <!-- 标签.类名,img.arrtical -->
  <img src="" alt="" class="arrtical" />
  <!-- 快速生成id，标签#id名，默认标签是div -->
  <div id="msnv"></div>
  <!-- 标签#id名, p#msnv-->
  <p id="msnc"></p>
  <!-- 快速生成标签内容，{} div{hello word!} -->
  <div>hello word!</div>
  <!-- 层级关系 -->
  <!-- 创建父子层级元素 > , div>span>a-->
  <div>
    <span><a href=""></a></span>
  </div>
  <!-- 创建同级层级元素 > , div+p-->
  <div></div>
  <p></p>
  <!-- 重复 * div*3-->
  <div></div>
  <div></div>
  <div></div>
  <!-- 分组: () -->
  <!-- .cart>h2{购物车}+(ul>li*3>a{商品})+p{总计: 3 件} -->
  <div class="cart">
    <h2>购物车</h2>
    <ul>
      <li><a href="">商品</a></li>
      <li><a href="">商品</a></li>
      <li><a href="">商品</a></li>
    </ul>
    <p>总计: 3 件</p>
  </div>
  <!-- 序号 $, div{item$}, 指定开始数字：$@5, 倒序排序：$-1-->
  <div>item1</div>
  <div>item2</div>
  <div>item3</div>
  <!-- table>tr*3>td -->
  <table>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </table>
</body>

元素四类属性

通用属性

标签基本都有的三个基本属性，class、id、style

<div class="top">top</div>
<div id="header">header</div>
<div style="color: green;">10086</div>

预置属性

相当于人的肤色、血型，href、src、rel

<a href="baidu.com">baidu</a>
<img src="" alt="" />
<link rel="stylesheet" href="" />

事件属性

相当于走、吃等动作

<!-- 3. 事件属性 on + click-->
<button onclick="alert('提交成功')">确定</button>

自定义属性

相当于兴趣爱好，根据需要自定义

<div old_msnv="TH045386">用户信息</div>

布局标签、分析 div+class 与 html5 语义化标签的优缺点

header、footer、main、nav、article 等标签
语义化标签顾名思义，一眼看上去就能明白该标签的含义，浏览器搜索引擎比较喜欢，有利于 SEO 搜索优化
缺点是数量不完全，不是所有的标签都能语义话
涉及 CSS 布局，平时尽量使用 class，方便实现 css 样式复用

<!-- 语义化的布局标签 -->
<header>header</header>
<main>main</main>
<footer>footer</footer>
<article></article>
<nav></nav>
<aside></aside>

新的收获

Emmet语法有了更多了解，新学了不少Emmet语法。
本期的学习目标是，学习到更多、更新的知识，顺利毕业。

Emmet 常用语法、HTML5元素基础知识

Emmet 常用语法

元素四类属性

通用属性

预置属性

事件属性

自定义属性

布局标签、分析 div+class 与 html5 语义化标签的优缺点

新的收获

更多相关文章

随机推荐