HTML5入门

HTML5是HTML的最新版本，目标是更好地开发网络应用程序。 HTML5比HTML4拥有更简洁的语法并且提供了更多新的特性。本文将对HTML5做一个大体的介绍。

HTML5能做什么？

1. 离线存储

HTML5可以让你的WEB应用程序离线也能运行,它提供了一个称作“应用程序缓存"的离线存储功能，因此即使当用户离线，浏览器仍然能够访问到它所需的文件。这些文件可以是HTML，CSS，Javascript 或者其它任何网页运行所需要的文件。

2.拖拽功能

HTML5提供了可以用来设计交互应用程序的本地拖拽功能，通过这个特性你可以拖动任何元素然后把它放到你想放到地方。

3.地理位置定位技术

HTML5的地理位置定位API可以让你与所信任的网站分享你当前的位置信息，当然，隐私问题是这一特性所主要考虑的，W3.org声明：

浏览器在没有用户许可的情况下不允许私自向网站发送用户的地理位置信息。

比如一位用户使用Firefox浏览器访问了一个实现地理位置定位技术的网页，浏览器会向用户询问是否共享他的地理位置信息，如果用户同意，Firefox 会收集附近无线接入点和访问者IP地址信息，并把这些信息发送到默认设定的Google地理位置服务，处理之后的位置信息将会发送给用户访问的这个网站。

4.音频和视频

当前的HTML缺少在页面中嵌入多媒体文件的特性，因此多媒体文件的嵌入需要使用各种的插件。比如FLASH被广泛地用来嵌入音频和视频文件。现在可以非常方便地使用HTML5提供的audio和video标签，而不用任何插件。

5.表单输入

HTML5提供了几个新的表单input类型，像弹出日历，调色板，数字输入框等等。这些可以创建拥有更好的输入控制和验证的高效表单。

简化的语法

文档类型Doctype:

文档类型的声明是一个HTML文档的第一行内容，它告诉浏览器这个页面是使用哪个版本的标记语言编写的。

比如,HTML 4.01 Transitional 文档类型的声明是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Transitional 文档类型声明的写法是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

而HTML5中，你只需要：

<!doctype html>

字符编码

为了验证或显示一个HTML文档，程序必须选择一种字符编码。

字符编码告诉浏览器和验证程序应该使用哪种编码由比特流转换为字符。

下面是HTML 4.01指定UTF-8字符编码的例子：

<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >

在XHTML中：

<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />

而现在使用HTML5,编码类型的语法非常简单：

<meta charset = "UTF-8">

因此，最基本的HTML文档结构应该是：

<!doctype html>
<html>
<head><meta charset="UTF-8"><title>Example document</title>
</head><body><p>Hello, World</p>
</body>
</html>

<script>标签

比如在HTML4里，<script>标签是这样定义的：

<script type="text/javascript" src="file.js"></script>

在HTML5里:

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

HTML5为script标签添加了一个新的可选属性“async", 用来告诉浏览器异步加载代码，所以这段代码在页面继续加载的同时就会被执行。可以像下面这样使用：

<script src = "code.js" async></script>

或者：

<script src="code.js" async="async" ></script>

<link>标签

<link rel="stylesheet" type="text/css" href="style.css" />

在HTML5K ,type属性跟<script>标签一样，都不需要。比如：

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

HTML5的新标签

HTML5为更好地组织内容和简化开发，添加了一些非常新奇和实用的标签，一些比较重要的如下：

<header>

header 标签包含网页的页面头部，里面常常放置页面包含的LOGO和其它有用的信息，像标语、菜单等等。使用<header>来代替<div id="header">

<nav>

这个标签是用来建立菜单导航的，可以使用<nav> 来代替<div id="nav">

<artical>

这个标签用来定义独立的内容，像那些博客文章、新闻、或者用户评论内容。

<section>

<section>用来分割页面的不同部分。

一个section是一组内容，一般sections可以嵌套在在header之前，footer之后。如果需要，它还可以包含任意数量的特殊标记。

<aside>

这个标签指定一个存放与页面内容无关的元素，可以用来定义边栏或者其它任何我们能想到的与页面正文内容无关的内容。

<figure>

<figure>标签用来注解插画、图表、照片和代码列表等等的。在<figure>标签里的<figcaption>标签定义标题。

<footer>

这个标签用来定义代替在页面底部的部分，常常用来包含像作者、版权信息、使用政策链接、隐私条件等信息。在<footer>里的联系信息应该使用<address>标签。

修改过的标签

<a>

在HTML5里，<a>标签允许在一行元素内包含多行元素，比如：

<a href="news.html"><h3>Iceland's Grimsvotn volcano erupting</h3><p>The eruption had begun at the Grimsvotn volcano.</p><p>Read more</p>
</a>

而在HTML 4.01里，〈a>标签只能包装超链接或者锚点,但是在HTML5里，<a>标签通常是一个超链接，但是如果没有指定href 属性，它只是一个放超级链接的地方

<b>

<b>标签是用来指定一段文本为粗体，而在HTML5里，使用这标签设定文本为粗体不再表达任何重要性。

<hr>

在HTML5里，<hr>标签显示一条水平线，并且在内容上标记了一个改动，而在HTML4.01里，它仅仅只显示一个水平线。

<i>

<i>标签在HTML5里不再唯一指定文字的斜体样式（虽然它可以是斜体的）。它现在代表文字是变化的语音或心情，或者与普通文本不同。

删除的标签

除了新加入的标签和修改的标签，也有一些标签HTML5不再支持，这些是：

<frame>,<frameset>和<noframes>:这些标签从HTML5中被移除了。

<font>：这个标签曾经用来定义字体样式、字体大小和颜色。

<s>和<strike>：这两个标签曾经用来定义带删除线的文本，现在用<del>标签来代替。

<u>:曾经用来定义带下划线的文本。

<center>：之前用来让文字和内容居中。

<big>:之前用来让字体大一些。

<applet>：以前用来定义一段嵌入的网页小应用程序。 HTML5建议使用<object>标签来代替。

<acronym>：这标签在HTML 4.01里曾经用来定义首字母缩写词。如果一个缩写词是一个单词，那么它可以被读出来，像NATO,NASA,ASAP,GUI。

总结一下

下面是一个完全的、非常基础的HTML5页面代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Example document</title></head><body><header><h1><a href="#">Welcome to my page</a></h1></header><nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul></nav><section><article><header><h3><a href="#">Article 1</a></h3></header><section><p>Lorem ipsum...</p></section></article><article><header><h3><a href="#">Article 2</a></h3></header><section><p>Lorem ipsum...</p></section></article></section><aside><h1><a href="#">Aside content</a></h1>Lorem ipsum dolor sit amet..</aside><footer><address>Contact us at:<br /><a href="/www.gazpo.com">Gazpo.com</address></footer></body>
</html>

原文：http://inspiregate.com/programming/html-css/389-html5-started-teaching.html

本文转自：HTML5对比HTML4带来的新变化

HTML5对比HTML4带来的新变化相关推荐

AI持续赋能，搜狗S1会给录音笔行业带来哪些新变化？
作者 | 持续赋能的出品 | CSDN(ID:CSDNnews) 2月26日,在以"同舟共记"为主题的"2020搜狗AI录音笔新品线上发布会"上,搜狗重磅推出 ...
Swagger3.0新版带来的新变化
在社区的推动下,Springfox3.0 去年 7 月份就发布了,最近终于得空和小伙伴们聊一聊新版本的新变化.这次的版本升级估计小伙伴们都翘首以待好久了,毕竟上一次发版已经是两年前的事情了. 在社区的 ...
5G时代，将为无人机通讯传输带来哪些新变化？
众所周知,我们正在大步迈向5G时代,在近几年的各类媒体关于5G的报道也络绎不绝.与此同时,无人机作为空中人工智能领域的"智慧眼",其行业应用迅速发展,应用需求不断增加,对于无线通信 ...
html5 对比 HTML4 新增,HTML5对比HTML4的主要改变和改进总结
这段时间一直在帮老师做项目比较忙,经常课都没去上,就泡在实验室里,也没什么时间看其他东西了.我在项目中分配到了前端页面设计这一块,有时候浏览网页看到移动端APP和html5最近都比较火的,随着移动互联 ...
“玩具新势力”葡萄科技能带来哪些新变化
长久以来,中国国产品牌生活在"洋品牌"的阴影之下,品牌号召力.品质都不被国人看好.但随着近年中国成为世界第二大经济体,国内企业对创新实力越来越重视,现如今各个行业都不可同日而语,各 ...
RFID正为零售防损带来新变化
6月1日,中国商业联合会商业防损专业委员会发布的<第六次全国商业安全调查报告>显示,2016年中国零售商业损失额高达1810亿元,商业损失率为0.71%,近五年损失率逐年上升.内.外盗是造 ...
HTML5与HTML4的差异对比(1)
1.对比html4和html5新增比较重要的功能 canvas标签元素(可结合js驱动其成为绘画容器,支持画点.线.面.圆.过度色效果等等) 一直期待且存在较大争议的 video 和 audio 标签 ...
第四节：HTML5给表单带来的新标签、新属性、新类型
上一章节讲了21个语义化的标签,这一节我们来讲表单标签,HTML5不仅仅给表单带来了新的标签,还给原来的标签带来了新的属性,这一节我们会来介绍介绍它们. 到目前为止,我们对HTML5的学习还是停留在新 ...
Android11对比IOS14,iPhone11升级至iOS14，对比苹果iOS13，迎来3大新变化
2020年的苹果秋季新品发布会实在有些"寒酸",重头戏iPhone12系列,因为种种原因并未亮相,令人遗憾不已.不过,在苹果发布会的第二天,将搭载与iPhone412系列上的iOS ...

HTML5对比HTML4带来的新变化