HTML5官方文档学习笔记(一)----使用 HTML 章节与大纲

本文介绍了HTML5如何通过section、aside、nav和header等元素改进网页结构,强调了大纲算法和在非支持HTML5浏览器中的兼容性处理,包括address和时间戳在分节元素中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

H5解决的问题

在这里插入图片描述

HTML5大纲算法

1.用section取代div,如下:
在这里插入图片描述
2.隐式分节
在这里插入图片描述
在这里插入图片描述
3.分节根
在这里插入图片描述
4.大纲以外的节段
HTML5引入了两个新的元素,用来定义不属于web文档主要大纲中的节段
HTML 侧边分节元素 (<aside>) 定义了这样的节段, 虽然是主要的分节元素, 但并不属于主要的文档流, 就像解释栏或广告栏. aside元素内部有自己的大纲,但并不计入文档大纲中
HTML 导航分节元素 (<nav>) 定义的节段包含了很多导航links。文档中可以有好几个这样的元素,比如文档内部的链接,就像目录,和链接到其他站点的导航links。这些链接并不是主文档流和文档大纲中的一部分 ,并且能够特别让屏幕浏览器和类似的辅助技术从一开始就不渲染该标记里的内容。

5.页眉和页脚
HTML 头部分节元素 (<header>) 定义了页面的页眉,通常会包含logo和站点名称以及水平菜单(如果有的话)。或是一个节段的头部,可能包含了节段的标题和作者名字等。<article>, <section>, <aside>, and <nav>可以拥有它们自己的<header>。虽然名字是header,但是不一定是在页面的开始。
HTML 页脚元素 (<footer>) 定义了页脚, 通常会包含版权信息和法律声明以及一些其他链接。或是节段的页脚,可能包含了节段的发布数据、许可声明等。<article>, <section>, <aside>, and <nav> 可以拥有它们自己的 <footer>。同样,其不一定是在页面的底部出现。

分节元素中的地址和发表时间

在这里插入图片描述

在不支持HTML5的浏览器器中使用HTML5

分节和标题元素应该在大部分的不支持HTML5的浏览器中工作。尽管不支持,但不必使用特殊的DOM接口。仅仅只需要一个特殊的CSS样式,因为未知元素默认会样式化为display:inline:
在这里插入图片描述
当然web开发者可以改变上面的样式结构,但是要记住的是在不支持HTML5浏览器中,这些元素默认的样式是与预期的样式是不同的。还要注意的是

然而这种方法有自己的局限性,因为一些浏览器并不允许样式化不支持的元素。这种情形出现在ie8及ie8以前的浏览器中,需要一个特殊脚本才行:
在这里插入图片描述
这段脚本表示,当在ie8(及ie8以前)的情况下,应该允许脚本的运行以合适地展示HTML5分节和标题元素。如果禁用了脚本,则不会显示,可能会出问题因为这些元素定义整个页面的结构。为了预防这种情况,我们需要加上<noscript>标签。
在这里插入图片描述
于是形成了如下的代码,允许HTML5节段和标题元素在不支持HTML5的浏览器中展示,即使是ie8(ie8以下版本)也在禁用脚本的情况下有了合适的反馈。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值