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

相关文章
|
20天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
44 7
|
29天前
|
移动开发 Ruby HTML5
HTML5 新元素3
HTML5引入了多个新元素以增强页面结构与语义:如&lt;article&gt;定义独立内容区域,&lt;aside&gt;定义侧边栏,&lt;details&gt;展示详细信息,&lt;dialog&gt;定义对话框,&lt;footer&gt;和&lt;header&gt;分别定义页脚和头部,&lt;nav&gt;定义导航链接等,这些元素使网页结构更清晰,提高可读性和维护性。
|
1月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
58 11
|
29天前
|
存储 移动开发 缓存
HTML5 新元素2
HTML5引入了许多新元素以适应现代互联网需求,如&lt;canvas&gt;用于图形绘制,&lt;audio&gt;和&lt;video&gt;支持多媒体播放,&lt;source&gt;、&lt;embed&gt;和&lt;track&gt;增强多媒体内容的灵活性,&lt;datalist&gt;、&lt;keygen&gt;和&lt;output&gt;提升了表单的功能性。这些元素和API共同推动了网页应用的发展。
|
19天前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
43 0
|
1月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
50 2
|
27天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
36 0
|
2月前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
74 0
|
20天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
29 6