【麦子学院】03.web前端开发之HTML5+CSS3快速入门之基本HTML5元素介绍

1.课程简介

本教程适用人群: 只要你对网页前端技术感兴趣，你就可以学习，听了本教程之后你也会学会利用HTML5制作出一个完美的网页

课后目标: 完全掌握HTML5网页结构，熟悉并掌握常用的CSS3新增的样式属性，能够独立地完成常见HTML5网页

2.什么是HTML5

1)首先了解HTML

HTML即超文本标记语言（HyperTextMarkup language）,这是一种语法简单、结构清晰的语解释型文档,他不同于其他的编程语言。

HTML5就是HTML网页标记语言的第五次重大更新产品，在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。

2)HTML5的目标

HTML5它的产生，最简单的目标就是，用更简洁的HTML代码创建更多功能的网页程序！并且HTML5让网页结构变得更加的清楚明了，增加了更加语义化的结构标签，这样一个网页的结构就非常清晰，那个部位显示的什么内容，让人一目了然！

3)HTML5的好处

为开发人员节约时间，这句好话怎么理解，因为之前我们所使用的HTML/XHTML在各大浏览器之间存在的不兼容问题显示的非常严重的问题，然而HTML5的出现就是为了解决这一个问题，HTML5的目标就是将HTML5网页上的音视频、图像、动画等等都带入一个国际标准化！

4)结构清晰的HTML5

结构清晰的HTML5，在HTML5中增加了主体元素，比如新增的NAV标签，表示的就是导航的意思，而之间呢，就是用DIV并没有实际的意义！

5)放心的使用HTML5

兼容性：HTML5在老版本的浏览器上面也可以完美运行。

实用性：HTML5抛弃了不切实际的功能，一切按照实用性的线路出发！

6)WebStorm开发工具安装(略)

3.认识新的网页结构

新的网页结构

<!DOCTYPEhtml>

<html>

<headlang="en">

</head>

<body>

</body>

</html>

1) doctype声明

HTML4中的DOCTYPE声明格式：<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5中的DOCTYPE声明格式：<!DOCTYPEhtml>

2）网页字符编码

HTML4中是指定<meta>元素的形式来制定网页的字符编码，如下：

<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8" />

而在HTML5中是对<meta>元素直接进行追加sharset属性来指定字符，如下：<metacharset="UTF-8">

3）<header>元素

header元素表示页面中的一个内容区块或者整个页面的标题！

HTML5中使用方法：<header></header>

4）<nav>元素

nav元素表示页面中的导航链接部分。

HTML5中使用方法：<nav>...</nav>

<article>元素

article元素表示页面中的一块玉上下文不相关的的独立内容，比如一篇文章中的文章。

HTML5的使用方法：<article></article>

6）<section>元素

cection表示页面中的一块内容区块，比如章节的页眉、页脚等等。也可以和Hn（h1、h2..)等一起使用，标示出文档的结构！

7）<aside>元素

aside元素表示article元素的内容之外的，和内容相关的辅助信息！

8）<footer>元素

footer表示页面或者是页面中的一块区域的页脚，比如存放文件的创建时间、作者、联系方式等等。<footer></footer>

4.article元素的使用方法

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

例子:

<h2>NetscapeIs Dead</h2>

AOLhas now officially announced that they will end

thedevelopment and support of all Netscape browsers.

</article>

5.section元素

<section>标签定义文档中的节（section）。比如章节、页眉、页脚或文档中的其他部分。

【麦子学院】03.web前端开发之HTML5+CSS3快速入门之基本HTML5元素介绍

6.aside元素

<aside>标签定义article 以外的内容。aside 的内容应该与article 的内容相关。Aside 的内容是独立的内容，但应与文档内容相关

<!--<header>

<h1>国庆节去成都看熊猫</h1>

</header>

<h2>看熊猫去大熊猫基地</h2>

<p>哪里有很多的熊猫</p>

<aside>

<dl>

<dd>大熊猫基地在四川卧龙</dd>

</dl>

</aside>

</article>-->

<aside>

<p>国庆节放假通知</p>

<p>中秋节放假通知</p>

</aside>

7.nav元素

Nav元素是可以用作页面导航的一个链接组。使用场合为1、传统的导航条2、侧边栏导航3、内页导/4、翻页操作

<h1>NAV的使用方法</h1>

<nav>

<ul>

<li>

</li>

<li>

<a href="aside元素.html">aside</a>

</li>

<li>

<a href="section元素.html">section</a>

</li>

</ul>

</nav>

<h2>

NAV-1

</h2>

<nav>

<li>

<a href="section元素.html">section</a>

</li>

<li>

<a href="新增的主体结构元素.html">新增的主体结构元素</a>

</li>

</nav>

</header>

</article>

<h2>

NAV-1

</h2>

<nav>

<li>

<a href="section元素.html">section</a>

</li>

<li>

<a href="新增的主体结构元素.html">新增的主体结构元素</a>

</li>

</nav>

</header>

</article>

<p>

</p>

</footer>

8.time元素

Time元素表示的是24小时中的某一个时刻或者是某一个日期，表示的时刻允许带时差或者说是标准时间

9.pubdate属性

Pubdate可以用在article元素里面的time上表示当前文章的发布时间

<h1>你好Pubdate</h1>

</header>

10.Header元素合成

Header元素是一种具有引导和导航的元素，通常用来放置整个页面或者页面内一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片，搜索表单等

注意一个页面并没有限制header的次数。在HTML5中一个header元素至少可以包含一个heading元素(h1-h6),也可以包含hgroup元素。

11.hgroup元素合成

hgroup元素是将标题和他的子标题进行分组的元素。hgroup元素一般会把h1-h6的元素进行分组，比如在一个内容区块的标题和他的子标题算是一组。

通常情况下，文章只有一个主标题时，是不需要hgroup元素的。

</header>

</article>

<h1>文章主标题</h1>

<h2>文章子标题</h2>

</hgroup>

</header>

</article>

12.footer元素

footer表示页面或者是页面中的一块区域的页脚，比如存放文件的创建时间、作者、联系方式等等。

<p>

<a href="/">版权信息</a>|

<a href="/">关于我们</a>|

<a href="/">联系我们</a>|

<a href="/">站点地图</a>|

</p>

</footer>

13.address元素

address元素用来在页面中呈现联系信息，包括文档的作者、邮箱、地址、电话信息等。

address元素还用来展示和文章中的相关的联系人的所有联系信息。

成都市高新区天府软件园D区D5栋504室

</address>

时间：<timedatetime="2014-10-11">2014年10月11日</time>

</footer>

14.figure元素与figcaption元素

figure元素是一种元素的组合，带有可选标题。figure元素用来表示页面上一块独立的内容，如果将他从网页上删除不给我们的网页造成影响。

figcaption元素表示figure元素的标题，它属于figure元素，figcaption元素必须书写在figure元素内部，可以写在figure元素内的其他从属元素前面或后面。一个figure元素内最多只允许放置一个figcaption元素。

</figure>

15.details元素与summary元素

details元素是一种用于标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性，当该值为true时，该元素内部的子元素应该被展开显示，当该属性值为false时，其内部的子元素应该被收缩起来不现实。该属性的默认值为false，当页面打开时其内部的子元素应该处于收缩状态。

summary元素从属于details元素，用鼠标点击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或者收缩。如果details元素内没有summary元素，浏览器那你会提供默认的文字以供点击，例如“details”

目前只有谷歌的Chrome浏览器支持！

HTML5+CSS3视频教程

</summary>

<p>

HTML5+CSS3视频教程，由麦子学院为您提供！www.maiziedu.com

</p>

</details>

16.mark元素

mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字。通常在引用原文时使用mark元素，目的是引起读者的注意。mark元素是对原文内容有补充作用的一个元素，他应该用在一段原文作者不认为重要的，但是现在为了与原文作者不相关的其他目的而需要突出显示或者高亮显示的文字上面。

mark元素最主要的目的就是吸引当前用户的注意。

mark元素除了高亮显示之外，还有一个作用就是在引用原文时，为了某种特殊的目的而把作者没有表示出来的内容重点表示出来。

<h2>以下是关于<mark>HTML5</mark>的搜索结果</h2>

<h2>

<ahref="/index.html"><mark>html5</mark>_百度百科</a>

</h2>

<p>

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项正在进行中的一个草案、外语原文：This is a work in progress !）。标准通...

</p>

</article>

<ahref="/index.html">HTML5中国:中国最大的HTML5中文门户</a>

<p>

HTML5中国,是中国最大的HTML5中文门户,为广大HTML5爱好者提供各种HTML5资料,包括HTML5网站、HTML5资讯、HTML5应用、HTML5游戏、HTML5教程、HTML5视频、HTML5论坛...

</p>

</article>

</section>

17.progress元素

progress元素代表一个任务的完成进度，这个进度可以使不确定的，表示进度z正在进行，但不清楚这个还有多少工作量没有完成，也可以用0到某个最大数字（比如100）之间的s数字来表示准确的进度情况（比如百分比）

该元素具有两个表示当前任务完成情路昂的属性，value属性表示已经完成了多少工作量，max属性表示总共有多少工作量。工作量的单位是随意的，不指定的。

在设定属性点时候，value属性和max属性只能指定为有效的浮点数，value属性必须大于0，且小于或等于max的属性，max的属性必须大于0。

<p>

当前任务完成进度：

</p>

18.meter元素

meter元素表示规定范围内的数量值。

meter元素有6个属性！

1、value属性：在元素中特地地表示出来的实际值。该属性值默认为0，可以为该属性制定一个浮点小数值。

2、min属性：指定规定范围时允许实用的最小值，默认0，在设定该属性时所设定的值不能小于0。

3、max属性：指定规定的范围时允许使用的最大值，如果设定时该属性值小于min的值，那么把min属性的值视为最大值。max属性的默认值1。

4、low属性：规定范围的下限值，必须小于或者等于high的值。

5、high属性：规定范围的上限值。如果该属性值小于low属性的值，那么把low属性的值视为high属性的值，同样如果该属性的值大于max属性的值，那么把max属性的值视为high的值。

6、optimum属性：最佳值属性值必须在min属性值与max属性值之间，可以大于high属性值。

<p>硬盘实际使用情况<metervalue="43.9" max="119"min="0">43.9/119</meter>GB </p>

<p>

硬盘实际使用情况

</p>

19.html5废除的元素

1、能使用CSS代替的元素：

basefont、big、center、font、s、strike、tt、u

2、不在使用frame框架

对于frameset元素、frame元素与noframes元素，由于frame框架对页面可用性存在负面影响，在html5里面已经不支持frame框架，只支持iframe框架，同时废除以上这三个元素。

3、只有部分浏览器支持的元素

对于applet元素、bgsound、blink、marquee元素，由于只有部分浏览器支持这些元素，特别是bgsound元素以及marquee元素，只被IE浏览器支持，所以在HTML5里面被废除！而applet元素可以由embed元素或者object元素代替，bgsound元素由audio元素代替，marquee可以使用javascript来代替！

4、其他被废除的元素

A、废除rb元素，使用ruby元素代替

B、废除acronym元素，使用abbr元素代替

C、废除dir元素，使用ul元素代替

D、废除inindex元素，使用form元素与input元素相结合的方式代替

E、废除listing元素，使用pre元素代替

F、废除xmp元素，使用code元素代替

G、废除nextid元素，使用GUIDS代替

H、废除plaintext元素，使用“text/plian” MIME类型代替

20.html5大纲(上)

1、在HTML5中，可以使用之前我们所学习的结构元素来编排一份网页大纲，那样我们就可以通过这个网页大纲来了解网页中具有那些内容，网页中以什么样的形式来组织这些内容有更清楚的认识。

2、HTML5大纲分析工具

http://gsnedders.html5.org/outliner

3、分析一个网页的大纲！

找到出现 Untitled Section 的原因并解决！

4、header元素可以做大纲吗？

5、在header元素中用图片来生成大纲的方法！

6、关于nav元素和aside元素。

21.html5的大纲(下)

大纲的编排规则

关于HTML的大纲编排，我们可以划分为“显式编排”和“隐式编排”两种方式。

1、显式编排

显式编排是指明确使用section元素进行分块来创建网页文档，每个内容区块内使用标题（h1~h6）

<p>这里介绍显式编排</p>

</section>

</section>

2、隐式编排

所谓的隐式编排，就是我们不使用section元素进行明确的区块划分，而是根据我们写的（h1-h6、hgroup等）元素进行自动创建区块，因为HTML5的分析器可以根据不同级别的标题判断出对应的内容区块。

<h3>子子目录A</h3>

<h3>子子目录B</h3>

<h1>隐式编排的方法</h1>

<p>隐式编排的方法</p>

<h2>子隐式编排的方法</h2>

<p>子隐式编排的方法</p>

3、标题分级

不同的标题有不同的级别，在（h1-h6）中h1的级别最高，而h6的级别最低。所以在隐式编排的情况下就会按照以下规则生成！

1）、如果出现新的标题比上一个标题级别低，那么将生成下级内容区块！

2）、如果新出现的标题比上面出现的一个标题级别高，或者两者级别相同，那么就生成新的内容区块！

<h1>标题分级H1</h1>

<H2>标题分级H2</H2>

<H3>标题分级H3</H3>

<H4>标题分级H4</H4>

<h5>标题分级H5</h5>

<h6>标题分级H6</h6>

<H3>标题分级H3</H3>

<H4>标题分级H4</H4>

<h5>标题分级H5</h5>

<h6>标题分级H6</h6>

<H4>标题分级H4</H4>

4、不同的内容区块可以使用相同级别的标题

父内容区块与子内容区块都可以使用相同级别的H1标题

<h1>网页大纲编写实战</h1>

<nav>

<ul>

</ul>

</nav>

</header>

<h1>文章主标题</h1>

<h2>文章子标题</h2>

</hgroup>

<h1>文章评论列表：</h1>

<h1>评论标题A</h1>

<P>评论内容A</P>

</article>

<h1>评论标题B</h1>

<p>评论标题B</p>

</article>

</section>

</article>

</footer>

22.加强版的ol元素

1、可以通过start属性来定义标号的开始值。

2、可以通过reversed属性来进行反向编号。

<olSTART="4" TYPE="i" REVERSED="reversed">

<li><ahref="index.html">有序列表A</a> </li>

<li><ahref="index.html">有序列表B</a> </li>

<li><ahref="index.html">有序列表C</a> </li>

<li><ahref="index.html">有序列表D</a> </li>

<li><ahref="index.html">有序列表E</a> </li>

<li><ahref="index.html">有序列表F</a> </li>

<li><ahref="index.html">有序列表G</a> </li>

</ol>

23.重新定义后的dl元素

dl元素在HTML4中：

dl元素在HTML4中，是一个专门用来定义术语的列表。

dl元素在HTML5中：

dl元素在HTML5中，把dl元素进行了重定义。每一项包含一条或者多条带名字的dt元素，用来表示术语，dt元素后面紧跟一个或者多个dd元素，用来表示定义。重定义后的dl列表包含多个带名字的列表项。

<h1>《HTML5+CSS3轻松入门与实战视频教程》</h1>

<p>《HTML5+CSS3轻松入门与实战视频教程》主要讲解HTML5和CSS3的使用方法！</p>

<aside>

<dl>

<dd>html5是超文本标记语言</dd>

<dd>CSS3是层叠式样式表</dd>

</dl>

</aside>

</article>

秒客网

【麦子学院】03.web前端开发之HTML5+CSS3快速入门之基本HTML5元素介绍

相关文章