Web前端线上系统课-01-HTML+CSS/07-高级元素之列表-表单-表格

最新推荐文章于 2024-07-10 23:34:24 发布
最新推荐文章于 2024-07-10 23:34:24 发布
阅读量455 收藏
点赞数
文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coderlb/article/details/124178928
版权

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

水平居中回顾

<!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的作业内容

作业

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

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

  • action
  • method
  • target
coderlb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html在线表格样式模板,HTML5+CSS3 表格设计（Table）
weixin_28681379的博客
06-02 2036
HTML5+CSS3 表格设计(Table)2018-09-16CSS样式：[css]view plaincopybody{width:600px;margin:40pxauto;font-family:"trebuchetMS","Lucidasans",Arial;font-size:14px;color:#444;}table{*border-collapse:...
html 在线表格,HTML 表格
weixin_34089871的博客
05-31 262
HTML表格(Tables)HTML 表格例子:FirstnameLastnamePointsJackWoo90EveJackson94JohnDoe80AdamJohnson67亲自试一试 - 例子基本的表格示例演示了如何创建一个基本的表格有边框的表格示例演示了如何给表格添加边框收缩边框的表格示例演示了如何创建收缩的边框的表格HTML 表格(Tables)表单的定义表示是表格由行组成，标签是(t...
在线 html 表格控件,HTML 表格
weixin_35529208的博客
06-02 478
HTML 表格除了图像、多媒体这种丰富的交互效果之外，网页中还经常会用到通讯录、统计报表这种格式化的交互效果，这时候就用到了表格元素。1. 创建一个简单的表格网页中定义表格使用 table 标签，它是一个闭合标签，所有内容都放在 table 的起始标签和结束标签内。在表格中定义一行数据使用 tr 标签，表格的单元格内容放在 tr 标签内，单元格又分为表头 th 和表格单元格 td。基本表格结构如下...
在线画html表格,网页表格的各种画法（Html代码）
weixin_39682560的博客
06-08 862
网页表格的各种画法(Html代码)2018-11-28博客首页更多日志精彩相册加为博友问题咨询一、表格中单元格之间分隔线的隐藏方法第一行第二行第三行这个表格去掉了单元格之间的纵向分隔线第第第一二三列列列这个表格去掉了单元格之间的横向分隔线横线竖线都没了这个表格去掉了单元格之间的纵向分隔线和横向分隔线其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，...
html 表单在线生成,Wufoo-Wufoo网址:自定义在线表格和表单生成器
weixin_36459547的博客
06-04 556
原标题：Wufoo-Wufoo网址:自定义在线表格和表单生成器Wufoo更是一款专业的线上表单产生器，当你透过Wufoo制作一个表单后，只需要透过网址来发送或是内嵌到网站里，建立在线表格可能很困难，Wufoo让一切变得简单。wufoo Wufoo的功能表单模板从400多个模板中选择。正是您想要的方式。准备进行定制。报告中创建由您自己的图形，图表和关键指标组成的动态可视化。自订规则使用规则创建将遵循...
PHIP HTML驾校在线管理系统后端- PHP .
06-17
它包含网格系统、导航栏、表单、按钮、模态框等众多元素，大大简化了页面布局和交互设计的工作。 **Layui** 是一个轻量级的中国本土化前端UI框架，特别适合于后台管理系统的设计。Layui强调简洁、优雅的代码风格，...
毕业设计-校园二手物品交易平台前端,主要使用Vue，Element-Plus。.zip
10-20
本项目“毕业设计-校园二手物品交易平台前端”采用现代Web开发技术Vue.js和Element-Plus框架，旨在提供一个高效、易用且功能丰富的线上交易环境。本文将详细阐述这一平台的前端实现过程和技术要点。 Vue.js是当前...
学校实训毕业商用项目-绿色蔬菜类网站源码-含手机端同步.zip
09-04
学习者可以通过查看HTML源码了解元素嵌套、属性使用、表格、表单等元素的编写方法。 3. **前端开发**：前端开发涵盖了用户在浏览器上看到和交互的所有内容。在这个项目中，前端开发者可能使用了Bootstrap、Vue.js或...
php student -学籍管理系统1.zip
12-25
对于线上系统，还需要考虑负载均衡、数据备份和恢复等运维问题。 总的来说，PHP学籍管理系统是一个集成了数据库设计、后端开发、前端交互和服务器部署的综合项目。它不仅要求开发者具备扎实的PHP编程基础，还需要...
Initial-gym-form:用户将填写初始表格以添加他们的体育馆
03-28
在IT行业中，构建一个线上平台让用户能够方便地添加和管理自己的健身房信息是非常常见的需求。"Initial-gym-form"项目就是这样一个实例，它涉及到的核心技术是PHP，这是一种广泛使用的后端编程语言，尤其适合构建Web...
html在线表格样式模板,纯css实现的table表格样式，教程站常用
weixin_39781550的博客
06-02 1635
本文介绍一个table表格样式，是一种很友好的看着很舒服的表格样式，常见用于教程站里。这也是是个十分通用的table表格样式，可以说大部分网页都适用。效果图如下table表格样式代码分析css代码table.dataintable {margin-top:15px;border-collapse:collapse;border:1px solid #aaa;width:100%;}table.da...
html表格详解
巴萨，足球的艺术
07-27 1527
html表格详解 2010-08-28 17:49HTML表格用表示。一个表格可以分成很多行(row)，用表示；每行又可以分成很多单元格(cell)，用表示。这三个Tag是创建表格最常用的Tag。 两行(Row)三列(Column)的表格100200300400500600bor
（前端）HTML之表格
weixin_65479202的博客
04-21 1608
在HTML中学习表格非常有必要，表格的使用比较常见也很广泛！！！
html表格展开格式,4款简单常见的纯CSS表格(table)样式
weixin_35851482的博客
05-31 2718
本文介绍4款简单常见的纯CSS表格(table)样式。1、默认表格(default table)添加pure-table类样式化表格，此类向表元素添加填充(padding)和边框(borders)，并使表头突出。默认表格html代码html>Table_SimpleCSSforHTMLtableshtml{font-family:sans-serif;-ms-text-size...
在html5中表格的炫酷效果,10个炫酷实用的HTML5图表动画应用
weixin_31699893的博客
06-03 1220
原标题：10个炫酷实用的HTML5图表动画应用今天我们要来分享另外一种类型的HTML5动画：HTML5图表应用。图表在网页中应用十分广泛，尤其是后台的统计功能，更能体现出图表的强大之处。本文将介绍一些比较实用的HTML5图表动画，有些结合jQuery，有些是直接基于Canvas，一起来看看吧。1、超酷HTML5 Canvas图表应用Chart.js之前我们已经为大家分享过很多HTML5图表应用了，...
HTML 做个漂亮的表格
dhxb45678的博客
01-28 1万+
本期我们主要讲述怎样做一个简单漂亮的表格，外加一点关于 表格 这方面的一些笔记和注意点。 目录 相关笔记 一、基本结构 二、相关属性（可以直接写在标签里） 三、合并单元格 实践：做一个 biu特佛 的表格 相关笔记 一、基本结构 <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th..
html之表格详解及table表格实现页面布局
weixin_49855251的博客
01-18 1万+
html表格 1、table>标签：声明一个表格，它的常用属性如下： border属性 定义表格的边框，设置值是数值 cellpadding属性 定义单元格内容与边框的距离，设置值是数值 cellspacing属性 定义单元格与单元格之间的距离，设置值是数值 align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right 2、tr>标签：定义表格中的一行 3、和th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们
HTML基础 - HTML表格
热门推荐
qq_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
最新发布
uu0216的博客
07-10 1232
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
Web前端设计与开发技术-课件-第7章制作表单页面完整.pptx
11-14
Web前端设计与开发技术-课件-第7章制作表单页面完整.pptx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值