HTML5学习过程

最新推荐文章于 2021-06-09 13:19:12 发布

dl0246

最新推荐文章于 2021-06-09 13:19:12 发布

阅读量478

点赞数 2

分类专栏： Web前端技术文章标签： html5 技术 web

本文链接：https://blog.csdn.net/dl0246/article/details/77368659

版权

17 篇文章 0 订阅

订阅专栏

以下文章基于个人见解。如有异议可以一起讨论。

Html5:

随着移动终端的发展，html5应用开发变得流行起来。提到html5，一般都会加上css3。Html5从用途上可以分为三个方向去理解：

1.手机端访问web服务的响应式布局。在以前手机端访问web经历了wap时代、域名m开头的切换时代。到先今进入同一套网站代码自适应时代。

2.Html打包成终端平台应用技术：ios\android\黑莓等。早在很久之前接触过一个技术phonegap,后更名为cordovar，现在归adobe公司所有，其在线打包是现今的很多在线打包技术的鼻祖。现在国人经常用Hbuilder的打包技术就是基于cordovar。

3.第三方技术的发展。随着微信小程序等第三方的开发平台也是井喷式发展。诸如国内的wex等。

HTML5单纯的理解无非是加入了些标签，减少了些标签。下面我们开始走进html5的大门：首先我们看一下新建一个html5文件的默认内容：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

红色部分是在html4中所没有的。

我们回顾一下html4中头的内容：

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

strict严格遵守规范版本

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

Transitional过渡版本，可不遵守规范。
通过对比html5的头真的很省事。

<!DOCTYPE html>

下面我们介绍一下新增的几个标签。

布局语义化标签：Article、section、aside、header、footer、Nav、main。以上这些标签设计之初是为了给搜索引擎进行收录方便。所谓布局也只是一种语义上的理解。常用的方式如下：

Header里可以放导航

Main里可以放置一个或多个article和aside。Article里可以放置多个section下图是一种场景。

同理section、article和aside里依然可以设置header和footer。布局没有绝对的方案，需要结合现实的业务功能进行区分以配合语义的概念。如下图亦可：

总结：

Article：强调的是大一点的块，强调独立

Section：强调的是类似列表并列关系的布局

Header:强调的是头部

Footer：强调的是脚

Aside：强调的是位置在测边

Main:强调的是主要内容

当我们查看在浏览器中默认样式中：

article, aside, footer, header, hgroup, main, nav, section {

display: block;

}

其中有一个hgroup ：标题组标签。通常包含一组 h1~h6 。

有了以上这些偏语义的标签那么，我们的div就不会那么乱了。否则多层div基本要靠定义的class名才能大体知道布局。

关注

专栏目录