HTML5学习笔记(一）_程序开发

HTML5学习笔记(一）

admin

2023-02-10 18:40:04

0次

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

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

下面我就来研究一下HTML5

1、关于申明

老版的HTML（HTML4.01、XHTML1.0）开头的申明语句内容极为丰富，丰富到我看着就哆嗦的地步，太长了，我是记不住，每次就是网站复制。

HTML5中对网站申明进行了大改革，短短一句

道尽了一切，精简的语句会令整个代码显得非常整洁。

2、文档编码

这个文档编码同样也获得了精简的权利，此后仅仅需要在之间加上一句

，同样非常简单。

  附：原文档编码：

3、语义性标签

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

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








导航


文章
侧边栏

结尾

从上面的代码中可以很轻松的看出来他与以前的代码的区别：以前的许多许多的

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

语义标签

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

接上所述，上文曾提到，每个语义标签都可以形成一个独立的自我空间，其内部的一切皆由该语义标签来限定，即其内部的一切并不会影响该标签外部的区域，这样就有了这样一个例子，以前我们使用

~标签时，通常遵循这样的惯例：一个HTML文档内部有且只能有一个

标签，用于定义该网页的主标题，而其余的各个标题则使用

或

标签来定义，以突出主标题的重要性，为网页的SEO提供条件；然而现在，我们有了HTML5，我们可以在每个独立的空间内利用

来定义自己的主标题，利用

或

来定义副标题，由于每个语义标签的独立性，其内部的

将不会影响到主页面的主标题的权重。如下面的例子所示：








导航

主页面标题

区域1标题

文章1标题
文章1内容


文章2标题
文章2内容



区域2标题

文章3标题
文章3内容


文章4标题
文章4内容


侧边栏
结尾

上一篇：用Canvas为网页添加动态背景

下一篇：记一个html5 drawImage的问题NS_ERROR_NOT_AVAILABLE:

HTML5学习笔记(一）

将不会影响到主页面的主标题的权重。如下面的例子所示：

导航

主页面标题

区域1标题

文章1标题

文章1内容

文章2标题

文章2内容

区域2标题

文章3标题

文章3内容

文章4标题

文章4内容

侧边栏

结尾

相关内容

热门资讯

HTML5学习笔记(一）

将不会影响到主页面的主标题的权重。如下面的例子所示： 导航 主页面标题 区域1标题 文章1标题 文章1内容 文章2标题 文章2内容 区域2标题 文章3标题 文章3内容 文章4标题 文章4内容 侧边栏 结尾

主页面标题

区域1标题

文章1标题

文章2标题

区域2标题

文章3标题

文章4标题

相关内容

热门资讯

将不会影响到主页面的主标题的权重。如下面的例子所示：

导航

主页面标题

区域1标题

文章1标题

文章1内容

文章2标题

文章2内容

区域2标题

文章3标题

文章3内容

文章4标题

文章4内容

侧边栏

结尾