search

博客列表 >HTML中语义化元素的认知及链接、列表、表格、表单的使用

HTML中语义化元素的认知及链接、列表、表格、表单的使用

MUZILE
MUZILE原创
2020年04月05日 01:12:03969浏览

1、语义化元素

  • <h1> ~ <h6> : 划分段落
  • <header> : 页眉
  • <footer>：页脚
  • <main>：主体
  • <aside>：边栏
  • <section>：区块
  • <nav>：导航
  • <div>：通用容器

2、内联框架

  • html5 中只保留了内联框架元素<iframe>
  • 常用属性
属性 描述
src 框架中加载的页面 URL
srcdoc 直接赋值 html 代码
name 框架名称,与<a target=""配合
scrolling 是否显示滚动条, yes/no/auto
width 框架宽度
height 框架高度
frameborder 是否显示框架边框
marginheight 设置框架上下外边距
marginwidth 设置框架左右外边距

" class="reference-link">3、链接元素<a href=""></a>

  • <a> 标签定义文本超链接，用于从一个页面链接到另一个页面。

  • <a>标签常用属性

  • href属性值
  • href="url"：跳转的目标地址
  • href="mailto: 123@qq.com"：打开邮箱,往“123@qq.com”发送邮件
  • href="tel:13388**2345"：点击后,会询问用户是否要拨打电话
  • href="test.doc"：浏览器不能解析此文档，会直接下载此文档
  • taget属性值
  • taget规定在何处打开目标 URL。且仅在 href 属性存在时使用
属性 描述
target="__self" 当前窗口打开链接
target="_blank" 新窗口打开链接
target="_parent" 父窗口打开链接
target="_top" 顶层窗口打开链接
target="name" 指定名称的窗口, 与<iframe>元素配合
target="#anchor" 跳转到设置了锚点的元素所在位置
  • 代码演示：
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>链接</title>
    7. </head>
    8. <body>
    9.   <a href="http://www.php.cn" target="_blank">php中文网</a>
    10.   <!-- target:在另外一个页面打开 -->
    11.   <a href="0403.zip" download="0403html教程.zip">0403html教程</a>
    12.   <!-- download:自定义下载的文件名 -->
    13.   <a href="tel:1537713****">拨打电话</a>
    14.   <a href="mailto:123456789@qq.com">发送邮件</a>
    15.   <a href="#link">跳转到当前页的锚点</a>
    16.   <h4 id="link" style="margin-top: 1000px;">我是锚点</h4>
    17. </body>
    18. </html>

4、列表元素

  • 概念：列表(List)，就是在网页中将相关资料以条目的形式有序或者无序排列而形成的表。常用的列表有无序列表、有序列表和定义列表三种。
列表元素 描述
<ul> > <li> 无序列表
<ol> > <li> 有序列表
<dl> > <dt> > <dd> 自定义列表

  • 代码演示：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>列表</title>
    7. </head>
    8. <body>
    9.   <!-- 无序列表 -->
    10.   <ul>
    11.     <li>list1</li>
    12.     <li>list2</li>
    13.     <li>list3</li>
    14.     <li>list4</li>
    15.   </ul>
    16.   <!-- 有序列表 -->
    17.   <ol start="5">
    18.     <!-- start：从哪里开始 -->
    19.     <li>list</li>
    20.     <li>list</li>
    21.     <li>list</li>
    22.     <li>list</li>
    23.   </ol>
    24.   <!-- 自定义列表 -->
    25.   <dl>
    26.     <dt>html</dt>
    27.     <dd>超文本标记语言</dd>
    28.     <dd>超文本标记语言</dd>
    29.     <dt>css</dt>
    30.     <dd>层叠样式表</dd>
    31.     <dt>javascript</dt>
    32.     <dd>前端通用脚本语言</dd>
    33.   </dl>
    34. </body>
    35. </html>

  • 效果图：

5、表格元素

  • 表格是最重要的数据格式化展示重要工具, 使用频率非常高
  • 表格的数据,存储在由行与列组成的一系列单元格
  • 数据必须存储在单元格元素中
  • 与列表类似, 表格也是由一系列标签来描述

5.1 元素

序号 标签 描述 备注
1 <table> 定义表格, 必选
2 <tbody> 定义表格主体, 允许定义多次 必选
3 <tr> 定义表格中的行, 必选
4 <th> 定义表格头部中的单元格,默认加粗居中 必选
5 <td> 定义 g 表格 e 主体与底部的的单元格 必选
6 <caption> 定义表格标题, 可选
7 <thead> 定义表格头格, 只需定义一次 可选
8 <tfoot> 定义表格底, 只需定义一次 可选
9 <col> 为一个/多个列设置属性,仅限 可选
10 <colgroup> 将多个<col>元素分组管理 可选

5.2 属性

序号 属性 适用元素 描述
1 border <table> 添加表格框
2 cellpadding <table> 设置单元格内边距
3 cellspacing <table> 设置单元格边框间隙
4 align 不限 设置单元格内容水平居中
5 bgcolor 不限 设置背景色
6 width 不限 设置宽度
7 height 不限 设置高度

表格属性仅供参考,属选学内容, 推荐使用 CSS 设置表格样式

  • 代码演示：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表格</title>
  7.   </head>
  9.   <body>
  10.     <table
  11.       border="1"
  12.       cellpadding="5"
  13.       cellspacing="0"
  14.       width="500"
  15.       height="200"
  16.       align="center"
  17.     >
  18.       <colgroup bgcolor="lightpink">
  19.         <col />
  20.         <col bgcolor="lightgreen" />
  21.         <col bgcolor="yellow" span="2" />
  22.         <col />
  23.         <col />
  24.       </colgroup>
  25.       <caption style="font-size: 1.5rem; margin-bottom: 10px;">
  26.         员工信息表
  27.         <a href="#anchor">更多</a>
  28.       </caption>
  29.       <thead bgcolor="lightblue">
  30.         <th>部门</th>
  31.         <th>ID</th>
  32.         <th>姓名</th>
  33.         <th>职务</th>
  34.         <th>手机</th>
  35.       </thead>
  36.       <tbody>
  37.         <tr>
  38.           <td rowspan="3" align="center">技术部</td>
  39.           <td>1</td>
  40.           <td>小黄</td>
  41.           <td>经理</td>
  42.           <td>123456</td>
  43.         </tr>
  44.         <tr>
  45.           <td>2</td>
  46.           <td>小李</td>
  47.           <td>正式工</td>
  48.           <td>123456</td>
  49.         </tr>
  50.         <tr>
  51.           <td>3</td>
  52.           <td>小陈</td>
  53.           <td>实习生</td>
  54.           <td>123456</td>
  55.         </tr>
  56.       </tbody>
  57.       <tbody>
  58.         <tr>
  59.           <td rowspan="3" align="center">销售部</td>
  60.           <td>4</td>
  61.           <td>小张</td>
  62.           <td>经理</td>
  63.           <td>987654</td>
  64.         </tr>
  65.         <tr>
  66.           <td>5</td>
  67.           <td>小明</td>
  68.           <td>正式工</td>
  69.           <td>987654</td>
  70.         </tr>
  71.         <tr>
  72.           <td>6</td>
  73.           <td>小强</td>
  74.           <td>实习生</td>
  75.           <td>987654</td>
  76.         </tr>
  77.       </tbody>
  78.       <tfoot>
  79.         <tr bgcolor="lightred">
  80.           <td>备注：</td>
  81.           <td colspan="4">离职需提前一个月递交申请书</td>
  82.         </tr>
  83.       </tfoot>
  84.     </table>
  85.     <h3 style="margin-top: 1000px;" id="anchor">
  86.       学习请点击这里：<a href="http://www.php.cn" target="_blank">php中文网</a>
  87.     </h3>
  88.   </body>
  89. </html>
  • 效果图：

6、表单元素<form>

  • 表单分为表单元素与控件元素二部分
  • 表单元素仅一个: <form>
  • 表单控件元素,根据类型不同,有多个

6.1 常用属性

序号 属性 描述
1 action 表单提交的 URL 地址(处理表单请求的脚本)
2 method 表单提交类型:GET/POST
3 enctype 设置表单提交数据的编码方式
4 name 表单唯一名称,与 ID 同义
5 target 打开请求 URL 的方式,如果_blank

6.2 请求类型method

  • web 请求方式有二种: 超链接与表单提交
  • 超链接就是使用<a>标签发起请求,其实就是GET请求
  • 表单提交默认就是GET请求,但例用最多的是POST
  • 请求类型属性action的取值
序号 允许值 描述
1 GET 默认值,表单数据以请求参数形式通过 URL 提交, 数据量最大 2K
2 POST 表单数据放在请求体中发送,数据量更大也更安全

6.3 编码方式enctype

序号 允许值 适用场景 描述
1 application/x-www-form-urlencoded 接收value值 默认值,使用 URL 编码,GET/POST 均适合
2 multipart/form-data 文件上传 采用二进制流处理,会把文件域中的内容封装到请求参数中,适合
3 text/plain 电子邮件 如action="mailto:URL

6.4 表单名称name

序号 功能 描述
1 标识表单元素 与id一样,用来唯一标识该表单元素
2 绑定表单元素 用于表单控件元素的 form 属性,用来绑定所属表单
3 访问表单元素 快捷访问内部控件元素,如form.input.value

6.5 打开方式target

序号 允许值 描述
1 _self 默认值,当前窗口打开提交的 URL
2 _blank 新窗口打开提交的 URL
3 _parent 父窗口打开提交的 URL
4 _top 顶层窗口打开提交的 URL

7. 表单控件元素<input>

7.1 常用属性

序号 属性 描述
1 type 控件类型,如文本框, 复选框…
2 name 请求参数的名称,对应于脚本处理的变量名
3 value 请求参数的值,对应于脚本处理的变量值,使用预定义值控件无效
4 form 控件所属表单
5 placeholder 仅限输入框text和password,输入框的提示信息
6 list 仅限输入框text和password,下拉框智能提示
7 autocomplate 仅限输入框text和password,自动完成(历史记录)
8 maxlength 仅限输入框text/password, 允许输入最大字符数量
9 checked 仅限单选框radio, 复选框checkbox(布尔属性)
10 readonly 元素只读,但通过 JavaScript 可修改(布尔属性)
11 disabled 元素禁用,(布尔属性)
12 autofocus 自动获取焦点,一个表单仅限一个控件
13 src 仅限图像域images, 图像 URL 地址
14 width 仅限图像域images, 图像宽度
15 height 仅限图像域images, 图像高度

7.2 type类型

  • 常用类型
序号 类型 描述
1 <input type="text"> 单行文本框 (默认值)
2 <input type="password"> 密码输入框
3 <input type="radio"> 单选框
4 <input type="checkbox"> 复选框
5 <input type="image"> 图像域/提交表单
6 <input type="file"> 文件上传域
7 <input type="hidden"> 隐藏域
  • html5 新增类型
序号 类型 描述
1 <input type="email"> 电子邮件
2 <input type="data"> 日期
2 <input type="data"> 日期
4 <input type="datetime-local"> 本地日期时间
5 <input type="tel"> 电话号码
6 <input type="url"> URL 地址
7 <input type="number"> 数值
8 <input type="range"> 范围拖动条
9 <input type="search"> 搜索框/移动
10 <input type="color"> 拾色器

7.3 常用事件属性

序号 事件属性 描述
1 onfocus 获取焦点时触发
2 onblur 失去焦点时触发
3 onchange 失去焦点,且值发生变化时触发
4 oninput 值发生变化(不等失去焦点)时触发
5 onkeydown 按下键盘时触发
6 onkeyup 抬起键盘时触发
7 onclick 鼠标单击时触发
8 onselect 选择内容文本时触发

  • 代码演示：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>表单</title>
    8.   <style>
    9.     form {
    10.       padding: 20px;
    11.       width: 350px;
    12.       box-shadow: 0 0 8px #888;
    13.       border-radius: 10px;
    14.       box-sizing: border-box;
    15.       margin: auto;
    16.       background-color: lightskyblue;
    17.       display: grid;
    18.       gap: 20px;
    19.     }
    21.     form > section {
    22.       display: grid;
    23.       grid-template-columns: 60px 1fr;
    24.     }
    26.     h3 {
    27.       text-align: center;
    28.     }
    30.     input[type="image"] {
    31.       justify-self: center;
    32.     }
    33.   </style>
    34. </head>
    35. <body>
    36.   <h3>用户注册</h3>
    37.   <form action="">
    38.     <section>
    39.       <label for="username">用户名:</label>
    40.       <input
    41.         type="text"
    42.         name="username"
    43.         id="username"
    44.         maxlength="20"
    45.         placeholder="不少于6位"
    46.         required
    47.         autofocus
    48.       />
    49.     </section>
    50.     <section>
    51.       <label for="username">密码:</label>
    52.       <input
    53.         type="password"
    54.         name="password"
    55.         id="password"
    56.         placeholder="不少于8位"
    57.         size="10"
    58.         required
    59.       />
    60.     </section>
    62.     <section>
    63.       <label for="secret">性别:</label>
    64.       <div class="box">
    65.         <input type="radio" name="gender" id="male" value="male" /><label
    66.           for="male"
    67.           >男</label
    68.         >
    69.         <input type="radio" name="gender" id="female" value="female" /><label
    70.           for="female"
    71.           >女</label
    72.         >
    73.         <input
    74.           type="radio"
    75.           name="gender"
    76.           id="secret"
    77.           value="secret"
    78.           checked
    79.         /><label for="secret">保密</label>
    80.       </div>
    81.     </section>
    83.     <section>
    84.       <label for="programme">兴趣:</label>
    85.       <div class="box">
    86.         <input type="checkbox" name="bobby[]" id="game" value="game" /><label
    87.           for="game"
    88.           >游戏</label
    89.         >
    90.         <input
    91.           type="checkbox"
    92.           name="bobby[]"
    93.           id="travel"
    94.           value="travel"
    95.         /><label for="travel">旅游</label>
    96.         <input
    97.           type="checkbox"
    98.           name="bobby[]"
    99.           id="skateboard"
    100.           value="skateboard"
    101.           checked
    102.         /><label for="skateboard">滑板</label>
    103.         <input
    104.           type="checkbox"
    105.           name="bobby[]"
    106.           id="programme"
    107.           value="programme"
    108.           checked
    109.         /><label for="programme">编程</label>
    110.       </div>
    111.     </section>
    112.   </form>
    113. </body>
    114. </html>

  • 效果图：

上一条：表单元素与控件元素分析下一条：html基本文档结构和常用名词解释
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多