欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端Html知识

程序员文章站 2022-06-04 18:32:37
...

Emmet语法知识

1 生成标准html文档框架

第一种是 空文档上 敲入 html: 5 然后按Tab键
第二种是 空文档上 敲入！ 然后 回车
两种方式都可以生成标准的html文档框架

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Document</title>
    8. 

  8.   </head>
    9. 

  9.   <body></body>
    10. 

  10. </html>
    11.

2 快速生成带class和ID的代码

（1）生成class
输入 P.first
回车 

  1.  <p class="first"></p>

（2）生成ID
输入 P#last
回车 

  1. <p id="last"></p>

（3）带文本内容
输入 .title{大家晚上好}
回车

  1. <div class="title">大家晚上好</div>

3 层级关系

  1.   输入  div>p>a

回车

    

  1.      <div>
    2. 

  2.          <p><a href=""></a></p>
    3. 

  3.      </div>
    4.

4 兄弟

输入 div+p
回车

    

  1. <div></div>
    2. 

  2.     <p></p>
    3.

5 向上一级

输入 div>p^a
回车

    

  1. <div>
    2. 

  2.     <p></p>
    3. 

  3. </div>
    4. 

  4.     <a href=""></a>
    5.

6 重复
输入 ul>li*3>a{link}
回车

    

  1. <ul>
    2. 

  2.   <li><a href="">link</a></li>
    3. 

  3.   <li><a href="">link</a></li>
    4. 

  4.   <li><a href="">link</a></li>
    5. 

  5. </ul> 
    6.

7 分组
输入 .cart>h2{购物车}+(ul>li*3>a{商品})+p{总计: 3 件}
回车

    

  1. <div class="cart">
    2. 

  2.   <h2>购物车</h2>
    3. 

  3.   <ul>
    4. 

  4.     <li><a href="">商品</a></li>
    5. 

  5.     <li><a href="">商品</a></li>
    6. 

  6.     <li><a href="">商品</a></li>
    7. 

  7.   </ul>
    8. 

  8.   <p>总计: 3 件</p>
    9. 

  9. </div> 
    10.

8 tag[属性]

    

  1.    输入 a[href="https://php.cn/"]{php中文网} 
    2. 

  2.    回车
    3. 

  3. a [href="https://php.cn/"]{php中文网}
    4.

9 序号

(1)给item加从1开始的升序编号
输入 ul.list>li.item*5>a{item$}
回车

    

  1. <ul class="list">
    2. 

  2.       <li class="item"><a href="">item1</a></li>
    3. 

  3.       <li class="item"><a href="">item2</a></li>
    4. 

  4.       <li class="item"><a href="">item3</a></li>
    5. 

  5.       <li class="item"><a href="">item4</a></li>
    6. 

  6.       <li class="item"><a href="">item5</a></li>
    7. 

  7. </ul> 
    8.

(2) 给item加从5开始的升序编号
输入 ul.list>li.item*5>a{item$@5}
回车

    

  1. <ul class="list">
    2. 

  2.   <li class="item"><a href="">item5</a></li>
    3. 

  3.   <li class="item"><a href="">item6</a></li>
    4. 

  4.   <li class="item"><a href="">item7</a></li>
    5. 

  5.   <li class="item"><a href="">item8</a></li>
    6. 

  6.   <li class="item"><a href="">item9</a></li>
    7. 

  7. </ul> -->
    8.

(3)给item加从5开始的降序编号
输入 ul.list>li.item*5>a{item$@-1}
回车 

    

  1.  <ul class="list">
    2. 

  2.   <li class="item"><a href="">item5</a></li>
    3. 

  3.   <li class="item"><a href="">item4</a></li>
    4. 

  4.   <li class="item"><a href="">item3</a></li>
    5. 

  5.   <li class="item"><a href="">item2</a></li>
    6. 

  6.   <li class="item"><a href="">item1</a></li>
    7. 

  7. </ul>
    8.

(4)给class内的item标签加升序编号
输入 ul>li.item.item$*5{demo}
回车

    

  1. <ul>
    2. 

  2.   <li class="item item1">demo</li>
    3. 

  3.   <li class="item item2">demo</li>
    4. 

  4.   <li class="item item3">demo</li>
    5. 

  5.   <li class="item item4">demo</li>
    6. 

  6.   <li class="item item5">demo</li>
    7. 

  7. </ul>
    8.

通过下列代码可以直接给.item3赋属性
<style>
.item3 {
background-color: red;
}
</style> —>

（5）给item加 li类标签
输入 ul.list>li.item{demo}*3
回车

    

  1. <ul class="list">
    2. 

  2.   <li class="item">demo</li>
    3. 

  3.   <li class="item">demo</li>
    4. 

  4.   <li class="item">demo</li>
    5. 

  5. </ul>
    6.

（6）省略li的结果
输入 ul.list>.item{demo}*3
回车

    

  1. <ul class="list">
    2. 

  2.   <li class="item">demo</li>
    3. 

  3.   <li class="item">demo</li>
    4. 

  4.   <li class="item">demo</li>
    5.

</ul>

（7）快速生成表格
输入 table>tr5>td10{xxxx}
回车

    

  1. <table border="1">
    2. 

  2.       <tr>
    3. 

  3.         <td>xxxx</td>
    4. 

  4.         <td>xxxx</td>
    5. 

  5.         <td>xxxx</td>
    6. 

  6.         <td>xxxx</td>
    7. 

  7.         <td>xxxx</td>
    8. 

  8.         <td>xxxx</td>
    9. 

  9.         <td>xxxx</td>
    10. 

  10.         <td>xxxx</td>
    11. 

  11.         <td>xxxx</td>
    12. 

  12.         <td>xxxx</td>
    13. 

  13.       </tr>
    14. 

  14.       <tr>
    15. 

  15.         <td>xxxx</td>
    16. 

  16.         <td>xxxx</td>
    17. 

  17.         <td>xxxx</td>
    18. 

  18.         <td>xxxx</td>
    19. 

  19.         <td>xxxx</td>
    20. 

  20.         <td>xxxx</td>
    21. 

  21.         <td>xxxx</td>
    22. 

  22.         <td>xxxx</td>
    23. 

  23.         <td>xxxx</td>
    24. 

  24.         <td>xxxx</td>
    25. 

  25.       </tr>
    26. 

  26.       <tr>
    27. 

  27.         <td>xxxx</td>
    28. 

  28.         <td>xxxx</td>
    29. 

  29.         <td>xxxx</td>
    30. 

  30.         <td>xxxx</td>
    31. 

  31.         <td>xxxx</td>
    32. 

  32.         <td>xxxx</td>
    33. 

  33.         <td>xxxx</td>
    34. 

  34.         <td>xxxx</td>
    35. 

  35.         <td>xxxx</td>
    36. 

  36.         <td>xxxx</td>
    37. 

  37.       </tr>
    38. 

  38.       <tr>
    39. 

  39.         <td>xxxx</td>
    40. 

  40.         <td>xxxx</td>
    41. 

  41.         <td>xxxx</td>
    42. 

  42.         <td>xxxx</td>
    43. 

  43.         <td>xxxx</td>
    44. 

  44.         <td>xxxx</td>
    45. 

  45.         <td>xxxx</td>
    46. 

  46.         <td>xxxx</td>
    47. 

  47.         <td>xxxx</td>
    48. 

  48.         <td>xxxx</td>
    49. 

  49.       </tr>
    50. 

  50.       <tr>
    51. 

  51.         <td>xxxx</td>
    52. 

  52.         <td>xxxx</td>
    53. 

  53.         <td>xxxx</td>
    54. 

  54.         <td>xxxx</td>
    55. 

  55.         <td>xxxx</td>
    56. 

  56.         <td>xxxx</td>
    57. 

  57.         <td>xxxx</td>
    58. 

  58.         <td>xxxx</td>
    59. 

  59.         <td>xxxx</td>
    60. 

  60.         <td>xxxx</td>
    61. 

  61.       </tr>
    62. 

  62.     </table>
    63.

元素的属性

  1. 通用属性 class, id, style

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

    1. 预置属性
      <a href="https://php.cn">php.cn</a>
      <img src="" alt="" />

      <link rel="stylesheet" href="" />

    2. 事件属性 on + click
      <button onclick="alert('提交成功')">确定</button>

      <div>
      <input type="text" oninput="this.nextElementSibling.textContent = this.value" />
      <p>实时显示输入的内容</p>
      </div>

    3. 自定义属性
      <div data-email="admin@php.cn">用户信息</div>
      <button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">
      获取用户邮箱
      </button>

      <p>这里显示用户邮箱</p>

常用的布局标签

1
尽量不要用id 尽量只用class,实现样式复用
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>

2 语义化的布局标签
<header>header</header>
<main>main</main>
<footer>footer</footer>
<article></article>
<nav></nav>
<aside></aside>

html5语义化标签的优缺点

优点: 简洁
缺点
1 目前网页90%以上是基于移动端, 所以语义化的标签是否被搜索引擎关注意兴趣不大
2 大量同名的语义化标签容易混淆，不知道谁是谁的。不如class的自定义字符串精准。

上一篇： 合并ThinkPHP配置文件以消除代码冗余的实现方法_php实例

下一篇： 阅读effective Java手札(002)

推荐阅读