HTML-day8

最新推荐文章于 2022-03-03 16:46:05 发布

Lwangqi

最新推荐文章于 2022-03-03 16:46:05 发布

阅读量91

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_42527428/article/details/101917396

版权

HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

渐进式渲染是什么？

什么是渐进式渲染？

渐进式渲染是用来提高网页性能，以尽快呈现页面的技术。一开始先加载首屏显示的内容，之后再随着时间或者滚动页面才进行后面的加载。

例如：

图片懒加载——页面上的图片不会一次性的全部加载，当用户滚动页面到图片位置时，JS将加载并显示图像。
确定显示内容的优先级——为了尽快将页面呈现给用户，页面只将一小部分CSS，脚本，内容加载，然后在延时加载或者监听事件来加载。
异步加载HTML片段——当页面通过后台渲染时，把HTML拆分，通过异步请求，分块发送给浏览器。

HTML5中新添加的表单属性有哪些？

html5新添加的表单类型和属性

email类型:

1	`<input` `type="email">`

url类型:

1	`<input` `type="url">`

date类型:

1	`<input` `type="date">`

time类型:

1	`<input` `type="time">`

month类型:

1	`<input` `type="month">`

week类型:

1	`<input` `type="week">`

number类型:

1	`<input` `type="number">`

range类型:

1	`<input` `type="range">`

search类型:

1	`<input` `type="search">`

color类型:

1	`<input` `type="color">`

placeholder属性:

1	`<input` `type="text" placeholder="点击输入">`

autofocus属性(获取焦点):

1	`<input` `type="text" autofocus="true">`

list属性:

<input type="text" list="ilist">

<datalist id="ilist">

<option label="1" value="1">

<option label="2" value="2">

<option label="3" value="3">

</datalist>

pattern属性(正则验证):

1	`<input` `type="text" required pattern="^[1-9]\d{5}$">`

required属性(必填)

1	`<input` `type="text" required>`

外部提交表单(提交按钮可在表单外面)

<form action="" id="iform">

<input type="text" name="name">

</form>

<input type="submit" form="iform" value="提交">

你有了解HTML5的地理定位吗？怎么使用？

定位用户的位置

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

浏览器支持

Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

HTML5 - 使用地理定位

请使用 getCurrentPosition() 方法来获得用户的位置。

下例是一个简单的地理定位实例，可返回用户位置的经度和纬度,包含错误处理。

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button οnclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br />Longitude: " + position.coords.longitude;    
  }
function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }
</script>
</body>
</html>

1)使用地理定位：

通过navigator.geolocation访问地理定位功能，返回一个Geolocation对象；

1.1）Geolocation对象成员：

getCurrentPosition(callback,errorCallback,options)——获取当前位置；

watchPosition(callback,error,options)——开始监控当前位置；

clearWatch(id)——停止监控当前位置；

1.1.1）浏览器调用getCurrentPosition的callback函数的参数时，会传入一个提供位置详情的position对象；

position对象成员：

coords——返回当前位置的坐标，即Coordinates对象；

timestamp——返回获取坐标信息的时间；

Coordinates对象成员：

latitude——返回用十进制表示的纬度；

longitude——返回用十进制表示的经度；

altitude——返回用米表示的海拔高度；

accuracy——返回用米表示的坐标精度；

altitudeAccuracy——返回用米表示的海拔精度；

heading——返回用度表示的行进方向；

speed——返回用米/秒表示的行进速度；

2）处理地理定位错误：

getCurrentPosition(callback,errorCallback,options)方法的第二个参数，它让我们可以指定一个函数，在获取位置发生错误时调用它。此函数会获得一个PositionError对象；

PositionError对象成员：

code——返回代表错误类型的代码；

=1——用户未授权使用地理定位功能；

=2——不能确定位置；

=3——请求位置的尝试已超时；

message——返回描述错误的字符串；

3）指定地理定位选项：

getCurrentPosition(callback,errorCallback,options)方法提供的第三个参数是一个PositionOptions对象。

PositionOptions对象的成员：

enableHighAccuracy——告诉浏览器我们希望得到可能的最佳结果；

timeout——限制请求位置的事件，设置多少毫秒后会报告一个超时错误；

maximumAge——告诉浏览器我们愿意接受缓存过的位置，只要它不早于指定的毫秒数；

4）监控位置：

watchPosition方法不断获得关于位置的更新。所需参数与getCurrentPosition方法相同，工作方式也一样。

区别在于：随着位置发生改变，回调函数会被反复地调用。

web workers有用过吗？能帮我们解决哪些问题？

Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。

可以做什么：

1.可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信

2.可以在worker中通过importScripts(url)加载另外的脚本文件

3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

4.可以使用XMLHttpRequest来发送请求

5.可以访问navigator的部分属性

局限性：

1.不能跨域加载JS

2.worker内代码不能访问DOM

3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行

4.不是每个浏览器都支持这个新特性

HTML5 Web Worker的使用

关于Web Workers你需要了解的七件事

From表单提交时为什么会刷新页面？怎么预防刷新？

为了保证页面的安全性，提交数据后不能在当前页面获取到返回的数据，但是有时候又必须获取返回的数据，那就需要新开页面来展示数据。

方式一

将<input>标签内的按钮类型从 type="submit" 修改为type="button"

方式二

表单内的<button>未指定类型，默认的类型为submit (除了IE浏览器是 button)，可以显示的修改为<button type="button"></button>来阻止表单提交事件

方式三

事件阻止： preventDefault()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function func(event){
            event.preventDefault();
            //执行ajax动作
        }
    </script>
</head>
<body>
    <form action="">
        <input type="submit" value="button" onclick="func(event)" /> 
    </form>
</body>
</html>

方式四

用onlick点击事件来return false
1. οnclick="return true" 为默认的表单提交事件
2. οnclick="return false"为阻止表单提交事件
而一般用onclick来调用函数都是没有返回值的，所以一般调用完成后为默认return true;所以才会看到，先处理回调函数后再进行表单提交跳转

方式五

利用表单的onsumit事件
注意: onsubmit 事件作用对象是

所以把onsubmit事件加在提交按钮上是没效果的

form对象的onsubmit事件类似onclick,都是先处理调用的函数，再进行表单是否跳转布尔值的判断
1. οnsubmit="return true" 为默认的表单提交事件
2. οnsubmit="return false"为阻止表单提交事件

Form表单是怎么上传文件的？你了解它的原理吗？

简单来说就是把文件转化成字节流，然后使用http进行传输，后端接受后在把二进制转化成原先的文件格式。

在HTML表单中，可以上传文件的唯一控件就是<input type="file">。
当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data（表明表单需要上传二进制数据），method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。multiple="multiple"说明可以同时上传多个文件

文件上传的基本原理（一）

你真的知道网页上传文件背后的原理吗？

Ajax与Flash的优缺点分别是什么？

Ajax的优势：

可搜索性
普通的文本网页会更有利于SEO。文本内容是搜索引擎容易检索的，而繁琐的swf字节码却是搜索引擎不愿触及的。虽然Google等一些大型的搜索引擎可以检索SWF内部的内容，但是仍然有很多麻烦存在。
开放性
Flash常年以来被Macromedia看的很死。包括Flex、FMS等辅佐技术一直都需要昂贵的安装、维护费用。而JS则没有这样的麻烦。没有人愿意承担法律和版权的风险。

费用
Flash开发是很昂贵的，因为FlashIDE等环境都是要收费的．而Ajax则不同．虽然有一些便宜的生成swf的工具，但是他们的工能实在无法满足复杂需求。

易用性
Ajax程序有更好的易用性。由于中间有一层Flashplayer代理层，因此许多辅助功能无法被Flash灵活利用。而且Flash在一些方面有着不好的口碑。比如弹出广告、比如恶意代码。（awflasher.com个人认为这八成是乱上xx网站造成的）

易于开发
人们开发复杂的Ajax和Flash应用程序时，都会借助一些高级的开发工具。普遍来说，Ajax的开发包比Flash简便、容易

Flash的优势：

多媒体处理
Flash在音频、视频等多媒体领域相比HTML有绝对的优势。现在几乎所有的网站都包含有Flash内容。

兼容性
兼容性好：由于通过了唯一的FlashPlayer“代理”。人们不必像调试JS那样，在不同的浏览器中调试程序。

矢量图型
这是Flash最大的优势，同样处在这一领域的SVG、Canvas element以及Direct完全不能与Flash相比。

客户端资源调度
Flash能够更容易的调用浏览器以外的外部资源。比如摄像头、麦克风等。然而这是普通的HTML无法完成的。但是这也许是一个缺点（为什么呢？）

Ajax的劣势：

它可能破坏浏览器的后退功能
使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中，不过这些都有相关方法解决。

Flash的劣势：

二进制格式
格式私有
Flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间
性能问题

Lwangqi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML-day8

渐进式渲染是什么？什么是渐进式渲染？渐进式渲染是用来提高网页性能，以尽快呈现页面的技术。一开始先加载首屏显示的内容，之后再随着时间或者滚动页面才进行后面的加载。例如：图片懒加载——页面上的图片不会一次性的全部加载，当用户滚动页面到图片位置时，JS将加载并显示图像。确定显示内容的优先级——为了尽快将页面呈现给用户，页面只将一小部分CSS，脚本，内容加载，然后在延时加载或者监听事件...
复制链接

扫一扫