01-HTML+CSS/07-高级元素之列表-表单-表格

高级元素之列表-表单-表格

水平居中回顾

<!DOCTYPE html>
<html lang="en">
  <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>
      .box {
        background-color: #f00;
        text-align: center;
      }

      .box span {
        background-color: #0f0;
      }

      .container {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background-color: #00f;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>我是span元素</span>
      <div class="container"></div>
    </div>
  </body>
</html>

ol 有序列表

  • ol
    • li
    • li
<!DOCTYPE html>
<html lang="en">
  <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>
      ol,
      li {
        padding: 0;
        margin: 0;
      }

      ol {
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <h1>自己喜欢的电影排名：</h1>
    <ol>
      <li>星际穿越</li>
      <li>大话西游</li>
      <li>盗梦空间</li>
      <li>喜羊羊和灰太狼</li>
      <li>熊出没</li>
      <li>奥特曼</li>
    </ol>
  </body>
</html>

ul 序序列表

  • ul
    • li
    • li
<!DOCTYPE html>
<html lang="en">
  <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>
      body {
        padding: 0;
        margin: 0;
      }

      ul,
      li {
        padding: 0;
        margin: 0;
      }

      ul {
        list-style-type: none;
        /* list-style-type: decimal; */
        /* list-style-type: lower-alpha; */
      }
    </style>
  </head>
  <body>
    <h1>常见的编程语言</h1>
    <ul>
      <li>JavaScript</li>
      <li>Java</li>
      <li>C++</li>
      <li>object-c</li>
      <li>Ruby</li>
      <li>Python</li>
    </ul>
  </body>
</html>

dl 定义列表

  • dl
    • dt
    • dd
    • dt
    • dd
<!DOCTYPE html>
<html lang="en">
  <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>
      dl,
      dt,
      dd {
        margin: 0;
        padding: 0;
      }

      dl {
        list-style-type: none;
      }

      dt {
        font-size: 20px;
        font-weight: 700;
        margin: 10px 0;
      }

      dd {
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <h1>前端开发</h1>
    <dl>
      <dt>阶段一：打好基础</dt>
      <dd>HTML</dd>
      <dd>CSS</dd>
      <dd>JavaScript</dd>
      <dd>JavaScript DOM</dd>
      <dd>JavaScript BOM</dd>
      <dd>JavaScript高级语法</dd>
      <dt>阶段二： 框架实战</dt>
      <dd>Node基础</dd>
      <dd>webpack基础</dd>
      <dd>Git源代码管理</dd>
      <dd>Vue框架实战</dd>
      <dd>React框架实战</dd>
      <dd>小程序+云开发</dd>
      <dd>uniapp+taro</dd>
      <dt>阶段三：课程姐姐</dt>
      <dd>typescript</dd>
      <dd>Vue+typescript</dd>
      <dd>React+typescript</dd>
      <dd>Node/开发脚手架/Node服务器开发/MySQL</dd>
      <dd>webpack高级/性能优化/vite/rollup/gulp</dd>
      <dd>数据结构和算法</dd>
    </dl>
  </body>
</html>

列表案例

<!DOCTYPE html>
<html lang="en">
  <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>
      body,
      ul,
      li,
      a {
        padding: 0;
        margin: 0;
      }

      ul {
        list-style-type: none;
      }

      a {
        color: #333;
        text-decoration: none;
      }

      ul > li {
        margin-top: 18px;
      }

      ul > li > a {
        display: inline-block;
      }

      ul > li > a:hover {
        color: #f04142;
      }

      ul > li .ranking {
        color: #999;
        width: 24px;
        height: 24px;
        text-align: center;
        margin-right: 3px;
        font-weight: 700;
        line-height: 24px;
        display: inline-block;
      }

      ul > li:nth-child(1) .ranking {
        color: #f00;
      }

      ul > li:nth-child(2) .ranking {
        color: #0f0;
      }

      ul > li:nth-child(3) .ranking {
        color: #00f;
      }

      ul > li .content {
        display: inline-block;
      }

      ul > li .icon {
        position: relative;
        top: 2px;
        left: 4px;
        width: 16px;
        height: 16px;
        display: inline-block;
      }

      ul > li .new {
        background-image: url("../images/new_icon.svg");
      }

      ul > li .hot {
        background-image: url("../images/hot_icon.svg");
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="item">
        <a href="#">
          <span class="ranking">1</span>
          <div class="content">
            一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
          </div>
          <i class="icon new"></i>
        </a>
      </li>
      <li class="item">
        <a href="#">
          <span class="ranking">2</span>
          <div class="content">
            一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
          </div>
          <i class="icon new"></i>
        </a>
      </li>
      <li class="item">
        <a href="#">
          <span class="ranking">3</span>
          <div class="content">
            一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
          </div>
          <i class="icon"></i>
        </a>
      </li>
      <li class="item">
        <a href="#">
          <span class="ranking">4</span>
          <div class="content">
            一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
          </div>
          <i class="icon new"></i>
        </a>
      </li>
      <li class="item">
        <a href="#">
          <span class="ranking">5</span>
          <div class="content">
            一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
          </div>
          <i class="icon hot"></i>
        </a>
      </li>
      <li class="item">
        <a href="#">
          <span class="ranking">6</span>
          <div class="content">
            一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
          </div>
          <i class="icon"></i>
        </a>
      </li>
      <li class="item">
        <a href="#">
          <span class="ranking">7</span>
          <div class="content">
            一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
          </div>
          <i class="icon new"></i>
        </a>
      </li>
    </ul>
  </body>
</html>

继承属性和自己的属性

<!DOCTYPE html>
<html lang="en">
  <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>
      .box {
        color: red !important;
      }

      .container {
        color: #0f0;
      }
    </style>
  </head>
  <body>
    <div class="box">
      aaaaaa
      <div class="container">我是container的内容</div>
    </div>
  </body>
</html>

表格

  • table
    • tr
      • td
      • td
<!DOCTYPE html>
<html lang="en">
  <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>
      table {
        border-collapse: collapse;
      }

      td {
        border: 1px solid #333;
        padding: 8px 16px;
        text-align: center;
      }

      table tr:nth-child(1) {
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>排名</td>
        <td>股票名称</td>
        <td>股票代码</td>
        <td>股票价格</td>
        <td>股票的涨跌</td>
      </tr>
      <tr>
        <td>1</td>
        <td>贵州茅台</td>
        <td>600519</td>
        <td>1800</td>
        <td>5%</td>
      </tr>
      <tr>
        <td>2</td>
        <td>腾讯控股</td>
        <td>00700</td>
        <td>400</td>
        <td>3%</td>
      </tr>
      <tr>
        <td>3</td>
        <td>五粮液</td>
        <td>000858</td>
        <td>160</td>
        <td>8%</td>
      </tr>
      <tr>
        <td>4</td>
        <td>东方财富</td>
        <td>300059</td>
        <td>25</td>
        <td>4%</td>
      </tr>
    </table>
  </body>
</html>
  • table
    • thead
    • tbody
    • tfoot
<!DOCTYPE html>
<html lang="en">
  <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>
      table {
        border-collapse: collapse;
      }

      td,
      th {
        border: 1px solid #333;
        padding: 8px 16px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        热门股票
      </caption>
      <thead>
        <tr>
          <th>排名</th>
          <th>股票名称</th>
          <th>股票代码</th>
          <th>股票价格</th>
          <th>股票的涨跌</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>贵州茅台</td>
          <td>600519</td>
          <td>1800</td>
          <td>5%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>腾讯控股</td>
          <td>00700</td>
          <td>400</td>
          <td>3%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>五粮液</td>
          <td>000858</td>
          <td>160</td>
          <td>8%</td>
        </tr>
        <tr>
          <td>4</td>
          <td>东方财富</td>
          <td>300059</td>
          <td>25</td>
          <td>4%</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>其他</td>
          <td>其他</td>
          <td>其他</td>
          <td>其他</td>
          <td>其他</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

单元格合并

  • 单元格合并
    • 跨列合并
      • colspan
    • 跨行合并
      • rowspan
<!DOCTYPE html>
<html lang="en">
  <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>
      table {
        border-collapse: collapse;
      }

      td {
        border: 1px solid #f00;
        padding: 10px 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>1-1</td>
        <td>1-2</td>
      </tr>
      <tr>
        <td>2-1</td>
        <td>2-2</td>
      </tr>
    </table>
    <table>
      <tr>
        <td colspan="2">1-1</td>
      </tr>
      <tr>
        <td>2-1</td>
        <td>2-2</td>
      </tr>
    </table>
    <table>
      <tr>
        <td>1-1</td>
        <td rowspan="2">1-2</td>
      </tr>
      <tr>
        <td>2-1</td>
      </tr>
    </table>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <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>
      table {
        border-collapse: collapse;
      }

      td {
        border: 1px solid #f00;
        width: 120px;
        height: 40px;
        text-align: center;
        line-height: 40px;
      }

      table tr:nth-child(-n + 2),
      td[rowspan] {
        font-weight: 700;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="6">课程表</td>
      </tr>
      <tr>
        <td></td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
      </tr>
      <tr>
        <td rowspan="4">上午</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
      </tr>
      <tr>
        <td rowspan="4">下午</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
      </tr>
      <tr>
        <td rowspan="2">晚上</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
      </tr>
      <tr></tr>
    </table>
  </body>
</html>

input

input类型

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <!-- 行内替换元素 -->
    <div><input type="text" /></div>
    <div><input type="password" name="" id="" /></div>
    <div>
      <input type="time" name="" id="" />
    </div>
    <div>
      <input type="date" name="" id="" />
    </div>
    <div>
      <input type="file" name="" id="" />
    </div>
    <div>
      <input type="text" readonly />
    </div>
    <div>
      <input type="text" disabled />
    </div>
    <div>
      <input type="text" autofocus />
    </div>
  </body>
</html>

reset submit button

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <!-- <button>我是按钮</button>
    <input type="button" value="我是按钮" />
    <input type="reset" value="重置按钮" />
    <input type="submit" value="提交按钮" /> -->

    <form action="#">
      <input type="text" />
      <input type="date" name="" id="" />
      <div>
        <input type="button" value="我是按钮" />
        <button type="button">我是按钮</button>
      </div>
      <div>
        <input type="reset" value="重置按钮" />
        <button type="reset">重置按钮</button>
      </div>
      <div>
        <input type="submit" value="提交按钮" />
        <button type="submit">提交按钮</button>
      </div>
    </form>
  </body>
</html>

input和label

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <div>
      <label for="username">userName：</label>
      <input type="text" id="username" />
    </div>
    <div>
      <label for="password">passWord：</label>
      <input type="password" name="" id="password" />
    </div>
  </body>
</html>

radio

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <form action="/abc">
      <label for="male">男</label>
      <input type="radio" name="sex" value="male" id="male" />
      <label for="female">女</label>
      <input type="radio" name="sex" value="female" id="female" />
      <button type="submit">提交按钮</button>
    </form>
  </body>
</html>

checkbox

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <form action="/abc">
      <div>
        <h3>您的爱好：</h3>
        <input
          type="checkbox"
          name="hobby"
          id="basketball"
          value="basketball"
        />
        <label for="basketball">篮球</label>
        <input type="checkbox" name="hobby" id="football" value="football" />
        <label for="football">足球</label>
      </div>
      <!-- <button type="submit">提交</button> -->
      <input type="submit" value="提交" />
    </form>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <form action="/abc">
      <div>
        <h3>您的爱好：</h3>
        <input
          type="checkbox"
          name="hobby"
          id="basketball"
          value="basketball"
          checked
        />
        <label for="basketball">篮球</label>
        <input type="checkbox" name="hobby" id="football" value="football" />
        <label for="football">足球</label>
      </div>
      <!-- <button type="submit">提交</button> -->
      <input type="submit" value="提交" />
    </form>
  </body>
</html>

textarea

<!DOCTYPE html>
<html lang="en">
  <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>
      textarea {
        resize: none;
      }
    </style>
  </head>
  <body>
    <form action="/abc">
      <label for="info">个人信息</label>
      <textarea name="info" id="info" cols="30" rows="10"></textarea>
      <input type="submit" value="提交" />
    </form>
  </body>
</html>

option

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <select name="fruits" id="" multiple size="2">
      <option value="apple" selected>苹果</option>
      <option value="banana" selected>香蕉</option>
      <option value="orange">橘子</option>
    </select>
  </body>
</html>

form

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <form action="/lb" method="post" target="_blank">
      <div>
        <label for="username">
          用户：<input type="text" id="username" name="username" />
        </label>
      </div>
      <div>
        <label for="password">
          用户： <input type="password" name="password" id="password" />
        </label>
      </div>
      <div>
        性别：
        <label for="male">
          <input type="radio" name="sex" value="male" id="male" />
          男
        </label>
        <label for="female">
          <input type="radio" name="sex" value="female" id="female" />
          女
        </label>
      </div>
      <div>
        <h3>您的爱好：</h3>
        <label for="basketball">
          <input
            type="checkbox"
            name="hobby"
            id="basketball"
            value="basketball"
            checked
          />
          篮球
        </label>
        <label for="football">
          <input type="checkbox" name="hobby" id="football" value="football" />
          足球
        </label>
      </div>
      <input type="reset" value="重置" />
      <input type="submit" value="提交" />
    </form>
  </body>
</html>

模仿百度一下

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <form action="http://www.baidu.com/s">
      <input type="text" name="wd" />
      <button type="submit">百度一下</button>
    </form>
  </body>
</html>

Emmet语法

  • !
    • 快速生成html5骨架
  • >
    • 子代元素
  • +
    • 相邻兄弟元素
<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <!-- div>h1+p>span+strong>i -->
    <div>
      <h1></h1>
      <p>
        <span></span><strong><i></i></strong>
      </p>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <!-- ul>li*10 -->
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <!-- div>span+p+(h1>span+i)+p -->
    <div>
      <span></span>
      <p></p>
      <h1><span></span><i></i></h1>
      <p></p>
    </div>
    <!-- div>span+p+h1>span+i^p -->
    <div>
      <span></span>
      <p></p>
      <h1><span></span><i></i></h1>
      <p></p>
    </div>
    <!-- div>span+p+h1>span+i^^p -->
    <div>
      <span></span>
      <p></p>
      <h1><span></span><i></i></h1>
    </div>
    <p></p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <!-- header>div>p+span+footer -->
    <header>
      <div>
        <p></p>
        <span></span>
        <footer></footer>
      </div>
    </header>
    <!-- (header>div>p+span)+footer -->
    <header>
      <div>
        <p></p>
        <span></span>
      </div>
    </header>
    <footer></footer>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <a href="http://www.baidu.com">百度一下</a>
    <!-- a[href="http://www.baidu.com"]{百度一下} -->
    <a href="http://www.baidu.com">百度一下</a>
    <!-- ul>li*10 -->
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <!-- li>li{列表内容}*10 -->
    <li>
      <li>列表内容</li>
      <li>列表内容</li>
      <li>列表内容</li>
      <li>列表内容</li>
      <li>列表内容</li>
      <li>列表内容</li>
      <li>列表内容</li>
      <li>列表内容</li>
      <li>列表内容</li>
      <li>列表内容</li>
    </li>
    <!-- li>li{列表内容$}*10 -->
    <li>
      <li>列表内容1</li>
      <li>列表内容2</li>
      <li>列表内容3</li>
      <li>列表内容4</li>
      <li>列表内容5</li>
      <li>列表内容6</li>
      <li>列表内容7</li>
      <li>列表内容8</li>
      <li>列表内容9</li>
      <li>列表内容10</li>
    </li>
    <!-- #main -->
    <div id="main"></div>
    <!-- li>li{列表内容$$$}*10 -->
    <li>
      <li>列表内容001</li>
      <li>列表内容002</li>
      <li>列表内容003</li>
      <li>列表内容004</li>
      <li>列表内容005</li>
      <li>列表内容006</li>
      <li>列表内容007</li>
      <li>列表内容008</li>
      <li>列表内容009</li>
      <li>列表内容010</li>
    </li>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <!-- .box -->
    <div class="box"></div>
    <!-- #main -->
    <div id="main"></div>
    <!-- ul>.item{列表元素$}*5 -->
    <ul>
      <li class="item">列表元素1</li>
      <li class="item">列表元素2</li>
      <li class="item">列表元素3</li>
      <li class="item">列表元素4</li>
      <li class="item">列表元素5</li>
    </ul>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <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 {
        /* bd */
        border: 1px solid #000;
        /* fz10px */
        font-size: 10px;
        /* w20+h30+m40+p50 */
        width: 20px;
        height: 30px;
        margin: 40px;
        padding: 50px;
        /* m20-30-40-50 */
        margin: 20px 30px 40px 50px;
      }
    </style>
  </head>
  <body>
    <!-- .box -->
    <div class="box"></div>
    <!-- #main -->
    <div id="main"></div>
    <!-- ul>.item{列表元素$}*5 -->
    <ul>
      <li class="item">列表元素1</li>
      <li class="item">列表元素2</li>
      <li class="item">列表元素3</li>
      <li class="item">列表元素4</li>
      <li class="item">列表元素5</li>
    </ul>
  </body>
</html>

内容回顾

一、列表

1.1.三种列表

  • ol > li
  • ul > li
  • dl > dt >dd

1.2.列表案例

  • 总结思路

二、table元素

2.1.table常见

  • table
  • tr
  • td

2.2.案例练习

  • 股票表格
  • 课程表

2.3.table元素

  • thead
  • tbody
  • tfoot
  • caption
  • th

2.4.单元格

  • colspan
  • rowspan
  • 练习：课程表

2.5.作业

三、表单元素

3.1.常见元素

  • input
  • form
  • label
  • select/option
  • textarea

3.2.input元素

  • type
    • text
    • password
    • time
    • date
  • disabled/autofocus/readonly
  • mdn文档
  • boolean属性写法

3.3.input模拟按钮

  • 三种按钮
    • 普通
    • 重置
    • 提交
  • button

3.4.input和label结合

3.5.radio/checkbox

  • name
  • value

3.6.textarea/select/option

3.7.form表单

  • action 服务器地址
  • method
    • get/post
  • target
  • 模拟百度一下

四、emmet

  • 了解一下

课后作业

一. 完成课堂所有的代码

二. 自己查一个列表并且完成

三. 完成table的作业内容

e6c9d24egy1h0vps9hqn6j21cb0j0di4.jpg

四. 说出表单元素什么情况下使用name和value？

五. 说出form提交时的属性作用

  • action
  • method
  • target
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 193,968评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,682评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,254评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,074评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,964评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,055评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,484评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,170评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,433评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,512评论 2赞 308
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,296评论 1赞 325
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,184评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,545评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,150评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,437评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,630评论 2赞 335

推荐阅读更多精彩内容