Ement常用语法/元素四类属性及布局标签学习

Ement常用语法

<!-- p.first -->
<p class="first"></p>
<!-- #last -->
<p id="last"></p>
<div class="title"></div>
<!-- 内容用{} -->
<!-- .title{大家晚上好}  -->
<div class="title">大家晚上好</div>
<!-- 父子关系：> + -->
<!-- div>p>a -->
<div>
  <p><a href=""></a></p>
</div>
<!-- 兄弟关系：> + -->
<!-- div+p -->
<div></div>
<p></p>
<!-- ^:向上一级 -->
<!-- div+p^a -->
<div></div>
<p></p>
<a href=""></a>
<!-- 重复：* -->
<!-- ul>li*3>a{link} -->
<ul>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
</ul>
<!-- 分组：() -->
<!-- .cart>h2{购物车}+(ul>li*3>a{商品})+p{总计：3件} -->
<div class="cart">
  <h2>购物车</h2>
  <ul>
    <li><a href="">商品</a></li>
    <li><a href="">商品</a></li>
    <li><a href="">商品</a></li>
  </ul>
  <p>总计：3件</p>
</div>
<!-- tag[属性] -->
<!-- a[href="https://isidun.com"]{埃斯顿科技} -->
<a href="https://isidun.com">埃斯顿科技</a>
<!-- 序号 -->
<!-- ul.list>li.item*5>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>
  <li class="item"><a href="">item4</a></li>
  <li class="item"><a href="">item5</a></li>
</ul>
<!-- ul.list>li.item*5>a{item$@-1} -->
<ul class="list">
  <li class="item"><a href="">item5</a></li>
  <li class="item"><a href="">item4</a></li>
  <li class="item"><a href="">item3</a></li>
  <li class="item"><a href="">item2</a></li>
  <li class="item"><a href="">item1</a></li>
</ul>
<!-- ul.list>li.item*5>a{item$@5} -->
<ul class="list">
  <li class="item"><a href="">item5</a></li>
  <li class="item"><a href="">item6</a></li>
  <li class="item"><a href="">item7</a></li>
  <li class="item"><a href="">item8</a></li>
  <li class="item"><a href="">item9</a></li>
</ul>
<table>
  <tr>
    <td>item1</td>
    <td>item2</td>
    <td>item3</td>
    <td>item4</td>
    <td>item5</td>
    <td>item6</td>
    <td>item7</td>
    <td>item8</td>
    <td>item9</td>
    <td>item10</td>
  </tr>
  <tr>
    <td>item1</td>
    <td>item2</td>
    <td>item3</td>
    <td>item4</td>
    <td>item5</td>
    <td>item6</td>
    <td>item7</td>
    <td>item8</td>
    <td>item9</td>
    <td>item10</td>
  </tr>
  <tr>
    <td>item1</td>
    <td>item2</td>
    <td>item3</td>
    <td>item4</td>
    <td>item5</td>
    <td>item6</td>
    <td>item7</td>
    <td>item8</td>
    <td>item9</td>
    <td>item10</td>
  </tr>
  <tr>
    <td>item1</td>
    <td>item2</td>
    <td>item3</td>
    <td>item4</td>
    <td>item5</td>
    <td>item6</td>
    <td>item7</td>
    <td>item8</td>
    <td>item9</td>
    <td>item10</td>
  </tr>
  <tr>
    <td>item1</td>
    <td>item2</td>
    <td>item3</td>
    <td>item4</td>
    <td>item5</td>
    <td>item6</td>
    <td>item7</td>
    <td>item8</td>
    <td>item9</td>
    <td>item10</td>
  </tr>
</table>

元素四类属性

<!-- 1. 通用属性 .class,#id,style -->
<div class="top">top</div>
<div id="header">header</div>
<div style="color: red">style</div>
<!-- 2. 预置属性 -->
<a href="https://www.isidun.com">isidun.com</a>
<img src="/images/1.jpg" alt="" />
<link rel="stylesheet" href="" />
<!-- 3. 事件属性onclick -->
<button onclick="alert('提交成功')">确定</button>
<div>
  <input
    type="text"
    oninput="this.nextElementSibling.textContent = this.value"
  />
  <p>实时显示输入的内容</p>
</div>
<!-- 4. 自定义属性 data-  -->
<div data-email="harvey@isidun.com">用户信息</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>
<!-- html5 语义化的布局标签 -->
<header>header</header>
<nav>nav</nav>
<main>main</main>
<article>article</article>
<footer>footer</footer>

DIV+Class与 HTML5语义化标签的比较

HTML5语义化标签优势

• 代码结构清晰
• 对搜索引擎更友好，利于SEO
• 项目维护起来会更容易

HTML5语义化标签缺点

• 语义化标签数量有限，实际使用过程中还需要借助div+css辅助布局
• 移动应用趋势，弱化了对搜引擎的SEO需求

DIV+CSS优势

• 标签可以按需自由命名

DIV+CSS缺点

• 网页结构不够清晰
• 对跨团队协作对于规范开发有较高要求（可读性相对较差）