`
alex.Lin
  • 浏览: 66330 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Getting started with HTML5(整理)

阅读更多

1       背景

2008年正式公布,略

2       HTML5新特性

2.1     离线应用(使用应用缓存)AppCache

2.1.1  定义

application cache:应用缓存/离线存储

html/css/js,及其他任何资源文件保存在cache中,以便在离线(断网)状态下,浏览器仍然可以访问这些文件

2.1.2      和传统浏览器缓存的区别:

1、浏览器缓存:

a)     协商缓存Last-modified,Etag

浏览器询问服务器,根据响应码304,则使用本地,否则返回新内容

b)     彻底缓存cache-control,Expires

在有效期内一直使用缓存

2、缓存内容

a)     离线存储可以存储任意指定要缓存的内容,为整个web服务

b)     浏览器缓存只能缓存单个页面,不能指定

3、离线存储可以动态通知用户更新

 

 

2.1.3  使用

2.1.3.1基本元素

=================1Manifest属性================

<html lang="en" manifest='test.manifest'>

 

==========2、包含的test.manifest,如下============

CACHE MANIFEST  //必须以这个开头

version 1.0  //最好定义版本,更新的时候只需修改版本号

CACHE:  //定义需要缓存的内容

    m.png

    test.js

    test.css

NETWORK:  //定义需要联网的内容,*表示除了CACHE之外的全部

    *

FALLBACK

online.html offline.html//每行分别指定在线和离线时使用的文件

a.html  b.html //如在线使用a.html,离线使用b.html

==========================================================

 

=================3、服务端的支持=========================

=====IIS支持==============================================

=====Apache支持==========================================

conf/mime.types中添加一段代码:

test/cache-manifest manifest

==========================================================

 

数据请求的过程要点:

首次访问

         根据manifest配置,进行本地存储

再次访问

         请求manifest文件

如果返回码=304

则表示不变,直接取本地缓存

         否则

                   重新读取配置,走首次访问流程

2.1.3.2   JS支持对象window.applicationCache

onchecking

   //检查manifest文件是否存在

 

ondownloading

   //检查到有manifest或者manifest文件

   //已更新就执行下载操作

   //即使需要缓存的文件在请求时服务器已经返回过了

 

onnoupdate

  //返回304表示没有更新,通知浏览器直接使用本地文件

 

onprogress

   //下载的时候周期性的触发,可以通过它

   //获取已经下载的文件个数

 

oncached

   //下载结束后触发,表示缓存成功

 

onupdateready

   //第二次载入,如果manifest被更新

   //在下载结束时候触发

   //不触发onchched

   alert("本地缓存正在更新中。。。");

   if(confirm("是否重新载入已更新文件")){

       applicationCache.swapCache();

       location.reload();

   }

 

onobsolete

  //未找到文件,返回404或者401时候触发

 

onerror

  //其他和离线存储有关的错误

 

2.2     拖拉功能Drag and Drop

默认提供了该功能,可以很方便的使用,无需自己重写

不仅可以在html页面中拖放,甚至可以将window的任何文件拖到页面中

draggable="true"FF4以上可支持,IE不支持)

拖放的JS事件

被拖动元素事件

Ondragstart(e)

                   /*拖拽开始*/

         e.dataTransfer.effectAllowed = "move";//定义允许的效果"none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", and "uninitialized

                   e.dataTransfer.setData("text", e.target.innerHTML);//dataTransfer对象新增text类型的数据

                   e.dataTransfer.setDragImage(e.target, 10, 20);//e.target作为拖曳反馈对象

 

ondragend

                   /*拖拽结束*/

 

目标区域监听事件               

ondragover

         /*拖拽元素在目标元素头上移动的时候*/

        

 

Ondragenter(e)      

/*拖拽元素进入目标元素头上的时候*/

         e.preventDefault();//使当前对象不允许被拖动

 

ondrop

         /*拖拽元素进入目标元素头上,同时鼠标松开的时候*/

2.3   增加Geolocationgeography location地理定位)

在询问是否共享之后,可将客户端的ip地理位置发给Google Location ServicesFF默认)

2.4     音频视频支持Audio and Video

2.5     表单输入

新增了很多新元素作为表单控件的attribute属性

pop-up calendars, color selectors, number spinners and many more

3       语法更简洁

3.1     DOC TYPE

OLD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

HTML5

<!DOCTYPE html>

3.2     字符编码Character Encoding

OLD

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">

HTML5

<metacharset="UTF-8">

 

3.3     <script>标签

OLD

<scripttype="text/javascript"src="file.js"></script>

HTML5

<scriptsrc="code.js"async></script>

         且新增属性async

 

Async:异步支持

         做个实验A

         <HTML>

                 <HEAD>

                         <script LANGUAGE="JavaScript" src="sync-test1.js"></script>

                 </HEAD>

 <BODY>

                  <img src="22.jpg">

        </BODY>

</HTML>

HTML都是从上到下顺序执行

1、  先下载sync-test1.js。如果里面有定义执行的方法也要先执行

2、  再下载22.jpg图片。如果js文件里的方法要执行很久,则下面的其他dom元素都将被阻塞。

 

实验B

script加个defer属性---只有ie支持

<script LANGUAGE="JavaScript" src="sync-test1.js" defer></script>

结果:可将该js进行异步处理,后面的dom元素都不需要等待了

 

实验C

使用async---FF4+都支持,ie不支持

<script src="sync-test1.js" async></script>

结果:可将该js进行异步处理,后面的dom元素都不需要等待了

 

异步有好处,但也有风险

<script src="sync-test1.js" async></script>

<script src="sync-test2.js" async></script>

如果test1test2之间有顺序依赖就不可以用async,否则会报错

3.4     <link>标签

OLD

<linkrel="stylesheet"type="text/css"href="style.css"/>

HTML5

         <linkrel="stylesheet"href="style.css">

 

4       新增dom元素

都比较显而易懂,使用到的时候再查看api

4.1     <header>

定义了一些样式,不需要使用<div id=”header”>

4.2     <nav>

可以用作导航菜单,替代<div id=”nav”>

4.3     <article>

略。

4.4     <section>

4.5     <aside>

4.6     <figure>

4.7     <footer>

5       修改的dom元素

5.1     <a>

允许包含多个子元素

<a href=”b.js”>

<p>xxx</p>

<font>xxx</font>…

</a>

5.2     <b><i>

粗体和斜体,已不大推荐使用

5.3     <hr>

标签水平线,它应该定义内容中的主题变化

6       废弃的dom元素

6.1     <frame>, <frameset> and <noframes>

6.2     <font><s><u><center><big><applet><acronym>

 

推荐阅读

 

代码之余轻松一下:当前热门-人民的名义

 

JAVAEE容器如何管理EntityManager和PersistenceContext

1
1
分享到:
评论

相关推荐

    Getting Started with Beautiful Soup by Vineeth G. Nair.pdf

    5. **网页抓取实践**:提供了多个实例,展示如何使用Beautiful Soup从网页中抓取所需的信息,并将其整理成有用的数据格式。 6. **高级技巧**:探讨了一些高级主题,例如如何处理JavaScript渲染的网页、如何模拟...

    jsPlumb开发入门教程整理.docx

    可以参考Emiel的教程"Getting started with jsPlumb"和官方Demo "DraggableConnections"进一步学习。 ### 深入学习 由于篇幅限制,本文未能涵盖jsPlumb的所有特性。官方文档提供了更详细的信息,但可能阅读难度较大...

    html+js+css.docx

    地址:[让我们开始 CSS 的学习之旅 - 学习 Web 开发 | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics) 2. **哔哩哔哩教程**:这套完整的 HTML ...

    jquery的经典资料

    - **原作者网站**:感谢原作者Jörn Zaefferer的无私分享,[http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery](http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery)。 --- **总结**:本...

    无线充电LCC-S仿真:基于Simulink的高效电磁组竞赛电源系统建模与优化

    内容概要:本文详细介绍了用于智能车竞赛微缩电磁组的无线充电LCC-S仿真模型。该模型采用Simulink搭建,主要针对48V输入、1000W输出的无线充电系统进行仿真。文中不仅提供了具体的谐振参数(如L1=35uH,C1=62nF,C2=72nF),还分享了调整死区时间、耦合系数、负载突变测试等实践经验。此外,作者强调了实际应用中的注意事项,如元件选型、散热设计以及仿真与现实差异的处理方法。 适合人群:参与智能车竞赛的学生和技术爱好者,尤其是对无线充电技术和电力电子感兴趣的读者。 使用场景及目标:①帮助参赛队伍快速建立高效的无线充电系统仿真模型;②指导实际硬件搭建过程中参数的选择和优化;③提高系统效率,确保在比赛中的可靠性和性能。 其他说明:本文提供的模型已在Matlab 2023b中验证可行,建议使用者根据实际情况调整参数,并关注仿真与实际应用之间的差异。

    基于springboot+vue的考研资讯平台管理系统(源码+数据库)239

    基于springboot+vue的考研资讯平台管理系统:前端 vue2、element-ui,后端 maven、springmvc、spring、mybatis;角色分为管理员、学生;集成考研资讯、报考指南、资料信息、客服等功能于一体的系统。 ## 环境-239 - <b>IntelliJ IDEA 2021.3</b> - <b>Mysql 5.7.26</b> - <b>Node 14.14.0</b> - <b>JDK 1.8</b>

    基于GADF+Transformer的轴承故障诊断模型:振动信号转二维图像及深度学习分类

    内容概要:本文详细介绍了将振动信号转化为二维图像并利用Transformer进行轴承故障诊断的方法。首先,通过格拉姆角场(GADF)、小波变换(DWT)和短时傅立叶变换(STFT)将一维振动信号转换为二维图像。然后,构建了一个基于Transformer的视觉模型,用于捕捉图像的全局特征。实验结果显示,该方法在凯斯西储大学轴承数据集上达到了98.7%的准确率,尤其在低信噪比环境下的表现优于传统方法。此外,文中提供了详细的代码实现和数据预处理步骤,以及一些实用的训练技巧。 适合人群:从事机械故障诊断的研究人员和技术人员,尤其是对深度学习应用于工业设备监测感兴趣的读者。 使用场景及目标:适用于工业环境中机械设备的故障预测与健康管理。主要目标是提高故障检测的准确性,特别是在复杂工况和低信噪比情况下,帮助维护团队及时发现潜在问题,降低维修成本。 其他说明:文中提到的所有代码和预训练模型均已开源,可供研究和教学使用。同时,作者分享了一些实践经验,如数据增强策略的选择和信号去噪方法的应用,有助于读者更好地理解和复现实验结果。

    【代码随想录】ACM输入输出模板汇总:多语言实现与典型问题解析

    内容概要:本文档是《卡码网-25种ACM输入输出总结模板.pdf》,由程序员Carl编写,旨在帮助读者掌握ACM竞赛中常见的25种输入输出方式。文档详细介绍了多种编程语言(如C++、Java、Python、Go、JavaScript等)的实现方法,涵盖了从简单的A+B问题到复杂的链表操作、二叉树遍历等各类典型题目。每种输入输出方式均配有相应的练习题,帮助读者通过实际操作加深理解。此外,文档不仅提供代码模板,还强调了对问题的分析和解决思路。 适合人群:具备一定编程基础,尤其是准备参加ACM竞赛或从事算法相关工作的开发者。 使用场景及目标:①帮助读者快速掌握ACM竞赛中常见的输入输出格式;②提高编程效率,减少在笔试和面试中因输入输出处理不当而浪费的时间;③通过练习题巩固所学知识,提升解决实际问题的能力。 阅读建议:由于文档侧重于输入输出模板的总结,建议读者在学习过程中结合具体的编程语言特性进行实践,并尝试完成提供的练习题,以加深对模板的理解和应用。同时,注意不同语言之间的语法差异,灵活运用所学知识。

    基于springboot的健身中心会员管理系统(源码+数据库)199

    基于springboot的健身中心会员管理系统:前端 jsp、jquery,后端 maven、springmvc、spring、mybatis;角色分为管理员、用户;集成会员卡、留言板、公告、统计报表等功能于一体的系统。 ## 功能介绍 ### 客户 - 基本功能:登录,退出,个人资料查看与修改,密码修改 - 我的会员卡:会员卡查询,详情 - 充值信息:充值信息的列表查询,多条件搜索查询,详情 - 我的消费记录:消费记录查询,多条件搜索查询,详情 ### 管理员 - 账号管理:管理员账号信息的增删改查,密码修改 - 公告管理:公告信息的增删改查 - 客户管理:客户信息的增删改查 - 会员卡管理:会员卡信息的增删改查,多条件搜索查询,会员卡充值 - 留言板管理:留言板信息的列表查询,留言回复 - 统计报表管理:消费信息的查询统计,充值信息的查询统计 ## 环境 - <b>IntelliJ IDEA 2021.3</b> - <b>Mysql 5.7.26</b> - <b>Tomcat 7.0.73</b> - <b>JDK 1.8</b>

    基于springboot的教育互助管理系统(源码+数据库)236

    基于springboot的教育互助管理系统:前端 html、jquery,后端 maven、springmvc、spring、mybatis;角色分为管理员、用户;集成交流动态、我的平台、我的好友、互助评论、教育互助等功能于一体的系统。 ## 环境-236 - <b>IntelliJ IDEA 2021.3</b> - <b>Mysql 5.7.26</b> - <b>JDK 1.8</b>

    multiSIM视频教程-常用仪器仪表使用.zip

    multisim

    手绘彩虹小太阳幼儿教学课件模板.pptx

    手绘彩虹小太阳幼儿教学课件模板

    SH3201数据手册和代码.tar

    SH3201数据手册和代码.tar 产品简介 SH3201是一款六轴IMU(Inertial measurement unit)惯性测量单元。SH3201内部集成三轴陀螺仪以及三轴加速度计,尺寸小,功耗低,适用于消费电子市场应用,能提供高精度的实时角速度与线加速度数据。SH3201具有出色的温度稳定性,在-40℃到85℃的工作范围内能保持高分辨率。 封装形式和尺寸 ● 封装:14 Pins LGA ● 尺寸:2.5×3.0×1.0mm³

    自动驾驶多类交通目标检测数据集1.zip

    数据集介绍:自动驾驶多类交通目标检测数据集 一、基础信息 数据集名称:自动驾驶多类交通目标检测数据集 图片数量: - 训练集:2,868张图片 - 验证集:30张图片 - 测试集:301张图片 分类类别: - Bikes(自行车):交通场景中常见非机动车类型 - Bus(公交车):大型公共交通工具 - Car(汽车):主流机动车辆类型 - Crosswalk(人行横道):道路安全标识 - Fire hydrant(消防栓):城市基础设施组件 标注格式: YOLO格式,包含目标检测所需的边界框坐标及类别标签,支持主流深度学习框架。 数据来源:真实道路场景采集,涵盖多样交通环境。 二、适用场景 自动驾驶感知系统开发: 用于训练车辆环境感知模型,精准识别道路参与者(车辆、行人)及关键基础设施(人行道、消防栓)。 智能交通监控系统: 支持开发实时交通流量分析系统,识别车辆类型及道路安全标识。 道路安全研究: 为交叉路口安全分析、基础设施布局优化提供数据支撑。 AI算法基准测试: 适用于目标检测模型性能验证,覆盖常见交通目标类别。 三、数据集优势 场景覆盖全面: 包含5类关键交通要素,覆盖车辆、行人设施及市政设备,满足复杂场景建模需求。 标注质量可靠: 专业团队标注,严格质检流程确保边界框定位精准,类别标注准确。 任务适配性强: 原生YOLO格式支持主流检测框架(YOLOv5/v7/v8等),即插即用。 应用潜力突出: 数据来源于真实道路场景,可直接应用于L2-L4级自动驾驶系统开发,具备强工程落地价值。

    一个极速,多功能的哔哩哔哩推送机器人.zip

    一个极速,多功能的哔哩哔哩推送机器人

    基于jsp+servlet的机票预订后台管理系统(源码+数据库)128

    基于jsp+servlet的机票预订后台管理系统:前端 jsp、jquery,后端 servlet、jdbc,角色分为管理员、用户;集成航班信息查询,在线订票,订单查询等功能于一体的系统。 ## 功能介绍 ### 管理员 - 航班信息管理:航班信息列表查询,航班添加 - 订单信息管理:用户在前台浏览航班信息,订票下单后,管理员可以在后台查询用户下单信息 - 用户信息管理:用户信息由客户自己在前台注册,管理员可以查看和删除用户 - 留言评论管理:用户在前台针对航班信息或订票服务进行评论,后台查看评论和删除 ### 用户 - 基本功能:登录,注册,退出 - 网站首页:轮播图,航班搜索,航班列表信息展示 - 订票:航班详情,在线订票,填写乘机人和联系人信息,退改签说明,提交订单 - 用户中心:个人资料查询与修改,订单列表查询 - 留言:留言列表查看,发表留言评论 ## 环境 - <b>IntelliJ IDEA 2021.3</b> - <b>Mysql 5.7.26</b> - <b>Tomcat 7.0.73</b> - <b>JDK 1.8</b>

    COMSOL多物理场建模在海底气体水合物沉积物汽液两相流动研究中的应用

    内容概要:本文详细介绍了利用COMSOL进行海底气体水合物沉积物中汽液两相流动的数值模拟。首先,文章解释了模型的基本架构,包括多孔介质流和相场法追踪气液界面,并展示了关键的偏微分方程。接着,讨论了网格划分、水合物相变的能量方程源项设置以及重要参数如各向异性系数的正确配置。此外,文中强调了模型验证步骤,如网格收敛性测试、时间步长敏感性分析和物质守恒检查。最后,分享了一些实际工程应用的经验,如处理非均质储层和相变潜热的影响。 适合人群:从事地质工程、石油勘探、环境科学等领域研究的专业人士和技术人员。 使用场景及目标:适用于需要深入理解和模拟海底气体水合物沉积物中复杂物理现象的研究人员。主要目标是帮助用户掌握COMSOL在这一领域的具体应用方法,提高数值模拟的准确性。 其他说明:文章不仅提供了详细的数学模型和编程代码片段,还分享了许多实践经验,有助于读者避开常见陷阱并优化计算效率。

    Screenshot_2025_0421_055352.png

    Screenshot_2025_0421_055352.png

    Abaqus混凝土收缩建模与分析:从材料定义到结果验证的技术详解

    内容概要:本文详细介绍了如何使用Abaqus进行混凝土收缩建模与分析。首先讲解了混凝土收缩的基本概念及其重要性,接着逐步介绍材料定义、收缩模型选择、收缩应变计算方法(包括UMAT子程序和热膨胀模拟)、分析步配置、边界条件设置、后处理验证等各个环节的具体操作步骤和技术细节。文中还提供了多个实用的Python脚本和.inp文件模板,帮助用户更好地理解和应用相关知识点。此外,作者分享了许多实战经验和常见错误规避技巧,确保模型的稳定性和准确性。 适合人群:从事土木工程仿真分析的专业人士,尤其是有一定Abaqus使用经验的研究人员和工程师。 使用场景及目标:适用于需要进行混凝土结构长期性能预测、裂缝发展模拟等复杂工程问题的研究人员。通过掌握本文提供的技术和方法,能够提高仿真模型的精度,减少与实际测量结果之间的偏差。 其他说明:文中提到的所有代码片段和操作指南均基于最新版本的Abaqus软件平台。建议读者结合官方文档和其他在线资源进一步学习和探索。

    前端分析-2023071100789s

    前端分析-2023071100789s

Global site tag (gtag.js) - Google Analytics