《HTML5开发手册》——1.11 高级“菜谱”:使用所有新标记建立新闻页面

简介:

本节书摘来自异步社区《HTML5开发手册》一书中的第1章,第1.11节,作者: 【美】Chuck Hudson , 【英】Tom Leadbetter 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.11 高级“菜谱”:使用所有新标记建立新闻页面

图1.13和代码1.13所示为如何使用所有的HTML5新元素来建立一个新闻页面的布局。示例中使用了一些基本的CSS来定义元素的位置。阅读完后面的章节,我们能使这个页面更漂亮。


1b9943a28bcb23f3bcf8690ba4f228c22f0c961a

代码1.13 创建一个新闻主页


cc0c221ead0bd67da35c5dd5e30f6ddc95ed4169


<a href=https://yqfile.alicdn.com/ab47bea9d3547ee7e9695509c72dbbfa5cbd3e55.png" >


2650dde467171224c55abd68510150a121b2f7d9

在编辑好一个基本的布局和代码后,让我们检查一下文档大纲。前面的代码会产生如下的大纲:

1.Loads of News

 a.Untitled NAV

2.Headline article

 a.This is our most important article

3.Sports news

 a.Sports headline 1

 b.Sports headline 2

 c.Sports headline 3

4.Entertainment news

 a.Entertainment headline 1

 b.Entertainment headline 2

 c.Entertainment headline 3

5.Nerdy news

 a.Nerdy headline 1

 b.Nerdy headline 2

 c.Nerdy headline 3

6.Untitled ASIDE

这看上去很优美。footer元素与section、article、nav和aside不同,不是分栏内容(sectioning content),所以不会显示在大纲中。nav和aside中没有标题,这也不要紧。当然也可以给aside一个标题,不过嵌入的广告可不会保证有标题。

相关文章
|
21天前
使用HTML编写注册页面
使用HTML编写注册页面
12 1
|
1月前
|
数据可视化 前端开发
HTML基础结构和常用标记的例子
HTML基础结构和常用标记的例子
15 0
|
1月前
|
数据安全/隐私保护
7.常用的HTML标记
7.常用的HTML标记
13 0
|
1月前
|
数据采集 前端开发 JavaScript
html 页面里 noscript 标签的作用介绍
html 页面里 noscript 标签的作用介绍
29 0
|
8天前
错误或拦截页面的html代码
错误或拦截页面的html代码
12 0
错误或拦截页面的html代码
|
16天前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
18 0
N..
|
29天前
HTML常用标记
HTML常用标记
N..
13 1
|
1月前
六个好看实用的html简单登录页面源码
六个好看实用的html简单登录页面源码
19 0
六个好看实用的html简单登录页面源码
|
1月前
响应式个人二维码收款HTML页面源码
响应式个人二维码收款HTML页面源码
16 0
响应式个人二维码收款HTML页面源码
|
1月前
|
XML Java 数据格式
springboot 微服务项目如何集成 html 页面
springboot 微服务项目如何集成 html 页面
29 0