欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Ement常用语法、元素的四类属性、一些常用的布局标签

程序员文章站 2022-05-29 12:51:23
...

Ement 插件

  • 定义：Ement 插件是用于快速生成 html 元素结构与内容

Ement 语法

  • 快速生成 html 文档结构

Ement 快速生成 html 文档结构的方法有两种：分别是输入html:5或者输入!。在输入完之后按下键盘上的 Tab 键（测试按回车【ENTER】也可以）确认输入即可实现快速生成 html 文档结构。

    

  1. <!-- Ement快速生成html文档结构的方法有两种：分别是输入`html:5`或者输入`!`。在输入完之后按下键盘上的Tab键（测试按回车【ENTER】也可以）确认输入即可实现快速生成html文档结构。 -->
    2. 

    3. 

  3. <!DOCTYPE html>
    4. 

  4. <html lang="zh-CN">
    5. 

  5.   <head>
    6. 

  6.     <meta charset="UTF-8" />
    7. 

  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    8. 

  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    9. 

  9.     <title>Document</title>
    10. 

  10.   </head>
    11. 

  11.   <body></body>
    12. 

  12. </html>
    13.
  • 快速生成带属性的标签

#生成id属性

    

  1. <!-- 代码:`p#id` -->
    2. 

  2. <p id="id"></p>
    3.

.生成class属性

    

  1. <!-- 代码:`p.calss` -->
    2. 

  2. <p class="class"></p>
    3.

不给标签的话默认标签是 div，以下是.class和#id的演示

    

  1. <!-- 不给标签的话默认标签是div，以下是`.class`和`#id`的演示 -->
    2. 

  2. <div class="class"></div>
    3. 

  3. <div id="Id"></div>
    4.

如果想要给标签内容写在{}大括号内，如div.title{内容放在这里}

    

  1. <!-- 如果想要给标签内容写在`{}`大括号内，如`div.title{内容放在这里}` -->
    2. 

  2. <div class="tltle">内容放在这里</div>
    3.
  • 层级关系 “父子”和“兄弟”

层级关系分为父子关系和兄弟关系> +

父子关系用 > 代码：div>p
含义：div 标签里包含着一个 p 标签

    

  1. <!-- div>p 代码内不能有空格，否则不在Ement环境内-->
    2. 

  2. <div>
    3. 

  3.   <p></p>
    4. 

  4. </div>
    5.

兄弟关系用 + 代码：div+p
含义：添加一个 div 标签和一个 p 标签

    

  1. <!-- div+p 代码内不能有空格，否则不在Ement环境内-->
    2. 

  2. <div></div>
    3. 

  3. <p></p>
    4.

扩展：向上一级平级关系-添加父关系 ^(用的不多)
向上一级平级关系用 ^ 代码：div>a^p
含义: div 标签内包含一个 a 标签，a 标签的上一级 div 标签添加一个父子关系的 p 标签

    

  1. <!-- div>a^p 代码内不能有空格，否则不在Ement环境内-->
    2. 

  2. <div><a href=""></a></div>
    3. 

  3. <p></p>
    4.
  • 重复标签 *
    代码：ul>li*3>a{link}
    含义：ul 标签下有三个 li 标签，三个 li 标签下都分别有三个 a 标签，a 标签的内容是 link
    

  1. <!-- ul>li*3>a{link} -->
    2. 

  2. <ul>
    3. 

  3.   <li><a href="">link</a></li>
    4. 

  4.   <li><a href="">link</a></li>
    5. 

  5.   <li><a href="">link</a></li>
    6. 

  6. </ul>
    7.
  • 分组标签 ()
    代码div.cart>h2{购物车}+ul>(li*3>a{goods})+p{总计：3 件}
    含义：标签 div 的 calss 属性值为 cart，div 标签下有一个 h2 标签，h2 标签内容为购物车，和 h2 标签平级的有一个 ul 标签，ul 标签下有三个 li 标签，每个 li 标签下有一个内容为 goods 的 a 标签，和标签 h2 平级的有一个 p 标签，p 标签的内容为 总计：3 件
    

  1. <!-- div.cart>h2{购物车}+(ul>li*3>a{goods})+p{总计：3件} -->
    2. 

  2. <div class="cart">
    3. 

  3.   <h2>购物车</h2>
    4. 

  4.   <ul>
    5. 

  5.     <li><a href="">goods</a></li>
    6. 

  6.     <li><a href="">goods</a></li>
    7. 

  7.     <li><a href="">goods</a></li>
    8. 

  8.   </ul>
    9. 

  9.   <p>总计：3件</p>
    10. 

  10. </div>
    11.
  • 属性用 []
    代码：a[href="https://www.php.cn/"]{php 中文网}
    含义: a 标签的 href 属性内容为https://www.php.cn/ a 标签的内容为 php 中文网
  1. <a href="https://www.php.cn/"></a>
  • 序号 \$
    代码ul.list>li.item*5>a[href="https://www.php.cn/"]{item$}
    含义：class 属性为 list 的标签 ul 下有 5 个 calss 属性为 item 的 li 标签，每个 li 标签下有一个 href 属性为https://www.php.cn/内容为item1-5的a标签 
    

  1. <!-- ul.list>li.item*5>a[href="https://www.php.cn/"]{item$} -->
    2. 

  2. <ul class="list">
    3. 

  3.   <li class="item"><a href="https://www.php.cn/">item1</a></li>
    4. 

  4.   <li class="item"><a href="https://www.php.cn/">item2</a></li>
    5. 

  5.   <li class="item"><a href="https://www.php.cn/">item3</a></li>
    6. 

  6.   <li class="item"><a href="https://www.php.cn/">item4</a></li>
    7. 

  7.   <li class="item"><a href="https://www.php.cn/">item5</a></li>
    8. 

  8. </ul>
    9.

指定初始序号 \$@
从指定序号开始排序用@序号
代码ul.list>li.item*5>a[href="https://www.php.cn/"]{item$@10}
含义：略

    

  1. <!-- ul.list>li.item*5>a[href="https://www.php.cn/"]{item$@10} -->
    2. 

  2. <ul class="list">
    3. 

  3.   <li class="item"><a href="https://www.php.cn/">item10</a></li>
    4. 

  4.   <li class="item"><a href="https://www.php.cn/">item11</a></li>
    5. 

  5.   <li class="item"><a href="https://www.php.cn/">item12</a></li>
    6. 

  6.   <li class="item"><a href="https://www.php.cn/">item13</a></li>
    7. 

  7.   <li class="item"><a href="https://www.php.cn/">item14</a></li>
    8. 

  8. </ul>
    9.

倒序 \$@-1
倒序用@-1
代码ul.list>li.item*5>a[href="https://www.php.cn/"]{item$@-1}
含义：略

    

  1. <!-- ul.list>li.item*5>a[href="https://www.php.cn/"]{item$@-1} -->
    2. 

  2. <ul class="list">
    3. 

  3.   <li class="item"><a href="https://www.php.cn/">item5</a></li>
    4. 

  4.   <li class="item"><a href="https://www.php.cn/">item4</a></li>
    5. 

  5.   <li class="item"><a href="https://www.php.cn/">item3</a></li>
    6. 

  6.   <li class="item"><a href="https://www.php.cn/">item2</a></li>
    7. 

  7.   <li class="item"><a href="https://www.php.cn/">item1</a></li>
    8. 

  8. </ul>
    9.

html 元素四类属性

  • 通用属性
    三大通用属性
    id用于选择该元素

    1. <div id="id">id用于选择该元素</div>

    class用于选择该元素

    1. <div class="class">class用于选择该元素</div>

    style描述当前元素的样式

    1. <div style="color: red;">style用于描述当前元素的样式</div>

  • 预置属性

    

  1. <a href="https://www.php.cn/"></a>
    2. 

  2. <img src="" alt="" />
    3. 

  3. <link rel="stylesheet" href="" />
    4.
  • 事件属性
  1. <button onclick="alert('sucess')">提交</button>
  • 自定义属性
  1. <div data-email="admin@php.cn">用户信息</div>

常用的布局标签

  • div+class VS html5-语义化布局标签

div+calss 布局标签

    

  1. <div class="header">header</div>
    2. 

  2. <div class="main">main</div>
    3. 

  3. <div class="footer">footer</div>
    4.

html5 语义化布局标签

    

  1. <header>header</header>
    2. 

  2. <main>mian</main>
    3. 

  3. <footer>footer</footer>
    4.
  • 二者对比好处与坏处总结
    html5 语义化布局标签更简洁美观，对搜索引擎友好，但是标签数量有限
    div+class *度高，可自定义，方便使用。但是对搜索引擎，seo 不友好

上一篇： ajax和fetch的区别点总结

下一篇： 细说选择器及其权重

推荐阅读