Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 链接元素、表单元素、表格元素、表单元素的使用举例
Blogger Information
Blog 36
fans 0
comment 0
visits 28229
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
链接元素、表单元素、表格元素、表单元素的使用举例
phpcn_u202398
Original
1258 people have browsed it

页面元素的使用

1、链接元素

1.1、链接元素

名称 语法 描述
<a> <a href="url">链接文本</a> 定义一个超级链接

1.2、<a>链接元素的常用属性

属性 描述 举例
href 指向链接页面的 URL href="www.baidu.com"
target 打开 URL 的页面来源 target="_self/_blank/_top/_parent"
download 自定义下载文件名 download="picture.jpg"
type 设置链接文档的 MIME 类型 type="image/jpeg"
1.2.1 href属性值
属性 描述
href="url" 跳转的目标地址
href="mailto: 112233@qq.com" 打开邮箱,发送邮件
href="tel:15388**1234" 点击后,会询问用户是否要拨打电话
href="HTML知识.md" 浏览器不能解析的文档, 会直接下载
1.2.2 target属性值
属性 描述
target="__self" 当前窗口打开链接
target="_blank" 新窗口打开链接
target="_parent" 父窗口打开链接
target="_top" 顶层窗口打开链接
target="name" 指定名称的窗口, 与<iframe>元素配合
target="#anchor" 跳转到设置了锚点的元素所在位置

1.3 代码实例

  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.     <!-- 默认在当前窗口打开_self, 现自定义为新窗口打开_blank -->
  11.     <a href="www.baidu.com" target="_parent">百度</a>
  12.     <!-- 浏览器不能直接解析markdown文档,所以会自动下载,下载的文件名可由download属性自定义 -->
  13.     <a href="html基础知识.md" download="HTML教案.md">html教程</a>
  14.     <!-- 拔打电话,会调用默认通信工具 -->
  15.     <a href="tel:15388**1234">联系电话</a>
  16.     <!-- 发送邮件,会调用本机电邮软件 -->
  17.     <a href="mailto: 112233@qq.com">邮箱地址</a>
  18.     <a href="#anchor">跳转到当前面中的锚点</a>
  19.     <h1 id="anchor" style="margin-top:1000px;">我是锚点</h1>
  20.   </body>
  21. </html>

2、列表元素

2.1、列表的基本概念

  • 1、将一组关联的数据集中展示,使用列表最合适

  • 2、列表分类：有序列表、无序列表、自定义列表

  • 3、如果列表中的每个项目顺序无关紧要, 例如:购物车, 可以使用无序列表来描述。 无序列表使用 <ul> 标签，每个列表项始于 <li> 标签
    无序列表代码实例
    1. <ul>
    2.  <li>HTML</li>
    3.  <li>PHP</li>
    4.  <li>JAVA</li>
    5. </ul>

  • 4、如果列表中的每个项目顺序非常重要, 例如:工作计划,可以使用有序列表来描述。 有序列表使用 <ol> 标签，每个列表项始于 <li> 标签

    有序列表代码实例
    1. <ol>
    2.  <li>HTML</li>
    3.  <li>PHP</li>
    4.  <li>JAVA</li>
    5. </ol>

  • 5、如果想给每一个列表项添加一个小标题, 例如联系方式,可以使用自定义列表来描述。 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

自定义列表代码实例
  1.  <dl>
  2.     <dt>甘肃</dt>
  3.       <dd>★ 兰州</dd>
  4.       <dd>☆ 天水</dd>
  5.       <dd>♥ 陇南</dd>
  6. </dl>

  • 可见, HTML 中的列表由列表与内部的列表项两部分组成,而这两部分是包含关系。
    所以, HTML 使用一组复合标签来描述列表,

2、图像元素

  • 当前文档的图像元素,仅仅是外部图片资源的占位符,只有解析时才会加载进来
  • 所以, 在确保用户可以看清的情况下, 图片体积越小越好, 以提升加载速度
  • 推荐使用可压缩的jpg格式, 小图片,或需要背景透明的,推荐使用png格式
  • 对于简单的动图,或者颜色要求较少的,可使用gif格式
  • 对于图标, 建议使用 css 字体图标,而不是使用图像图标
元素 描述
<img> 图片元素,空元素(单标签)
<figure> 图片/插图区域
<figcaption> 图片/插图区域的标题

2.1、 <img>标签常用属性

属性 描述
src 图片来源地址, 可以是本地, 也可以是来自网络
alt 图片描述信息, 当图片无法显示时, 显示该信息, 也可以为无障碍阅读器所识别
width/height 图片大小, 宽高只需设置一个,另一个会等比缩放, 推荐使用 css 设置

2.2代码实例

  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.     <figure>
  11.       <figcaption>美丽的春天</figcaption>
  12.       <img src="spring1.jpg" alt="挑花" width="300" height="300">
  13.       <img src="spring2.jpg" alt="樱桃花 " width="300" height="300">
  14.       <img src="spring3.jpg" alt="油菜花" width="300" height="300">
  15.     </figure>
  16.   </body>
  17. </html>

3、表格元素

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

3.1、元素

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

3.2、属性

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

3.3、代码实例

  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. <table width="500" border="1" cellspacing="0" cellpadding="5"   align="center">   
  10.       <colgroup bgcolor="lightblue">        
  11.         <col />        
  12.         <col bgcolor="green" />        
  13.         <col bgcolor="yellow"  />       
  14.         <col />        
  15.         <col />
  16.       </colgroup>
  17.        <caption style="font-size: 1.5rem;margin-bottom: 10px;">
  18.         员工信息表
  19.       </caption>     
  20.       <thead bgcolor="#ccc" align="center">
  21.         <td >序号</td>
  22.         <td>姓名</td>
  23.         <td >性别</td>
  24.         <td >年龄</td>
  25.         <td >电话</td>
  26.       </thead>
  27.     <tbody>        
  28.         <tr>            
  29.             <td> </td>
  30.             <td> </td>
  31.             <td> </td>
  32.             <td> </td>
  33.             <td> </td>
  34.         </tr>
  35.         <tr>            
  36.             <td> </td>
  37.             <td> </td>
  38.             <td> </td>
  39.             <td> </td>
  40.             <td> </td>
  41.         </tr>
  42.       </tbody>   
  43.       <tfoot>
  44.         <tr bgcolor="pink">            
  45.             <td>备注：</td>
  46.             <td colspan="4"> </td>            
  47.         </tr>
  48.       </tfoot>
  49. </table>
  50. </body>
  51. </html>

" class="reference-link">

4、表单与控件元素

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

4.1、表单元素<form>

4.1.1、 常用属性
序号 属性 描述
1 action 表单提交的 URL 地址(处理表单请求的脚本)
2 method 表单提交类型:GET/POST
3 enctype 设置表单提交数据的编码方式
4 name 表单唯一名称,与 ID 同义
5 target 打开请求 URL 的方式,如果_blank
4.1.2、 请求类型method
  • web 请求方式有二种: 超链接与表单提交
  • 超链接就是使用<a>标签发起请求,其实就是GET请求
  • 表单提交默认就是GET请求,但例用最多的是POST
  • 请求类型属性action的取值
序号 允许值 描述
1 GET 默认值,表单数据以请求参数形式通过 URL 提交, 数据量最大 2K
2 POST 表单数据放在请求体中发送,数据量更大也更安全
4.1.3 编码方式enctype
序号 允许值 适用场景 描述
1 application/x-www-form-urlencoded 接收value值 默认值,使用 URL 编码,GET/POST 均适合
2 multipart/form-data 文件上传 采用二进制流处理,会把文件域中的内容封装到请求参数中,适合
3 text/plain 电子邮件 如action="mailto:URL
4.1.4 表单名称name
序号 功能 描述
1 标识表单元素 与id一样,用来唯一标识该表单元素
2 绑定表单元素 用于表单控件元素的 form 属性,用来绑定所属表单
3 访问表单元素 快捷访问内部控件元素,如form.input.value
4.1.5 打开方式target
序号 允许值 描述
1 _self 默认值,当前窗口打开提交的 URL
2 _blank 新窗口打开提交的 URL
3 _parent 父窗口打开提交的 URL
4 _top 顶层窗口打开提交的 URL

4.2、 表单控件元素<input>

4.2.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, 图像高度
4.2.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"> 拾色器
4.2.3 常用事件属性
序号 事件属性 描述
1 onfocus 获取焦点时触发
2 onblur 失去焦点时触发
3 onchange 失去焦点,且值发生变化时触发
4 oninput 值发生变化(不等失去焦点)时触发
5 onkeydown 按下键盘时触发
6 onkeyup 抬起键盘时触发
7 onclick 鼠标单击时触发
8 onselect 选择内容文本时触发
4.2.4、代码实例
  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>表单之input</title>
  7.   </head>
  8.   <body >
  9.     <form  action=""   method="post"  id="register"  style="font-size:18px;background-color: lightskyblue;width:350px;height: 300px;"   >     
  10.        <h3 style="font-size: 18px;margin-top:15px;margin-left: 10px;">用户注册</h3>
  11.         <section style="margin-top: 20px;margin-left: 20px;" >
  12.         <label for="username">用户名:</label>
  13.         <input  type="text"  name="username"  id="username"  maxlength="20"   placeholder="不少于6位"  required  autofocus     />
  14.       </section>
  15.       <section style="margin-top: 10px;margin-left: 20px;">
  16.         <label for="password">密   码:</label>
  17.         <input  type="password"   name="password"   id="password"    placeholder="不少于8位"    required />
  18.       </section>
  19.       <section style="margin-top: 10px;margin-left: 20px;">
  20.         <label for="male">性   别:</label>
  21.         <div>
  22.           <input type="radio" name="gender" id="male" value="male" />
  23.           <label for="male" >男</label >
  24.           <input type="radio" name="gender" id="female" value="female" />
  25.           <label  for="female"  >女</label >
  26.         </div>
  27.       </section>
  28.       <section style="margin-top: 10px;margin-left: 20px;">
  29.         <label for="programme">兴   趣:</label>
  30.         <div>          
  31.           <input type="checkbox" name="hobby[]" id="game" checked />
  32.           <label    for="game" >看书</label>
  33.           <input type="checkbox" name="hobby[]" id="travel" checked />
  34.           <label   for="travel">体育运动</label>
  35.           <input   type="checkbox"  name="hobby[]"  value="shoot" id="shoot"/>
  36.           <label for="shoot">摄影</label>
  37.           <input type="checkbox"  name="hobby[]" value="programme" id="programme" checked>
  38.           <label for="programme">编程</label>
  39.         </div>
  40.       </section>      
  41.     </form>    
  42.   </body>
  43. </html>

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：很认真
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post