网页结构 #4 示例 - 使用 header,footer,section,aside 划分

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面我们使用 section ,article 这些元素去划分一下这个网页的结构 .. 比如宁皓网的首页 .. 可能先用一个大标题 .. 里面的内容可能是网站的名字 ..

然后再用一个 header 元素 .. 定义一个页头部分 .. 这里面可以放一些导航,搜索框之类的东西 .. 导航可以用一个 nav 包装一下 .. 它里面再用一个标题 .. 注意虽然每个部分都可以重新使用标题,也就是每个部分的内容里面都可以使用一个 h1 标题开始 .. 不过我觉得最好一个网页上只有一个 h1 标题 .. 所以这里可以使用第二级别的标题 ..

页脚部分的内容可以用一个 footer 元素 .. 里面添加一个版权信息 .. 然后是边栏内容 .. 用的是 aside 元素 .. 在它里面也添加一个标题 ..

页面的主体又分成了几块 .. 每块内容可以放在一个 section 元素里面 .. 里面添加一个标题 .. 在这个 section 里面,你可以继续嵌套使用 section 去细分一下这块内容 ..

再添加一块内容,介绍一下宁皓网的特点 .. 还有一块儿内容,里面可能显示一些宁皓网最新发布的课程 .. 添加一个标题 .. 这块内容里面是发布的最新课程,每个课程都是一个独立的内容 ... 所以我们可以使用 article 去包装一下每个课程内容 ..

在它里面也可以再添加一个标题 .. 在这个 article 里面,你可以继续使用 header,footer,aside,还有 section 这些元素去划分一下 ...

再添加两个 article ... 修改一下里面的标题 ... 再去看一下这个页面的大纲 ...

这是一个关于宁皓网的页面,它里面有导航,介绍,网站的特点,最新发布的课程,课程里面又包含了几块内容 .. 然后是边栏上的广告 ...

网页结构 #4 示例 - 使用 header,footer,section,aside 划分《 HTML:标记语言 》

统计

13299
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点