Web初学-2022.10.22-27

第二周笔记

 21.嵌套列表（K21）

  1.多层级列表的形态及使用
   1）例题：

  <ul>
        <li>
            辽宁省
            <ul>
                <li>沈阳</li>
                <li>大连</li>
                <li>丹东</li>
            </ul>
        </li>
        <li>
            山东省
            <ul>
                <li>济南</li>
                <li>青岛</li>
                <li>烟台</li>
            </ul>
        </li>
    </ul>

      2）或用定义列表：

<dl>
        <dt>中国</dt>
        <dd>
            <dl>
                <dt>辽宁省</dt>
                <dd>沈阳</dd>
                <dd>大连</dd>
                <dd>丹东</dd>
            </dl>
            <dl>
                <dt>山东省</dt>
                <dd>济南</dd>
                <dd>青岛</dd>
                <dd>烟台</dd>
            </dl>
            <dd>
                <dt>美国</dt>
                <dd>洛杉矶</dd>
                <dd>纽约</dd>
            </dd>
        </dd>
    </dl>

      3）作业正经

<p><strong><font size="6">《一路向北》</font></strong></p>
    <ul>
        <li>
            东京漂移
            <ul>
                <li>凉介</li>
                <li>拓海</li>
                <li>夏树</li>
            </ul>
        </li>
        <li>
            喔给泥埋
            <ul>
                <li>AE86</li>
                <li>GTR</li>
                <li>奔驰</li>
            </ul>
        </li>
    </ul>
    <p>
        <em>喂,<strong>凉介</strong>我想开奔驰!</em>
    </p>

 22.表格标签（K22）

• < table>: 表格最外层容器
• < tr>: 定义表格行
• < th>: 定义表头
• < td>: 定义表格单元
• < caption>: 单元表格标题

•      例题：
  

   <table>
          <tr>
             <th>日期</th>
             <th>天气情况</th>
             <th>出行情况</th>
          </tr>
          <tr>
              <td>2019年1月1日</td>
              <td><img src="./img/tinaqi_1.png" alt=""></td>
              <td>天气晴朗，适合出行</td>
           </tr>
           <tr>
              <td>2019年1月2日</td>
              <td><img src="./img/tinaqi_2.png" alt=""></td>
              <td>有小雨，出门请带伞</td>
           </tr>
      </table>
  

       再：（添加了标题，“天气预报”）
  

  <table>
          <caption>天气预报</caption>
  

    语义化标签：< tHead> < tBody> < tFood>
    性质：规范（利于团队协作）
    在一个table中，tBody可以出现多次，但tHead、tFood只能出现一次

   <table>
          <caption>天气预报</caption>
          <thead>
          <tr>
             <th>日期</th>
             <th>天气情况</th>
             <th>出行情况</th>
          </tr>
          </thead>
          <tbody>
          <tr>
              <td>2019年1月1日</td>
              <td><img src="./img/tinaqi_1.png" alt=""></td>
              <td>天气晴朗，适合出行</td>
           </tr>
           <tr>
              <td>2019年1月2日</td>
              <td><img src="./img/tinaqi_2.png" alt=""></td>
              <td>有小雨，出门请带伞</td>
           </tr>
           </tbody>
          <tfood>
              
          </tfood>
      </table>
  

   23.表格属性（K23）

    1.常见表格属性：

• border: 表格边框
• cellpadding: 单元格内的空间
• cellspacing: 单元格之间的空间
• rowspan: 合并行
• colspan: 合并列
• align: 左右对齐方式
• valign: 上下对齐方式

•      例题：（较K22增加了“表格”）
  

   <table border="1" cellpadding="30" cellspacing="30" > <!-- 1：一像素 -->
  

       然后：（1）（添加了“表格单元”，“白天”）
  

  <thead>
          <tr>
             <th>日期</th>
             <th>日期</th>
             <th>天气情况</th>
             <th>出行情况</th>
          </tr>
          </thead>
          <tbody>
          <tr>
              <td>2019年1月1日</td>
              <td>白天</td>
              <td><img src="./img/tinaqi_1.png" alt=""></td>
              <td>天气晴朗，适合出行</td>
           </tr>
           <tr>
              <td>2019年1月2日</td>
              <td>白天</td>
              <td><img src="./img/tinaqi_2.png" alt=""></td>
              <td>有小雨，出门请带伞</td>
           </tr>
           </tbody>
  

       再：（使“定义表头”内合并）
  

   <tr>
             <th colspan="2">日期</th><!--意为下面两个白天对应一个-->
             <th>天气情况</th>
             <th>出行情况</th>
          </tr>
  

       还有：（2）（新增“表格单元”，“夜晚”）
  

   <tr>
              <td>2019年1月1日</td>
              <td>白天</td>
              <td><img src="./img/tinaqi_1.png" alt=""></td>
              <td>天气晴朗，适合出行</td>
           </tr>
           <tr>
              <td>2019年1月1日</td>
              <td>夜晚</td>
              <td><img src="./img/tinaqi_2.png" alt=""></td>
              <td>天气晴朗，适合出行</td>
           </tr>
           <tr>
              <td>2019年1月2日</td>
              <td>白天</td>
              <td><img src="./img/tinaqi_1.png" alt=""></td>
              <td>有小雨，出门请带伞</td>
           </tr>
           <tr>
              <td>2019年1月2日</td>
              <td>夜晚</td>
              <td><img src="./img/tinaqi_2.png" alt=""></td>
              <td>有小雨，出门请带伞</td>
           </tr>
  

       出现了：（合并“表格单元”，“日期”）
  

  <tr>
              <td rowspan="2">2019年1月1日</td>
              <td>白天</td>
              <td><img src="./img/tinaqi_1.png" alt=""></td>
              <td>天气晴朗，适合出行</td>
           </tr>
           <tr>
              <td>夜晚</td>
              <td><img src="./img/tinaqi_2.png" alt=""></td>
              <td>天气晴朗，适合出行</td>
           </tr>
           <tr>
              <td rowspan="2">2019年1月2日</td>
              <td>白天</td>
              <td><img src="./img/tinaqi_1.png" alt=""></td>
              <td>有小雨，出门请带伞</td>
           </tr>
           <tr>
              <td>夜晚</td>
              <td><img src="./img/tinaqi_2.png" alt=""></td>
              <td>有小雨，出门请带伞</td>
           </tr>
  

    2.align、valign:
        1）align: left、center、right
        2）valign： top、middle、bottom
        3）例题1.0：（修改“表头”，位置）
  

   <caption>天气预报</caption>
          <tHead>
          <tr align="right" valign="top">
  

        4）例题2.0：（修改“单元格”，位置）
  

  <table border="1" cellpadding="30" cellspacing="30" > <!-- 1：一像素 -->
          <caption>天气预报</caption>
          <tHead>
          <tr align="right" valign="top">
             <th colspan="2">日期</th><!--意为下面两个白天对应一个-->
             <th>天气情况</th>
             <th>出行情况</th>
          </tr>
          </tHead>
          <tBody>
          <tr valign="top">
              <td rowspan="2">2019年1月1日</td>
              <td>白天</td>
              <td><img src="./img/tinaqi_1.png" alt=""></td>
              <td>天气晴朗，适合出行</td>
           </tr>
           <tr>
              <td>夜晚</td>
              <td><img src="./img/tinaqi_2.png" alt=""></td>
              <td>天气晴朗，适合出行</td>
           </tr>
           <tr valign="bottom">
              <td rowspan="2">2019年1月2日</td>
              <td>白天</td>
              <td><img src="./img/tinaqi_1.png" alt=""></td>
              <td>有小雨，出门请带伞</td>
           </tr>
           <tr>
              <td>夜晚</td>
              <td><img src="./img/tinaqi_2.png" alt=""></td>
              <td>有小雨，出门请带伞</td>
           </tr>
           </tBody>
          <tFood>
              
          </tFood>
      </table>
  

    3.实操：
  

   <table border="1" cellpadding="0" cellspacing="0" >
          <caption><font size="6">罗德岛大甩卖</font></caption> 
          <thead>
              <tr>
                 <th>售卖小队</th>
                 <th>类型</th>
                 <th>出售详情</th>
                 <th>增值服务</th>
                 <th>保质期</th>
                 <th>价格</th>
                 <th>试用</th>
                 <th>购买</th>
              </tr>
              </thead>
              <tBody>
                  <tr>
                      <td rowspan="3">行动组A4</td>
                      <td>术士</td>
                      <td>链术士启示</td>
                      <td rowspan="3">附赠叙古拉人愤怒</td>
                      <td>12h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\Cache_2d58eb9f52476d83..jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td>拳皇</td>
                      <td>爆裂之手</td>
                      <td>24h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\Cache_2d58eb9f52476d83..jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td>速击手</td>
                      <td>克洛斯糖果</td>
                      <td>16h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\Cache_2d58eb9f52476d83..jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td rowspan="3">特别行动小组</td>
                      <td>召唤师</td>
                      <td>指令：融毁</td>
                      <td rowspan="3">附赠特殊针筒</td>
                      <td>8h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\Cache_2d58eb9f52476d83..jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td>收割者</td>
                      <td>奇异镰刀</td>
                      <td>1h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\Cache_2d58eb9f52476d83..jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td>特种</td>
                      <td>小毛毯</td>
                      <td>12h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\Cache_2d58eb9f52476d83..jpg" alt=""></td>
                   
                   </tr>
                   </tBody>
      </table>
  

   24.表单标签（K24-K25）

    1.常见表格属性：

• < form>: 表单的最外层容器
• < input>: 标签用于搜集用户信息，根据不同type属性值，展示不同控件

•             如输入框、密码框、复选框等
    2.iuput标签的type属性：
  
    3.例题实操（注意标注）
  

  <form action="http://www.baidu.com"><!--action：提交地点-->
          <h2>输入框：</h2>
          <input type="text" placeholder="请输入用户名"><!--placeholder：未输入/为空时内嵌文字-->
          <h2>密码框：</h2>
          <input type="password" placeholder="请输入密码">
      </form>
      <h2>复选框</h2>
      <input type="checkbox" checked>苹果<!--checked：一开始就被选中-->
      <input type="checkbox">香蕉
      <input type="checkbox" disabled>葡萄<!--disabled:禁止使用-->
      <h2>单选框</h2>
      <input type="radio" name="gender">男<!--通过name使其成为一组-->
      <input type="radio" name="gender">女
      <h2>上传文件</h2>
      <input type="file">
      <h2>提交按钮和重置按钮</h2>
      <input type="submit">
      <input type="reset">
  

    4.除input外常见标签：（注意标注）

• < textarea>:多行文本框
• < select>、< option>:下拉菜单

•       1）例题1.0（大体脉络）
  

  h2>多行文本框</h2>
      <textarea cols="30" rows="10"></textarea><!--c：列   r：行-->
      <h2>下拉菜单</h2>
      <select name="" id="">
          <option value=""></option>
          <option value="">北京</option>
          <option value="" selected>上海</option><!--初始项为上海-->
          <option value="">杭州</option>
      </select>
  

        2）例题2.0（添加“请选择”）（同时给出selected disabled）
  

   <h2>多行文本框</h2>
      <textarea cols="30" rows="10"></textarea><!--c：列   r：行-->
      <h2>下拉菜单</h2>
      <select name="" id="">
          <option value="" selected disabled>请选择</option><!--先s，初始选择，后d，更改不可选-->
          <option value="">北京</option>
          <option value="">上海</option>
          <option value="">杭州</option>
      </select>
  

        3）例题3.0（多选）
  

      <h2>多行文本框</h2>
      <textarea cols="30" rows="10"></textarea><!--c：列   r：行-->
      <h2>下拉菜单</h2>
      <select name="" id="">
          <option value="" selected disabled>请选择</option><!--先s，初始选择，后d，更改不可选-->
          <option value="">北京</option>
          <option value="">上海</option>
          <option value="">杭州</option>
      </select>
      <select size="2">
          <option value="">北京</option>
          <option value="">上海</option>
          <option value="">杭州</option>
      </select>
      <select multiple><!--m：多选-->
          <option value="">北京</option>
          <option value="">上海</option>
          <option value="">杭州</option>
      </select>
      <input type="file" multiple><!--选择文件多选-->
  

   5.< label>:辅助表格（无显示效果）
        1）实操：（选择范围变大）
  

  <input type="radio" name="gender" id="man"><label for="man">男</label><!--使用时id与for同时填充-->
      <input type="radio" name="gender" id="woman"><label for="woman">女</label>
  

    6.还有一些常见属性：

• < checked>
• < disabled>
• < name>
• < for>

•   …
    7.正经作业：（写的西拉啊呜呜）
  

          <form action="">
              <h2>刀客塔名讳：</h2>
              <input type="text" placeholder="复苏中...">
              <h2>可汗密语：</h2>
              <input type="password" placeholder="一定是黄金大队辣！">
              <h2>去代理真名：</h2>
              <input type="text" placeholder="我是谁？">
              <h2>意识性别：</h2>
              <input type="radio" name="gender" id="man"><label for="man">无性博士</label>
              <input type="radio" name="gender" id="woman"><label for="woman">男博士</label>
              <h2>复苏时间：</h2>
          <select size="">
              <option value="">2019</option>
              <option value="">2020</option>
              <option value="">2021</option>
              <option value="">2022</option>
          </select>
      <select size="http://www.baidu.com">
              <option value="">春季</option>
              <option value="">夏季</option>
              <option value="">秋季</option>
              <option value="">冬季</option>
      </select>
      <select size="">
              <option value="">黎明</option>
              <option value="">盛日</option>
              <option value="">傍晚</option>
              <option value="">暗夜</option>
          </select>
              <p>记不清了怎么办</p>
          <h2>我现在：</h2>
          <select size="">
                  <option value="" selected disabled>理智回复中...</option>
                  <option value="">开局剿灭</option>
                  <option value="">弑君者！！</option>
                  <option value="">固原岩QAQ</option>
                  <option value="">可恶的水月肉鸽</option>
              </select>
          </form> 
                  
                  <img src="D:\XY\QQ截图20221023111345.png" alt="">
                  <h2>如你所见：</h2>
                  <input type="text" placeholder="昨天圆船">
                  <p>没看清，退出游戏</p>
            
      <form action="http://www.baidu.com">
          <h2>请指示</h2>
          <input type="submit">
      </form>
  
  

    8.修改过的正经作业：
  

   <form action="">
          <table>
              <tbody>
          <tr>
              <td>刀客塔名讳：</td>
              <td><input type="text" placeholder="复苏中..."></td>
          </tr>
              </tbody>
          </table>    
          <table>
              <tbody>
          <tr>
              <td>可汗密语：</td>
              <td><input type="text" placeholder="一定是黄金大队辣！"></td>
          </tr>
              </tbody>
          </table>    
          <table>
              <tbody>
          <tr>
              <td>去代理真名：</td>
              <td><input type="text" placeholder="我是谁？"></td>
          </tr>
              </tbody>
          </table>    
          <table>
              <tbody>
          <tr>
              <td>意识性别：</td>
              <td><input type="radio" name="gender" id="man"><label for="man">无性博士</label>
                  <input type="radio" name="gender" id="woman"><label for="woman">男博士</label></td>
          </tr>
              </tbody>
          </table>    
          <table>
              <tbody>
          <tr>
              <td>复苏时间：</td>
              <td>    <select size="">
                  <option value="">2019</option>
                  <option value="">2020</option>
                  <option value="">2021</option>
                  <option value="">2022</option>
              </select>
              <select size="http://www.baidu.com">
                  <option value="">春季</option>
                  <option value="">夏季</option>
                  <option value="">秋季</option>
                  <option value="">冬季</option>
          </select><select size="">
              <option value="">黎明</option>
              <option value="">盛日</option>
              <option value="">傍晚</option>
              <option value="">暗夜</option>
          </select></td>
          </tr>
              </tbody>
          </table>    
          <p>记不清了怎么办</p>
          <table>
              <tbody>
          <tr>
              <td>我现在：</td>
              <td><select size="">
                  <option value="" selected disabled>理智回复中...</option>
                  <option value="">开局剿灭</option>
                  <option value="">弑君者！！</option>
                  <option value="">固原岩QAQ</option>
                  <option value="">可恶的水月肉鸽</option>
              </select></td>
          </tr>
              </tbody>
          </table>    
      </form> 
      <table>
          <tbody>
      <tr>
          <img src="D:\XY\QQ截图20221023111345.png" alt="">
          <td>如你所见：</td>
          <td> <input type="text" placeholder="昨天圆船"></td>
      </tr>
          </tbody>
      </table>    
  <form action="http://www.baidu.com">
      <table>
          <tbody>
      <tr>
          <td>请指示</td>
          <td><input type="submit"></td>
      </tr>
          </tbody>
      </table>    
  </form>
  

   25.表格表单组合（K26）

    1.例题：
  

  <form action="">
          <table border="1" cellpadding="30">
              <tBody>
                  <tr align="center">
                     <td rowspan="4">总体信息</td>
                     <td colspan="2">用户注册</td>
                  </tr>
                  <tr align="right">
                      <td>用户名</td>
                      <td><input type="text" placeholder="请输入用户名"></td>
                   </tr>
                   <tr align="right">
                      <td>密码：</td>
                      <td><input type="password" placeholder="请输入密码"></td>
                   </tr>
                   <tr align="center">
                      <td colspan="2">
                      <input type="submit">
                      <input type="reset">
                      </td>
                   </tr>
              </tBody> 
          </table>
      </form>
  

   26.< div>与< span>（K27）

•   < div>（块）：全称division，“分割、分区”的意思。                         < div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。                                           即HTML中大多数的标签都可以嵌套在< div>标签中，< div>中还可以嵌套多层< div>,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
•   < span>（内联）：用来修饰文字的。                                          div与span都是没有任何默认样式的，需要配合CSS

•   1.例题
  

  <div>
          <h2><a href="#">【千峰教育】<span>html5</span>-中国数万程序员的选择-官方首页</a></h2>
          <a href="#"><img src="https://www.baidu.com/link?url=RfOLuQTj8z5u6O1osIuSVNl3G8BwvV5qpiggXLdSPV5LdA5lXSTSw_C80Mu0sJVDUG81XBduKxFw1CBTO2twp_&wd=&eqid=b8529e22001327a4000000056354cc54"></a>
          <p>
              优势：三师护航就业薪资：10K-20K培训方式：全面培训类型：IT培训
              千峰-致力于物联网应用研发培训，中国程序员认可的培训机构；千峰开设web大前端，java，UI设计，PHP,VR,linux，大数据，pyhton...
              <a href="#"><www mobiletrain.org 2019-04- 评价 广告></www></a>
          </p>
      </div>
      <div>
          <h2><a href="#"><span>html5</span>_零基础如何学<span>HTML5</span>_从小白到大神进阶</a></h2>
          <a href="#"><img src="http://www.baidu.com/baidu.php?url=Kf0000K5cNxA6dzipXnK_cqj-5EmLYuHx1h5azcoe0HU7ury9QzoqOUhWJ3bqsUKeSqm9cLpRouVK-AjYiwgxsK7LoqAmSSzZI3AAGDZT1v_t8ij6PjKsG9xlei-wjSQyfUrgNSoP4aLUxHvVma2IrcTmqoOV303huIQLCvydKCBwB56933voQNWlPcZcus3BKR9dWhORxOB8F5RKmyyATj-9-cK.7Y_jilqq7Pau-tgblUNKLBuBzE1nTaUeeJAGWvptOj6xX1hmWJuBCrsnw33myQ2S8g9CtEUsgnIh1uvIMZx8_eQ2S8g9Ct_PjlArM_ePqXz1FklX1o-3p5QGCRAnMgQsYXNhl6kjwzITEjw4mph2lS8g9CtonPKWWgYSrHu8LITEjw4mTXGWFb_erMxbePOgQsYXNheAk3q-hOkoePOA1o-3p5QZfYnNq5gQsYXyelA2d2s1f_urM_tIl6.U1Yz0ZDqpZwVUjgZGex-0ZKGm1Yk0ZfqpZwVUjg73PAd0A-V5HczPfKM5yq-TZns0ZNG5yF9pywd0ZKGujYkrfKWpyfqPWf0Ugfqn1DzP7tknjD4g1DsnHIxnW0dnNtknjfvg1nvnjD0pvbqnfKzIjY3nWf0mhbqnHR3g1csP7tdnjn0UynqnH0zg1DsnH-xnH0kPdtznjRkg1Dsn-ts0Z7spyfqn0Kkmv-b5H00ThIYmyTqn0K9mWYsg100ugFM5H00TZ0qn0K8IM0qna3snj0snj0sn0KVIZ0qn0KbuAqs5H00ThCqn0KbugmqTAn0uMfqn0KspjYs0Aq15H00mMTqnH00UMfqn0K1XWY0mgPxpywW5gK1QyNWp6KGuAnqHbC0TA9YXHY0IA7zuvNY5Hnkg1nkP7tzP0KYIgnqnHn3P1TdnWczn1TknW6dnWDLnHm0ThNkIjYkPWmvPH0kP1Dvnjms0ZPGujdBrjRzryRznW0snHnzPvDY0AP1UHd7rjbkPHnsf1m1PHRLwDP70A7W5HD0TA3qn0KkUgfqn0KkUgnqn0KbugwxmLK95H00XMfqn0KVmdqhThqV5HKxn7tsg1Kxn7ts0Aw9UMNBuNqsUA78pyw15HRdrHD1PjIxn7tsg1KxPHR4nHnYPdts0ZK9I7qhUA7M5H00uAPGujYs0ANYpyfqQHD0mgPsmvnqn0KdTA-8mvnqn0KkUymqn0KhmLNY5H00pgPWUjYs0A7buhk9u1Yk0Akhm1Ys0AwWmvfqPj7DwDwDrH64fWfsnWTsPYmzP164PYmknjbkwRf1nRNtNbNHyDkRfY7r0Zwzmyw-5H00mhwGujYvnWIan1IKfWDdnYParRDsPjTYPHT1nHc1Pj0zwjIaPfKEm1Yk0AFY5Hn0Uv7YI1Ys0AqY5HD0ULFsIjYzc10WrHcWnznkP1RzrjfdP1bvc16Lnj0sc16Lnj0sQW0snj0snankc1nWnanVc108njckPj6Yc1D8nj0snH0sc1DWnansQW0snj0sn0KBmy4omyPW5H0Wn0K3TLwd5HnkPWTzrjRd0Z7xIWYsQWfzg108njKxna3sn7tsQWfzg108njFxn7tsQW0zg100mMPxTZFEuA-b5H00ThqGuhk9u1YY0APv5fKGTdqWTADqn0KWTjYs0AN1IjYs0APzm1YdrHckr0&us=newvui&xst=m1YYnRwDwDf4rj-aPj0zP10LwWcLrjbLwWDsrH77wjnkwgkywNPmH7wjfR3KmWYvnWIan1IKfWDdnYParRDsPjTYPHT1nHc1Pj0zwjIaPf715HD1nW6krjRznHD4rHnvn1fvnjcsg1czPNtk0gTqpZwVUjg73PAd0gDqpZwVUjgZGex-0gRqn1DvP1c3PHRKIjYkPWmvPH0kP1Dv0ydk5H0an0cV0yPC5yuWgLKW0ykd5H0Kmv3qmh7GuZRKP1R1nWTsrjmL&word=&ck=1653.460.118.229.513.487.169.306&shh=www.baidu.com&sht=baidu&wd="></a>
          <p>
              培训类型：web前端特色:零基础入门篇 录播视频 30节 
              千锋html5经典入门视频教程:基础知识点讲解 千锋H5总监-王老师录播视频 85节 
              Node+Koa2+ElementUI打造简书后台管理系统 千锋教育录播视频7天包退
          </p>
          <a href="#">www.ujiuye.cn 2019-04- 评价 广告</a>
      </div>
  

   27.CSS基础语法（K28）

    1.格式：选择器{属性1：值1；属性2：值2}
        1）例用：
  

  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          div{ width: 100px; height : 100px; background-color:red}
      </style> 
  </head>
  <body>
      <div>这是一个小块</div>
  </body>
  

    2.单位：px ->像素（pixel）、% -> 百分比
        1）%： 外容器 -> 600px   当前容器50% -> 300px
        2）举例：（题目外容器为body）
           a.
  

  <style>
          div{ width: 100%; height : 100px; background-color:red}
      </style> 
  

           b.
  

      <style>
          div{ width: 25%; height : 100px; background-color:red}
      </style> 
  </head>
  <body>
      <div>这是一个小块</div>
      <div>又是一个块</div>
      <span>这是一个内联</span>
  

           c.
  

  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          div{ width: 25%; height : 100px; background-color:green}
          span{ background-color:blue}
      </style> 
  </head>
  <body>
      <div>这是一个小块</div>
      <div>又是一个块</div>
      <span>这是一个内联</span>
  </body>
  

    3.基本样式：widt、height、background-color
        1）width：宽 heigh：高 background-color：背景色
    4.CSS注释：/* 内容 */

   28.CSS样式的引入方式（K29-K30）

    1.内联（行内、行间）样式：在html标签上添加style属性实现
    2.内部样式：在< style>标签内添加的样式（优点：可复用代码）
    3.例题：
  

           a.内联样式：

  <body>
      <div style="width:100px;height:100px;background-color:red">这是一个块</div>
  </body>
  

           b.内部样式：

   <style>
      div{width:100px;height:100px;background-color:red}
    </style>
  </head>
  <body>
      <div>这是一个块</div>
  </body>
  

           c.优点体现：
  
           内联：

  <body>
      <!-- <div>这是一个块</div> -->
      <div style="width:100px;height:100px;background-color:red">这是一个块</div>
      <div style="width:100px;height:100px;background-color:red">另外一个块</div>
  </body>
  

           内部：

   <style>
       div{width:100px;height:100px;background-color:red} 
    </style>
  </head>
  <body>
      <div>这是一个块</div>
      <div>另外一个块</div>
  </body>
  

        内部样式的代码可以复用，符合W3C的规范标准，尽量让结构和样式分开处理

    4.外部样式：引入一个单独的CSS文件，name.css
         引入方式：1）< link>标签：a.rel b.href

• rel属性:指定资源（/链接）和页面（/文档）的关系
• href属性: 表示资源的地址

•  <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="./common.css<!--引入地址-->">
      <title>Document</title>
  </head>
  

           ./common.css:
  

  

           可替换“stylesheet”的内容：
  
                 2）@import（很多种问题，不建议使用）
  

  <title>Document</title>
      <style>
          @import url('./common.css');
      </style>
  </head>
  

   29.CSS中的颜色表示法（K31）

    1.单词表示法：red blue green yellow…（自搜色块图）
    2.十六进制表示法：
        1）十六进制：0123456789abcdef
        2）表示：#000000（最小值，黑） #ffffff（最大值，白）
    3.RGB三原色表示法：RGB（x，x, x）；（x取值0~255）
    取色工具：
             提取颜色的下载地址：http://www.baidufe.com/fehelper
             Photoshop工具

   30.CSS背景样式（K32-33）

• background-color: 背景颜色
• background-image: 背景图片

•      例题：（红底） （默认水平垂直都铺满）
  

   <style>
          div{ width:300px; height:300px; background-color: red; background-image:url("D:/XY/nts.jpg");}
      </style><!--注意url地址为/而不是\-->
  </head>
  

• background-repeat: 背景图片的平铺方式

•          a.repeat-x
  

  <style>
          div{ width:300px; height:300px; background-color: red; 
              background-image:url("D:/XY/nts.jpg");
              background-repeat: repeat-x;}
      </style><!--尝试了repeat-x； 换行repeat-y；，只显示repeat-y（猜测是末尾段生效）-->
  </head>
  

           b.repeat-y
           c.repeat（x，y都进行平铺，默认值）
           d.no-repeat（都不平铺）

• background-position: 背景图片的位置

• 

  <style>
          div{ width:300px; height:300px; background-color: red; 
              background-image:url("D:/XY/nts.jpg");
              background-repeat: no-repeat;
              background-position: 100px 50px;}<!--左：x轴，右：y轴-->
      </style>
  </head>
  

           a.数字+px/%输入
           b.单词输入：
             x：left、center、right
             y：top、center、bottom

  

   <style>
          div{ width:300px; height:300px; background-color: red; 
              background-image:url("D:/XY/nts.jpg");
              background-repeat: no-repeat;
              background-position: center center;}<!--左：x轴，右：y轴-->
      </style>
  </head>
  

• background-attachment: 背景图随滚动条的移动方式

•          a.scroll:默认值（背景位置照当前元素进行偏移，即设定的容器）
  

   <style>
          body{ height: 2000px;}
          div{ width:300px; height:300px; background-color: red; 
              background-image:url("D:/XY/nts.jpg");
              background-repeat: no-repeat;
              background-position: center center;
              background-attachment:scroll ;}
      </style>
  </head>
  

    背景图随滚动条滚动
           b.fixed：（背景图按浏览器界面偏移，在小容器外，将容器设大可避免）
  

   <style>
          body{ height: 2000px;}
          div{ width:300px; height:300px; background-color: red; 
              background-image:url("D:/XY/nts.jpg");
              background-repeat: no-repeat;
              /* background-position: center center; */
              background-attachment:fixed ;}
      </style>
  </head>
  

   背景图固定，容器随滚轮滚动

    练习：利用滚动条移动方式实现视觉差网页
           a.
  

   <style>
          #div1{ width: 1980px; height: 800px; background-image: url("D:/XY/FZ1.jpg"); background-attachment: fixed;}
          #div2{ width: 1980px; height: 800px; background-image: url("D:/XY/FZ2.jpg"); background-attachment: fixed;}
          #div3{ width: 1980px; height: 800px; background-image: url("D:/XY/FZ3.jpg"); background-attachment: fixed;}
      </style>
  </head>
  <body>
      <div id="div1"></div><!--利用id定位div-->
      <div id="div2"></div>
      <div id="div3"></div>
  </body>
  

           b.
  

  <style>
          #div1{ width: 1980px; height: 800px; background-image: url("D:/XY/FZ1.jpg"); background-attachment: fixed;}
          #div2{ width: 1980px; height: 800px; background-image: url("D:/XY/FZ2.jpg"); background-attachment: fixed;}
          #div3{ width: 1980px; height: 800px; background-image: url("D:/XY/FZ3.jpg"); background-attachment: fixed;}
          table{ background-color: white;}
          form{ background-color: white;}
      </style>
  </head>
  <body>
      <div id="div1"><table border="1" cellpadding="0" cellspacing="0" >
          <caption><font size="6">罗德岛大甩卖</font></caption> 
          <thead>
              <tr>
                 <th>售卖小队</th>
                 <th>类型</th>
                 <th>出售详情</th>
                 <th>增值服务</th>
                 <th>保质期</th>
                 <th>价格</th>
                 <th>试用</th>
                 <th>购买</th>
              </tr>
              </thead>
              <tBody>
                  <tr>
                      <td rowspan="3">行动组A4</td>
                      <td>术士</td>
                      <td>链术士启示</td>
                      <td rowspan="3">附赠叙古拉人愤怒</td>
                      <td>12h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\nts.jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td>拳皇</td>
                      <td>爆裂之手</td>
                      <td>24h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\nts.jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td>速击手</td>
                      <td>克洛斯糖果</td>
                      <td>16h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\nts.jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td rowspan="3">特别行动小组</td>
                      <td>召唤师</td>
                      <td>指令：融毁</td>
                      <td rowspan="3">附赠特殊针筒</td>
                      <td>8h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\nts.jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td>收割者</td>
                      <td>奇异镰刀</td>
                      <td>1h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\nts.jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td>特种</td>
                      <td>小毛毯</td>
                      <td>12h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\nts.jpg" alt=""></td>
                   
                   </tr>
                   </tBody>
      </table></div><!--利用id定位div-->
      <div id="div2"><table border="1" cellpadding="0" cellspacing="0" >
          <caption><font size="6">罗德岛大甩卖</font></caption> 
          <thead>
              <tr>
                 <th>售卖小队</th>
                 <th>类型</th>
                 <th>出售详情</th>
                 <th>增值服务</th>
                 <th>保质期</th>
                 <th>价格</th>
                 <th>试用</th>
                 <th>购买</th>
              </tr>
              </thead>
              <tBody>
                  <tr>
                      <td rowspan="3">行动组A4</td>
                      <td>术士</td>
                      <td>链术士启示</td>
                      <td rowspan="3">附赠叙古拉人愤怒</td>
                      <td>12h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\nts.jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td>拳皇</td>
                      <td>爆裂之手</td>
                      <td>24h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\nts.jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td>速击手</td>
                      <td>克洛斯糖果</td>
                      <td>16h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\nts.jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td rowspan="3">特别行动小组</td>
                      <td>召唤师</td>
                      <td>指令：融毁</td>
                      <td rowspan="3">附赠特殊针筒</td>
                      <td>8h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\nts.jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td>收割者</td>
                      <td>奇异镰刀</td>
                      <td>1h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\nts.jpg" alt=""></td>
                   
                   </tr>
                   <tr>
                      <td>特种</td>
                      <td>小毛毯</td>
                      <td>12h</td>
                      <td>18源石</td>
                      <td><img src="D:\XY\R-C.png" alt=""></td>
                      <td><img src="D:\XY\nts.jpg" alt=""></td>
                   
                   </tr>
                   </tBody>
      </table></div>
      <div id="div3"> <form action="">
          <h2>刀客塔名讳：</h2>
          <input type="text" placeholder="复苏中...">
          <h2>可汗密语：</h2>
          <input type="password" placeholder="一定是黄金大队辣！">
          <h2>去代理真名：</h2>
          <input type="text" placeholder="我是谁？">
          <h2>意识性别：</h2>
          <input type="radio" name="gender" id="man"><label for="man">无性博士</label>
          <input type="radio" name="gender" id="woman"><label for="woman">男博士</label>
          <h2>复苏时间：</h2>
      <select size="">
          <option value="">2019</option>
          <option value="">2020</option>
          <option value="">2021</option>
          <option value="">2022</option>
      </select>
  <select size="http://www.baidu.com">
          <option value="">春季</option>
          <option value="">夏季</option>
          <option value="">秋季</option>
          <option value="">冬季</option>
  </select>
  <select size="">
          <option value="">黎明</option>
          <option value="">盛日</option>
          <option value="">傍晚</option>
          <option value="">暗夜</option>
      </select>
          <p>记不清了怎么办</p>
      <h2>我现在：</h2>
      <select size="">
              <option value="" selected disabled>理智回复中...</option>
              <option value="">开局剿灭</option>
              <option value="">弑君者！！</option>
              <option value="">固原岩QAQ</option>
              <option value="">可恶的水月肉鸽</option>
          </select>
      </form> 
              
              <img src="D:\XY\QQ截图20221023111345.png" alt="">
              <h2>如你所见：</h2>
              <input type="text" placeholder="昨天圆船">
              <p>没看清，退出游戏</p>
        
  <form action="http://www.baidu.com">
      <h2>请指示</h2>
      <input type="submit">
  </form></div>
  </body>
  </html>
  

   31.CSS边框样式新手（K34-35）

• border-style: 边框的样式

•           a.solid：实线 b.dashed：虚线 c.dotted：点线   …

• border-width: 边框的大小
• border-color: 边框的颜色

• 

  <style>
          div{ width: 300px; height:300px; border-style: solid;border-color: red; border-width: 1px;}
      </style>
  </head>
  <body>
      <div></div>
  </body>
  

              针对某一条边进行单独设置：形如border-X-Y   X为方向
  

  <style>
          div{ width: 300px; height:300px; border-right-style: solid;border-right-color: red; border-right-width: 5px;
              width: 300px; height:300px; border-top-style: dotted;border-top-color: red; border-top-width: 5px;}
      </style>
  </head>
  <body>
      <div></div>
  </body>
  

      练习：利用边框实现三角形：
            a.
  

  <style>
          div{ width: 300px; height:300px;
               border-top-color: black ;
               border-top-style:solid;
               border-top-width: 10px;
               border-right-color: red ;
               border-right-style:solid;
               border-right-width: 10px;
               border-bottom-color: yellow ;
               border-bottom-style:solid;
               border-bottom-width: 10px;
               border-left-color: blue ;
               border-left-style:solid;
               border-left-width: 10px;
              }
      </style>
  </head>
  <body>
      <div></div>
  

            b.
  

   <style>
          div{ width: 0px; height:0px;
               border-top-color: black ;
               border-top-style:solid;
               border-top-width: 30px;
               border-right-color: red ;
               border-right-style:solid;
               border-right-width: 30px;
               border-bottom-color: yellow ;
               border-bottom-style:solid;
               border-bottom-width: 30px;
               border-left-color: blue ;
               border-left-style:solid;
               border-left-width: 30px;
              }
      </style>
  </head>
  <body>
      <div></div>
  </body>
  

            c.
  

   <style>
          div{ width: 0px; height:0px;
               border-top-color: white ;
               border-top-style:solid;
               border-top-width: 30px;
               border-right-color: white ;
               border-right-style:solid;
               border-right-width: 30px;
               border-bottom-color: white ;
               border-bottom-style:solid;
               border-bottom-width: 30px;
               border-left-color: blue ;
               border-left-style:solid;
               border-left-width: 30px;
              }
      </style>
  </head>
  <body>
      <div></div>
  </body>
  

            d.真.透明颜色：transparent
  

   <style>
          body{background-color: black;}
          div{ width: 0px; height:0px;
               border-top-color: transparent ;
               border-top-style:solid;
               border-top-width: 30px;
               border-right-color: transparent ;
               border-right-style:solid;
               border-right-width: 30px;
               border-bottom-color: transparent ;
               border-bottom-style:solid;
               border-bottom-width: 30px;
               border-left-color: blue ;
               border-left-style:solid;
               border-left-width: 30px;
              }
      </style>
  </head>
  <body>
      <div></div>
  </body>
  

   32.CSS文字样式（K36-37）

    1.font-family：字体类型（仅对对应字体生效）

• 英文字体：Arial,'Times New Roman'
• 中文字体：微软雅黑（Microsoft Yahei），宋体（SimSun）

•           a.
  

  <style>
          div{ font-family: Arial;}
      </style>
  </head>
  <body>
      <div>这是一段文字</div>
      <p>这是一段文字</p>
      <div>this is a text</div>
      <p>this is a text</p>
  </body>
  

            b.

  

   <style>
          #div1{ font-family: Arial;}
          #div2{ font-family: 'Times New Roman';}
          #div3{ font-family: 宋体;}
          #div4{ font-family: A微软雅黑;}
      </style>
  </head>
  <body>
      <div id="div1">this is a text</div>
      <div id="div2">this is a text</div>
      <p>this is a text</p>
      <div id="div3">这是一段文字</div>
      <div id="div4">这是一段文字</div>
      <p>这是一段文字</p>
  </body>
  

• 衬体（例宋）与非衬体（例微雅）：

• 

            a.非衬线体：扁平化，直观
            b.衬线体早年间流行
        注意事项：
             1）设置多字体的目的：
              根据识别计算机中字体是否存在而输出,多文字避险

  div{ font-family: 'Times New Roman',SiSun,微软雅黑；}
  

             2）引号的问题：
               设置字体中有空格键必须加’’
    2.font-size：文字的大小
            a.默认大小
      例题： 1）
  

  <style>
          div{ font-size: 16px;}
      </style>
  </head>
  <body>
      <div>this is a text</div>
      <div>this is a text</div>
      <p>this is a text</p>
      <div>这是一段文字</div>
      <div>这是一段文字</div>
      <p>这是一段文字</p>
  

             2）
  

   <style>
          div{ font-size: 30px;}
      </style>
  </head>
  <body>
      <div>this is a text</div>
      <div>this is a text</div>
      <p>this is a text</p>
      <div>这是一段文字</div>
      <div>这是一段文字</div>
      <p>这是一段文字</p>
  </body>
  

            b.写法二（单词）（不建议）
  
    3.font-weight：字体粗细
            a.两种模式：正常（normal）、加粗（bold）
            b.写法二（100、200…900）（100-500正常，600-900加粗）
  

  <style>
          div{ font-weight: bold;}
      </style>
  

    4.font-style：字体样式
            a.正常（normal）斜体（italic/oblique）
            注：italic带有属性倾斜字体才可，oblique没有倾斜属性字体也可设置
    5.color：字体颜色
  

   <style>
          div{ font-weight: bold; color: red;}
      </style>
  </head>
  <body>
      <div>this is a text</div>
      <div>this is a text</div>
      <p>this is a text</p>
      <div>这是一段文字</div>
      <div>这是一段文字</div>
      <p>这是一段文字</p>
  </body>
  

    6.作业
  

  <style>
          #div0{font-family: 微软雅黑;color:blue; text-align: center;font-size: 40px;}
          #div1{font-family: 微软雅黑;color: cornflowerblue;font-size: 30px;}
          #div2{font-family:Arial,微软雅黑;font-style:italic;font-weight:bold;}
          #div3{font-family; 宋体;color:mediumseagreen;font-size: 16px;}
          #div4{font-family: 宋体;color:red;}
      </style>
  </head>
  <body>
      <div id="div0">爱国者简介</div>
      <div id="div1">基本信息</div>
      <div id="div2">博卓卡斯替，最后一位纯血温迪戈.不知自何时起就在行进.</div>
      <div id="div3">“如果命运逼我转向，我宁愿，永不回头，我要割开命运的喉咙。”
          他的一生之中，
          曾为了国家征战沙场。
          拉特兰，卡西米尔，到处都流传着他的传说。
          曾为了感染者流浪荒野，
          北原冻土上到处都是他的身影，
          可是啊，
          他被深深信仰着的乌萨斯，
          亲手杀死了他的儿子；
          他被誓死追随的整合运动，
          亲手毁掉了他的女儿。
          “要让帝国威名永存”，
          “要让感染者有他们自己的未来”.
          明明有着无坚不摧的矛，
          明明有着坚不可摧的盾，
          却被这片大地伤害的体无完肤。
          他信仰的，
          击碎了他强大的外壳；
          他追求的，
          击破了他柔软的内心。
          他累了，
          他不再是那个所向披靡的纯血温迪戈，
          他只是一个失去孩子的父亲，
          他放下了一切，并失去了一切...
          晚安，大爹，
          带着自己的孩子，安心睡去吧.
      </div>
      <div id="div4">最终，他还是战胜了命运----不选择相信预言的描述，而是自己的亲身感受，摆脱命运、预言对自己的影响</div>
      <img src="D:\XY\QQ截图20221025230450.png" width="300" height="400" alt="">
  </body>
  

   33.CSS段落样式（K38-402）

    1.text-decoration：文本装饰
            a.取值
             1）下划线：underline
             2）删除线：line-through
             3）上划线：overline
             4）不添加任何装饰：none
            b.添加多个：（空格隔开）
  

   <style>
          p{ width: 600px; text-decoration: line-through underline overline;}
      </style>
  </head>
  <body>
      
      <p>说目前10月新六星干员所处的态势，9月把叔叔请过来了，然后11月肯定要迎来3.5周年庆，10月底基本上就会有直播活动了，所以显而易见的，3.5周年庆还有限定六星登场，而且吃井换耀光的玩家肯定也不少，所以注定了10月新六星承受着巨大的压力。
  
          而最有意思的是，官方出干员每年似乎都有一定的规律，9月落地的干员是赫拉格、42姐、琴柳和叔叔，虽然说老爷子现在强度寄了，但是当年那可是危机合约正面刚红刀哥的男人。
          
          而10月干员分别是麦哲伦、瑕光和远牙，说好听点就是对策卡，说难听点，抽到了养成了似乎也没啥必要的上场空间，还是需要官方整题图和环境强抬才能用，所以不少玩家调侃今年10月的新六星强度按照规律已经成仓管了。</p>
  </body>
  

    2.text-transform：文本大小写（针对英文段落）
            a.书写：
             1）小写：lowercase
             2）大写：uppercase
             3）只针对首字母大写：capitalize
    3.text-indent：文本缩进
            a.首行缩进
  

        p{ text-indent: 20px;}
  

            b.em单位（相对单位，1em永远与字体大小相同）
  

    p{ text-indent: 2em; font-size: 36px;}
  

    4.text-align：文本对齐方式
            a.取值：
             1）left：左对齐
             2）right：右对齐
             3）center：中间对齐
             4）justify：两端点对齐
    5.line-height：定义行高
            a.定义：一行文字的高度，上下边距等价
  

            b.默认行高：非固定值，而是变化的，根据当前文字在不断变化
            c.取值
             1）number（px）
             2）scale（形式为数字，表比例值，附从文字大小）
    6.letter-spacing：定义字符间距
  

    p{ letter-spacing: 5px;}
  

    7.word-spacing：定义词间距（针对英文）
    8.强制折行：（针对英文、数字）
            a.word-break：break-all（非常强烈的折行）
  

      div{ width: 600px; height: 200px; border:1px solid red;word-break: break-all;}
      </style>
  </head>
  <body>
      
      <p>随着比赛的进程，特锦赛正赛正式拉开帷幕，出现了许多新角色。
         马科维茨作为发言人也逐渐熟练，同时出场的还有曾经在玫瑰报业担任主编的现发言人麦基。
         二人交谈间，作为嘉宾的烛骑士到场，麦基前去迎接。
         同时，白金正因影响到青金莫妮克处理焰尾而接受青金罗伊的训话，
         由于白金没能阻止玛嘉烈导致计划泡汤，话语间还可以得知白金放走了塑料骑士的家人，
         也因为如此塑料骑士暂时与红松骑士团合作。</p>
         <div>Song in the bird cage
          Should I sing if I sing
          Sky look wind tomorrow
          Blow today
          Blow today
          Morning in the bird
          Spend with me
          Blow tomorrow
          Every single day
          It is next to you
          Surely come in the morning one day say hello
          To expand the hand to
          The side of other town
          Surely not accustomed divert alone
          Come morning everyone laugh again with me
          Because anyway every night every night
          Sing a song so on in the picture
          Sky a look wind tomorrow
          Blow to the side of you
          Blow today
          Morning in the bird
          It is next to you
          I can sing again like a bird in the sky
          I have heard innocent voice
          I'll sing out with my girl</div>
  </body>
  

            b.word-wrap：break-word（不太强烈折行，会产生一些空白）
  

       div{ width: 600px; height: 200px; border:1px solid red;word-wrap: break-word;}
  

    9.作业完全体：
  

   <style>
          div{ width:1300px;}
          h1{ text-align: center;color: #ff6600;}
          h2{ color: #00a0ff;text-indent: 2em;}
          #p1{font-style: italic; font-weight: bold;text-indent: 2em;}
          #p2{ color: #666; line-height: 30px;text-indent: 2em;}
          #p3{ color: #bbb; line-height: 30px;text-indent: 2em;text-decoration: underline; font-style: italic;}
          #p4{ font-weight: bold;letter-spacing: 10px;line-height: 30px;text-indent: 2em;}
          #p5{ color: #cc00cc; line-height: 30px;text-indent: 2em;}
      </style>
  </head>
  <body>
      <div>
          <h1>陈晖洁简介</h1>
          <h2>基本信息</h2>
          <p id="p1">陈晖洁（陈）），龙门高级警司，龙门近卫局特别督察组组长，毕业于维多利亚皇家近卫学校，成绩优异，表现突出。</p>
          <p id="p2">在龙门近卫局供职期间，力主取缔龙门境内非法活动，对抗暴力犯罪和有组织犯罪，追缉武装逃犯与国际重犯等行动，并取得多项重大成果。</p>
          <h2>权限记录</h2>    
          <p id="p3">“你的父亲已经和你断绝关系。他同样也和我再无瓜葛，我不会在乎，他也不会。
              你想离开这里？可以。不过在那之前，我要说些事情给你听。——其实我知道那个老人是谁。
              但我很健忘，我会忘掉许多事——比如说那天晚上你和你朋友小小的冒险。忘掉这件事简直轻而易举。
              这的确是我的错，没错。我犯下了不可饶恕的错误。可我会忘记。如果你想离开，我会把你送到很安全的城市，又富饶又安稳。
              你在那里会平静地度过一生，很幸福。而你将告别这里的一切。你厌恶的家，你讨厌的街道，你嫌弃的人。
              只是，你将失去了解任何真相的机会，因为这些事实既隐秘又危险，我不能让无关的人被卷入其中。
              生气？你生气了？你讨厌我？嗯，当然可以。换作是我，也一定会讨厌这样一个无能的人。”</p>
          <h2>现如今</h2>
          <p id="p4"> 现作为特别人员协助罗德岛行动，并为现场提供战术指挥支援。</p>
          <p id="p5">陈的实力不用猜测，但是赤霄还并未被陈完全驾驭，或者说这把刀还在蛰伏等待着自己该猎杀的猎物。
                    “陈的利刃会一直守护着你，现在博士你还有很多事情要做，因为你可是Arknights，是方舟的骑士。”</p>
      </div>
  </body>
  

   34.CSS复合样式（K43）（复合写法通过空格实现）

            注：一个CSS属性只控制一种样式，叫单一样式；一个CSS属性控制多种样式，叫做复合样式。

• background: red url（） repeat 0 0；

• 

    div{ width:300px;height: 300px;
               background: red url("D:/XY/nts.jpg")no-repeat center center;}
  

• border（边框）:1px red solid；

• 

   div{ width:300px;height: 300px;
               background: red url("D:/XY/nts.jpg")no-repeat center center;
               /* border: 2px blue solid; 全边框*/
               border-right : 3px blue dashed;
              }
  

• font:至少要有size，family（对应顺序style<->weight size/line-height family）           注：最好不要混写，如果强制，必须先混合后单一

•  35.CSS选择器（K44-45）

    1.ID 选择器
            a.css：#elem{}
              html：id=“elem”（快捷div：div+#+tab）
  

   <style>
          #div1{ background: red;}
          #div2{ background: blue;}
      </style>
  </head>
  <body>
      <div id="div1">课程好多好多</div>
      <div id="div2">课程真的好多好多</div>
  </body>
  

            注：1）一个页面内。ID值对应唯一 2）规范：字母/-/_/数字，数字不可在首位
                3）驼峰写法（单词）、下划线写法（search-small-button）、短线写法（search_samll_button）
    2.CLASS选择器
            a.css：.elem{}
              html：class=“elem”（快捷class：X+.+tab）
            注：1）class选择器可以复用
                2）可以添加多个class样式
  

   <style>
          #div1{ background: red;}
          #div2{ background: blue;}
          .box{ background: green;}
          .content{ font-size: 30px;}
      </style>
  </head>
  <body>
      <div id="div1">课程好多好多</div>
      <div id="div2">课程真的好多好多</div>
      <p class="box">课程真的真的好多</p>
      <div class="box content">课程真的真的真的好多</div>
  </body>
  

                3）多个样式时，样式优先级根据CSS决定，而不是class属性中顺序（在< style>中的优先顺序）
                4）标签+类的写法
  

    p.box{ background: green;}
          .content{ font-size: 30px;}
      </style>
  </head>
  <body>
      <div id="div1">课程好多好多</div>
      <div id="div2">课程真的好多好多</div>
      <p class="box">课程真的真的好多</p>
      <div class="box content">课程真的真的真的好多</div>
  </body>