1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>元素的属性</title>
  9. </head>
  11. <body>
  12.     emmet语法 .aaa 默认div 内容用{}
  13.     <div class="aaa"></div>
  14.     <!-- p.first -->
  15.     <p class="first"></p>
  16.     <!-- p#first -->
  17.     <p id="first"></p>
  19.     <!--这是什么，一个注释  -->
  21.     <p class="active"></p>
  22.     <p class="first"></p>
  23.     <p id="last"></p>
  24.     <div class="title"></div>
  26.     <!-- ctrl+/  快捷键注释 -->
  27.     <!--父子：div>p>a-->
  28.     <div>
  29.         <p>
  30.             <a href=""></a>
  31.         </p>
  32.     </div>
  33.     <!--兄弟；+  div+p  -->
  34.     <div></div>
  35.     <p></p>
  37.     <!-- ^  div>p^a 向上一级  -->
  38.     <div>
  39.         <p></p>
  40.     </div>
  41.     <a href=""></a>
  43.     <!--  ul>li>a*4 重复 * -->
  44.     <ul>
  45.         <li>
  46.             <a href=""></a>
  47.             <a href=""></a>
  48.             <a href=""></a>
  49.             <a href=""></a>
  50.         </li>
  51.     </ul>
  53.     <!-- 分组：（）  .cart>h2{购物车}+(ul>li*4>a{商品})+p{总计：3件}-->
  54.     <div class="cart">
  55.         <h2>购物车</h2>
  56.         <ul>
  57.             <li><a href="">商品</a></li>
  58.             <li><a href="">商品</a></li>
  59.             <li><a href="">商品</a></li>
  60.             <li><a href="">商品</a></li>
  61.         </ul>
  62.         <p>总计：3件</p>
  63.     </div>
  64.     <!-- 分组：（）  .cart>h2{购物车}+(ul>li*4>a{商品})+p{总计：3件} -->
  66.     <!-- ul.list>li.item*5>a{item$} -->
  67.     <ul class="list">
  68.         <li class="item"><a href="">item1</a></li>
  69.         <li class="item"><a href="">item2</a></li>
  70.         <li class="item"><a href="">item3</a></li>
  71.         <li class="item"><a href="">item4</a></li>
  72.         <li class="item"><a href="">item5</a></li>
  73.     </ul>
  75.     <!-- ul.list>li.item*5>a{item$@6} -->
  76.     <ul class="list">
  77.         <li class="item"><a href="">item6</a></li>
  78.         <li class="item"><a href="">item7</a></li>
  79.         <li class="item"><a href="">item8</a></li>
  80.         <li class="item"><a href="">item9</a></li>
  81.         <li class="item"><a href="">item10</a></li>
  82.     </ul>
  84.     <!-- ul>li.item.item$*5>a{item$} -->
  85.     <ul>
  86.         <li class="item item1"><a href="">item1</a></li>
  87.         <li class="item item2"><a href="">item2</a></li>
  88.         <li class="item item3"><a href="">item3</a></li>
  89.         <li class="item item4"><a href="">item4</a></li>
  90.         <li class="item item5"><a href="">item5</a></li>
  91.     </ul>
  92.     <style>
  93.         .item3 {
  94.             background-color: red;
  95.         }
  96.     </style>
  98.     <!-- ul.list>li.item*5>a{item$@-1} -->
  99.     <!-- <ul class="list">
  100.         <li class="item"><a href="">item5</a></li>
  101.         <li class="item"><a href="">item4</a></li>
  102.         <li class="item"><a href="">item3</a></li>
  103.         <li class="item"><a href="">item2</a></li>
  104.         <li class="item"><a href="">item1</a></li>
  105.     </ul> -->
  106.     <!-- ul.list>li.item{demo}*3 -->
  107.     <ul class="list">
  108.         <li class="item">demo</li>
  109.         <li class="item">demo</li>
  110.         <li class="item">demo</li>
  111.     </ul>
  112.     <!-- ul.list>.item{demo}*3   //li可以省略的，默认ul下就是了-->
  113.     <ul class="list">
  114.         <li class="item">demo</li>
  115.         <li class="item">demo</li>
  116.         <li class="item">demo</li>
  117.     </ul>
  119.     <!-- tag[属性] -->
  120.     <!-- a[href="baidu.com"]{baidu} -->
  121.     <a href="baidu.com">baidu</a>
  123.     <!-- 1.通用属性 class id  style -->
  124.     <!-- style表示样式，id和class选择标签 -->
  126.     <div class="top">top</div>
  127.     <div class="" id="header">header</div>
  128.     <div style="color: red">Hello</div>
  130.     <!-- 2.预置属性 -->
  131.     <a href="baidu.com"></a>
  132.     <img src="1.jpg" alt="" />
  133.     <link rel="stylesheet" href="" />
  135.     <!-- 3.事件属性 -->
  136.     <button onclick="alert('提交成功')">确定</button>
  138.     <!-- 4.自定义属性 -->
  139.     <div>
  140.         <input type="text" oninput="this.nextElementSibling.textContent = this.value" />
  141.         <p>实时显示输入的内容</p>
  142.     </div>
  144.     <div data-email="123@qq.com">用户信息</div>
  145.     <button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">
  146.       获取用户邮箱
  147.     </button>
  148.     <p>这里显示用户邮箱</p>
  149. </body>
  151. </html>

更多相关文章

  1. Android(安卓)使activity以模式对话框的形式弹出
  2. android lint检查出现的问题
  3. TextView 设置 Ellipsize 属性，但它不工作？
  4. Android自定义属性，format
  5. Android(安卓)面试之横竖屏切换的Activity生命周期
  6. MpAndroidChart简单用法 属性总结
  7. RecyclerView嵌套ScrollView
  8. Android(安卓)解析XML
  9. Android旋转动画

随机推荐

  1. Android删除指定文件夹下所有、删除指定
  2. android Theme
  3. Android计算器界面布局
  4. Android浏览器如何打开网页
  5. 改变ScrollView的滚动条的颜色
  6. Android(安卓)之WebView
  7. android高手系列
  8. Android 使用URL通过浏览器调用android a
  9. Android studio2.3.3升级3.1.2坑
  10. android studio 已过时