HTML5基础知识:与访问者互动

首先介绍 HTML5 中新增加的标记和页面的组织,提供有关 Web 页面设计的高级信息、表单的创建、API 的使用和价值,以及 Canvas 提供的种种创新可能性。第 2 部分介绍 HTML5 表单控件的概念,并简单介绍了 JavaScript 和 CSS3 的作用。

管理、数据分析、营销策略和企业级机构的其他功能都很重要。然而,如果没有一个您潜在客户可使用的(或愿意使用)成功数字窗口,则站点访问者转换开发的必要初始流程将缺失。一个积极且用户友好的体验可以提高工作所需的交互性,是机构的主要目标。

交互的核心是该站点的表单。它们能促进与用户的互动交流,因此可以通过转换站点访问者来加快推进网站建设这个目标。表单是促进网站所有者或代理与网站用户之间交互的核心因素,正因为如此,它们对于站点的设计和开发极端重要。

该核心的中心可以在控件中找到,单选按钮、复选框、文本框和数字微调框等。这些元素在网站用户与站点的对话中是必不可少的。换句话说,如果没有全功能的控件(无论是控件的 “机械” 操作,还是给定任务控件的适当性),就不可能有任何对话,因此,不会有潜在的转换。

当务之急是对转换过程中的关系加以仔细考虑,包括站点访问者和在用系统之间的交互的各个方面。验证、输入、识别、导航、页面加载的速度,以及页面如何设置等,均会影响转换过程。验证的改进和增强,所提供更多种类的表单控件选项,以及 HTML5 规范的总体多媒体性质,均有助于提高 HTML5 将站点访问者转化为实际站点用户的效力。

HTML5 是验证和保证基于 Web 计算良好执行的非常有力的工具,一个关键的安全资产。它对于为了吸引顾客的网站设计和开发尤其重要。因此,其使用对于维持健康的转化率是必不可少的。如果您无法描绘前景,您就麻烦了;如果不能转换您所描绘的前景,等待您的就是硬着陆。

HTML5 为您提供了帮助。如 email 和 telephone 等 HTML5 类型促进了广泛的通信选项。结合来自 HTML5 的语义基础的结构清晰,使您和世界其他人之间的清晰对话并没有障碍。

在我们这个以网络为中心的世界里,日益增加的随机性全球经济忙碌步伐、云计算的快速发展、移动技术使用呈指数增长,以及跨平台的电信解决方案(商用和社交),很明显,我们正站在一个基于 Web 计算和通信的勇敢新世界的门槛。这个新世界既代表功能,也代表诸多通信和 IT 元素,以及对竞争激烈的全球社会需求之间不断发展的密切结合所产生的衍生物。

设计表单

在 HTML5 中,表单已进行了重大改造。以前需要 JavaScript 编码的若干项任务现在已经不需要编码就能轻松地执行。本文的表单示例分析了 HTML5 的表单创新套件的使用。在这个过程中的第一步,当然是规划表单。

您将开发的表单示例的布局如图 1 所示。您将开发表单页面的三个区域:页眉 (Header) 区、表单 (Form) 区和页脚 (Footer) 区。页眉区包含了打包在 <header></header> 标记中的页面标题和副标题。在页面底部,页脚区包含 <footer></footer> 标记中的版权信息。我已在本系列 HTML5 基础知识,第 1 部分 提供的示例中讨论过页眉区和页脚区:如果您尚未熟悉 <header> 和 <footer> 标记,请参阅该文章。

图 1. 表单页面布局

关于该表单的讨论主要集中在四个标记:

<form> <fieldset> <label> <input>

在 HTML5 中,已向 <form> 标记添加了两个新的属性:autocomplete 和 novalidate。autocomplete 属性支持像 Google 等站点上出现的下拉建议列表。novalidate 属性关闭表单的验证,这在测试过程中很有有用。

<fieldset> 标记拥有三个新属性:disable、name 和 form。disable 属性禁用 <fieldset>。name 属性设置 <fieldset> 的名称。form 属性值是 <fieldset> 所属的一个或多个表单的 ID。在 HTML5 中,一个 <fieldset> 可以在其所属的一个或多个表单的外部。当 <fieldset> 被放在表单外部时,您必须设置 <fieldset> 标记的 form 属性,使 <fieldset> 可以与一个或多个正确的表单关联。

<label> 标记定义输入元素的类别,它有一个新属性:form。form 属性值是 <label> 所属的一个或多个表单的 ID。<label> 标记也可以被放在表单的外部,即 form 属性在这里也用于关联 <label> 和相应的表单。

<input> 标记拥有若干个新类型以及属性,可以增强表单的可用性。HTML5 引入了大量旨在组织和分类数据的新输入类型,复制 HTML5 的整体语义方法。形式应该服从功能这句老话,对于描述 HTML5 的表单功能非常合适。

在 HTML5 中,表单的 <input> 字段可以在 <form> 标记外部。form 属性标识输入字段所属的一个或多个表单。它也通过引用表单的 ID 标识它所属的表单。表 1 显示新的 <input> 类型。

表 1. 新的 <input> 类型

color date datetime datetime-local month week time email number range search tel url

表 2 显示新的 <input> 属性。

表 2. 新的 <input> 属性

autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height max min multiple pattern placeholder required step

在 Web 页面创建过程中,您会用到大部分这些类型和属性。

时间: 2025-01-01 02:38:18

HTML5基础知识:与访问者互动的相关文章

HTML5基础,第2部分:组织页面的输入

(译者注:由于yeeyan编辑器对文章中的标签做解析的原因,我在每个标签的<符号之后都加入了一个空格,比如说,左尖括号<+fieldset+右尖括号>,我会写成< fieldset>,以便其能够在文章中正确显示,不便之处敬请谅解.) 企业级机构的管理.数据分析.营销策略以及其他功能都很重要,然而,如果没有合格的数据窗口可提供给你的潜在客户使用的话--或是激发起用户的使用兴趣的话--那么促使站点访问者转化所必需的最初过程就是缺失的.一种积极的.鼓励交互的.用户友好的体验是机构的

第二课笔记:搜索引擎基础知识和工作原理

  大家好,我是专门从事SEO的,几个月来一直都在维护和优化按摩器排行榜www.yziyuan.com这个网站,并从中总结了很多的经验和知识.今天要分享的是<搜索引擎基础知识和工作原理>,这是最基本的概念吧, 第一部分:什么是搜索引擎? 1,定义? 官方定义: 搜索引擎是指根据一定的策略.运用特定的计算机程序从互联网上搜集信息,在对信息进行组织和处理后,为用户提供检索服务,将用户检索相关的信息展示给用户的系统.百度和谷歌等是搜索引擎的代表. 我的理解是: 按照搜索引擎的搜索规则去设置目标网站的

使用JavaScript制作一个简单的计数器的方法_基础知识

设计思想 该方法的关键是Cookie技术和动态图像特性的综合运用.使用Cookie,可以在用户端的硬盘上记录用户的数据,下次访问此站点时,即可读取用户端硬盘的Cookie,直接得知来访者的身份和访问次数等有关信息.JavaScript中通过document.cookie属性访问Cookie,这个属性包括名字.失效日期.有效域名.有效URL路径等.用等号分开的名字和其值是Cookie的实际数据,本例中用来存储该访问者访问该页面的次数.通过把Web页中的图像映射到一个Images数组,一定条件下修改

JavaScript操作Cookie详解_基础知识

什么是 Cookie "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值." - w3school cookie 是访问过的网站创建的文件,用于存储浏览信息,例如个人资料信息. 从JavaScript的角度看,cookie 就是一些字符串信息.这些信息存放在客户端的计算机中,用于客户端计算机与服务器之间传递信息. 在JavaScript中可以通过 doc

Javascript核心读书有感之语言核心_基础知识

读此书之前,感谢淘宝技术团队对此javascript核心的翻译,感谢弗拉纳根写出此书.感谢你们无私的分享,仅以此笔记献给你们的辛勤付出. 一:javascript语言核心 本章之后,我们将主要关注javascript的基础知识.第二章我们讲解javascript的注释,分号和unicode字符集:第三章会更有意思,主要讲解javascript的变量和赋值 这里有一些实例代码说明前两章的重点内容. 复制代码 代码如下: <script type="text/javascript"&

【Xamarin开发 Android 系列 4】 Android 基础知识

原文:[Xamarin开发 Android 系列 4] Android 基础知识 什么是Android?   Android一词的本义指"机器人",同时也是Google于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称,该平台由操作系统.中间件.用户界面和应用软件组成,而且不存在任何以往阻碍移动产业创新的专有权障碍,号称是首个为移动终端打造的真正开放和完整的移动软件. Android是一种以Linux为基础的开放源代码操作系统,主要使用于便携设备.目前尚未有统一中文

《Unity 3D 游戏开发技术详解与典型案例》——1.1节Unity 3D基础知识概览

1.1 Unity 3D基础知识概览 Unity 3D 游戏开发技术详解与典型案例 本节主要向读者介绍Unity 3D的相关知识,主要内容包括Unity 3D的简介.Unity 3D的发展和Unity 3D的特点等.通过本节的学习,读者将对Unity 3D有一个基本的认识. 1.1.1 初识Unity 3D Unity 3D是由Unity Technologies开发的一个轻松创建三维视频游戏.建筑可视化.实时三维动画等互动内容的.多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎. Un

《Ext JS权威指南》——1.1节学习Ext JS必需的基础知识

1.1 学习Ext JS必需的基础知识 1. JavaScript 嗯,这个还用说吗?Ext JS本来就是一个JavaScript的框架,而且使用Ext JS就需要使用JavaScript语法来开发,需要JavaScript的知识是必然的了.问题的关键是,开发人员对JavaScript知识的掌握也有深浅之分.譬如,我碰到一些开发人员,对JavaScript算是很熟悉了,但是不会JSON,不会直接使用JSON对象,在使用Ext JS的过程中,需要使用JSON对象的时候,居然是通过组装字符串的方式,

域名注册基础知识

域名注册基础知识 一.名词解释: 域名解析 A记录 MX记录 CNAME记录 TTL     1.什么是域名解析?         域名解析就是国际域名或者国内域名以及中文域名等域名申请后做的到IP地址的转换过程.IP地址是网路上标识您站点的数字地址,为了简单好记,采用域名来代替ip地址标识站点地址.域名的解析工作由DNS服务器完成. 2.什么是A记录?        A (Address) 记录是用来指定主机名(或域名)对应的IP地址记录.用户可以将该域名下的网站服务器指向到自己的web se