给李书记点个赞吧
HTML5入门教程(1)

HTML5入门教程(1)

作者:李书记php 时间:2016-04-03 分类:html5+css3 评论:0条 浏览:1373

今天李书记php教程网带大家讲解下HTML5学习的心得,html5我也是今年才接触的,但是我之前有html基础在身上,所以学了花了半天的时间讲html5基础的标签语法和常用的元素都掌握了,感觉还行,比html增加了不少的动态的标签,做出东西来很炫。那么今天我们看看学习html5和html有什么区别把,我都列出来了,大家看看。

DTD声明的改变

HTML4的文件声明非常长…

在HTML5中没有的了DTD文件的限制,所以变短了.

<!doctype html> 而且没有任何大小写的限制,

<!DocType HTML> 也是完全正确的HTML5书写规则

新的标签书写方式:

不允许写结束标签的标签

base、link、br、hr、img、meta、source….

可以省略结束标签的标签

列标标签li、option、tr、td、dt、dd…

完全可以省略的标签

html、head、body…

建议按照原来的标准来写。

HTML5的版本分类:

有HTML4发展而来的松散语法的HTML5(承认版本)

由XHTML衍生而来的严格语法XHTML5(默许版本)

 

单双引号:

在HTML5中属性可以使用单引号,可以使用双引号,也可以不使用引号。只有一种除外,在属性值中有=的字符,必须使用引号。

比如:id=“3=5”

DIV+CSS网页布局:

主要目标为了让内容和样式分离。在搜索引擎没有发展起来的时候,该布局方式是非常完美的布局方式。

旧版的DIV+CSS页面布局

旧版的DIV+CSS页面布局

旧版的DIV+CSS页面布局

HTML5+CSS的布局模式:

HTML5+CSS的布局模式

HTML5+CSS的布局模式

新增的结构标签

新增的结构标签是为了搜索引擎更好的收录和抓去网页内容新增的标签,本质上就是div标签,一个块状元素。

Header 标签

表示一个页面中顶部区域(布局中)

表示一片文章正文开始之前的内容(文章中)

注意:

1个页面中不一定已有一个header标签,为header标签添加class或者id都可以,并没有限制

  • 在一个页面的布局中,一般只有一个header表示页面的头部区域。
  • 在文章中,header可以表示文章正文开始之前的内容,包括,标题,作者,时间以及预览信息等…

footer 标签

表示一个页面的底部区域(在布局结构中)

表示一片文章的正文结束部分之后的内容(在文章中)

注意:

1个页面中不一定已有一个footer标签,为footer标签添加class或者id都可以,并没有限制

  • 在页面布局中一般只有一个footer标签表示页面的底部
  • 在文章中,除了正文之后的信息都可以放在footer中,例如参考文献,鸣谢列表,注释及作者信息等..

nav标签

表示一个页面的导航(在布局中)

表示一篇文章的目录或者分页部分

注意:nav仅仅是一个特定的div而已,书写导航依旧要使用ul或者ol来实现。

section标签

在布局中表示页面的主要内容区块。

在文章中表示文章区块或者章节。

在页面布局中:

<header>页面顶部</header>

<section>主要内容区域</section>

<aside>次要内容区域</aside>

<footer>页面底部</footer>

在文章中:

请参考article中section的用法。

aside 标签

在页面布局中表示一个页面的次要内容区域。

在文章中表示一个文章的注释信息或者旁白等。

article标签

表示一片完整的文章内容或者一个博文、评论信息等。

格式:

一篇较短 的文章

<article>

<header>正文之前的信息</header>

<p>正文</p>

<footer>底部信息</footer>

</article>

一片多个段落较长的文章

<article>

<header>正文之前的信息</header>

<section>

<p>正文的段落</p>

<p>正文的段落</p>

<p>正文的段落</p>

</section>

<footer>正文之后的内容</footer>

</article>

文章和文章评论的书写方式

<article>

<header>正文之前的信息</header>

<section>

文章的主体内容

</section>

<section>

<article>评论的文章内容</article>

<article>评论的文章内容</article>

<article>评论的文章内容</article>

<article>评论的文章内容</article>

….

</section>

<footer>正文之后的内容</footer>

</article>

hgroup 标签标题组标签。

作用:用来将一片文章的多个标题进行包含组成一个标题组,声明他们是一片文章的标题。

注意:该标签一般在文章的header中使用

该标签一般只包含h1-h6的标签

figure  内容解释标签

figcaption  解释的描述标签

该标签的作用是进行内容的解释和描述,内容可以为文字,图片,音频视频等..

figcaption负责内容的解释部分,

<figure>

<!–需要描述的内容–>

<p>UFO</p>

<!–解释信息–>

<figcaption>

解释:Unknow Fly Object;

</figcaption>

</figure>

address标签

该标签为地址标签,表示一个现实地址或者网络地址

以上就是李书记php博客中为大家分享的关于html5学习课程的相关基本知识,在html5中我会列出相关的技术类文章四篇讲html5出现的新标签讲完,希望大家喜欢。

  

发表评论

电子邮件地址不会被公开。 必填项已用*标注