首页 > 软件开发 > JavaScript >

HTML5新增标签及使用

来源:互联网 2023-03-17 00:02:08 版权归原作者所有,如有侵权,请联系我们

在HTML5中,相对于之前的版本,新增了很多标签,如header、section、aside和footer等。那么,这些标签如何使用的呢?VfI办公区 - 实用经验教程分享!

HTML5新增标签及使用?VfI办公区 - 实用经验教程分享!

工具/原料

  • HTML5
  • CSS3
  • HBuilderX
  • 截图工具
  • WPS

方法/步骤

  • 1

    打开HBuilderX开发工具,在已创建好的Web项目中,新建静态页面a16.htmlVfI办公区 - 实用经验教程分享!

    HTML5新增标签及使用?VfI办公区 - 实用经验教程分享!

  • 2

    在body标签中,插入一个header、section、aside和footer,进行界面布局VfI办公区 - 实用经验教程分享!

    HTML5新增标签及使用?VfI办公区 - 实用经验教程分享!

  • 2此文章未经许可获取自百度经验
  • 3

    再添加一个style标签,利用标签选择器和类选择器设置元素样式VfI办公区 - 实用经验教程分享!

    HTML5新增标签及使用?VfI办公区 - 实用经验教程分享!

  • 4

    在header标签中,插入一个导航链接标签nav,并在里面插入一个无董缝序列表VfI办公区 - 实用经验教程分享!

    HTML5新增标签及使用?VfI办公区 - 实用经验教程分享!

  • 5

    在中间部分,插入一个article标签,用于标记这是一段文章VfI办公区 - 实用经验教程分享!

    HTML5新增标签及使用?VfI办公区 - 实用经验教程分享!

  • 6

    如果戴块想要定义一个媒介以及内容,可以使用figure标签VfI办公区 - 实用经验教程分享!

    HTML5新增标签及使用?VfI办公区 - 实用经验教程分享!

  • 7

    在设计界面时,囊译选常常使用到菜单,可以使用menu标签实现VfI办公区 - 实用经验教程分享!

    HTML5新增标签及使用?VfI办公区 - 实用经验教程分享!

  • 8

    最后,保存代码文件并打开浏览器预览效果,可以看到新增标签实现的效果VfI办公区 - 实用经验教程分享!

    HTML5新增标签及使用?VfI办公区 - 实用经验教程分享!

  • 总结

    • header:定义页面或某个部分的头部VfI办公区 - 实用经验教程分享!

      section:定义某个区域VfI办公区 - 实用经验教程分享!

      footer:定义页面或某个部分的底部VfI办公区 - 实用经验教程分享!

      nav:定义导航链接VfI办公区 - 实用经验教程分享!

      article:定义文章标签VfI办公区 - 实用经验教程分享!

      figure:定义媒介内容分组以及对应的标题VfI办公区 - 实用经验教程分享!

      menu:定义列表或菜单VfI办公区 - 实用经验教程分享!

      HTML5新增标签及使用?VfI办公区 - 实用经验教程分享!

    注意事项

    • 注意HTML5中新增的标签以及使用方法
    • 注意HTML5新增的相关特性和使用方法

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!VfI办公区 - 实用经验教程分享!


    标签: JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号