HTML5新添加的标签及用

  • 时间:2018-06-18 23:01 作者:调皮的小码农 来源:调皮的小码农 阅读:196
  • 扫一扫,手机访问
摘要: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)
最新发布的资讯信息
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
【系统环境|服务器应用】Android完整知识体系路线(菜鸟-资深-大牛必进之路)(2019-06-11 06:34)
【系统环境|服务器应用】Java程序员小伙经历三个月备战,终获阿里offer(2019-06-11 06:34)
【系统环境|服务器应用】每日一问:谈谈对 MeasureSpec 的了解(2019-06-11 06:34)
【系统环境|服务器应用】【科普】晶体管-1(2019-06-11 06:34)
【系统环境|服务器应用】一个很多人都会答错的java基础题(2019-06-11 06:33)
【系统环境|服务器应用】深入了解枚举类型(2019-06-11 06:33)
【系统环境|服务器应用】JavaScript编译原理与内存管理(2019-06-11 06:33)