cms实战项目简介与常用HTML标签-2019年8月30日

作业:
1. 谈谈你对html标签, 元素与属性的理解, 并举例说明

2. 列表有几种, 如何定义?

列表有2种，分别是：有序列表和无序列表

有序列表

实例

<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>

点击 "运行实例" 按钮查看在线实例

 

无序列表

实例

  <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
   </ul>

3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?

列表与表格的区别， 单列内容是用列表，多列内容的时候用表格，因为在多列的情况下，用表格更直观。

 

4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>

实例

  <ul>
        <li>1、5点起床 </li>
        <li> 2、8点工作</li>
        <li>3、晚8点上课 </li>
        <li>4、晚10点睡觉 </li>
    </ul>
    <ol>
            <li>1、5点起床 </li>
            <li> 2、8点工作</li>
            <li>3、晚8点上课 </li>
            <li>4、晚10点睡觉 </li>
        </ol>
    <dl>
        <dt>起床</dt>
        <dd>5点</dd>
        <dt>工作</dt>
        <dd>8点-12点</dd>
        <dt>上课</dt>
        <dd>晚上8点-10点</dd>
    </dl>

5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan

实例

          <table border="1" width="500" cellspacing="0" cellpadding="5">
          <caption>
              <h3>购物车</h3>
          </caption>
          <!-- 表头 -->
          <thead>
              <tr bgcolor="lightblue">
                  <th>编号</th>
                  <th>采购员</th>
                  <th>名称</th>
                  <th>单价</th>
                  <th>数量</th>
                  <th>金额</th>
              </tr>
          </thead>
          <!-- 主体 -->
  
          <tr>
              <td>1</td>
              <td rowspan="3" align="center">渊哥</td>
              <td>有备无患的奔驰专用机油</td>
              <td>800</td>
              <td>1</td>
              <td>800</td>
          </tr>
          <tr>
              <td>2</td>
          
              <td>能看清鞋子的京东摄像头</td>
              <td>300</td>
              <td>2</td>
              <td>600</td>
          </tr>
          <tr>
              <td>3</td>
           
              <td>带暖手宝功能的笔记本电脑</td>
              <td>7800</td>
              <td>1</td>
              <td>7800</td>
          </tr>
          <!-- 底部 -->
  
          <tr>
              <td colspan="3" align="center">合计:</td>
              <!-- <td>x</td> -->
              <!-- <td>x</td> -->
              <td>4</td>
              <td>9200</td>
          </tr>
      </table>

6. 编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义

实例

    <h3>用户</h3>
    <form action="login.php" method="POST">

        <p>
            <label for="username">帐号:</label>
            <input type="text" id="username" name="username" value="caoyuan">
        </p>
        <p>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" placeholder="必须在6-12位之间">
        </p>
        <p>
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" placeholder="example@email.com">
        </p>
        <p>
            <label for="age">年龄:</label>
            <input type="number" id="age" name="age" min="16" max="80">
        </p>
        <p>
            <label for="username">课程:</label>
            
            <select name="" id="">
                <optgroup label="前端">
                    <option value="">请选择</option>
                    <option value="">HTML5</option>
                    <option value="">CSS3</option>
                    <option value="">JavaScript</option>
                </optgroup>
                <optgroup label="后端">
                    <option value="">请选择</option>
                    <option value="">php</option>
                    <option value="">mysql</option>
                    <option value="">laravel</option>
                </optgroup>
            </select>
        </p>
        <p>
                <label for="game">爱好:</label>
                <input type="checkbox" id="game" name="hobby[]" value="game"><label for="game">玩游戏</label>
                <input type="checkbox" id="programme" name="hobby[]" value="programme" checked><label for="programme">撸代码</label>
                <input type="checkbox" id="movies" name="hobby[]" value="movies"><label for="movies">看片</label>
        </p>
        <p>
                <label for="female">性别:</label>
                <input type="radio" id="male" name="gender" ><label for="male">男生</label>
                <input type="radio" id="female" name="gender"><label for="female">女生</label>
                <input type="radio" id="secrecy" name="gender" ><label for="secrecy">保密</label>
        </p>
        <p>
                
                <input type="submit"  name="submit" value="提交">
                <input type="reset"  name="reset" value="重填">
                <input type="button"  name="reset" value="按钮">

                <button type="button">注册</button>
        </p>
    </form>

7. 写出总结, 对于这些常用标签的应用场景进行分析

列表：主要用于单栏类的展示，有导航，产品列表，文章列表等……

表格：主要用于多行多列的数据列表的管理，在后理管理，用户中心，等多条数据多个字段的地方用得比较多。

表单： 主要用于与服务数据交互时，使用场景有，用户注册登录，搜索查询等。