HTML5新添加的标签及用

  • 时间:2018-06-18 23:01 作者:调皮的小码农 来源:调皮的小码农 阅读:224
  • 扫一扫,手机访问
摘要:HTML5和HTML其实是很类似的,但是有些内容有发生了改变,今天我学习了一下HTML5发现还是挺好学的,只需有html+css基础即可以,今天知识看了下新的标签。一、定义文档类型在文件的开头总是会有一个标签1这是显示的html的文档类型,上面那个是1.0的,下面这个就是HTML5的类型标签,很是简

HTML5和HTML其实是很类似的,但是有些内容有发生了改变,今天我学习了一下HTML5发现还是挺好学的,只需有html+css基础即可以,今天知识看了下新的标签。

一、定义文档类型

在文件的开头总是会有一个标签

1

这是显示的html的文档类型,上面那个是1.0的,下面这个就是HTML5的类型标签,很是简短

1

二、新的布局方式

如下图所显示的布局结果

HTML5新添加的标签及用

正常的HTML布局就是通过div+css进行的,要是布局出这个页面正常的就是使用div进行布局,而后给div进行起名字,而后进行样式的修改;

在HTML5中有个块状元素(有意义的div),也就是说不使用div标签,而是使用名字式的元素,例如:布局出第一个蓝色块是用div,起名字,而后进行改变css;HTML是用的header标签进行修改样式,header就是有意义的div

用HTML5的新的结构标签,做出上面的布局,代码如下:

html代码:

定义一个页面或者是区域的头部

定义一个区域

定义一个页面或者是区域的底部

css代码:

/*页面顶部 header*/header{ height:150px; background-color:#abcdef;}

/*页面中间 div*/div{ margin-top:10px; height:300p;}

section{ height:300px; background-color:#abcdef; width:70%; float:left;}

article{ background-color:#F33; width:500px; text-align:center; margin:0px auto;}

aside{ height:300px; background-color:#abcdef; width:28%; float:right;}

/*页面底部*/footer{ height:100px; background-color:#abcdef; clear:both; margin-top:10px;}

这样即可以不使用用div而是用的有意义的div元素即可以布局出上面的那个样式了

HTML5新添加的标签及用

三、新的标签

(1)定义导航链接

它也是有意义的标签,并不是在某处加上这个标签就有了导航的样式了,这都是有意义的div而已,在头部header中加入菜单标签

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】什么是HTML5前端开发?HTML5前端要学哪些技术?(2019-07-21 11:47)
【系统环境|】2019年web前端开发技术框架有哪些(2019-07-20 12:06)
【系统环境|】什么是Web?零基础能不能学Web前端开发?(2019-07-19 07:04)
【网页前端|HTML】为什么学Web前端?选择Web前端理由(2019-07-17 20:28)
【网页前端|JS】Java面经-百度新入职老哥整理近半年学习经验,面试刷题路线!(2019-07-16 22:16)
【网页前端|HTML】最全面的前端开发指南(2019-07-15 12:57)
【系统环境|数据库】零基础如何快速学好大数据?(2019-06-29 12:27)
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)