HTML5学习笔记(一)

发布时间:2020-06-03 18:05:27 作者:qe2592008
来源:网络 阅读:549

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

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

    下面我就来研究一下HTML5

1、关于申明

    老版的HTMLHTML4.01XHTML1.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
定义文档页尾


接上所述,上文曾提到,每个语义标签都可以形成一个独立的自我空间,其内部的一切皆由该语义标签来限定,即其内部的一切并不会影响该标签外部的区域,这样就有了这样一个例子,以前我们使用<h2>~<h7>标签时,通常遵循这样的惯例:一个HTML文档内部有且只能有一个<h2>标签,用于定义该网页的主标题,而其余的各个标题则使用<h3><h4>标签来定义,以突出主标题的重要性,为网页的SEO提供条件;然而现在,我们有了HTML5,我们可以在每个独立的空间内利用<h2>来定义自己的主标题,利用<h3><h4>来定义副标题,由于每个语义标签的独立性,其内部的<h2>将不会影响到主页面的主标题的权重。如下面的例子所示:

<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
</head>
<body>
<header>
<nav>导航</nav>
</header>
<h2>主页面标题</h2>
<section>
<h2>区域1标题</h2>
<article>
<h2>文章1标题</h2>
<p>文章1内容</p>
</article>
<article>
<h2>文章2标题</h2>
<p>文章2内容</p>
</article>
</section>
<section>
<h2>区域2标题</h2>
<article>
<h2>文章3标题</h2>
<p>文章3内容</p>
</article>
<article>
<h2>文章4标题</h2>
<p>文章4内容</p>
</article>
</section>
<aside>侧边栏</aside>
<footer>结尾</footer>
</body>
</html>




推荐阅读:
  1. 网站推广有哪些技巧
  2. 如何使用Nginx为网站配置https

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

网站 标签 网页设计

上一篇:ByteBuddy工具的使用场景有哪些?

下一篇:Infortrend全闪存阵列GSa 5000, 数据中心的一场“完美风暴”

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》