黄山迎客松详情页的核心内容(图文、开放时间、门票、交通)必须用唯一的包裹,其内按逻辑主题用划分并配标题,媒体内容用+,时间信息用带datetime的标签。

用 包住景点核心内容,别塞进 里凑数
用户打开的是“黄山迎客松”详情页,页面主体就是这棵树的图文、开放时间、门票、交通方式——这些必须放在 里。浏览器和读屏软件靠它识别“这里才是你要看的东西”。常见错误是整个页面用一个大 包到底, 被漏掉或只包了一行标题。
-
在整页中只能出现一次,且不能嵌套在 、、 等语义容器内
- 如果页面含多个景点卡片(比如“猜你喜欢”横向列表),每个卡片用
,但整个列表仍属于 的一部分
- 导航栏、底部版权、侧边广告位这些必须移出
,放进 、 或
按信息类型切分,不是按视觉区块切分
很多团队把“轮播图”“评论区”“地图”各包一个 ,结果语义混乱:轮播图只是图片展示形式,不是独立主题;而“门票价格与优惠政策”才是有明确主题的信息模块。关键看内容是否构成一个逻辑完整的子主题。
- 推荐结构:
开放时间与门票
…
- 避免:
… (轮播图应放在 或直接用 )
- 每个
应有 – 作为标题,否则屏幕阅读器无法建立层级
和 专用于景点图/视频/地图,别当 div 用
景点详情页里,一张云海照片、一段缆车实拍视频、嵌入的高德地图 iframe,都属于“可独立存在、带说明的媒体内容”,正好对应 的设计本意。滥用表现为:用 包按钮、包文字介绍、甚至包整个票价表格。
- 正确写法:
@@##@@
拍摄时间:2024年5月日出时段|建议观景点:光明顶气象站
-
必须是 的**直接子元素**,且只能有一个
- 如果地图使用
,需加 title 属性(如 title="黄山风景区电子导览地图"),并考虑用 包裹以强化语义
用 标记开放时间,别只写“8:00–17:30”
“夏季开放时间:8:00–17:30” 这类文本对人友好,但搜索引擎和日历应用无法提取时间值。HTML5 的 标签就是为解决这个问题设计的,它让机器知道“这是时间”,还能区分是日期、时刻还是持续时长。
立即学习“前端免费学习笔记(深入)”;
- 开放时段写法:
–
- 季节性时段写法:
- 避免:
8:00–17:30(无机器可读性)或 (datetime 属性缺失,无效)
真正难的不是标签怎么写,而是判断哪段内容算“一个 section”、哪张图值得用 。设计师给的视觉稿常按像素分区,而语义结构得按信息意图重排——这点最容易被前端忽略,也最影响 SEO 和无障碍体验。
用户打开的是“黄山迎客松”详情页,页面主体就是这棵树的图文、开放时间、门票、交通方式——这些必须放在 很多团队把“轮播图”“评论区”“地图”各包一个 景点详情页里,一张云海照片、一段缆车实拍视频、嵌入的高德地图 iframe,都属于“可独立存在、带说明的媒体内容”,正好对应 “夏季开放时间:8:00–17:30” 这类文本对人友好,但搜索引擎和日历应用无法提取时间值。HTML5 的 立即学习“前端免费学习笔记(深入)”; 真正难的不是标签怎么写,而是判断哪段内容算“一个 section”、哪张图值得用 里。浏览器和读屏软件靠它识别“这里才是你要看的东西”。常见错误是整个页面用一个大 被漏掉或只包了一行标题。
在整页中只能出现一次,且不能嵌套在 、、 等语义容器内,但整个列表仍属于 的一部分,放进 、 或
按信息类型切分,不是按视觉区块切分,结果语义混乱:轮播图只是图片展示形式,不是独立主题;而“门票价格与优惠政策”才是有明确主题的信息模块。关键看内容是否构成一个逻辑完整的子主题。
开放时间与门票
…(轮播图应放在 或直接用 应有 – 作为标题,否则屏幕阅读器无法建立层级
和 专用于景点图/视频/地图,别当 div 用 的设计本意。滥用表现为:用 包按钮、包文字介绍、甚至包整个票价表格。
必须是 的**直接子元素**,且只能有一个,需加 title 属性(如 title="黄山风景区电子导览地图"),并考虑用 包裹以强化语义用
标记开放时间,别只写“8:00–17:30” 标签就是为解决这个问题设计的,它让机器知道“这是时间”,还能区分是日期、时刻还是持续时长。
–
8:00–17:30(无机器可读性)或 (datetime 属性缺失,无效)。设计师给的视觉稿常按像素分区,而语义结构得按信息意图重排——这点最容易被前端忽略,也最影响 SEO 和无障碍体验。











