《HTML5开发手册》——1.12 高级“菜谱”:使用所有新元素来建立搜索结果页面

简介:

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

1.12 高级“菜谱”:使用所有新元素来建立搜索结果页面

在代码1.14中,我们将多个HTML5新元素放置到一起,来建立一个搜索结果页面的结构(见图1.14)。此“菜谱”是纯HTML代码,未使用任何CSS。


190edc5bfaa61ad3873bd7308b33c4b795504cb1

代码1.14 组合使用各种元素来创建一个搜索结果页面


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


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


c285b6afb1ba9712c221a644c64e2a91a2904166


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

关于使用哪些标记,你可能会有其他的选择。这很好,你应该考虑如何编写漂亮的HTML代码。

所有搜索结果都包含在同一个 section 中,这个 section的标题为< h1 >Results for " test" h1 >。之后,每个结果包含在自身的article中,各有一个header和footer。其实,搜索结果还可以根据内容进一步再划分为section或article。

代码末尾的分页可以看作是此页面的“主导航”(回忆HTML5规范中的定义),因为分页功能对用户如何在搜索结果之间进行导航至关重要。

相关文章
|
22天前
使用HTML编写注册页面
使用HTML编写注册页面
12 1
|
1月前
|
数据采集 前端开发 JavaScript
html 页面里 noscript 标签的作用介绍
html 页面里 noscript 标签的作用介绍
29 0
|
8天前
错误或拦截页面的html代码
错误或拦截页面的html代码
12 0
错误或拦截页面的html代码
|
17天前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
18 0
|
1月前
六个好看实用的html简单登录页面源码
六个好看实用的html简单登录页面源码
19 0
六个好看实用的html简单登录页面源码
|
1月前
响应式个人二维码收款HTML页面源码
响应式个人二维码收款HTML页面源码
16 0
响应式个人二维码收款HTML页面源码
|
1月前
|
XML Java 数据格式
springboot 微服务项目如何集成 html 页面
springboot 微服务项目如何集成 html 页面
29 0
一段最简单的实现HTML页面上倒计时的动态效果
一段最简单的实现HTML页面上倒计时的动态效果
331 0
一段最简单的实现HTML页面上倒计时的动态效果
一段最简单的实现HTML页面上倒计时的动态效果
121 0
一段最简单的实现HTML页面上倒计时的动态效果
|
14天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0