一、定义标题栏:header

header 元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,因此整个页面的标题应该放在页面的开头。

header 定义文档的页眉,在一个网页中可以多次使用 header 元素。

语法&案例:

网页标题

文章标题

文章正文

二、定义标题组:hgroup

hgroup 元素可以为标题或者子标题进行分组,通常与 h1~h6 元素组合使用,一个内容块中的标题及其子标题可以通过 hgroup 元素组成一组。但是,如果文章只有一个主标题,不需要此元素。

语法:

主标题

副标题

三、定义导航块:nav

nav 元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当期页面的其他部分。只需要将主要的、基本的链接组放进 nav 元素即可。

语法:

语义 :定义导航栏

四、定义侧边栏:aside

asdie  元素用来表示当前页面或文章的附属信息部分,可以包含当前页面或主要内容相关的引用、侧边栏,以及其他类似的有别于主要内容的部分。

主要由以下两种用法:

1、作为主要内容的附属信息部分

2、作为页面或站点全局的附属信息部分

语法:

定义其所处内容之外的内容

五、定义主要区域:main

main 元素表示网页中的主要内容。该区域应该为每一个网页中所特有的内容,不能包含整个网站的导航图、版权信息等整个网站内部的共同内容。

每个网页内部只能放置一个 main 元素。不能将 main 元素放置在任何 article、aside、footer、header 或 nav 元素内部。

语法:

网页的主要内容

六、定义文章块:article

article 元素用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容。

语法:

语义: 定义文章

七、定义内容块:section

section 元素用于对网站或应用程序中页面上的内容进行分区,section 元素关注内容的独立性。

语法:

语义: 定义区域

八、定义脚注栏:footer

footer 元素可以作为内容块的脚注,可以在内容块中添加注释,或者在网页中添加版权信息等。脚注信息有很多形式,如作者、相关阅读链接及版权信息等。

在页面中可以重复使用 footer 元素。

语法案例:

  • 关于
  • 导航
  • 联系

html5页面正文内容标签,HTML5 结构标签相关推荐

  1. html5页面整体布局,HTML5页面布局 网页的基本结构

    这篇HTML5页面布局我们来学习组成HTML5网页的基本结构都包含了哪些内容,首先先来看下源代码. 欢迎关注头条号/自学编程 hello world 以上就是一个HTML5网页的最基本结构. 下面我们 ...

  2. .net html5页面缓存,详解HTML5中的manifest缓存使用

    起源html5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在 ...

  3. html5页面嵌入视频播放,使用HTML5在网页中嵌入音频和视频播放的基本方法

    HTML5 特性,包括原生音频和视频支持而无需 Flash. HTML5 和 标签让我们给站点添加媒体变得简单.我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和 ...

  4. html5页面转场,基于HTML5 SVG的页面过渡切换效果

    示例中使用了CSS Flexbox和CSS变量,不是所有的浏览器都支持这些新的CSS属性. 该HTML5 SVG的页面过渡变形切换效果的基本HTML结构如下: d="M -44,-50 C ...

  5. html5 页面加载缓慢,html5体验优化页面加载的14条建议

    html5体验优化页面加载的14条建议 1. fake 页 - 首屏加速 目标:首屏 3s 以内 因为 71% 的用户期望移动页面跟 pc 页面一样快 (3s) ,74% 的用户能容忍的响应时间为 5 ...

  6. html5页面上下分栏,HTML5+CSS3 分栏效果

    HTML5+CSS3 分栏效果 在很多刊物.报纸.网页中,都会看到将文本内容分成几栏的效果.而columns属性就可以同时定义多栏的数目和每栏宽度等. 通过上述语法中,中文参数的含义,即可理解&quo ...

  7. html5页面输出语句,使用html5输出文件

    在html5中,我们可以使用canvas.toDataURL("类型");这是实际就是把绘制的图片等等保存到打他URL地址指向的数据中,而不是真正的一个物理地址,但是我们可以通过这 ...

  8. html5页面被键盘挡住,HTML5 虚拟键盘出现挡住输入框怎么办

    本文主要介绍了HTML5 虚拟键盘出现挡住输入框的解决办法.具有很好的参考价值,下面跟着小编一起来看下吧,希望能帮助到大家. 话不多说,请看代码: //防止键盘把当前输入框给挡住 $$('input[ ...

  9. html新增和删除行,html5页面结构的变化以及增加和删除标签的总结

    这篇文章给大家介绍的内容是关于html5页面结构的变化以及增加和删除标签的总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 页面结构 传统页面结构 html5页面结构 eg 新增标 ...

最新文章

  1. python threading模块多线程源码示例(一)
  2. 搜索二维矩阵 II—leetcode240
  3. FM实现F4帮助系列三:弹出框多筛选…
  4. 带有批注的Spring硒测试
  5. 设置servlet或action作为欢迎页面
  6. 无透镜计算成像文章简介
  7. 移动硬盘变成RAW怎么办?跟我这样恢复数据
  8. 全新的福昕JavaScript PDF阅读器
  9. 【全栈开发实战小草看书之Web端(一)开发环境】
  10. 推动操作系统发展的主要动力是什么?
  11. 【干货】线上线下活动策划详细方案.pdf(附下载链接)
  12. unity 图文混排方案
  13. 校企勾结?京东被指压榨实习生:不结薪资、暴力对待、校方威胁...
  14. 常见基本编程练习与思考
  15. leetcode:13、罗马数字包含以下七种字符: I, V, X, L,C,D 和 M。
  16. Postman上传文件测试
  17. 垃圾渗滤液的形成过程!
  18. 认知神经心理学(各种生理心理效应)
  19. 鲍姆-韦尔奇算法求解HMM参数
  20. Solidity如何通过代码减少gas消耗

热门文章

  1. 汽车CAN通信解析(二)
  2. RT-Thread10月社区简报
  3. 判决文书网爬虫获取vjkl5失败原因
  4. Linux系统GIC介绍与编程
  5. 陕科大c语言大作业,西工大c语言大作业.ppt
  6. html如何制作展开全文,如何实现文章内容页点击“展开阅读全文”的功能
  7. ipad2019编写html,2019 iPad性能排行榜,选对型号很重要
  8. 运用matlab求身高质量指数BMI值
  9. python实现简单的神经网络,python的神经网络编程
  10. ‘在路上’问卷调查结果与分析