HTML5 代表未来；W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML，从而使 HTML5 成为正式标准并得到认可。

最简单的 HTML5 文档

<!doctype html>

<title>A Tiny HTML Document</title>

<p>Let's rock the browser, HTML5 style.</p>

只包含一行文本的超简单的 HTML5 文档，它在浏览器中效果如下：

更常见的结构用 <head> 和 <body>来分块，把页面的信息和页面的实际内容分开，并用 <html>来封装整个文档，现在的文档样子如下：

<!doctype html>

<html>

<head>

  <title>A Tiny HTML Document</title>

</head>

<body>

  <p>Let's rock the browser, HTML5 style.</p>

</body>

</html>

<html>、<head>和<body> HTML5 不要求这些元素，但是这种书写风格比较好。

HTML5 文档类型

<!doctype html>

第一行都必须是一个特定的文档类型声明，用于告诉后面的文档标记遵循哪个标准。HTML5 的文档类型声明极其简单。

字符编码

现在大部分网站都使用 UTF-8 的编码，这种编码简洁、转换速度快，而且支持任何你想要的非英文字符。

在 HTML5 中增加字符编码信息很简单，在 <head> 中增加 <meta> 元素，如下：

<head>

  <meta charset="utf-8">

  <title>A Tiny HTML Document</title>

</head>

Dreamweaver 设计工具在创建新的网页时会自动添加这个元信息，并且也会将文件保存为 UTF 编码格式。如果你使用的是最简单的文本编辑器，在保存的时候记得选择正确的编码（UTF-8）。

页面语言

指明网页中使用的自然语言是一种好的习惯。为给内容指定语言，可在任何元素上使用 lang 属性。

为整个页面添加语言说明，就是为 <html> 元素指定 lang 属性，如下代码：

<html lang="zh-CN">

如果页面包含多种语言的文本，那么这个信息细节对于屏幕阅读器也是很有用的。

添加样式表

只要是经过特意设计的专业网站，就一定会使用样式表。指定要使用的 CSS 样式表时，需要在 <head> 中增加 <link> 元素，如下：

<head>

  <meta charset="utf-8">

  <title>A Tiny HTML Document</title>

  <link rel="stylesheet" href="TinyHTML5.css">

</head>

添加 JavaScript

在 HTML5 中添加 JavaScript 与在传统页面上添加差不多，例如：

<head>

  <meta charset="utf-8">

  <title>A Tiny HTML Document</title>

  <link rel="stylesheet" href="TinyHTML5.css">

  <script src="TinyHTML5.js"></script>

</head>

没有必要添加 language=”JavaScript”属性。浏览器假定你要使用的 JavaScript。

特别注意：

如果你要在 IE 中花大量时间测试包含 JavaScript 的页面，还应该增加一个特殊的注释，叫Web标志（saved from url=），这行注释要放在指定字符编码元素的后面，如下：

<head>

  <meta charset="utf-8">

  <!-- saved from url=(0014)about:internet -->

  <title>A Tiny HTML Document</title>

这条注释告诉 IE 将页面视为从远程网站上下载下来的，否则，IE 会切换到一种特殊锁定模式，弹出一条安全警告，在你点了“允许阻止的内容”按钮之后才会执行 JavaScript 代码。

(0014) 指的是 about:internet 字符串的长度。

最终结果

一个完整美观的 HTML5 代码最终如下：

<!doctype html>

<html lang="zh-CN">

<head>

  <meta charset="utf-8">

  <!-- saved from url=(0014)about:internet -->

  <title>A Tiny HTML Document</title>

  <link rel="stylesheet" href="TinyHTML5.css">

  <script src="TinyHTML5.js"></script>

</head>

<body>

  <p>Let's rock the browser, HTML5 style.</p>

</body>

</html>

努力学习 HTML5 （1）—— 初体验的更多相关文章

  1. 第三次随笔--安装虚拟机及学习linux系统初体验

    第三次随笔--安装虚拟机及学习linux系统初体验 ·学习基于VirtualBox虚拟机安装Ubuntu图文教程在自己笔记本上安装Linux操作系统 首先按照老师的提示步骤进行VirtualBox虚拟 ...

  2. 算法学习：并行化初体验_JAVA实现并行化归并算法

    这个系列包括算法导论学习过程的记录. 最初学习归并算法,对不会使其具体跑在不同的核上报有深深地怨念,刚好算倒重温了这个算法,闲来无事,利用java的thread来体验一下并行归并算法.理论上开的thr ...

  3. Spring Boot 学习笔记1——初体验之3分钟启动你的Web应用[z]

    前言 早在去年就简单的使用了一下Spring Boot,当时就被其便捷的功能所震惊.但是那是也没有深入的研究,随着其在业界被应用的越来越广泛,因此决定好好地深入学习一下,将自己的学习心得在此记录,本文 ...

  4. Yaf学习(二)----Yaf初体验

    1.hello world 1.1 用yaf输出hello world 1.首先配置host,nginx 2.host不用多说,指向虚拟机IP即可 1.2 重点说一下nginx (只说server块) ...

  5. 努力学习 HTML5 （4）—— 浏览器对语义元素的支持情况

    经过上一节学习,我们已经建立一个结构良好的页面,如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示. 毕竟这些语义元素什么也不做,要支持它们,只要让浏览器把它们当做普通的 <div> ...

  6. Visual Studio Code 学习.net core初体验

    一,安装 最近在用 Visual Studio Code 学习.net core ,记录下学习的过程,首先去官网下载最新的.net core2.1安装包,有windows 和mac,根据自己的开发环境 ...

  7. 努力学习 HTML5 （3）—— 改造传统的 HTML 页面

    要了解和熟悉 HTML5 中的新的语义元素,最好的方式就是拿一经典的 HTML 文档作例子,然后把 HTML5 的一些新鲜营养充实进入.如下就是我们要改造的页面,该页面很简单,只包含一篇文章. Apo ...

  8. 努力学习 HTML5 （2）—— 元素的增和删

    HTML5 放松了某些规则,HTML5 的制定者想让这门语言更紧密地反映浏览器的现实. 放松的规则 不要求包含 <html>.<head> 和 <body> 元素. ...

  9. Android学习之服务初体验

    •概念 Service(服务)是一个长期运行在后台,没有用户界面的应用组件,即使切换到另一个应用程序或者后台,服务也可以正常运行: 因此,服务适合执行一些不需要显示界面的后台耗时操作,比如下载网络数据 ...

随机推荐

  1. css之字体设置

    字体大小font-size 字体风格font-style 字体加粗font-weight 字体类型font-family 字体阴影text-shadow 字体行高line-height 字间距lett ...

  2. when you're gone

      when you're gone ——艾薇儿 I always needed time on my own 我真的需要一些独处的时间 I never thought I'd need you th ...

  3. hdu 1003

    Max Sum Time Limit: 1000MS   Memory Limit: 32768KB   64bit IO Format: %I64d & %I64u Submit Statu ...

  4. tomee 第一个 远程调用 Session Bean

    参考文档 http://tomee.apache.org/ http://download.oracle.com/otndocs/jcp/ejb-3.1-pfd-oth-JSpec/ http://d ...

  5. python基础整理笔记（二）

    一. 列表 1. 创建实例: a = [1,2,3] b = list() 2. 主要支持的操作及其时间复杂度如下: 3. 其他 python中的列表,在内存中实际存储的形式其实是分散的存储,比较类似 ...

  6. （状压） Brush (IV) （Light OJ 1018）

    http://www.lightoj.com/volume_showproblem.php?problem=1018   Mubashwir returned home from the contes ...

  7. (原创)基于MCU的频率可调，占空比可调的PWM实现(MCU,MCS-51/MSP430)

    1.Abstract     做这个是受朋友之邀,用在控制电机转动的方面.他刚好在一家好的单位实习,手头工作比较多,无暇分身,所以找我帮忙做个模型.要求很明晰,PWM的频率在0~1KHz范围内,占空比 ...

  8. linux-2 下tomcat重启定向输出日志

    #!/bin/sh pid=`ps aux | grep tomcat | grep -v grep | awk '{print $2}'` echo $pid if [ -n "$pid& ...

  9. Omu.AwesomeMvc.dll 和Omu.ValueInjecter.dll 介绍

    AwesomeMvc 让你不写一行js实现下拉列表联动 AwesomeMvc是个开源项目,地址:http://awesome.codeplex.com/ Omu.AwesomeMvc.dll 和Omu ...

  10. Magicodes.WeiChat——WeChatOAuthTest（网页授权获取用户基本信息）

    Demo访问地址:http://wechat.magicodes.net/app/AppDemo/WeChatOAuthTest?tenantId=1 关于公众号如何获取用户信息,请参考此文档:htt ...