首页 > 博客列表 > Ement常用语法、元素四类属性、布局标签实例演示

博主信息

博文 3

粉丝 0

访问量 3191

专题推荐

更多>

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的自定义字符串再精准

批改老师：

autoload

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

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

2021-12-22 14:40:55