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

认识元素、Ement语法

程序员文章站 2022-05-26 12:54:50
...

1. 实例演示Ement常用语法

    

  1. <!-- .demo>(p.text*6>a{链接$})+button{提交} -->
    2. 

  2.     <div class="demo">
    3. 

  3.         <p class="text"><a href="">链接1</a></p>
    4. 

  4.         <p class="text"><a href="">链接2</a></p>
    5. 

  5.         <p class="text"><a href="">链接3</a></p>
    6. 

  6.         <p class="text"><a href="">链接4</a></p>
    7. 

  7.         <p class="text"><a href="">链接5</a></p>
    8. 

  8.         <p class="text"><a href="">链接6</a></p>
    9. 

  9.         <button>提交</button>
    10. 

  10.     </div>
    11.

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

    

  1.    <div class="top"></div>
    2. 

  2.     <div id="nav"></div>
    3. 

  3.     <div style="background-color: #ff0000;"></div>
    4. 

  4.     <button onclick="alert('提示')"></button>
    5.

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

    

  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>标题</title>
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10.     <div class="header">头部</div>
    11. 

  11.     <div class="main">内容</div>
    12. 

  12.     <div class="footer">底部</div>
    13. 

  13.     /body>
    14. 

  14. </html>
    15.

上一篇： Emmet 常用语法、HTML5元素基础知识

下一篇： 1.Ement常用语法、元素属性和布局标签

推荐阅读