高级元素

未深爱
198 阅读3分钟

[TOC]

高级元素

  • 列表元素
  • 表格元素
  • 表单元素

列表元素

列表的实现方式

  • 方案一: 使用 div 元素来实现(比如汽车之家, 知乎上的很多列表)
  • 方案二: 使用列表元素, 使用元素语义化的方式实现;

HTML 提供了 3 组常用的用来展示列表的元素

  • 有序列表：ol、li
  • 无序列表：ul、li
  • 定义列表：dl、dt、dd

有序列表 – ol – li

  • ol（ordered list）
    • 有序列表，直接子元素只能是 li
  • li（list item）
    • 列表中的每一项

无序列表 – ul - li

  • ul（unordered list）
    • 无序列表，直接子元素只能是 li
  • li（list item）
    • 列表中的每一项

定义列表 – dl – dt - dd

  • dl（definition list）
    • 定义列表，直接子元素只能是 dt、dd
  • dt（definition term）
    • term 是项的意思, 列表中每一项的项目名
  • dd（definition description）
    • 列表中每一项的具体描述，是对 dt 的描述、解释、补充
    • 一个 dt 后面一般紧跟着 1 个或者多个 dd

表格元素

在网页中, 对于某些内容的展示使用表格元素更为合适和方便

表格常见的元素

  • table
    • 表格
  • tr(table row)
    • 表格中的行
  • td(table data)
    • 行中的单元格

表格的其他元素

  • thead
    • 表格的表头
  • tbody
    • 表格的主体
  • tfoot
    • 表格的页脚
  • caption
    • 表格的标题
  • th
    • 表格的表头单元格

单元格合并

在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的 一个单元格可能会跨多行或者多列来使用;

表单元素

HTML 表单元素是和用户交互的重要方式之一, 在很多网站都需要使用表单:

常见的表单元素
  • form
    • 表单, 一般情况下，其他表单相关元素都是它的后代元素
  • input
    • 单行文本输入框、单选框、复选框、按钮等元素
  • textarea
    • 多行文本框
  • select、option
    • 下拉选择框
  • button
    • 按钮
  • label
    • 表单元素的标题
input 元素的使用

input 元素有如下常见的属性:

  • type：input 的类型
    • text：文本输入框（明文输入）
    • password：文本输入框（密文输入）
    • radio：单选框
    • checkbox：复选框
    • button：按钮
    • reset：重置
    • submit：提交表单数据给服务器
    • file：文件上传
  • readonly：只读
  • disabled：禁用
  • checked：默认被选中
    • 只有当 type 为 radio 或 checkbox 时可用
  • autofocus：当页面加载时，自动聚焦
  • name：名字
    • 在提交数据给服务器时，可用于区分数据类型
  • value：取值
input 和 label 的关系
  • label 元素一般跟 input 配合使用，用来表示 input 的标题
  • labe 可以跟某个 input 绑定，点击 label 就可以激活对应的 input 变成选中
<div>
  <label for="username"> 用户名： </label>
  <input type="text" id="username" name="username" />
</div>
radio 的使用

  • 我们可以将 type 类型设置为 radio 变成单选框:

    • name 值相同的 radio 才具备单选功能

      <div>
  <label for="man">男</label>
  <input id="man" type="radio" name="sex" value="man" />

  <label for="wuman">女</label>
  <input id="wuman" type="radio" name="sex" value="wuman " />
</div>
checkbox 的使用
  • 我们可以将 type 类型设置为 checkbox 变成多选框:
    • 属于同一种类型的 checkbox，name 值要保持一致
<div>
  爱好：
  <label for="game">游戏</label>
  <input type="checkbox" name="hobby" id="game" value="game" />

  <label for="book">读书</label>
  <input type="checkbox" name="hobby" id="book" value="book" />

  <label for="code">编码</label>
  <input type="checkbox" name="hobby" id="code" value="code" />

  <label for="shop">购物</label>
  <input type="checkbox" name="hobby" id="shop" value="shop" />
</div>
textarea 的使用

textarea 的常用属性:

  • cols：列数
  • rows：行数

缩放的 CSS 设置

  • 禁止缩放：resize: none;
  • 水平缩放：resize: horizontal;
  • 垂直缩放：resize: vertical;
  • 水平垂直缩放：resize: both;
下拉列表 select 和 option 的使用

option 是 select 的子元素，一个 option 代表一个选项

  • select 常用属性
    • multiple：可以多选
    • size：显示多少项
  • option 常用属性
    • selected：默认被选中
<div>
  <select name="book" id="book">
    <option value="a">书1</option>
    <option value="b">书2</option>
    <option value="c">书3</option>
    <option selected value="d">书4</option>
    <option value="e">书5</option>
  </select>
</div>
form 常见的属性

form 通常作为表单元素的父元素:

  • form 可以将整个表单作为一个整体来进行操作;
  • 比如对整个表单进行重置;
  • 比如对整个表单的数据进行提交;

form 常见的属性如下:

  • action
    • 用于提交表单数据的请求 URL
  • method
    • 请求方法（get 和 post），默认是 get
  • target
    • 在什么地方打开 URL（参考 a 元素的 target）
avatar
文章
阅读
粉丝