文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载本篇技术指南以 learnxinyminutes-docs 仓库中的德语版 HTML 教程de/html.md为主体系统讲解 HTML5 的标记语言本质、标准文档骨架、常用文本/链接/图片/列表/表格标签以及文件命名与 MIME 类型等使用规范。读完本文你将掌握从!doctype html到完整页面的逐行搭建能力理解标签为何成对出现、内容为何只在body中显示并能看懂仓库内英语版html.md与简体中文版zh-cn/html.md教程的对应关系。HTML 是什么标记语言的核心思想HTML 是HyperText Markup Language超文本标记语言的缩写它是一门用来为万维网编写页面的语言。与编程语言不同HTML 是一种标记语言Auszeichnungssprache我们通过代码来指明文本和数据应当如何显示。从本质上看HTML 文件就是纯文本文件。所谓标记是一种用**开始标签Starttag和结束标签Endtag**包围数据、从而组织页面数据的方法。这些标记为它们所包围的文本赋予意义——浏览器正是据此决定如何渲染内容。和许多计算机语言一样HTML 也经历了多个版本本教程讨论的是HTML5。原教程特别提示阅读过程中可以在各类在线代码练习平台上试验不同标签和元素的效果直观理解它们的工作原理而本文及原教程的核心关注点是HTML 语法本身与实用技巧。从零搭建第一个 HTML 页面完整示例逐行解析德语版教程给出了一个典型的 HTML 文件骨架示例我们首先将其完整呈现随后逐段拆解!-- Kommentare werden wie in dieser Zeile geschrieben -- !-- #################### Die Tags #################### -- !-- Hier ist eine Beispiel HTML Datei, die wir analysieren werden -- !doctype html html head titleMeine Website/title /head body h1Hallo Welt!/h1 a href http://codepen.io/anon/pen/xwjLbZKomm schau was das hier anzeigt/a pDas ist ein Paragraf./p pDas ist ein weiterer Paragraf./p ul liDas ist eine Item mit einer nicht-nummerierten Liste (Aufzählungsliste)/li liDas ist ein weiteres Item/li liUnd das ist das letzte Item in der Liste/li /ul /body /html文档类型声明!doctype html!-- Jede HTML Datei startet damit dem Browser zu sagen, dass die Seite aus HTML besteht. -- !doctype html每一个 HTML 文件都以!doctype html开始它的作用是向浏览器声明本页面是 HTML。这行声明是文档类型声明的 HTML5 简化写法让浏览器以标准模式解析页面。根元素htmlhtml ... /html在文档类型声明之后文档以html开始标签作为起点并在文件末尾以/html结束。结束标签之后不应再出现任何内容。html与/html之间就是整个文档的内容区域其中主要包含两部分head头部与body正文。头部head与标题titlehead titleMeine Seite/title!-- Der title kennzeichnet dem Browser den Titel im Browserfenster und im Tabnamen anzuzeigen. -- /headhead区域存放的是不会直接显示在页面上的描述信息和附加信息即元数据Metadaten。其中title标签用来告诉浏览器在浏览器窗口标题栏和标签页名称中显示什么标题。正文bodybody ... /body在head之后是body标签。在此之前的所有内容都不会显示在浏览器窗口中——我们必须把要展示的内容填进body里。浏览器从body开始渲染可见的页面内容因此一张 HTML 文件可以如此简单。注释给代码加说明的正确姿势!-- Kommentare werden wie in dieser Zeile geschrieben --注释以!--开始、以--结束德语版教程中正是用大量注释来串联讲解线索英语版 html.md 还特别演示了注释可以跨越多行。在初学阶段用注释标注每个标签的作用是快速建立标签与显示效果之间映射关系的有效方法。文本与排版标题体系h1–h6与段落ph1Hallo, Welt!/h1 !-- Der h1 Tag erstellt einen Titel. --h1标签创建一个一级标题。标题体系从最重要的h1逐级递减到最细微的h6对应德语版教程所述Untertitel fürh1von den wichtigstenh2zu den Unwichtigsten (h6)即h2是h1的副标题层级h6最小。p标签让我们在 HTML 页面中添加段落文本pDas ist ein Absatz./p pDas ist ein anderer Absatz./p连续的两个p就是两个独立段落浏览器会在段落之间自动产生间距。超链接a与图片img超链接href属性a href http://codepen.io/anon/pen/xwjLbZKomm, schaue was das zeigt/a !-- Eine URL wird zum Hyperlink, wenn es das Attribut href hat --一个 URL 只要放在href属性中对应的文本就会变成可点击的超链接。a与/a之间的文本是链接的可见文字href则指定点击后跳转的目标地址。图片src属性img srchttp://i.imgur.com/XWG0O.gif/ !-- Die Quelle des Bildes wird gezeigt durch das Attribut src --img /标签用于插入图片图片来源由src属性指明。src的值可以是一个 URL也可以是你计算机上某个文件的路径。注意img /是自闭合标签以/结尾这也是 HTML 中少数不需要成对书写的标签之一。列表无序列表ul与有序列表olul !-- Der ul Tag erstellt eine Aufzählungsliste. -- liDas ist ein Element in einer nicht Aufzählungsliste/li liDas ist ein anderes Item/li liUnd das ist das letzte Element in der List/li /ulul创建无序列表项目符号列表Aufzählungsliste。如果需要编号列表应改用ol第一个元素前显示1.第二个元素前显示2.依此类推德语版原文Für eine nummerierte Liste sollten wir stattdessenolverwenden。无论哪种列表列表项都用li表示。表格table/tr/th/td四件套德语版教程用一段完整示例演示了表格的构建方式这是页面结构化数据展示的常用手段table !-- Wir öffnen ein table Element. -- tr !-- tr erlaubt es uns, Reihen zu erstellen. -- thErster Tabellenkopf/th !-- th erlaubt es uns, der Tabelle einen Titel zu geben. -- thZweiter Tabellenkopf/th /tr tr tdErste Zeile, erste Spalte/td !-- td erlaubt es, eine Tabellenzelle zu erstellen. -- tdErste Zeile, zweite Spalte/td /tr tr tdZweite Zeile, erste Spalte/td tdZweite Zeile, zweite Spalte/td /tr /table四个核心标签的分工非常清晰标签作用table打开一个表格元素是所有表格内容的容器tr创建一行Tabellenzeileth为表格列给出表头标题Tabellenkopftd创建表格单元格承载具体数据上述示例会渲染为一个 2×2 的数据表格外加一行两个表头第一行是th表头后两行各有两个td单元格。这种表头行 数据行的结构是 HTML 表格最基础的形态。文件规范扩展名与 MIME 类型德语版教程的Verwendung使用一节明确了 HTML 文件的落地规范HTML 文件以.html或.htm扩展名结尾德语原文HTML Dateien enden mit.htmloder mit.htm。对应的 MIME 类型通常是text/html。德语版教程在这一点上尤其值得注意的补充事实HTML 不是编程语言——它是标记语言不具备逻辑运算能力英语版 html.md 在Usage一节明确写出 HTML is NOT a programming language。这是新手理解 HTML 定位的关键HTML 负责结构和语义动态逻辑需要 JavaScript 等语言配合。在 learnxinyminutes-docs 仓库中的多语言版本与质量保障本教程所在的 learnxinyminutes-docs 项目其理念正如 README.md 所述Whirlwind tours of popular programming languages, presented as valid, commented code and explained as they go——以带注释的有效代码为载体的速览式教程。德语版 de/html.md 正是这一理念在 HTML 主题上的落地同一主题的多语言覆盖HTML 教程在仓库中存在多个语言版本本文依据的德语版由 Dennis Keller 翻译对应的英语原版为 html.md由 Christophe THOMAS 撰写Robert Steed 与 Dimitri Kokkonis 参与翻译简体中文版见 zh-cn/html.md。三个版本共享同一套示例代码骨架便于对照学习与交叉验证。元数据规范每个教程文件头部都带有 YAML front matter如contributors、translators字段德语版即记录了原贡献者 Christophe THOMAS 与译者 Dennis Keller。仓库通过 lint/frontmatter.py 脚本自动校验 front matter 的键名合法性与字段类型允许的键包括name、filename、contributors、translators等并用 lint/encoding.sh 检查所有 Markdown 文件必须为 UTF-8 或 US-ASCII 编码且不得携带 BOM——这意味着本文引用的德语教程文本含ö、ä等变音字符也经过了编码一致性校验。贡献入口如果你希望为其他语言补写 HTML 教程或修正现有译文可参照 CONTRIBUTING.md 的规范提交贡献。如何继续深入学习与实践德语版教程的Um mehr zu lernen了解更多一节给出了三条进阶方向此处提炼为可执行的实践路径动手验证像原教程建议的那样在浏览器可交互的在线代码平台上逐条粘贴本文的示例标签标题、链接、图片、列表、表格观察每个标签的渲染效果再尝试修改属性值如href、src看页面如何变化。对照多语言版本将 de/html.md 与英语原版 html.md、简体中文版 zh-cn/html.md 并排阅读既巩固 HTML 语法也顺带熟悉德语/英语/中文三种技术术语的对应关系例如 Aufzählungsliste / bullet list / 项目符号列表。扩展知识面在掌握本文的文档骨架、文本、链接、图片、列表、表格标签后可继续在 learnxinyminutes-docs 仓库中探索与之配套的前端教程如 CSS、JavaScript 的英文或各语言版本理解 HTML 结构如何与样式、交互结合从而构建完整的现代网页。赞分享文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载相关推荐HTML5 入门实战从语法骨架到完整网页构建learnxinyminutes-docs 速览指南HTML5 入门实战从语法骨架到完整网页构建learnxinyminutes docs 速览指南 本指南以 learnxinyminutes docs 仓文档教程learnxinyminutes-docs HTML5 语法速成指南从文档骨架到表格与图片的完整实战learnxinyminutes docs HTML5 语法速成指南从文档骨架到表格与图片的完整实战 HTMLHyperText Markup Langua文档教程OpenDesign Fantasy 设计系统包实战指南Design System 2.0 智能体契约全解OpenDesign Fantasy 设计系统包实战指南Design System 2.0 智能体契约全解 本文以 open design 仓库中 desig文档教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考