Tessent EDT 之External Flow与Internal Flow：架构选择与设计权衡
以下是针对HTML 学习笔记的超详细标签体系与应用指南基于 HTML5 / Living Standard 2025–2026 现状。
我会按功能分类组织参考 MDN W3C 的分组方式而不是单纯字母顺序这样更适合系统学习和实际应用。
每个大类都会标注核心标签高频 / 必须掌握语义化价值对 SEO / 无障碍 / 可读性影响典型使用场景常见陷阱 / 最佳实践
文档结构与根元素Document Skeleton标签是否成对语义价值说明 推荐用法常见属性示例!DOCTYPE html单标签高必须放在第一行声明 HTML5 文档类型—html成对高整个文档根元素唯一一个顶级元素langzh-CN或langenhead成对高元数据区不显示在页面上—body成对高可见内容区—title成对高页面标题浏览器标签页 搜索引擎标题—最佳实践始终写!DOCTYPE htmlhtml langzh-CN或langen-US对屏幕阅读器和 SEO 至关重要
元数据 / 头部内容Metadata / Head Content标签成对/单语义价值主要用途高频属性meta单高元数据字符集、视口、描述、关键词等charsetUTF-8nameviewportnamedescriptionlink单高引入外部资源CSS、图标、预加载等relstylesheet/relicon/relpreconnectstyle成对中内联 CSS小型项目或动态注入用—script成对高引入或内联 JavaScriptsrc、defer、async、typemodulebase单低设置页面所有相对 URL 的基准路径很少用href、targetnoscript成对中当浏览器禁用 JS 时显示的内容—2025–2026 高频写法移动优先 性能优化headmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale
0metanamedescriptioncontent你的页面描述150字以内title页面标题 | 站点名/titlelinkrelstylesheethrefstyles.csslinkrelpreconnecthrefhttps://fonts.googleapis.comlinkreliconhref/favicon.svgtypeimage/svgxmlscriptdefersrcapp.js/script/head
语义化布局结构HTML5 Semantic Structure——最重要的一类标签成对语义价值典型使用场景
注意事项 / 最佳实践header成对高站点/文章/区块的头部logo、导航、标题页面可以有多个headernav成对高导航链接区域主菜单、侧边栏导航、面包屑不要把所有链接都放nav只放主要导航main成对高文档的主要内容只能出现一次不要嵌套在article或aside里article成对高独立、可独立分发的完整内容文章、帖子、卡片可嵌套header、footersection成对中主题相关的分组通常配标题必须有标题h2~h6否则考虑用divaside成对中与主内容间接相关的补充内容侧边栏、广告、引用—footer成对高页脚 / 文章结尾信息版权、作者、相关链接页面可有多个推荐现代页面骨架2025 主流写法bodyheadernav.../nav/headermainarticleheaderh1文章标题/h1pclassmeta作者 · 日期/p/headersectionh2
分/h
../section/articleasideh2相关阅读/h
../aside/mainfooterpcopy;2026 重阳的笔记/p/footer/body
文本内容与排版Text-level Semantics类别高频标签语义价值说明 推荐场景标题h1~h6高层级清晰h1 通常只出现一次段落p高普通段落文本强调strong/em高重要 / 着重语气不要只用b/i视觉样式b、i、u、s、sub、sup低纯视觉无语义时用优先用 CSS其他语义mark、small、del、ins、code、pre、kbd、samp、var、abbr、dfn、q、blockquote、cite中~高根据实际含义选择不要滥用div推荐用strong表示重要内容用em表示强调语气。
列表Lists标签成对典型场景ul成对无序列表bulletol成对有序列表数字/字母li成对列表项dl成对定义列表术语 解释dt成对定义术语dd成对术语的描述
链接 媒体Links Media标签成对/单高频属性场景a成对href,target,relnoopener noreferrer超链接img单src,alt,loadinglazy,width,height图片alt 必填picture成对—响应式图片配合sourcesource单srcset,media,type媒体源figurefigcaption成对—带说明的媒体图表、代码、视频等video成对controls,autoplay,muted,loop视频audio成对同上音频iframe成对src,loadinglazy,title嵌入第三方内容地图、视频等
表单Forms——交互核心标签说明高频属性 / 子元素form表单容器action,methodget/postinput各种输入框typetext/email/password/tel/number/search/date/file/checkbox/radio/submit...label输入框的标签提升可访问性foridselectoptionoptgroup下拉菜单—textarea多行文本rows,colsbutton按钮推荐typesubmit/reset/buttonfieldsetlegend分组表单项—datalist输入建议列表与input listid配合
表格Tables——结构化数据标签说明table表格容器thead表头tbody主体tfoot表尾tr行th表头单元格td数据单元格caption表格标题放最前面最佳实践用scopecol/row在th上提升无障碍。
其他重要 / 新兴标签2025 视角dialog→ 原生模态对话框detailssummary→ 可展开/折叠内容FAQ 神器progress/meter→ 进度条 / 量表time→ 机器可读时间SEO 加分search→ 搜索区域HTML
2逐渐普及快速
总结优先级学习路径建议顺序文档结构 语义布局html/head/body header/nav/main/article/section/footer文本 标题h1~h6, p, strong, em, code, pre链接 图片a, img, picture列表ul/ol/dl表单form/input/label/button表格table thead/tbody多媒体video/audio/iframe交互增强details/dialog/progress如果你想针对某一类标签比如表单、语义布局、响应式图片继续深入或者想要典型页面完整代码模板直接告诉我
/www.cnzy.org.cn网址变成什么了-/www.cnzy.org.cn网址变成什么了应用
