html5实战文摘第一章从文档到应用的转变

前端答疑君      2022-02-07     313

关键词:

 

1. HTML5的基本特性

  1.1 DOCTYPE声明方式

    HTML5的声明格式非常简单不需要DTD和URL

<!DOCTYPE html>

    就这么一句声明放在文档的开头就可以了。

  1.2 新的元素

    增加新的元素代表新的语义,例如,新增加了<hgroup>标签,这个标签用于对网页或区段(section)的标题进行组合。再例如<nav>标签,它定义了网站导航的链接。有了类似这种新的元素,页面标记结构不仅清晰易读,搜索引擎机器人和辅助技术也能比较好的解读页面的内容。

  1.3 新的表单特性

  HTML引入了新的表单输入类型,例如:

  color: 

  time:

  month:

  date: 

  number: 

  range: 

  除了input元素的type有了丰富,HTML5还引入了新的输入元素属性

  例如: autocomplete, autofocus, placeholder, list 等等

  1.4 进度条 度量器 可折叠内容

  这些是一些常用的显示小部件。个人认为在实际的工程项目中,更多的是用自己构建的组件,这些原生的小组件用的不多。

  1.5 微数据

  搜索引擎和浏览器可以通过微数据提供更多的功能

2. 高级特性

  2.1 HTML的画布Canvas,通过HTML和JS就可以制作丰富的动画,从而代替并不 好的实现方式,例如用Flash技术实现。

  2.2 音频和视频,之前的实现方式都是通过第三方插件的方式来支持视频和音频,现在却可以原生的用HTML支持。这也许就是最近HTML5火起来的重要原因,视频能在移动端方便的传播,而不需要任何第三方插件。

  2.3 拖放功能,之前在页面中的拖放功能是通过JS来实现的,现在结合新的HTML5的拖放API就可以实现拖放的功能。

  2.4 使用WebSockets实现服务器端与客户端的双向通信, 这种通信方式没有HTTP相关的开销,和适合快速传输小规模数据。

  2.5 利用服务器发送事件实现从服务器端到客户端的单向通信。利用EventSource接口,你的web应用能够订阅一个服务器事件流,它只接收服务器发送的更新消息。

  2.6 文档可编辑。通过设置contenteditable属性使得该元素具备可编辑的特性,设置designMode可以使整个文档都具有可编辑的特性。

  2.7 使用Cooki会产生很多负面的问题。Web存储 Web Storage DOM API 为web应用替代Cookie的解决方案。这个API涉及两个接口:sessionStorage和localStorge

  2.8 通过IndexDB可以开发离线web应用。在离线状态时可以调用本地的IndexDB数据库进行操作,等连接到网络后再通过ajax请求更新到服务端

  2.9 可伸缩矢量图形

 

 这一个系列的文章主要是将HTML5实战(HTML IN ACTION)的内容进一步精简和提炼。总结思路和方法,精简内容,进一步了解HTML5规范带来的WEB变革。

 


游戏与极客第一章从审视自己开始

对于90后乃至80后,70后,60后来说,网络给我们带来了很多的信息量。这其中也带来了前所未有的娱乐性,其中最具争议性的就是游戏了。褒义家将它们视为电竞精神,而贬义家称它们为网瘾少年。现实是,从此以后。我们每个... 查看详情

osgi实战第一章

第一章        解开OSGI的面纱OSGI是什么?是Java平台的一个模块化层。模块化:软件应用程序的代码被分割为表示独立内容的逻辑单元,可简化开发,可通过强化逻辑模块的界限来提高可维护性。Java... 查看详情

html5实战文摘第二章html5用于创建表单的输入小部件数据绑定以及数据验证

  HTML5表单在原有表单特性的基础上增加了一些比较便捷的特性,使得我们实现一些常用的表单的小部件、输入类型、输入验证不再那么大费周章。上一篇文章提到了HTML5实现的几种新的输入类型,现在我们更加详尽的了解HTML5... 查看详情

第一章初始html5

—————目录HTML5基础文本控制标记图像标记超链接标记  1.HTML5基础文档基本格式1<!doctypehtml>2<htmllang="zh">3<head>4<metacharset="utf-8">5<title>无标题文档</title& 查看详情

带你走向技术前沿,打造畅购电商平台实战(第一章)。(代码片段)

微服务系统架构概述单体应用架构以电商平台为例,如图所示,在传统单体应用中,所有模块代码,都会写在一个应用下,然后我们一般开发完成后,打成一个war包放到tomcat中去运行。随着用户流量的不断增长,业务复杂度的提... 查看详情

第一章html知识点

HTML5为什么只需要写<!DOCTYPEHTML>?HTML5不基于SGML,因此不需要对DTD进行引用,但是需要DOCTYPE来规范浏览器的行为(让浏览器按照他们应该的方式来运行),而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用... 查看详情

《java并发编程实战》第一章

第一章总结*多个程序共同执行的原因:资源利用率公平性便利性*线程的优势提高多处理器利用率建模的简单性-每个线程不需要知道与了解其他线程都做了什么,例如基于Servlet框架不需要知道调度细节异步事件的简化处理- ... 查看详情

书籍连载《stm32hal库开发实战指南—基于f7》-第一章

从今天起,每天开始连载一章《STM32HAL库开发实战指南—基于F7》。欢迎各位阅读、点评、学习。第1章 如何使用本书1.1 本书的参考资料本书参考资料为:《STM32F76xxx参考手册》和《Cortex?-M7内核编程手册》,这两本是ST官... 查看详情

2017.2.20activiti实战--第一章--认识activiti

学习资料:《Activiti实战》 第一章认识Activiti内容概览:讲解activiti的特点、接口概览、架构等基本信息。1.3Activiti的特点1.使用mybatis2.原生支持spring,可以轻松集成spring3.引擎的Service接口Activiti引擎提供了7大Service接口,均通... 查看详情

web的进击之路-第一章html基本标签

一、HTML简介  超文本标记语言,标准通用标记语言下的一个应用。  “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。  超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部... 查看详情

《思维导图应用实战》画出你的思维

《思维导图应用实战》画出你的思维文章目录《思维导图应用实战》画出你的思维第一章画出思维导图第二章实现目标第三章做出正确的决策第四章指导日常生活第五章高效记笔记第六章优化会议第七章项目管理第八章应用计算... 查看详情

xsl-fo 文档第一页的不同标题,而不是每一章

】xsl-fo文档第一页的不同标题,而不是每一章【英文标题】:xsl-fodifferentheaderforfirstpageofdocument,noteachchapter【发布时间】:2013-12-0716:56:20【问题描述】:我正在使用XSL-fo从DITA书籍地图输出到PDF,并且我想要一个唯一的标题出现在... 查看详情

wireshark数据包分析实战第一章

1,数据包分析工具:tcpdump、wireshark。前者是命令行的,后者是图形界面的。分析过程:收集数据、转换数据(二进制数据转换为可读形式)、分析数据。tcpdump不提供分析数据,只将最原始的数据展现给分析人员。大牛使用tcpdum... 查看详情

第一章:html5的基础

HTML5基础 1.DoctYpe声明  <!DCTYPEhtml>必须放在第一行。<title>  <title>百度</title><meta>  <metacharset="UTF-8"/><h1></h1>------<h6></h6>  提供了六级标签,所有标 查看详情

第一章:引言(代码片段)

在过去的五年里,Web开发人员的可用工具实现了跨越式地增长。当技术专家不断推动极限,使Web应用无处不在时,我们也不得不升级我们的工具、创建框架以保证构建更好的应用。我们希望能够使用新的工具,方便我们写出更加... 查看详情

java高级应用编程第一章工具类

一、JavaAPI  JavaAPI简介    1、API(ApplicationProgrammingInterface)应用程序接口    2、Java中的API,就是JDK提供的各种功能的Java类    3、JDK帮助文档   JAVA_API_CN.chm   官网地址http://www.oracle.com/technetwork/java/api-1415... 查看详情

读书笔记,《刻意练习》,第一章,有目的的练习

史蒂夫的超强记忆力   史蒂夫.法隆(SteveFaloon)的例子贯穿本章,作者使用Steve来做的一个数字记忆试验,Steve能够从一开始只能记住六七个数字,到最后可以记住80多个数字。则中间Steve究竟经历了什么转变。他是怎么... 查看详情

机器学习实战之第一章机器学习基础

第1章机器学习基础机器学习概述机器学习就是把无序的数据转换成有用的信息。获取海量的数据从海量数据中获取有用的信息我们会利用计算机来彰显数据背后的真实含义,这才是机器学习的意义。机器学习场景例如:识别动... 查看详情