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. Linux下apache日志分析与状态查看方法

    假设apache日志格式为:118.78.199.98 – - [09/Jan/2010:00:59:59 +0800] “GET /Public/Css/index.css HTTP/1.1″ 30 ...

  2. 实践中的Git常用指令分析

    从工作开始,一直都在使用为知笔记(作为程序员需要知道的内容很多---不需要很深入理解,一段时不使用的东西可能就会忘记).但本周一同步不同PC端时,了解到为知会在2017/1/1开始收费! 既然收费了, ...

  3. xtrabackup工具安装

    1.首先从官网上http://www.percona.com/下载较新版本的xtrabackup percona-xtrabackup-2.2.7-5050-Linux-x86_64.tar.gz 2 ...

  4. 用scala实现一个sql执行引擎-(下)

    执行 上一篇讲述了如何通过scala提供的内置DSL支持,实现一个可以解析sql的解析器,这篇讲如何拿到了解析结果-AST以后,如何在数据上进行操作,得到我们想要的结果.之前说到,为什么选择scala ...

  5. socket进阶

    socketserver(在Python2.*中的是SocketServer模块)是标准库中一个高级别的模块.用于简化网络客户与服务器的实现(在前面使用socket的过程中,我们先设置了socket的 ...

  6. JavaScript知识架构学习路径(一)- 变量篇

    [摘要]本文是专为JavaScript入门者而总结的,总体上将JavaScript的基础部分分成了九大块,分别是变量.运算符.数组.流程控制结构.字符串函数.函数基础.DOM操作基础.文档对象模型DO ...

  7. 整理ORACLE数据库备份常用术语

    本文将讲述在备份是常用的数据库相关术语以及业界定义的专业术语,供大家参考和学习. 数据库相关术语: (1)冷备份: 冷备份是将数据库关闭之后,将数据文件.联机日志文件.控制文件拷贝到其他地方进行备份. ...

  8. node-webkit教程(9)native api 之Tray(托盘)

    node-webkit教程(9)native api 之Tray(托盘) 文/玄魂 目录 node-webkit教程(9)native api 之Tray(托盘) 前言 9.1  Tray简介 9.2 ...

  9. os.popen(command)

    command="/usr/local/sbin/xxx_cmd" os.popen(command) xxx_cmd是自己编译的二进制文件,如果不加上全路径/usr/local/ ...

  10. Entity Framework 乐观并发控制

    一.背景 我们知道,为了防止并发而出现脏读脏写的情况,可以使用Lock语句关键字,这属于悲观并发控制的一种技术,,但在分布式站点下,锁的作用几乎不存在,因为虽然锁住了A服务器的实例对象,但B服务器上的 ...