一、什么是 HTML5

首先要知道网站是由展示特定内容相关的网页集合组成的，而网页则是用 html,css 语言等制作出来的，也就是 web，Web 标准提出的最佳体验方案：结构、表现、行为 相分离。这里面的‘’结构‘’就指的是 HTML

HTML 是一种用于创建网页的标准标记语言，是用来描述网页的一种语言。我们常以.html 后缀结尾的文件，俗称为 HTML 文件，是用来描述网页的一种语言。它不是一种编程语言，而是一种标记语言，因此网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的。

我们所学习的 HTML5 是 HTML 的第五个主要版本，也是目前最流行的 HTML 版本, 它引入了许多新的功能，旨在使网页设计更加丰富，同时也增强了网页的互动性和多媒体支持。所以 HTML5 值得我们去学习。

二、简单示例

    
    
    


     
标题
     
段落

实例解析

以上是一个最简单的 HTML5 的示例。

 声明为 HTML5 文档

 元素是 HTML 页面的根元素，是最大的标签。里面的 lang=”en”： 用来定义当前文档显示的语言。en 定义语言为英语，zh-CN 定义语言为中文。

 元素包含了文档的元（meta）数据，文档的头部，（这里指的是元（meta）数据的 charset 字符集，后面跟的是编码格式，注意：这里的中文的编码格式是固定的只能是 ”utf-8″ 或 ”UTF-8″）定义网页编码格式为 utf-8。

 元素描述了文档的标题

 元素包含了可见的页面内容，文档的主体

 元素定义一个大标题

 元素定义一个段落

运行结果如下：

三、HTML5 基础详解

1. 基本语法概述及各部分详解

HTML 标题

是由尖括号包围的关键词，例如 ， 在 HTML 中标签是成对出现的，例如 和，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。

有些特殊的标签必须是单个标签例如
，称为单标签。

当然，标签与标签之间也是有一定关系的，我们可以分为两类：包含关系（父子）和并列关系（兄弟）。

包含关系

    
This is a heading

并列关系

This is a heading
This is a paragraph.

基本结构：每个网页都会有一个基本的结构标签，页面内容也是在 这些基本标签上书写。

就像上面所给的第一个例子除去

，

剩余部分的标签就是最基本的结构。

下面让我们认识一下一些基本的标签

1.

–

标签

     
标题
     
副标题
     
小标题
     
小小标题
     
最小标题
     
最小最小标题

特点是加了标题的文字会变的加粗，字号也会依次变小。一个标题独占一行。h1-h6 字号大小依次减小。

2.

标签

段落

想要把文字有条理地显示出来，将这些文字分段显示就用到了

。该标签用于定义段落，它可以将整个网页分为若干个段落。

特点是段落和段落之间保有空隙。

3.
标签

段落段落段落段落段落段落段落段落段落段落段落段落 
 段落段落段落段落段落段落

在我们编辑文本时，如果希望某段文本强制换行显示，就需要使用换行标签
。就可以看做是一个强制换行的标签。

特点是一个单标签，只是简单地开始新的一行。

以上列举了几个可能会经常用到的常见标签，HTML 中还有很多这种标签可供大家学习。

案例练习：

请完成如图所示这样的一个网页制作

大家可以先分析一波可以把以上内容分为三部分，先是一个大标题显然使用了一个

，再看副标题因为字号没有总标题大而且有加粗的效果过，可以看出可能使用的是一个

, 最后主题部分内容使用的

段落。

所以这道简单的案例代码如下

    
    
    


    
    
水花 61 分致胜抢断 西决勇士再胜开拓者总分 2 -0
    
数据统计: 水花兄弟合砍 61 分
    

        库里 22 投 11 中, 三分 14 投 4 中, 罚球 11 罚全中得到 37 分 8 篮板 8 助攻, 职业生涯季后赛得分 30+ 次数来到 35 次，超过哈登排名现役第 3 位，仅次于詹姆斯和杜兰特。

        

        汤普森 22 投 8 中，三分 8 投 4 中得到 24 分 3 篮板 2 助攻，德拉蒙德 - 格林得到 16 分 10 篮板 7 助攻 5 盖帽，凯文 - 鲁尼得到 14 分 7 篮板 2 助攻，今天勇士有 7 名替补出场。

        开拓者这边，利拉德 16 投 6 中，三分 12 投 5 中得到 23 分 10 助攻 5 篮板，他第四节只得到 6 分，CJ 麦科勒姆 23 投 9 中，三分 7 投 3 中，得到 22 分 5 助攻，他第四节 6 投不中没有得分。塞斯 - 库里 9 投 5 中，三分 7 投 4 中得到 16 分 4 抢断 2 助攻，在场期间开拓者赢了 13 分，是开拓者全场打得最好的球员。
    
兄弟对决升级：小库里给哥哥造成压力
    

        库里兄弟是 NBA 历史上第一对在分区决赛相遇的兄弟。在西决第 1 场中，小库里没有给哥哥造成压力，他出场 19 分钟，7 投 1 中只得到 3 分 3 篮板 2 助攻，在场期间输掉 10 分。


        但在西决第 2 场中，小库里攻防两端都打出杰出的表现，全场送出 4 次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。

文本内容可以自己寻找做出框架即可，注意当我们发现运行的时候出现一行页面过长别忘了使用
进行强制换行观看更便捷美观。

今日大体学习部分如下，

不要担心还没有学过的例子。

您将在下面的章节中会学到它们。