HTML5

一、初识HTML5

1、HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

概念1：超文本

所谓的超文本，有两层含义：

（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。

（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。

概念2：标记语言

HTML不是一种编程语言，是一种描述性的标记语言。这主要有两层含义：

（1）标记语言是一套标记标签。比如：标签表示超链接、标签表示图片、标签

表示一级标题等等，它们都是属于 HTML 标签。

说的通俗一点就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。

（2）编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。

2、HTML的专有名词

  • 网页：由各种标记组成的一个页面就叫网页。
  • 主页（首页）：一个网站的起始页面或者导航页面。
  • 标记：比如

    称为开始标记 ，

    称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
  • 元素：比如

    内容

    称为元素.
  • 属性：给每一个标签所做的辅助信息。
  • XHTML：符合XML语法标准的HTML。
  • DHTML：dynamic，动态的。javascript + css + html合起来的页面就是一个 DHTML。
  • HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，FTP：文件传输协议。

3、HTML文档的后缀名

  • .html
  • .htm

以上两种后缀名没有区别，都可以使用。

4、HTML5

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

5、HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG指Web Hypertext Application Technology Working Group（网页超文本应用技术工作小组）。

WHATWG致力于web表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

HTML5 中的一些有趣的新特性：

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如 article、footer、header、nav、section
  • 新的表单控件，比如 calendar、date、time、email、url、search

6、W3C

聊到网页我们就不得不提起一个组织：W3C。

W3C：World Wide Web Consortium，万维网联盟组织，用来制定web标准的机构（组织）。

W3C组织就类似于现实世界中的联合国。W3C就是网页世界的老大，规则都是由其来定的。所以我们在写网页的时候就需要遵守他的规则。

为什么要遵循WEB标准呢？因为很多浏览器的浏览器内核不同，导致页面解析出来的效果可能会有差异，给开发者增加无谓的工作量。因此需要指定统一的标准。

规则并不是用于约束小白的，而是用于约束高手的，因为高手会的太多，掌握太多他人所不会的。为了方便管理，所以需要规则加以约束。

7、Web标准

Web标准：制作网页要遵循的规范。

Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。

Web标准包括三个方面：

  • 结构标准（HTML）：用于对网页元素进行整理和分类。
  • 表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。
  • 行为标准（JS）：用于定义网页的交互和行为。

根据上面的Web标准，可以将 Web前端分为三层：

  • HTML（HyperText Markup Language）：超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。
  • CSS（Cascading Style Sheets）：层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。
  • JS：JavaScript。从交互的角度描述页面的行为。相当于人的动作，让人有生命力。

8、第一个HTML5文档

下面是我们写的第一个简单的HTML5文档。

我们新建一个文本文件，将扩展名改为.html，主文件自己定义，我们这里定义为：第一个网页.html

右键使用记事本或其他文本编辑工具（我使用的是Sublime Text）打开，输入以下文件内容如下：

DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8" />
　　<title>第一个HTML5文档title>
head> 
<body>
　　道虽迩，不行不至。事虽小，不为不成。——《荀子·修身》
body> 
html>

注意：对于中文网页需要使用  声明编码，否则会出现乱码。

现在直接双击这个文件就可以用浏览器打开了。

微软IE浏览器

谷歌Chrome浏览器

二、HTML结构

观察HTML文档的层级结构，我们发现是这样一种结构：

1、文档声明

任何一个标准的HTML页面，第一行一定是一个以开头的语句。

这一行，就是文档声明，即 DocType Declaration，简称DTD。

DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

声明必须位于HTML5文档中的第一行，使用非常简单：

DOCTYPE html>

在HTML4.01中写作：

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

可以看出，HTML5对于文档声明做了极大的简化。

2、根标签html

标签可告知浏览器其自身是一个 HTML 文档。

与标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

文档的头部由  标签定义，而主体由  标签定义。

我们可以给标签指定lang属性，来设置语言。

<html lang="zh-CN">
  <head>
    <title>标题title>
  head>
  <body>
  body>
html>

lang属性用于指定页面语言，最常见的语言类型有两种：

  • en：定义页面语言为英语。
  • zh-CN：定义页面语言为中文。
注意：即使 html 元素是文档的根元素，它也不包含 DOCTYPE 元素。DOCTYPE 元素必须位于 html 元素之前。

3、头标签head

html5 的比较完整的骨架：

DOCTYPE html>
<html>
  <head>
    
    
    <meta charset="UTF-8" />
    
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    
    <meta name="Author" content="lihuawei" />
    
    <meta name="Keywords" content="网页,HTML" />
    
    <meta name="Description" content="这是我们的第一个网页" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <title>Documenttitle>
  head>
  
  <body>
    我们的第一个网页
  body>
html>

头标签内部的常见标签有：