emmet_devtools/emmet_example_solution.html at master · chuyihuang/emmet_devtools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>solution</title>
</head>
<body>
  <h1>Exercise Solution</h1>
  <div>
    <ol>
      <li>!</li>
      <li>(header>h1#hello{我是在header的H1標籤,我的id是hello}+h2.h2{我是在header的H2標籤,我的class是h2})(nav>h1{我是在nav的h1標籤,nav還包含以下選單}+ul>li*5>a{選單$})(article>h1{我是在article標籤裡的H1}+p{我是p標籤裡的內容，以下是Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis nisi beatae suscipit animi sed atque eos minus adipisci dicta earum, nulla inventore corrupti cupiditate sint! Magni aut possimus voluptatem eaque.})(section#search>h1{這個section有個search的id，我是section裡的H1,這個section裡有一個Form表單}+form[action=search]>label{搜尋:}>input:t^input:b[value=輸入])(.clear>h1{這個div有個clear的class，我是div裡的h1})(main>h1{我是main裡的H1,這個main裡有一個table}+table.table>caption{我是caption。此table有個叫table的class}+(thead>tr>th{標題: (th)$$$}*5)(tbody>tr*10>td{欄位(td)$$$}*5))(footer>h1{我是在footer的H1標籤})</li>
    </ol>
  </div>
</body>
</html>