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

Ement常用语法使用学习记录

程序员文章站 2022-05-21 23:30:18
...

1. 实例演示Ement常用语法

使用HTML:5 或直接使用

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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. </html>
    10.

div>ui>li 套嵌关系

    

  1. <div>
    2. 

  2.     <ui>
    3. 

  3.         <li></li>
    4. 

  4.     </ui>
    5. 

  5. </div>
    6.

div+sap+i 兄弟关系

    

  1. <div></div>
    2. 

  2. <sap></sap>
    3. 

  3. <i></i>
    4.

div{文本} 文本方式

  1. <div>文本</div>

div*5 重复方法

    

  1. <div></div>
    2. 

  2. <div></div>
    3. 

  3. <div></div>
    4. 

  4. <div></div>
    5. 

  5. <div></div>
    6.

div+(div>ul>li)+div 组合方法

    

  1. <div></div>
    2. 

  2. <div>
    3. 

  3.     <ul>
    4. 

  4.         <li></li>
    5. 

  5.     </ul>
    6. 

  6. </div>
    7. 

  7. <div></div>
    8.

2. 实例演示元素四类属性

class 和 id 的使用

div.header 生成

  1. <div class="header"></div>

div#header 生成

  1. <div id="header"></div>

a href属性 生成

  1. <a href="http://a"></a>

3. 实例演示布局标签,并分析div+class与 html5语义化标签的优缺点

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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>
    10. 

  10.     <!-- 当前语法使用 .top-header>div.top-hover-menu*3>a{顶部$}-->
    11. 

  11.     <div class="top-header">
    12. 

  12.         <div class="top-hover-menu"><a href="">顶部1</a></div>
    13. 

  13.         <div class="top-hover-menu"><a href="">顶部2</a></div>
    14. 

  14.         <div class="top-hover-menu"><a href="">顶部3</a></div>
    15. 

  15.     </div>
    16. 

    17. 

  17.     <!-- 当前语法使用 div.left-nav>ui.Nav_menu>li#id.active*6>p{左侧菜单$} -->
    18. 

  18.     <div class="left-nav">
    19. 

  19.         <ui class="Nav_menu">
    20. 

  20.             <li id="id" class="active">
    21. 

  21.                 <p>左侧菜单1</p>
    22. 

  22.             </li>
    23. 

  23.             <li id="id" class="active">
    24. 

  24.                 <p>左侧菜单2</p>
    25. 

  25.             </li>
    26. 

  26.             <li id="id" class="active">
    27. 

  27.                 <p>左侧菜单3</p>
    28. 

  28.             </li>
    29. 

  29.             <li id="id" class="active">
    30. 

  30.                 <p>左侧菜单4</p>
    31. 

  31.             </li>
    32. 

  32.             <li id="id" class="active">
    33. 

  33.                 <p>左侧菜单5</p>
    34. 

  34.             </li>
    35. 

  35.             <li id="id" class="active">
    36. 

  36.                 <p>左侧菜单6</p>
    37. 

  37.             </li>
    38. 

  38.         </ui>
    39. 

  39.     </div>
    40. 

    41. 

  41.     <!-- 当前语法使用 div.center>(div.search>div{搜索})+div.main>(div.item>div>p{内容$})*3 -->
    42. 

  42.     <div class="center">
    43. 

  43.         <div class="search">
    44. 

  44.             <div>搜索</div>
    45. 

  45.         </div>
    46. 

  46.         <div class="main">
    47. 

  47.             <div class="item">
    48. 

  48.                 <div>
    49. 

  49.                     <p>内容1</p>
    50. 

  50.                 </div>
    51. 

  51.             </div>
    52. 

  52.             <div class="item">
    53. 

  53.                 <div>
    54. 

  54.                     <p>内容2</p>
    55. 

  55.                 </div>
    56. 

  56.             </div>
    57. 

  57.             <div class="item">
    58. 

  58.                 <div>
    59. 

  59.                     <p>内容3</p>
    60. 

  60.                 </div>
    61. 

  61.             </div>
    62. 

  62.         </div>
    63. 

  63.     </div>
    64. 

    65. 

  65.     <!-- 当前语法使用 div.footer>ui>li*5{底部} -->
    66. 

  66.     <div class="footer">
    67. 

  67.         <ui>
    68. 

  68.             <li>底部</li>
    69. 

  69.             <li>底部</li>
    70. 

  70.             <li>底部</li>
    71. 

  71.             <li>底部</li>
    72. 

  72.             <li>底部</li>
    73. 

  73.         </ui>
    74. 

  74.     </div>
    75. 

  75. </body>
    76. 

    77. 

  77. </html>
    78.

总结：HTML5语义化标签结构清晰、阅读简单

上一篇： laravel 学习笔记 —— 数据和模型起步篇

下一篇： Creating a MySQL database and table_MySQL

推荐阅读