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">

  

  <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）—— 初体验的更多相关文章

第三次随笔--安装虚拟机及学习linux系统初体验
第三次随笔--安装虚拟机及学习linux系统初体验 ·学习基于VirtualBox虚拟机安装Ubuntu图文教程在自己笔记本上安装Linux操作系统首先按照老师的提示步骤进行VirtualBox虚拟 ...
算法学习：并行化初体验_JAVA实现并行化归并算法
这个系列包括算法导论学习过程的记录. 最初学习归并算法,对不会使其具体跑在不同的核上报有深深地怨念,刚好算倒重温了这个算法,闲来无事,利用java的thread来体验一下并行归并算法.理论上开的thr ...
Spring Boot 学习笔记1——初体验之3分钟启动你的Web应用[z]
前言早在去年就简单的使用了一下Spring Boot,当时就被其便捷的功能所震惊.但是那是也没有深入的研究,随着其在业界被应用的越来越广泛,因此决定好好地深入学习一下,将自己的学习心得在此记录,本文 ...
Yaf学习(二)----Yaf初体验
1.hello world 1.1 用yaf输出hello world 1.首先配置host,nginx 2.host不用多说,指向虚拟机IP即可 1.2 重点说一下nginx (只说server块) ...
努力学习 HTML5 （4）—— 浏览器对语义元素的支持情况
经过上一节学习,我们已经建立一个结构良好的页面,如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示. 毕竟这些语义元素什么也不做,要支持它们,只要让浏览器把它们当做普通的 <div> ...
Visual Studio Code 学习.net core初体验
一,安装最近在用 Visual Studio Code 学习.net core ,记录下学习的过程,首先去官网下载最新的.net core2.1安装包,有windows 和mac,根据自己的开发环境 ...
努力学习 HTML5 （3）—— 改造传统的 HTML 页面
要了解和熟悉 HTML5 中的新的语义元素,最好的方式就是拿一经典的 HTML 文档作例子,然后把 HTML5 的一些新鲜营养充实进入.如下就是我们要改造的页面,该页面很简单,只包含一篇文章. Apo ...
努力学习 HTML5 （2）—— 元素的增和删
HTML5 放松了某些规则,HTML5 的制定者想让这门语言更紧密地反映浏览器的现实. 放松的规则不要求包含 <html>.<head> 和 <body> 元素. ...
Android学习之服务初体验
•概念 Service(服务)是一个长期运行在后台,没有用户界面的应用组件,即使切换到另一个应用程序或者后台,服务也可以正常运行: 因此,服务适合执行一些不需要显示界面的后台耗时操作,比如下载网络数据 ...

随机推荐

[Shell]条件判断与流程控制：if, case, for, while, until
---------------------------------------------------------------------------------------------------- ...
Servlet 的认识
Servlet的响应过程:1,web 客户端向 Servlet容器发出http请求2,Servlet容器接收客户端发来的请求3,创建一个 HttpRequest对象,将客户端发来的请求信息封装到这个 ...
Spring学习笔记 Part.01
Hibernate的作用: 1.可以解决以面向对象的方式操作数据库的问题请求参数(String)→Strut2→Action(对象)→业务逻辑组件(面向对象) 2.所以任何一个ORM框架都可以代替H ...
CodeForces 742B Batch Sort
B. Batch Sort time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
TCP/IP协议基础(转)
转自 http://www.chinaunix.net 作者:Bernardus160 发表于:2003-12-03 17:33:15 TCP/IP协议基础 -------------------- ...
Win7（32/64）VS2010配置编译GDAL环境（图文教程+亲测可用!）
最近的一个VS2010的项目中用到了GDAL,关于GDAL这个库的说明与赞美,这里就不赘述了,下面是在VS2010中配置GDAL的详细过程. 系统说明 Win7(32位/64位),VS2010,GDA ...
【Visual Lisp】变体与安全数组
(vlax-make-variant) ;;创建一个未初始化的变体 ;;01.整型值变体(setq myvar (vlax-make-variant 10)) ;;创建整型值变体,返回 #<va ...
（转）CSS 为不同大小的浏览器视窗使用不同的样式表
转自:http://www.iefans.net/liulanqi-shichuang-butong-yangshibiao/ 同一个网站,访问它的浏览器可能会是不同的宽度,常见的有320px,480 ...
Titanium系列－－利用Titanium开发android App实战总结
1. Titanium中,通过ImageView Controller 显示图片,图片地址要放在app/assets下,然后自己建一个文件夹,把图片放在这里.如下图,然后alloy代码:<Ima ...
C# 正则表达式测试工具与分享窗体自适应类
放假刚回来,自己打算写一个正则表达式的测试工具,因为上次在网上用的一个在线正则表示测试工具就没有很好的服务自己的,所以才有了现在的想法,想写一个C#开发者用的正则表达式测试工具!期间由于最大化时控件 ...

努力学习 HTML5 （1）—— 初体验