Was ist neu in HTML5?

Neue Funktionen von HTML5: 1. Semantische Tags (Kopfzeile, Fußzeile usw.); 3. Verlaufsobjekt; 5. Medienelemente Video und Audio; 6. Leinwand.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

HTML5 ist die nächste Generation von HTML und wird zum neuen Standard für HTML, XHTML und HTML DOM.

HTML5 ist das Ergebnis einer Zusammenarbeit zwischen W3C und WHATWG. W3C 与 WHATWG 合作的结果。

为 HTML5 建立的一些规则：

• 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
• 减少对外部插件的需求（比如 Flash）
• 更优秀的错误处理
• 更多取代脚本的标记
• HTML5 应该独立于设备
• 开发进程应对公众透明

浏览器支持

最新版本的 Chrome、Firefox、Safari以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。国内的 遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹 浏览器等国产浏览器同样具备支持HTML5的能力。

新特性

HTML5 中新增的一些有趣的新特性：

1、语义化标签

header<span style="font-family:Microsoft Yahei, Hiragino Sans GB, Helvetica, Helvetica Neue, 微软雅黑, Tahoma, Arial, sans-serif">  </span>footer 、 nav 、 aside 、 section 、 meau 、 template 、 article 、 audio 、 video 、 canvas 等

2、webStorage 储存机制 sessionStorage 和 localStorageEinige Regeln für HTML5:

Neue Funktionen sollten auf HTML, CSS, DOM und JavaScript basieren.

Reduzierter Bedarf an externen Plugins (wie Flash)

• Bessere Fehlerbehandlung

Mehr Markup zum Ersetzen von Skripten

HTML5 sollte geräteunabhängig sein

• Der Entwicklungsprozess sollte für die Öffentlichkeit transparent sein

Browser-Unterstützung

Die neuesten Versionen von Chrome, Firefox, Safari und Opera unterstützen bestimmte HTML5-Funktionen. Internet Explorer 9 unterstützt bestimmte HTML5-Funktionen. Inländisches Maxthon sowie inländische Browser wie 360 ​​Browser, Sogou Browser, QQ Browser und Cheetah Browser, die auf IE oder Chromium (der technischen Version oder experimentellen Version von Chrome) basieren, unterstützen ebenfalls die HTML5-Fähigkeit.

Neue Funktionen

Einige interessante neue Funktionen in HTML5 hinzugefügt:

1. Semantische Tags

header<span style="font-family:Microsoft Yahei , Hiragino Sans GB, Helvetica, Helvetica Neue, 微软雅é»', Tahoma, Arial, sans-serif"> </span>footer , nav , aside , section , meau , template , article , Audio, Video, Leinwand usw.

2, webStorage Speichermechanismus sessionStorage und <code>localStorage

webStorage: Verwenden Sie HTML5, um Benutzerbrowserdaten lokal zu speichern. Früher wurden bei der lokalen Speicherung Cookies verwendet. Der Webspeicher muss jedoch sicherer und schneller sein. Diese Daten werden nicht auf dem Server gespeichert, sondern nur verwendet, wenn Benutzer Website-Daten anfordern. Es kann auch große Datenmengen speichern, ohne die Leistung der Website zu beeinträchtigen. Daten liegen in Schlüssel/Wert-Paaren vor und die Daten einer Webseite dürfen nur von dieser Webseite aufgerufen und genutzt werden.

Web Storage ist in zwei Typen unterteilt: SessionStorage und LocalStorage, das heißt, diese beiden sind eine Instanz von Storage. Anhand der wörtlichen Bedeutung ist deutlich zu erkennen, dass sessionStorage die Daten in der Sitzung speichert und beim Schließen des Browsers verschwindet, während localStorage die Daten immer lokal auf dem Client speichert. Die von seiner API bereitgestellten Methoden sind wie folgt:

setItem (key, value) ——  保存数据，以键值对的方式储存信息。

getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

clear () ——  删除所有的数据

key (index) —— 获取某个索引的key

localStorage: Datenspeicherung ohne zeitliche Begrenzung

Der Lebenszyklus von localStorage ist dauerhaft. Wenn Sie localStorage zum Speichern von Daten verwenden, verschwinden die Daten nicht, es sei denn, Sie löschen sie aktiv. Die verwendete Methode ist wie oben gezeigt. localStorage verfügt über ein Längenattribut. Sie können überprüfen, wie viele Datensätze es enthält. Die Verwendung ist wie folgt:

var storage = null;                          //判断浏览器是否支持localStorage
    if(window.localStorage){
        storage.setItem("name", "Rick");     //调用setItem方法，存储数据
            alert(storage.getItem("name"));  //调用getItem方法，弹框显示 name 为 Rick
            storage.removeItem("name");      //调用removeItem方法，移除数据
            alert(storage.getItem("name"));  //调用getItem方法，弹框显示 name 为 null
    }

sessionStorage: Datenspeicherung für eine Sitzung🎜🎜 Der Lebenszyklus von sessionStorage liegt vor dem Schließen des Browsers. Mit anderen Worten: Die Daten bleiben immer bestehen, bis der gesamte Browser geschlossen wird. sessionStorage verfügt auch über ein Längenattribut, dessen grundlegende Beurteilung und Verwendung mit denen von localStorage identisch sind. Die folgenden Punkte müssen beachtet werden: 🎜 (1) Durch das Aktualisieren der Seite werden die Daten nicht gelöscht. 🎜 (2) Nur auf der aktuellen Seite geöffnete Links können auf SessionStorage-Daten zugreifen. 🎜 (3) Verwenden Sie window.open, um die Seite zu öffnen Ändern Sie es. Die Methode localtion.href kann die internen Daten von sessionStorage abrufen. 🎜🎜🎜 Das Verlaufsobjekt speichert den Verlauf des Internetzugriffs des Benutzers ab dem Moment, in dem das Fenster geöffnet wird. 🎜🎜Verwenden Sie die Methode go(), um beliebig im Verlauf des Benutzers zu springen, entweder vorwärts oder rückwärts. 🎜🎜Diese Methode akzeptiert einen Parameter, einen ganzzahligen Wert, der die Anzahl der Seiten angibt, die rückwärts oder vorwärts gesprungen werden sollen. 🎜🎜Negative Zahlen stehen für einen Rückwärtssprung (ähnlich der „Zurück“-Schaltfläche eines eigenständigen Browsers) 🎜🎜Positive Zahlen stehen für einen Vorwärtssprung (ähnlich der „Vorwärts“-Schaltfläche eines eigenständigen Browsers) 🎜

history.go(-1) // 后退一页 
history.go(1) // 前进一页 
history.go(2) // 前进两页

🎜Das können Sie auch Geben Sie go() Die Methode übergibt einen Zeichenfolgenparameter und der Browser springt zur ersten Position im Verlauf, die die Zeichenfolge enthält – möglicherweise vorwärts oder rückwärts. Hängt davon ab, welcher Standort am nächsten liegt. Wenn der Verlauf den String nicht enthält, führt diese Methode nichts aus🎜

history.go('wrox.com') // 调到最近的 wrox.com 页面

🎜Sie können anstelle von go() auch die beiden Kurzmethoden back() und forward() verwenden. Beide Methoden ahmen die „Zurück“- und „Vor“-Schaltflächen des Browsers nach. 🎜

history.back() // 后退一页
history.forward() // 前进一页

🎜🎜4. Upgrade von Formularelementen🎜🎜

传统的表单元素：form、laber、textarea、select、button...

input（text、password、radio、checkbox、file、submit、reset、button）

Html5给input新增加一些类型（search、email、number、tell、range、color、date）

升级：给表单元素新增加属性placeholder（给表单元素设置提示信息）

升级：提供了新的下拉框方式

5、多媒体

用于回放的 video 和 audio 元素

6、用于绘画的 canvas

5ba626b379994d53f7acf72a64f9b697定义图形,绘制路径，矩形，圆形，字符以及添加图像的方法 。

　　首先创建canvas元素，并规定元素的id、宽度和高度撒的：

　　　　　　65bf494c1b23a47c81fdf73594820646c2caaf3fc160dd2513ce82f021917f8b
　然后通过javas来绘制。Canvas元素本身没有绘图能力，所有的绘制工作必须在javascript内部完成渐变。
　　　　　　5cd6e472395e766622bc5d31b556eb7a
　　　　　　　　　　var c=document.getElementById("myCanvas");
　　　　　　　　　　var cxt=c.getContext("2d");
　　　　　　　　　　cxt.fillStyle="#FF0000";
　　　　　　　　　　cxt.fillRect(0,0,150,75);
　　　　　　2cacc6d41bbb37262a98f745aa00fbf0

　　JavaScript 使用 id 来寻找 canvas 元素：

　　　　　　var c=document.getElementById("myCanvas");

　　然后，创建 context 对象：

　　　　　　var cxt=c.getContext("2d");

　　getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

　　下面的两行代码绘制一个红色的矩形：

　　　　　　cxt.fillStyle="#FF0000";
　　　　　　cxt.fillRect(0,0,150,75);

　　fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

　　下面的两行代码绘制一条直线：

　　　　　　cxt.moveTo(100,100);

　　　　　　cxt.lineTo(200,200);

　　下面的一行代码是画一个圆：

　　　　　　cxt.arc(70,18,15,0,Math.PI*2,false);

　　这些属性值分别对应的是什么，70,18分别是X轴和Y轴，15是这个圆的半径，0是角度,Math.PI*2是圆周率，false代表顺时针而true是逆时针。

　　颜色的渐变效果也是可以实现的：

　　　　<script type="text/javascript">
　　　　　　　　var c=document.getElementById("myCanvas");
　　　　　　　　var cxt=c.getContext("2d");
　　　　　　　　var grd=cxt.createLinearGradient(0,0,175,50);
　　　　　　　　grd.addColorStop(0,"#FF0000");
　　　　　　　　grd.addColorStop(1,"#00FF00");
　　　　　　　　cxt.fillStyle=grd;
　　　　　　　　cxt.fillRect(0,0,175,50);
　　　　 </script>

　　还有一些其他效果:

　　　　曲线quadraticCurreTo

　　　　字体fillText

推荐教程：《html视频教程》

Das obige ist der detaillierte Inhalt vonWas ist neu in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!