Ement常用语法、元素四类属性、布局标签实例演示

Emmet常用语法、元素四类属性、布局标签实例演示

一、Emmet常用语法

1. .和#的用法

• .后面跟的内容是class属性的值
• .nyl按tab键 直接生成 <div class="nyl"></div>
• #后面跟的内容是id属性的值
• #nyl按TAB键 直接生成<div id="nyl"></div>

• 默认. #前面不跟标签名 默认生成div标签

• p.nyl 若前面写上标签名可直接生成p标签的HTML代码
  -<p class="nyl"></p>

• p#nyl 若前面写上标签名可直接生成a标签的HTML代码
  -<a href="" id="nyl"></a>

2.给标签内添加内容

• p.nyl{这是一段文本} 可生成如下代码：
• <p class="nyl">这是一段文本</p>
• a.nyl{PHP中文网} 可生成如下代码：
• <a href="" class="nyl">php中文网</a>

3.层级关系

1.>的使用方法

• div>p>a>ul 按tab键可直接生成：

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

  左边每个标签依次是右边标签的父标签

2.+的使用方法

• div+p+ul 按tab键可直接生成：

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

  每个标签都是同一级标签，或者说是兄弟标签

3.向上一级添加标签

• div>p^a 可以生成一个div标签包含p标签的同时，还生成一个和div同级的a标签

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

4.*重复标签

• ul>li*3可生成如下代码：

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

• p*10000 调皮一下….^_^

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

  此处省略9996个……

5.分组

• .nyl>p{学生名单}+(ul>li*3>p{tom})+p{合计3人}生成如下：

<div class="nyl">
        <p>学生名单</p>
        <ul>
            <li>
                <p>tom</p>
            </li>
            <li>
                <p>tom</p>
            </li>
            <li>
                <p>tom</p>
            </li>
        </ul>
        <p>合计3人</p>
    </div>

添加括号分组后，更加明确标签分级

6.tag属性

• img[src="https://img.php.cn/upload/course/000/000/015/61a0a9014ed91862.jpg"] 效果如下下：
  

7.序号

1. 正序，从1开始

• ul.nyl>li.dxh*5>a{php$} 生成代码如下：

  <ul class="nyl">
        <li class="dxh"><a href="">php1</a></li>
        <li class="dxh"><a href="">php2</a></li>
        <li class="dxh"><a href="">php3</a></li>
        <li class="dxh"><a href="">php4</a></li>
        <li class="dxh"><a href="">php5</a></li>
  </ul>

  2. 正序，从指定数字开始排序

• ul.nyl>li.dxh*5>a{php$@100}生成代码如下：

    <ul class="nyl">
        <li class="dxh"><a href="">php100</a></li>
        <li class="dxh"><a href="">php101</a></li>
        <li class="dxh"><a href="">php102</a></li>
        <li class="dxh"><a href="">php103</a></li>
        <li class="dxh"><a href="">php104</a></li>
    </ul>

  3.指定最后一行数字从头开始倒序

• ul.nyl>li.dxh*5>a{php$@-20}指定最后一行为20，则从第一行开始倒序。

  <ul class="nyl">
      <li class="dxh"><a href="">php24</a></li>
      <li class="dxh"><a href="">php23</a></li>
      <li class="dxh"><a href="">php22</a></li>
      <li class="dxh"><a href="">php21</a></li>
      <li class="dxh"><a href="">php20</a></li>
    </ul>

8.生成表格

-table>(tr>td{111}*10) 一行10列，每格内容111

<table>
      <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
      </tr>
    </table>

• table>(tr>td{111}*10)*3 三行10列，每格内容111

  <table>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
    </table>

  二、元素的四类属性

• 1.通用属性
  class、id、style

• 2.预置属性

href=""、 src=""、 rel=""

• 3.事件属性
  onclick="alert('提交成功')"
• 4.自定义属性
  data-* *为通配符 可以自己随机命名
  data-tel、data-add、data-QQ

三、常用的布局标签

• 1.经典的布局标签

    <div id="header">header</div>
    <div id="main">main</div>
    <div id="footer">footer</div>

尽量不要用id

    <div class="header">header</div>
    <div class="main">main</div>
    <div class="footer">footer</div>

尽量只用class,实现样式复用

• 2.语义化的布局标签

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

div+class与 html5语义化标签的优缺点

语义化标签的优点

• HTML结构清晰
• 代码可度性好
• 无障碍阅读
• 搜索引擎可根据标签的语言确定上下文和权重问题
• 移动设备能更完美的展示页面
• 便于团队维护开发

语义化标签相比div+css的缺点

·1. 目前项目90%以上是基于移动端, 不依赖或不在乎搜索引擎/seo
·2. 语义化的标签数量是有限的,不如class的自定义字符串再精准