《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规范中的定义),因为分页功能对用户如何在搜索结果之间进行导航至关重要。

相关文章
|
27天前
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
186 77
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
3月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
121 7
|
3月前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
137 0
|
XML JavaScript 前端开发
HTML页面基本结构和加载过程
HTML页面基本结构和加载过程
271 0
HTML页面基本结构和加载过程
|
前端开发 HTML5 移动开发
HTML页面基本结构
本文简要介绍HTML中的各种元素及其相关属性,读者需要有一个概念: HTML页面都是由基本元素及属性组成的。HTML页面的结构如下。 doctype 声明 HTML 源文件中, 首先出现的是 doctype 声明。
1278 0

热门文章

最新文章