浅谈HTML开发基础

Ement语法

Ement语法的作用

• Ement语法可以快速生成HTML代码,熟练运用Ement语法可以节省大量的开发时间

  常用的Ement语法

• Ement语法中‘.’号可以生成‘class’属性，例如p.first可以自动生成标签<p class='first'></p>
• Ement语法中’#’号可以生成’id’属性，例如p#active可以自动生成标签<p id='active'></p>
• Ement语法中div标签可以省略不写,例如.title可自动生成标签<div calss='title'></div>
• Ement语法中‘{}’号可以生成内容,例如.title{大家好}可以自动生成标签<div class='title'>大家好</div>
• Ement语法中’>’号表示父子关系,例如div>p>a可以生成标签

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

• Ement语法中+号表示兄弟关系,例如P+a可以生成标签

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

• Ement语法中号可以重复该标签,例如ul>li3>a[link]可以生成标签段

<ul>
    <li><a herf="">link</a></li>
    <li><a herf="">link</a></li>
    <li><a herf="">link</a></li>
</ul>

-Ement语法中()表示分组关系,例如.cart>h2{购物车}+(ul>li*3>a{商品})+p{总计: 3 件}将生成标签段

    <div class="cart">
        <h2>购物车</h2>
        <ul>
            <li><a>商品</a></li>
            <li><a>商品</a></li>
            <li><a>商品</a></li>
        </ul>
        <p>总计：3件</p>
    </div>

• Ement语法中‘$’符号可以用于生成序号,例如ul.list>li.item*5>a{item$}将生成标签段

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

• Ement语法中‘@’号可以表示开始序号例如ul.list>li.item*5>a{item$@5}将生成代码段

<ul class="list">
    <li class="item"><a>item5</a></li>
    <li class="item"><a>item6</a></li>
    <li class="item"><a>item7</a></li>
    <li class="item"><a>item8</a></li>
    <li class="item"><a>item9</a></li>
</ul>

• Ement语法中‘@-1’可以表示从倒序开始ul.list>li.item*5>a{item$@-1}将生成代码段

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

元素的四类属性

• 1.通用属性 class, id, style例

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

• 2.预置属性 rel,href

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

• 3.事件属性 例如onclick,onkeyboard，oninpput

    <button onclick="alert('提交成功')">确定</button>
    <div>
      <input type="text" oninput="this.nextElementSibling.textContent = this.value" />
      <p>实时显示输入的内容</p>
    </div>

• 4.自定义属性,为data-开头的变量,无固定名称

    <div data-email="admin@php.cn">用户信息</div>
    <button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">
      获取用户邮箱
    </button>
    <p>这里显示用户邮箱</p>

布局标签

• 经典的布局标签

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

• 语义化的布局标签

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

• 语义化布局的优缺点

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