《HTML5开发手册》——2.11 高级“菜谱”:编写带有评论的文章页面

简介:

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

2.11 高级“菜谱”:编写带有评论的文章页面

代码2.16创建了一个带评论的文章页面(见图2.9)。它使用了本章中介绍的一些新技术。


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

代码2.16 带评论的文章

a75ba9aca615d3d3fbd228d6850d065247cf8c96


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

代码2.15使用了一些ARIA地标角色。此外,我们还使用了某些角色来辅助设置h1标记的样式。同时我们使用了b元素对article的首字母设置样式,让它看起来更漂亮点。在设置h1和b元素的样式时,没有必要使用上面的CSS代码,因为还有其他的方法选择这些元素,不过多一种选择也未尝不好。

页面中还多次使用了新的time元素,主article的pubdate中使用一次,每个评论中也分别使用了一次。在前面一章中,介绍了用户评论也属于article,所以我们在这里如此使用。这里我们将时间和日期作为它的标题。我们原本也可以使用评论的作者,但在大纲中出现多个重复的标题并不是我们想要的,使用日期和事件能够赋予它一个唯一的标识。这只是个人喜好问题,当然你也可以将评论作者作为标题。

页面还使用了编号列表(ordered list)使每个评论都带有一个编号,这不仅可以提供评论的顺序还可以为我们提供样式选项。在ol上使用reversed属性使最近的评论处于最顶端。这里还可以提供一个“按日期排序”的开关按钮,并使用JavaScript来添加或删除reverse属性。再次声明,你并非必须那样做,还有很多其他的办法。评论的设计也可能意味着你需要考虑其他一些方面。

相关文章
|
5月前
简约404错误页面HTML源码
简约404错误页面HTML源码
190 12
|
8月前
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
474 77
|
8月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
322 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
182 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
8月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
185 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
8月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
141 34
|
10月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
346 7
|
10月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
448 11
|
10月前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
253 0
|
10月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
128 0