HTML5知识点总结

最新推荐文章于 2022-06-02 15:17:30 发布

只管去努力

最新推荐文章于 2022-06-02 15:17:30 发布

阅读量343

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_53011724/article/details/119192073

版权

HTML知识点总结
前言：最近在闲暇时间重新看了一遍HTML5的知识，主要是从W3school上面学习。最近的感悟，知识点得不断巩固才能牢记于心。HTML不知看过几遍了，但是过一段时间就会忘记一点，所以这次又看了一遍。可能是我记忆力不咋地，不过好记性不如烂笔头。温故而知新。

文章目录

HTML简介

简介：HTML5是最新的HTML标准，在HTML4的基础上新增了一些功能，并且HTML5具有跨平台性，现代浏览器都支持HTML5.

<!DOCTYPE html>

上面就是HTML5文档的标识

语义标签

HTML5新增了部分标签，同时也裁剪了HTML4中的部分标签。这里说一下新增的语义标签。
顾名思义，语义标签就是用来表明文档的语义的，作用是方便阅读，使代码更加清晰易懂，同时对搜索引擎比较友好。
HTML5中的语义标签


<article>	定义文章。
<aside>		定义页面内容以外的内容。
<details>	定义用户能够查看或隐藏的额外细节。
<figcaption>	定义 <figure> 元素的标题。
<figure>	规定自包含内容，比如图示、图表、照片、代码清单等。
<footer>	定义文档或节的页脚。
<header>	规定文档或节的页眉。
<main>		规定文档的主内容。
<mark>		定义重要的或强调的文本。
<nav>		定义导航链接。
<section>	定义文档中的节。
<summary>	定义 <details> 元素的可见标题。
<time>		定义日期/时间。

图形

HTML5中的canvas：

HTML5中实现绘制图像，是通过标签实现的，但是注意本事不具备画图的能力，画图的逻辑还是通过js完成的。
下面说一下具体的用法：

//指定画图的画板
<canvas id="myCanvas" width="200" height="100"></canvas>
//在js中执行逻辑
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

从上面的例子中还是清晰易懂的，首先画图总得有一个画板吧，所以就有这个标签充当画板的作用，然后逻辑通过实例化一个画图对象，然后通过api进行绘制。
常见的api可以自行查看w3shool上面的canvas这一节。

HTML5中的另外一种画图工具svg：

什么是svg：

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于***矢量***的图形
SVG 使用XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

svg的优势：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

与canvas相同，svg同样具有标签， <svg>标签

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

svg教程：详细教程

现在比较一下canvas与svg：

1，canvas是基于像素进行绘制图像的，逻辑通过js进行控制，也就是说一旦绘制完成，浏览器就不会控制canvas，所以一旦改变，就得重绘；
2，svg是基于xml格式的，里面细节都是HTML元素标签，遵循HTML要求，在js中可以获取，css中可以进行样式修改。
3，svg是矢量图，可伸缩，变换不会影响画质。

新增的输入类型

这是我春招实习面试百度时候被问到的一个：
下面直接说一下input标签中新增的类型吧

新的输入类型
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

新的输入属性
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 和 width
list
min 和 max
multiple
pattern (regexp)
placeholder
required
step

具体细节看w3shool中的输入类型这一节：input输入类型

新增的功能

1，地理定位

HTML5中新增的功能，可用于获得用户的地理位置。
具体用法：通过Geolocation API 来获得用户的地理位置，获得用户的地址必须得到用户的同意，只有同意后方能生效。

//获得浏览器用户地理位置，当然是使用浏览器对象

<script>
//地理信息挂载dom
var x=document.getElementById("demo");
function getLocation()
  {
  //判断浏览器对象中是否支持geolocation
  if (navigator.geolocation)
    {
    //通过getCurrentPosition获得用户信息，接收三个参数成功回调，失败回调，配置对象，第二					      三参数为可选
    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;
  }
</script>

判断错误回调的类型
function(error){
error.code //通过code参数可以识别错误类型，可通过switch进行处理
}
Permission denied - 用户不允许地理定位
Position unavailable - 无法获取当前位置
Timeout - 操作超时

获取地理位置成功，成功回调函数中返回的是一个对象，下面是这个对象的属性。

属性					描述
coords.latitude		十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy		位置精度
coords.altitude		海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading		方向，从正北开始以度计
coords.speed		速度，以米/每秒计
timestamp			响应的日期/时间

详细文档请参考官网：HTML5地理位置

2，拖放

拖放功能在现代网页上还是经常可以见到的，所以下面来讲解一些拖放的具体细节。

首先，将一个HTML元素进行拖放，就得将其draggable属性设置为true

<img draggable='true'/>

这里通过官网上的例子讲解：

<!DOCTYPE HTML>
<html>
<head>
<script>
//阻止默认事件触发
function allowDrop(ev) {
	// 设置允许将拖放内容放置进容器
    ev.preventDefault();
}
// 开始拖放事件
function drag(ev) {
	// setData用来设置拖动元素
    ev.dataTransfer.setData("text", ev.target.id);
}
// 拖放进容器触发的事件
function drop(ev) {
	//调用 preventDefault() 来阻止数据的浏览器默认处理方式（drop 事件的默认行为是以链接形式打开）
    ev.preventDefault();
    // getData用来设置接收拖动元素
    var data = ev.dataTransfer.getData("text");
    // 将拖放的元素设置为，容器的子元素
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
//接收对象，首先得允许这个容器可以接收拖动的HTML，所以将其默认事件阻止
//然后设置拖放后，放进容器的事件，drop事件，并接收event对象
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

//被拖放的容器，将其draggable属性设置为true，然后就可以设置开始拖放事件ondragstart，并将事件对象event传过去
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

3，web存储

web存储，这是现在项目中最常用到的功能。

html5中web存储的类型：
localStorage
sessionStorage
html5之前的存储：
cookie

由于这里看过很多次了，而且很多博客都有讲解，在这就不展开讲解他们之间的联系、区别。官网地址：web存储

4，应用缓存

应用缓存，这可以是提高应用性能的一个选择，比如一些加载缓慢，数据量大，图片，不会变化的HTML页面，都可以设置为缓存。
作用：
1，离线浏览
2，提升缓存资源的加载速度
3，减少服务器的压力

如何设置文件为缓存类型：

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
文档内容 ......
</body>

</html>

注意：
manifest 文件的建议文件扩展名是：".appcache"。
manifest 文件需要设置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

官网：web缓存

5，web worker

web worker？
当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。
Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。4
为什么会出现 web worker
首先不得不说一下，js是单线程运行的脚本，这在一定程度上限制了，应用的速率和应用性能。随着科技进步，应用创新，计算机计算能力不断提升，所以出现了，web worker开辟独立线程。

使用web worker
我们也通过官网上的例子进行讲解：

//这是一个利用独立线程进行计算的案例
<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
// 通过事件触发线程的创建
<button onclick="startWorker()">Start Worker</button> 
// 关闭独立线程
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<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 = "Sorry! No Web Worker support.";
    }
}

// 停止独立线程的运行，释放计算机资源
function stopWorker() { 
    w.terminate();
    // 复用变量
    w = undefined;
}
</script>

</body>
</html>

web worker 运行哪一些脚本文件：
数据量大，依赖计算机计算能力，耦合性不高。

web worker中访问不到的对象：
window 对象
document 对象
parent 对象

6，sse

sse是指Server-Sent 事件

Server-Sent 事件指的是网页自动从服务器获得更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件，更新能够自动到达。

客户端约束：

// 实例化一个用来接收服务器发送通知的对象
var source = new EventSource("demo_sse.php");
// 监听
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

服务端约束：

// 相应被监听跟新的文档类型设置
"Content-Type" 报头设置为 "text/event-stream"

eventSource对象上的属性：

onopen		当通往服务器的连接被打开
onmessage	当接收到消息
onerror		当发生错误

只管去努力

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5知识点总结

HTML知识点总结前言：最近在闲暇时间重新看了一遍HTML5的知识，主要是从W3school上面学习。最近的感悟，知识点得不断巩固才能牢记于心。HTML不知看过几遍了，但是过一段时间就会忘记一点，所以这次又看了一遍。可能是我记忆力不咋地，不过好记性不如烂笔头。温故而知新。HTML5中的语义标签...
复制链接

扫一扫