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. oracle 用户的管理<二>

    oracle 用户的管理 创建用户 概述:在 oracle 中要创建一个新的用户使用 create user 语句,一般是具有 dba(数据库管理员)的权限才能使用. create user 用户名 ...

  2. fastjson生成和解析json数据，序列化和反序列化数据

    本文讲解2点: 1. fastjson生成和解析json数据 (举例:4种常用类型:JavaBean,List<JavaBean>,List<String>,List<M ...

  3. Robot Framework-DatabaseLibrary数据库(MySql)

    Robot Framework-Mac版本安装 Robot Framework-Windows版本安装 Robot Framework-工具简介及入门使用 Robot Framework-Databa ...

  4. Git 常用几个操作

    获取 git clone git@github.com:XXX/learning.git 更新 git pull  添加 git add XXX 上传本地 git commit -m "ap ...

  5. 关于mysql占用CPU过高，问题解决

    使用SHOW PROCESSLIST 查看 原因: 使用了 一个触发器 不断的去删除日志,保证每个用户的日志只有10条 去掉之后,CPU使用率从97% 降到了 %. 利用show columns fr ...

  6. 数据库知识整理<六>

    聚合函数与分组 6.1使用聚合函数进行数据统计: 聚合函数常见的有以下几种: count:返回该结果集中行的数目. sum:返回结果集中所有值的总和. avg:返回结果集中所有值的平均值. max:返 ...

  7. [Xamarin] 透過 intent-filter 來接管 http ，製作偽瀏覽器 （转帖）

    使用Android 的朋友一定對這畫面不陌生在開啟網址的時候,或是Youtube連結的時候,因為Android 發現,你手機安裝的App有哪些可以支援這些東西的瀏覽 所以,就可以使用甚麼東西來進行開啟 ...

  8. We have detected that MySQL products under the Commercial license are installed. In order to proceed with this GPL installation these Commercial

    下载了MySQL 5.6.15,在安装时,出现了下面的提示信息: 按提示信息的要求单击“是”,结果安装就无法进行下去. 从提示信息上看,意思是指电脑中原来安装有商业版的许可,现在要转换成为GPL许可. ...

  9. Dynamic CRM 2013学习笔记（三十七）自定义审批流7 - 初始化（整套审批流下载、安装）

    前面介绍了自定义审批流的配置.使用,这篇介绍下如何进行初始化. 一. 下载 从下面的地址下载整个审批流: http://yunpan.cn/cZ5Rdx5HCt3VF 下载完后,一共有三块内容: 二. ...

  10. TypeScript:类（Classes）

    返回TypeScript手册总目录 传统的Javascript关注的是函数(function)和基于原型(prototype-based)的继承作为构建可重复使用组件的基本方式,但是与更舒服地使用面向 ...