一叶知秋

外观

001

02_列表 + 表格 + 表单 + 无语义 ​

01_列表 ​

01_无序列表 + 有序列表 + 定义列表 ​

01_列表

作用: 布局内容排列整齐的区域

列表分类: 无序列表, 有序列表, 定义列表

002

02_无序列表

作用: 布局排列整齐的 不需要规定顺序 的区域

标签: ul 嵌套 li, ul 是无序列表, li 是列表条目

003

注意事项:

  • ul 标签里面只能包裹 li 标签
  • li 标签里面可以包裹任何内容
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.无序列表: ul 标签里面只能包裹 li 标签, li 标签里面可以包裹任何内容 -->
  <ul>
    <li>列表条目1</li>
    <li>列表条目2</li>
    <li>列表条目3</li>
  </ul>
</body>

</html>

03_有序列表

作用: 布局排列整齐的 需要规定顺序 的区域

标签: ol 嵌套 li, ol 是有序列表, li 是列表条目

004

注意事项:

  • ol 标签里面只能包裹 li 标签
  • li 标签里面可以包裹任何内容
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.有序列表: ol 标签里面只能包裹 li 标签, li 标签里面可以包裹任何内容 -->
  <ol>
    <li>步骤1</li>
    <li>步骤2</li>
    <li>步骤3</li>
  </ol>
</body>

</html>

04_定义列表

标签: dl 嵌套 dt 和 dd, dl 是 定义列表, dt 是定义列表的 标题, dd 是定义列表的 描述 / 详情

005

注意事项:

  • dl 里面只能包含 dt 和 dd
  • dt 和 dd 里面可以包含任何内容
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.定义列表: dl 里面只能包含 dt 和 dd, dt 和 dd 里面可以包含任何内容 -->
  <dl>
    <dt>服务中心</dt>
    <dd>申请售后</dd>
    <dd>售后政策</dd>
  </dl>
</body>

</html>

02_表格 ​

01_基本用法 ​

01_基本用法

网页中的表格与 Excel 表格类似, 用来 展示数据

006

标签: table 嵌套 tr , tr 嵌套 td / th

007

提示: 在网页中, 表格默认没有边框线, 使用 border 属性可以为表格添加边框线

html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.table 表格 -->
  <table border="1">
    <!-- 2.tr: 行; th: 表头单元格 -->
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>

    <!-- 3.tr: 行; td: 内容单元格 -->
    <tr>
      <td>张三</td>
      <td>99</td>
      <td>100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <td>100</td>
      <td>198</td>
    </tr>
    <tr>
      <td>总结</td>
      <td>全市第一</td>
      <td>全市第一</td>
      <td>全市第一</td>
    </tr>
  </table>
</body>

</html>

02_表格结构标签

作用: 用表格结构标签把内容划分区域, 让表格结构更清晰, 语义更清晰

008
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table border="1">
    <!-- 1.thead: 表格头部 -->
    <thead>
      <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>
      </tr>
    </thead>

    <!-- 2.tbody: 表格主体 -->
    <tbody>
      <tr>
        <td>张三</td>
        <td>99</td>
        <td>100</td>
        <td>199</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>98</td>
        <td>100</td>
        <td>198</td>
      </tr>
    </tbody>

    <!-- 3.tfoot: 表格底部 -->
    <tfoot>
      <tr>
        <td>总结</td>
        <td>全市第一</td>
        <td>全市第一</td>
        <td>全市第一</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>

02_合并单元格 ​

01_合并单元格

作用: 将 多 个单元格合并成一个单元格, 以 合并同类信息

009

合并单元格的步骤:

  1. 明确合并的目标
  2. 保留 最左最上 的单元格, 添加属性 (取值是 数字, 表示 需要合并的单元格数量)
    1. 跨行合并, 保留 最上 单元格, 添加属性 rowspan
    2. 跨列合并, 保留 最左 单元格, 添加属性 colspan
  3. 删除其他单元格
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>张三</td>
        <td>99</td>
        <!-- 1.跨行合并, 保留 最上 单元格, 添加属性 rowspan -->
        <td rowspan="2">100</td>
        <td>199</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>98</td>
        <!-- <td>100</td> -->
        <td>198</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>总结</td>
        <!-- 2.跨列合并, 保留 最左 单元格, 添加属性 colspan -->
        <td colspan="3">全市第一</td>
        <!-- <td>全市第一</td> -->
        <!-- <td>全市第一</td> -->
      </tr>
    </tfoot>
  </table>
</body>

</html>

03_表单 ​

01_input 标签 ​

01_表单

作用: 收集用户信息

使用场景:

  • 登录页面
  • 注册页面
  • 搜索区域
010

02_input 标签基本使用

011

input 标签 type 属性值不同, 则功能不同

012
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.type="text" 文本框 特点: 输入什么就显示什么, 用于输入单行文本 -->
  文本框: <input type="text"><br><br>

  <!-- 2.type="password" 密码框 特点: 输入什么都是以 点 的形式显示 -->
  密码框: <input type="password"><br><br>

  <!-- 3.type="radio" 单选框 -->
  单选框: <input type="radio"><br><br>

  <!-- 4.type="checkbox" 多选框 -->
  多选框: <input type="checkbox"><br><br>

  <!-- 5.type="file" 上传文件 -->
  上传文件: <input type="file">
</body>

</html>

03_input 标签占位文本

占位文本: 提示信息

文本框 和 密码框 都可以使用

013
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.placeholder="提示信息": 文本框 和 密码框 都可以使用 -->
  文本框: <input type="text" placeholder="请输入用户名"><br><br>
  密码框: <input type="password" placeholder="请输入密码">
</body>

</html>

04_单选框 radio

常用属性:

014
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  性别:
  <!-- 1.name 属性值相同 是同一组, 同组只能选中一个 -->
  <input type="radio" name="gender"> 男

  <!-- 2.checked 默认选中 -->
  <input type="radio" name="gender" checked> 女
</body>

</html>

05_上传文件 file

默认情况下, 文件上传表单控件只能上传一个文件, 添加 multiple 属性可以实现 文件多选 功能

015
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.multiple 文件多选 -->
  上传文件: <input type="file" multiple>
</body>

</html>

06_多选框 checkbox

多选框也叫 复选框

默认选中: checked

016
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  兴趣爱好:
  <!-- 1.多选框 checkbox -->
  <input type="checkbox"> 敲代码

  <!-- 2.checked 默认选中 -->
  <input type="checkbox" checked> 敲前端代码
  <input type="checkbox" checked> 敲前端 HTML 代码
</body>

</html>

02_下拉菜单 ​

01_下拉菜单

017

标签: select 嵌套 option, select 是下拉菜单整体, option 是下拉菜单的每一项

018
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  城市:
  <!-- 1.下拉菜单: select 嵌套 option, select 是下拉菜单整体, option 是下拉菜单的每一项 -->
  <select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>

    <!-- 2.selected 默认选中 -->
    <option selected>武汉</option>
  </select>
</body>

</html>

03_文本域 ​

01_文本域

作用: 多行 输入文本的表单控件

019

标签: textarea, 双标签

020
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.文本域: 右下角有拖拽功能, 未来都会禁用的; 未来工作中, 用 CSS 设置尺寸 -->
  <textarea>请输入评论</textarea>
</body>

</html>

04_label 标签 ​

01_label 标签

作用: 网页中, 某个标签的说明文本

021

经验: 用 label 标签绑定文字和表单控件的关系, 增大表单控件的点击范围

022

02_增大点击范围

写法一

  • label 标签 只 包裹 内容, 不包裹表单控件
  • 设置 label 标签的 for 属性值和表单控件的 id 属性值 相同
023

写法二

  • 使用 label 标签 包裹文字和表单控件, 不需要属性
024

提示: 支持 label 标签增大点击范围的表单控件: 文本框, 密码框, 上传文件, 单选框, 多选框, 下拉菜单, 文本域 等等

html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  性别: 
  <!-- 1.label 标签 只 包裹 内容, 不包裹表单控件; 设置 label 标签的 for 属性值和表单控件的 id 属性值 相同 -->
  <input type="radio" name="gender" id="man"> <label for="man">男</label>

  <!-- 2.使用 label 标签 包裹文字和表单控件, 不需要属性 -->
  <label><input type="radio" name="gender">女</label>
</body>

</html>

05_按钮 ​

01_按钮 button

025

type 属性值:

026
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 4.form 表单区域; action 发送数据的地址 -->
  <form action="">
    用户名: <input type="text"><br><br>
    密码: <input type="password"><br><br>

    <!-- 1.type="submit": 提交按钮, 点击后可以提交数据到后台 (默认功能) -->
    <button type="submit">提交</button>

    <!-- 2.type="reset": 重置按钮, 点击后将表单控件恢复默认值 -->
    <button type="reset">重置</button>

    <!-- 3.type="button": 普通按钮, 默认没有功能, 一般配合 JavaScript 使用 -->
    <button type="button">普通按钮</button>
  </form>
</body>

</html>

04_无语义 ​

01_div 标签 + span 标签 + 字符实体 ​

01_div 标签 + span 标签

作用: 布局网页 (划分网页区域, 摆放内容)

  • div: 独占一行
  • span: 不换行
027
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.div: 大盒子, 独占一行 -->
  <div>这是 div 标签</div>
  <div>这是 div 标签</div>

  <!-- 2.span: 小盒子, 不换行 -->
  <span>这是 span 标签</span>
  <span>这是 span 标签</span>
</body>

</html>

02_字符实体

作用: 在网页中 显示预留字符

028
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.在代码中敲键盘的空格, 网页只识别一个 -->
  乾坤未定, 你我皆是黑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;马。

  <!-- 2.<p> -->
  &lt;p&gt;
</body>

</html>

05_综合案例 ​

01_体育新闻列表 ​

01_体育新闻列表

029
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>
      <img src="./images/1.jpg" alt="">
      <h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
    </li>
    <li>
      <img src="./images/2.jpg" alt="">
      <h3>梅州主帅: 申花有强有力的教练组 球员体能水平高</h3>
    </li>
    <li>
      <img src="./images/3.jpg" alt="">
      <h3>马德兴: 00 后球员将首登亚洲舞台 调整心态才务实</h3>
    </li>
  </ul>
</body>

</html>

02_注册信息 ​

01_注册信息

030
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>注册信息</h1>
  <form action="">
    <!-- 1.个人信息 -->
    <h2>个人信息</h2>
    <label>姓名: </label><input type="text" placeholder="请输入真实姓名"><br><br>
    <label>密码: </label><input type="password" placeholder="请输入密码"><br><br>
    <label>确认密码: </label><input type="password" placeholder="请输入确认密码"><br><br>

    <label>性别: </label>
    <label><input type="radio" name="gender"> 男</label>
    <label><input type="radio" name="gender" checked> 女</label><br><br>

    <label>居住城市: </label>
    <select>
      <option>北京</option>
      <option>上海</option>
      <option>广州</option>
      <option>深圳</option>
      <option>武汉</option>
    </select>

    <!-- 2.教育经历 -->
    <h2>教育经历</h2>
    <label>最高学历: </label>
    <select>
      <option>博士</option>
      <option>硕士</option>
      <option>本科</option>
      <option>大专</option>
    </select><br><br>

    <label>学校名称: </label><input type="text"><br><br>
    <label>所学专业: </label><input type="text"><br><br>

    <label>在校时间: </label>
    <select>
      <option>2015</option>
      <option>2016</option>
      <option>2017</option>
      <option>2018</option>
    </select>
    --
    <select>
      <option>2019</option>
      <option>2020</option>
      <option>2021</option>
      <option>2022</option>
    </select>

    <!-- 3.工作经历 -->
    <h2>工作经历</h2>
    <label>公司名称: </label><input type="text"><br><br>

    <label>工作描述: </label><br>
    <textarea></textarea><br><br>

    <!-- 4.协议 和 按钮 -->
    <input type="checkbox"><label>已阅读并同意以下协议: </label>
    <ul>
      <li><a href="#">《用户服务协议》</a></li>
      <li><a href="#">《隐私政策》</a></li>
    </ul><br>

    <button>免费注册</button>
    <button type="reset">重新填写</button>
  </form>
</body>

</html>

更新时间: