讲师中心 微信公众号

工具推荐

视频效率加速
AniShort
AniShort

AI短剧协同制作平台

Laper
Laper

剧本策划到成片协作

updream

一键生成高质量推广成片

立刻MV
立刻MV

低成本歌曲 MV、视频生成

HTML怎么创建招聘职位列表_HTML job listing结构教程【人力】

夜雪君_3771

夜雪君_3771

发布时间:2026-02-20 23:11:02

|

692人浏览过

|

来源于php中文网

原创

应使用标记招聘职位,因其语义准确;放职位名,用data-*属性标注薪资、地点等结构化数据;用实现折叠,data-job-id替代id避免冲突。

html怎么创建招聘职位列表_html job listing结构教程【人力】

用 <dl></dl> 而不是 <div> 套列表<p>招聘职位本质是「名称-描述」成对出现的结构,<code><dl></dl>(definition list)语义最贴切,比用一堆 <div> 或 <code><ul></ul> 更利于屏幕阅读器识别、SEO 和后续样式控制。

常见错误是把每个职位写成独立 <div class="job">,结果丢失岗位名与职责之间的逻辑关联,后期加无障碍支持或批量提取职位标题时就得额外加 <code>aria-label 或 JS 解析。

  • <dt></dt> 放职位名称(如 <dt>前端开发工程师</dt>),它天然可被 document.querySelector('dt') 批量抓取
  • <dd></dd> 放公司、地点、要求、薪资等字段,可用 data-* 属性标记类型,例如 <dd data-type="location">上海</dd>
  • 避免嵌套 <h3></h3> 到 <dt></dt> 里——<dt></dt> 本身已有标题语义,加 <h3></h3> 会破坏层级

薪资和地点字段必须用 data- 属性标注类型

纯文本“15K–25K·14薪”或“北京/远程”对人友好,但对机器不友好。HR 系统或爬虫要自动归类,靠正则匹配容易出错(比如把“15K”误判为经验要求)。

用 data-salary、data-location 等属性,能直接用 CSS 选择器或 JS 提取:

立即学习“前端免费学习笔记(深入)”;

DeepBI DHTML 页面生成器
DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur

下载
<dd data-salary="15000-25000" data-pay-cycle="14">15K–25K·14薪</dd>
<dd data-location="beijing,remote">北京/远程</dd>
  • 值用英文逗号分隔多选项(如 data-location="shanghai,remote"),比用斜杠更易解析
  • 数值类字段(薪资、经验)统一存为数字区间或最小值,避免单位混在字段值里(别用 data-salary="15K-25K")
  • 不要用 class="salary" 替代 data- 属性——class 是给样式的,不是给数据的

移动端折叠职位详情要靠 <details></details> + CSS,别用 JS 控制显隐

职位列表一长,全展开会撑满屏幕。用原生 <details></details> 标签实现点击展开,不依赖 JS,加载快、兼容性好(Chrome 12+、Firefox 49+、Safari 12.1+ 都支持),而且自带键盘焦点和 Enter 触发逻辑。

  • 把 <dd></dd> 包进 <details></details>,用 <summary></summary> 做摘要行(如“查看岗位职责与要求”)
  • 别给 <summary></summary> 加 role="button"——它本来就是可聚焦、可交互的元素
  • 如果需要默认展开某个职位(如置顶推荐岗),加 open 属性:<details open></details>
  • 旧版 IE 不支持?那就退化为全展开,不影响内容可读性——这不是功能缺陷,是优雅降级

避免用 id 绑定职位卡片,改用 data-job-id

很多人给每个职位加 id="job-123",想着方便 JS 操作。但 ID 在页面中必须唯一,一旦动态插入新职位或服务端渲染重复 ID,就违反 HTML 规范,JS 的 document.getElementById() 行为不可靠,Vue/React 也可能报 key 警告。

  • 统一用 data-job-id="123",既保持语义清晰,又允许重复、可批量查询:document.querySelectorAll('[data-job-id]')
  • 如果要用锚点跳转(如分享链接到某个职位),用 <a href="#job-123"></a> + 对应 <div data-job-id="123" id="job-123"> 是可以的,但 <code>id 仅用于锚点,不参与业务逻辑
  • 服务端渲染时,确保 data-job-id 来自真实数据库 ID,别用循环索引(如 i),否则缓存或分页后会错乱
  • 实际做时最容易漏掉的是 data- 字段的标准化约定——团队没对齐字段名和格式,后端吐一个 data-salary-range,前端查 data-salary,接口联调卡半天。这个细节不在视觉上,但决定后续所有自动化处理能不能跑通。

相关文章

如何在浏览器中将 HTML 内容无损转换并保存为 .docx 文档

如何在浏览器中将 HTML 内容无损转换并导出为 .docx 文档

如何将 HTML 内容转换并保存为 .docx 文档(前端纯浏览器方案)

如何将 HTML 内容转换并保存为 .docx 文档(纯前端方案)

如何禁用 iframe 内部的横向滚动触发浏览器前进/后退导航

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

上一篇:如何在页面跳转后持久化保存用户选择的下拉项值 下一篇:HTML怎么创建折叠菜单_HTML details summary标签教程【展开】

作者最新文章

热门AI工具

更多
讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2946

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

6059

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

4327

2026.03.24

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

3228

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

5369

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3889

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

506

2026.01.19

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

6787

2023.07.18

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

40

2026.11.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
GDB 17.2 官方文档集合
GDB 17.2 官方文档集合

共0课时 | 0人学习

Bootstrap 入门安装配置
Bootstrap 入门安装配置

共0课时 | 0人学习

38+ PhpStorm 提示和技巧
38+ PhpStorm 提示和技巧

共1课时 | 237人学习

最新文章

更多

PDF工具

更多
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn