Home > List of blog posts > html基础：Emmet常用语法与布局标签实例

Blogger Information

Blog 8

fans 0

comment 0

visits 4584

Special Recommendation

More>

Related recommendations

html 基础：Emmet 常用语法与布局标签实例

Emmet 常用语法

基础代码快速生成

1 如何快速生成 html5 文档结构

使用感叹号“!” + Tab 按键
使用“html:5” + Tab 按键

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

2 如何快速生成 id 和 class

id 可以直接使用“#”，例如：“#item”则生成
<div id="item"></div>
class 则可以直接使用“.”，例如：“.item”则生成
<div class="item"></div>
由于默认标签为“div” 如需更改为其他标签则在 id 和 class 前加标签即可，例如：“p.item”或“p#item”则生成
<p class="item"></p>以及<p id="item"></p>

3 “p”标签内如何加文本内容

使用花括号加文本的形式，例如：“p{你好啊}”则生成
<p>你好啊</p>

各类层级的快速生成

1 包含关系的父子元素使用”>”来表示，例如：“div>p>a”则生成

    <div>
      <p><a href=""></a></p>
    </div>

2 并列关系的兄弟元素使用”+”来表示，例如：“div+p+a”则生成


    <div></div>
    <p></p>
    <a href=""></a>

3 并列关系与父级元素使用”脱字符”来表示，例如：“div>p 脱字符 a”则生成

    <div>
      <p></p>
    </div>
    <a href=""></a>

其他分组功能的快速生成

1 重复操作快速生成使用”“来表示，例如：“ul>li3>a{item$}”则生成


    <ul>
      <li><a href="">item1</a></li>
      <li><a href="">item2</a></li>
      <li><a href="">item3</a></li>
    </ul>

2 分组功能的快速生成使用”（）”来表示，例如：“div>h2{购物车}+(ul>li*5>a{item$})”则生成


    <div>
      <h2>购物车</h2>
      <ul>
        <li><a href="">item1</a></li>
        <li><a href="">item2</a></li>
        <li><a href="">item3</a></li>
        <li><a href="">item4</a></li>
        <li><a href="">item5</a></li>
      </ul>
    </div>

3 tag[属性]快速生成使用中括号表示，例如：“a[href=”https://bbs.yinliuhui.cn/"]{笔记网}”则生成

<a href="https://bbs.yinliuhui.cn/">笔记网</a>

4 序号的写法使用美元符号表示（通常和层级指令和文本指令组合使用）例如：“ul.list>li.item*3>a{item$}”则生成

<ul class="list">
      <li class="item"><a href="">item1</a></li>
      <li class="item"><a href="">item2</a></li>
      <li class="item"><a href="">item3</a></li>
    </ul>

序号前加多个 0 则使用多个美元符号对应“001，002….”例如：“ul.list>li.item*3>a{item$$$}”则生成

 <ul class="list">
      <li class="item"><a href="">item001</a></li>
      <li class="item"><a href="">item002</a></li>
      <li class="item"><a href="">item003</a></li>
    </ul>

5 若需在某个数字作为起始编号则需要加“@”符号，倒序则再加负号“－”

正序示例：“ul>li{item$@3}*3”则生成：

 <ul>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>

倒序示例：“ul>li{item$@-3}*3”则生成：

  <ul>
      <li>item5</li>
      <li>item4</li>
      <li>item3</li>
    </ul>

元素的属性

1 通用属性 class, id, style 示例：

<div class="top">top</div>
<div id="header">header</div>
<div style="color: red">Hello</div>

2 预置属性:通常用在引用第三方资源的标签上

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

3 事件属性 onclick (on 是前缀，click 是事件)

<button onclick="alert('提交成功')">确定</button>

4 自定义属性 (保存一些信息，当前的状态等…)

<div data-email="admin@php.cn">用户信息</div>

常用布局标签

1 经典版本：

简写：
#header{header}
#main{main}
#footer{footer}
示例：
<div id="header">header</div>
<div id="main">main</div>
<div id="footer">footer</div>

2 改进版本:将 id 换成 class，class 权重小于 id，有利于样式复用
快捷修改：Alt+鼠标连选或者 Ctrl + D 快捷键修改

简写：
.header{header}
.main{main}
.footer{footer}
示例：
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>

3 html5 语义化标签

<header>header</header>
<main>main</main>
<footer>footer</footer>
<article></article>
<nav></nav>
<aside></aside>

但是现在绝大多数的程序猿使用的是 div + class

目前项目 90%以上是基于移动端, 不依赖或不在乎搜索引擎/不需要做 seo，例如拼多多，抖音
语义化的标签数量是有限的,而且语义不如 class 的自定义字符串明确
程序猿的个人习惯导致的

示例：

语义化:<header>我是文章头部</header>
div+class:<div class="articl-header">我是文章头部</div>
语义化标签不如直接的articl-header的class更加明确的语义

Correcting teacher：

autoload

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

html基础：Emmet常用语法与布局标签实例

2021-12-22 14:08:41