HTML5学习笔记

浏览数：24 / 时间：2015年06月09日

HTML5是一个崭新的标记语言。

HTML5提供许多新的标签，这些标签其实大多数在我们以往的网页设计中已经经常用到了，只是HTML5将其标准化了而已。所以我们的设计理念方法其实还是不变的，只是将需要替换的标签进行替换即可，当然HTML5还提出了不少新的理念，这些个内容则需要我们认真去研究一下了，所以我们学习HTML5，其实就是在学习这些新的设计理念。

下面我就来研究一下HTML5

1、关于申明

老版的HTML（HTML4.01、XHTML1.0）开头的申明语句内容极为丰富，丰富到我看着就哆嗦的地步，太长了，我是记不住，每次就是网站复制。<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5中对网站申明进行了大改革，短短一句<!DOCTYPE HTML>道尽了一切，精简的语句会令整个代码显得非常整洁。

2、文档编码

这个文档编码同样也获得了精简的权利，此后仅仅需要在<head></head>之间加上一句<meta charset=”utf-8”>，同样非常简单。

  附：原文档编码：<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

3、语义性标签

HTML5让人津津乐道的一个方面就是她新增的诸多语义性标签，这些标签极大地规范了代码的意义。

首先我先搭建一个简单地、标准的HTML5页面代码：

<!doctype html>

<html>

<head>

<meta charset=”utf-8”>

</head>

<body>

<header>

<nav>导航</nav>

</header>

<section>

<article>文章</article>

<aside>侧边栏</aside>

</section>

<footer>结尾</footer>

</body>

</html>

从上面的代码中可以很轻松的看出来他与以前的代码的区别：以前的许多许多的<div class=””><div id=””>没有了，取而代之的是语义更为明确的标签，强大的语义标签几乎可以控制整个页面，因为他们支持嵌套，一个页面有开头、内容、结尾，这其中的内容、结尾同样可以拥有自己的开头、内容、结尾，而且还可以持续嵌套下去，也就是说，几乎每一个标签的开合就会形成一个闭合的空间，在这个空间的内部可以衍生出完美的事物（即语义标签在一个网页中并不是只能出现一次，他不仅可以出现多次，而且在不同的空间中时互相之间并不干扰，她只为他所在的空间服务）。

语义标签

序号	标签	意义
1	nav	定义导航
2	header	定义文档页眉
3	section	定义文档区域
4	article	定于侧边栏
5	aside	定义侧边栏或相关内容
6	footer	定义文档页尾