HTML5新添加的标签及用

  • 时间:2018-06-18 23:01 作者:调皮的小码农 来源:调皮的小码农 阅读:253
  • 扫一扫,手机访问
摘要: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)
最新发布的资讯信息
【系统环境|】web前端开发需要学习哪些技术(2019-09-17 18:00)
【系统环境|】学习web前端开发是正确的选择(2019-09-15 16:55)
【系统环境|】干货整理!零基础html5网站开发学习步骤方法(保存不后悔)(2019-09-10 16:27)
【系统环境|】「前端入门」前端基本概念(2019-09-07 21:36)
【系统环境|】小白入门学习web前端,这些干货不能少(2019-09-05 20:59)
【系统环境|】不是计算机专业,哪个专业更适合学习web前端(2019-09-03 20:31)
【系统环境|】入行web前端开发可以做什么工作(2019-09-02 20:51)
【系统环境|】什么是Web前端呢?为什么说web前端开发人员的薪资高、前景好呢?(2019-08-31 20:55)
【系统环境|】2019年Web前端开发的8个趋势,你知道几个?(2019-08-29 16:23)
【系统环境|】学习web前端,掌握这些,才有底气跟面试官提薪资(2019-08-28 15:23)