HTML5简明教程(一)概述

2021-01-14 10:38:48 浏览数 (1)

HTML5遵循的理念是不破坏原有HTML规则下,增加更多新功能,不仅仅是HTML标签,还涉及需要JavaScript支持的富Web应用开发,以及CSS3。

《深入浅出HTML5》将分为几个篇章对HTML5新特性进行介绍。

1. HTML5模板
代码语言:javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
// 内容
</body>
</html>
  • <!DOCTYPE html>: HTML5文档类型,默认会触发标准模式。如果不定义文档类型,浏览器会以混杂模式显示页面,不同浏览器的混杂模式不同,这样会导致页面在不同浏览器下显示不一致。
  • <html lang="en">: 为页面内容指定语言,这里使用英语。
  • <meta charset="UTF-8">: 定义字符编码,这里是使用UTF-8编码,支持中英文。
  • <link rel="stylesheet" href="style.css">: 定义外部样式表,不再需要type="text/css"属性。
  • <script src="script.js"></script>: 定义JavaScript,不再需要type="application/javascript"属性。
2. 新增元素
  • 构建页面的语义元素:<article>, <aside>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <nav>, <section>, <details>, <summary>,都是块级元素。
  • 标识文本的语义元素:<mark>, <time>, <wbr>,都是内联元素。
  • Web表单及交互:<input type="email/url/search/tel/number/range/date/color">, <datalist>, <keygen>, <meter>, <progress>, <command>, <menu>, <output>
  • 音频,视频和插件:<audio>, <video>, <source>, <embed>
  • 绘图Canvas:<canvas>
3. 浏览器支持

推荐工具 http://caniuse.com/ ,通过它可以查看浏览器对HTML5支持情况。比如canvas标签:

canvas support.png

0 人点赞