2021年12月21日 学习内容

学习 2021 年 12 月 21 日 20:02:45

1 复习环境配置

  • chrome
  • code

2 Emmet 语法

1. html 文档结构 - ！或者 html5

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body></body>
  10. </html>

2. class 和 # id ```html

  1. <!-- p. -->
  2. <p class=""></p>
  3. <p class="first"></p>
  4. <!-- p# -->
  5. <p id=""></p>
  6. <p id="last"></p>

3.titke:默认标签为 DIV

  1. <!-- .title -->
  2. <div class="title"></div>

4. 内容用{}

  1. <!-- .title{大家晚上好} -->
  2. <div class="title">大家晚上好</div>

5. 层级关系 > +

  • 1.父子关系: >
  1. <!-- div>p>a -->
  2. <div>
  3.   <p><a href=""></a></p>
  4. </div>
  • 2.兄弟关系： +
  1. <!-- div+p  -->
  2. <div></div>
  3. <p></p>
  • 3.向上一级: ^
  1. <!-- div>p^a -->
  2. <div>
  3.   <p></p>
  4. </div>
  5. <a href=""></a>

6 重复: *

  • 1 快速生成*
  1. <!-- ul>li*3>a{link} -->
  2. <ul>
  3.   <li><a href="">link</a></li>
  4.   <li><a href="">link</a></li>
  5.   <li><a href="">link</a></li>
  6. </ul>

  • 2 分组 （）

    <!-- .cart>h2{购物车}+(ul>li*3>a{商品})+p{共计3件} -->

  1. <div class="cart">
  2.   <h2>购物车</h2>
  3.   <ul>
  4.     <li><a href="">商品</a></li>
  5.     <li><a href="">商品</a></li>
  6.     <li><a href="">商品</a></li>
  7.   </ul>
  8.   <p>共计3件</p>
  9. </div>

7 tag[属性]

  1. <!-- a[href=https://php.cn/]{} -->
  2. <a href="https://php.cn/"></a>

8 序号

  1. <!-- ul.list>li.item*5>a{item} -->
  2. <ul class="list">
  3.   <li class="item"><a href="">item</a></li>
  4.   <li class="item"><a href="">item</a></li>
  5.   <li class="item"><a href="">item</a></li>
  6.   <li class="item"><a href="">item</a></li>
  7.   <li class="item"><a href="">item</a></li>
  8. </ul>
  9. <!-- ul.list>li.item*5>a{item$} 带序号_顺序 -->
  10. <ul class="list">
  11.   <li class="item"><a href="">item1</a></li>
  12.   <li class="item"><a href="">item2</a></li>
  13.   <li class="item"><a href="">item3</a></li>
  14.   <li class="item"><a href="">item4</a></li>
  15.   <li class="item"><a href="">item5</a></li>
  16. </ul>
  17. <!-- ul.list>li.item*5>a{item$@5} 按指定顺序-->
  18. <ul class="list">
  19.   <li class="item"><a href="">item5</a></li>
  20.   <li class="item"><a href="">item6</a></li>
  21.   <li class="item"><a href="">item7</a></li>
  22.   <li class="item"><a href="">item8</a></li>
  23.   <li class="item"><a href="">item9</a></li>
  24. </ul>
  25. <!-- ul.list>li.item*5>a{item$@-1}  按倒序-->
  26. <ul class="list">
  27.   <li class="item"><a href="">item5</a></li>
  28.   <li class="item"><a href="">item4</a></li>
  29.   <li class="item"><a href="">item3</a></li>
  30.   <li class="item"><a href="">item2</a></li>
  31.   <li class="item"><a href="">item1</a></li>
  32. </ul>
  34. <!-- ul>li.item.item$*5{demo} -->
  35. <ul>
  36.   <li class="item item1">demo</li>
  37.   <li class="item item2">demo</li>
  38.   <li class="item item3">demo</li>
  39.   <li class="item item4">demo</li>
  40.   <li class="item item5">demo</li>
  41. </ul>
  42. <!-- 应用 带入CSS 中 选中-->
  43. <style>
  44.   .item3 {
  45.     background-color: red;
  46.   }
  47. </style>

3 元素属性

  • 1 通用属性
  1. <!-- <女朋友 身高=“170” 体重=“60kg” 性别=女>  </女朋友> -->
  3. <!-- 元素:女朋友 
  4.    标签:<女朋友>
  5.    属性:身高， 体重 性别 -->
  7. <!-- 通用属性 class id style--- -->
  8. <div class="class"></div>
  9. <div id="header"></div>
  10. <div style="color:red">hello</div>
  • 2 预置属性
  1. <!-- 预置属性 -->
  2. <a href="http://php.cn">php.cn</a>
  3. <img src="" alt="" />
  4. <link rel="stylesheet" href="" />
  • 3 事件属性
  1. <!-- 事件属性 on+click -->
  2. <!-- 弹窗 -->
  3. <button onclick="alert('提交成功')">确定</button>
  4. <!-- 数据双向绑定 -->
  5. <div>
  6.   <input type="text" oninput="this.nextElementSibling.textContent=this.value" />
  7.   <p>实时显示输入内容</p>
  8. </div>
  • 4 事件属性
  1. <!--自定义属性 -->
  2. <div data-email="admin@php.cn">用户信息</div>
  3. <button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">获取用户邮箱</button>
  4. <p>这里显示用户邮箱</p>

更多相关文章

  1. Android(安卓)内容提供者ContentProvider
  2. 【notification】Android(安卓)中创建状态栏通知
  3. Android(安卓)使activity以模式对话框的形式弹出
  4. android lint检查出现的问题
  5. TextView 设置 Ellipsize 属性，但它不工作？
  6. 监听mysql表内容变化 mysql开启binlog
  7. android 入门demo 事件监听
  8. Android文件读写
  9. android、pull解析xml

随机推荐

  1. Android 数据绑定(Data Binding)详解
  2. SDK/ADT历史版本
  3. Google API应用
  4. android 禁止横竖版切换
  5. android 从横屏到竖屏状态出现黑屏
  6. Android 改变AlertDialog的大小
  7. Android上的磁盘加密(/data)
  8. android ndk 入门实践
  9. android获取手机已经安装的app信息
  10. Android AudioManager修改设备默认音量