html5 显示 docx html5 document

转载

mob64ca140ee96c 2024-02-20 21:58:11

文章标签 html5 显示 docx html5 客户端 API Web 文章分类 HTML5 移动开发

HTML是创建网页的标准标记语言，描述了使用标记的网页结构，元素由标签显示，浏览器不会显示HTML标签，而是使用它们呈现页面的内容。

HTML5标记方法

新增的元素和删除的元素

表单相关元素新增的属性

全局属性

事件

canvas API

多媒体相关API

Web Storage和本地数据库

本地缓存

通信API

WebSockets

Web Workers处理线程

获取地址位置信息Geolocation API

拖放API

HTML5标记方法

1.DOCTYPE声明是HTML文件必不可少的，它位于文件第一行。HTML5中的DOCTYPE声明方法如下：

<!DOCTYPE html>

2.指定字符编码

<meta charset="UTF-8">   //不写的话HTML5默认也是UTF-8

新增的元素和删除的元素

1.新增的语义/结构化标签

<section> 表示页面中的内容区块，如章节等	<article> 页面中与上下文不相关的独立内容，如博客的文章等
<aside> 与article元素的内容之外的，与article相关的辅助信息	<header> 元素表示一个页面中一个内容区域或整个页面的标题
<footer> 页面的脚注	<nav> 页面中导航链接的部分
<figure> 独立的流内容，表示文档主题流内容的一个单元	<main>网页中的主要内容

注：表格中的元素均为有结束标记的元素，如 <section>···</section>。

html5 显示 docx html5 document_API

新增的其他元素

video	audio	embed	mark	progress
meter	time	ruby	rt	rp
wbr	canvas	command	details	datalist
datagrid	keygen	output	source	menu
dialog

2.新增Input元素类型

email 必须输入email 的文本框	url 必须输入url的文本框
number 必须输入number的文本框	range 必须输入range的文本框

还有Date Picker，可选择日期和时间：date、month、weektime、datetime、datetime-local等类型。

3.删除的元素

大体可以概括为三类：

能使用css替代的元素，如basefont,font, s,strike 等标签
不再使用frame框架只支持iframe
只有部分浏览器支持的元素 applet bgsound等

表单相关元素新增的属性

新增的与表单相关的元素如下：

autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
form属性声明它属于哪个表单，可放置在页面的任何位置，而不是表单内。
required 属性，是一个 boolean 属性。要求填写的输入域不能为空。
pattern 属性，描述了一个正则表达式用于验证<input> 元素的值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于 image 类型的 <input> 标签的图像高度和宽度。
multiple 属性，是一个 boolean 属性。规定<input> 元素中可选择多个值。
control属性在标签（label元素）放置一个表单元素，并通过该元素的control属性访问该表单元素。

全局属性

contentEditable 提示用户该元素的内容允许编辑
designMode 用来指定整个页面是否可编辑
hidden 通知浏览器不渲染该元素
spellcheck 对用户输入的文本进行拼写和语法检查
tabindex

事件

下面图片内容：

html5 显示 docx html5 document_html5 显示 docx_02

html5 显示 docx html5 document_Web_03

canvas API

这个可以查看教程

多媒体相关API

video	audio
source	track

新增了video和audio元素，video元素专门用来播放网络上的视频或电影，audio元素专门用来播放网络上的音频数据。

<video>
    <source src='sample.ogv' type='video/ogg; codecs="theora, vorbis"'></source>
    <source src='sample.mov' type='video/quicktime'></source>
</video>

属性：

src 指定媒体数据的URL地址
autoplay 指定媒体是否在页面加载后自动播放

<video src="sample.mov" autoplay></video>

preload 指定视频或音频是否有预加载
loop 是否循环播放
controls 是否自带播放用的控制条
width/height video独有的
error属性
networkState 读取当前网络状态
currentSrc属性读取播放中媒体数据的URL地址
seeking、seekable
currentTime、startTime、duration属性
played、paused、ended属性

方法

video和audio元素都有以下四个方法：

play 播放
pause 暂停
load 重新载入播放
canPlayType 测试浏览器是否支持指定的媒体类型

track标签用于添加字幕，必须是video和audio的子元素。

Web Storage和本地数据库

Web Storage功能，顾名思义，就是在web上存储数据的功能，这里的存储是针对客户端本地而言。具体来说，Web Storage又分为两种：

sessionStorage

将数据保存到session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间，session对象可以用来保存在这段时间内所要求保存的任何数据。

localStorage

将数据保存到客户端本地的硬件设备（硬盘或其他）中，即使浏览器被关闭，该数据仍然存在，下次打开浏览器访问网站仍然可以继续访问。

二者的区别在于：sessionStorage为临时保存，localStorage为永久保存。

读取数据时的基本用法：

sessionStorage:

sessionStorage.setItem('key','value');
//或
sessionStorage.key = 'value';

//读取数据的方法
变量 = sessionStorage.getItem('key');
//或
变量 = sessionStorage.key;

localStoage:

localStorage.setItem('key','value');
//或
localStorage.key = 'value';

//读取数据的方法
变量 = localStorage.getItem('key');
//或
变量 = localStorage.key;

新增了indexedDB的数据库，该数据库是一种存储在客户端本地的NoSQL数据库。

本地缓存

本地缓存是为整个Web应用程序服务的，而且只缓存你指定缓存的网页，可靠可控。Web应用程序的本地缓存通过每个网页的mainfest文件来管理。

在关闭浏览器后再次打开时可以恢复数据，以减少网络流量。

通信API

新增的三个功能：跨文档消息传输功能、使用WebSockets API来通过socket端口传递数据的功能、通过Server-Sent Events API将服务器端事件主动推送到客户端的功能。

作用：

使用跨文档消息传输功能，你可以在不同的网页文档、不同端口、不同域之间进行消息传递。
使用WebSockets API，你可以让客户端和服务端通过socket端口来传递数据，这样做的好处是可以可是实现数据推送技术--服务器端不再是等待客户端发出的请求，只要客户端与服务端建立一次连接之后，服务端就可以在需要的时候，主动将数据推送到客户端，直到客户端显示关闭这个连接。
Server-Sent Events API，服务端每隔一段时间主动向客户端发送一个携带数据的事件，客户端在接收到该事件后，可以使用该事件中所携带的数据进行页面上内容的更新或其他一些必要的处理。

WebSockets

WebSockets是HTML5提供在Web应用程序中客户端与服务端之间进行的非HTTP的通信机制。可以建立一个非HTTP的双向连接。这个连接是实时的，永久的，除非被显式关闭。这意味着当服务器想向客户端发送数据时，可以立即将数据推送到客户端的浏览器中，无需重新建立连接。只要客户端有一个被打开的socket(套接字)并且与服务器建立连接，服务器就可以把数据推送到这个socket上，服务器无需再轮询客户端的请求，从被动转为主动。

WebSockets的API本身特别简单，首先将URL字符串作为参数，然后调用WebSocket对象的构造器来建立与服务器之间的通信连接。如下所示：

var ws = new WebSocket("ws://localhost:8005/socket");

URL字符串必须以“ws”或“wss”(加密通信时)文字作为开头。这个URL字符串被设定好后，在JS中可以通过访问WebSocket对象的url属性来重新获取。

使用案例，如下：

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>W3Cschool教程(w3cschool.cn)</title>
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function(){
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt){ 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function(){ 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }else{
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
   </head>
   <body>
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
   </body>
</html>

Web Workers处理线程

用来在Web应用程序中实现后台处理的一种技术。

JS创建出来的Web应用程序中，因为所有的处理都是在单线程内执行的，如果花费时间太长的话，程序界面会处在长时间没有响应的状态，当时间过程长时，会弹出运行时间过长的提示框，使用户不得不中断正在执行的处理。

使用Web Workers API用户可以很容易地创建在后台运行的线程（Worker），如果将可以耗时较长时间的出库交给后台去执行的话，对用户在前台页面中执行的操作完全没有影响。

创建Worker对象：

w = new Worker("demo_workers.js");

示例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button> 
<button onclick="stopWorker()">停止工作</button>

<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
    }
}

function stopWorker() 
{ 
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>

获取地址位置信息Geolocation API

可使用getCurrentPosition方法来获得用户当前的地理位置信息，该方法定义如下：

void getCurrentposition(onSuccess, onError, options);

示例：

var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }

具体可查看教程

拖放API

在HTML5内想实现拖放操作，至少需要如下两个步骤：

将想要拖放的对象元素的draggable属性设为true(draggable="true")。这样才能拖放元素。另外，img元素与a元素（必须指定href）默认允许拖放。
编写与拖放有关的事件代理代码

简单拖放实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖放实例</title>
		<script type="text/javascript">
			function init(){
				var source = document.getElementById("dragme");
				var dest = document.getElementById("text");
				// (1)拖放开始
				source.addEventListener("dragstart",function(ev){
					// 向dataTransfer对象追加数据
					var dt = ev.dataTransfer;
					dt.effectAllowed = 'all';
					// (2)拖动元素dt.setData("text/plain".this.id);
					dt.setData("text/plain","你好");
				},false);
				// (3) dragend:拖放结束
				dest.addEventListener("dragend",function(ev){
					// 不执行默认处理（拒绝被拖放）
					ev.preventDefault();
				},false);
				// (4) drop: 被拖放
				dest.addEventListener("drop",function(ev){
					// 从DataTransfer对象那里取得数据
					var dt = ev.dataTransfer;
					var text = dt.getData("text/plain");
					dest.textContent += text;
					// (5) 不执行默认处理（拒绝被拖放）
					ev.preventDefault();
					// 停止市间传播
					ev.stopPropagation();
				},false);
			}
			// 设置页面属性，不执行默认处理（拒绝被拖放）
			document.ondragover = function(e){
				e.preventDefault();
			};
			document.ondrop = function(e){
				e.preventDefault();
			}
		</script>
	</head>
	<body onload="init()">
		<h1>简单拖放示例</h1>
		<!-- （7）把draggable属性设为true -->
		<div id="dragme" draggable="true" style="width: 200px; border:1px solid gray;"> 
			请拖放
		</div>
		<div id="text" style="width: 200px; height: 200px; border: 1px solid gray;"></div>
	</body>
</html>

我的天，终于大体完了。。。。

可能还有遗漏的，或者写的不好的地方，请补充，我会继续优化的！谢谢！

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：yarn启动Flink 指定kdc账户 flink 指定taskmanager

下一篇：python 中类似 spring boot的框架 python框架对比

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯