HTML5基础总结-CSDN博客

HTML5新增标签

新增语义元素

HTML5定义了很多新的语义元素，分别有：<article>、<header>、<aside>、<footer>、<section>、<nav>、<figure>、<figcation>等元素，接下来分别介绍新增的语义元素。

<article>

<article>一般用于博客、论坛、新闻等。具体事例：

<article>
   <h1>粉色天气</h1> <p> 从粉色的茶水开始，粉红色的玫瑰，花瓣凋零过半，将一片片花瓣夹入淡绿色的笔记本中。 便是粉色的天气粉色的一天了。 </p> </article>

<header>

<header>一般用于定义文档或section的页眉
代码实例：

<article>
   <header>
        <h1>金牛座季节</h1> <p>4月末，金牛座的季节</p> </header> <p>周边的金牛座陆续的过了生日</p> </article>

<footer>

<footer>一般用于定义文档或section的页脚
代码实例：

<article>  
   <header>
       <h1>开心明天</h1> <p>明天又是美好的一天</p> </header> <p> 最近情绪上天入地，时时安慰自己： 又是充满希望的一周，明天又是美好的一天，明天应该是美好的，因为还没开始， 还可以有激情有勇气去过好。 </p> <footer> <p>北京二吊子程序媛所码</p> </footer> </article>

<section>

<section>定义一个节
代码示例：

<section>
    <p>章节一</p> </section> <section> <p>章节二</p> </section>

<nav>

<nav>定义导航链接集合
代码示例：

<nav>
     <a href="http://baidu.com">百度一下 |</a> <a href="http://byr.bbs.cn">北邮人论坛 |</a> <a href="http://iqiyi.com">爱奇艺 |</a> </nav>

HTML5图像

canvas

HTML5 的 canvas 元素是使用 JavaScript 在网页上绘制图像，canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
实现方法步骤
1.在页面中创建canvas元素，
<canvas id="myCanvas" width = "200" height = "150" ></canvas>
2.通过JavaScript来绘制：

<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script>

3.通过javascript绘制图像

SVG

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>

HTML5媒体

媒体元素主要为音频元素和视频元素，HTML5通过<object>来加载，进而播放音频或视频。
代码示意：直接在页面body部分通过<object>标签来添加音频或视频文件

<object width="420" height="360" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="/i/bird.wav" /> <param name="controller" value="true" /> </object>

HTML5API

HTML5新增了诸多API 接口，包括地理定位、拖放、WEB存储、应用存储等接口。

HTML5 定位

HTML5 Geolocation API 可用于获得用户的地理位置，Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
1： navigator.geolocation，可用于检测设备是否支持HTML5定位
2：getCurrentPosition() 方法可用户获取当前设备的经纬度位置
利用HTML5定位获取定位示例：HTML5获取定位

HTML5 拖放

HTML5增加了新的属性draggable,当某元素的draggable属性设置为true时，表示该属性可以被拖动。
HTML5同时还新增了鼠标事件ondrag、ondrop、ondragstart、ondragover等事件来运行和拖放有关的脚本；每个事件的具体意义可参考w3cHTML事件。
HTML5拖放代码示例

在页面中添加可拖放的元素

确定拖放元素与拖放目标元素的事件与对应的脚本

拖放元素与拖放目标元素的事件

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

事件所触发的脚本

function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }

在页面中进行拖放元素

WEB存储

web存储也称为本地存储，通过本地存储，web 应用程序能够在用户浏览器中对数据进行本地的存储。
与cookie相比，本地存储更安全，且不影响浏览器性能，并且信息不会被传到服务器
HTML本地存储提供了两个在客户端存储数据的对象
window.localStorage - 存储没有截止日期的数据
window.sessionStorage - 当关闭浏览器标签页时数据会丢失

使用本地缓存时，应先检测是否支持本地缓存

if (typeof(Storage) !== "undefined") {
    // 针对 localStorage/sessionStorage 的代码 } else { // 抱歉！不支持 Web Storage .. }

代码示例

// 存储
localStorage.setItem("lastname", "Gates");
// 取回 document.getElementById("result").innerHTML = localStorage.getItem("lastname");

应用程序缓存

应用程序缓存即可对web应用进行本地缓存，保证用户在离线时也可以使用应用，加载速度更快，且能够减少服务器负载，浏览器只从服务器下载更新或更改过的资源。
代码示例

<!DOCTYPE HTML>
<html manifest="demo.appcache"> <body> 文档内容 ...... </body> </html>

作者：二吊子程序媛
链接：https://www.jianshu.com/p/7aa390f49eda
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

转载于:https://www.cnblogs.com/games-lol/p/8598822.html