使用 CSS 让你的 HTML 项目更具风格。当你编写文档时，无论是为开源项目还是技术写作项目，你都应该有两个目标：文档应该写得好，同时要易于阅读。前者通过清晰的写作技巧和技术编辑来解决。第二个目标可以通过对 HTML 文档进行一些简单的更改来解决。超文本标记语言（HTML）是互联网的支柱。自 1994 年“万维网”问世以来，所有网络浏览器都使用 HTML 来显示文档和网站。几乎与此同时，HTML 一直支持样式表，它是对 HTML 文档的一种特殊添加，用于定义文本在屏幕上的呈现方式。单纯用 HTML 编写项目文档也是可以的。然而，纯 HTML 样式可能感觉有点简陋。因此，尝试向 HTML 文档添加一些简单的样式，为文档添加一点活力，并使文档更清晰、更易于阅读。定义一个 HTML 文档让我们从一个纯 HTML 文档开始，探索如何向其添加样式。一个空的 HTML 文档在顶部包含 定义，后面跟着一个 块来定义文档本身。 在 元素中，你还需要加上一个文档标头，其中包含有关文档的元数据，例如标题。文档正文的内容放在父 块内的 块中。你可以使用以下 HTML 代码定义一个空白页面： 这是一个新文档 在另一篇关于 用 HTML 编写项目文档 的文章中，我将一个开源棋盘游戏的自述文件从纯文本更新为 HTML 文档，并使用一些基本的 HTML 标记，如 和 作为标题和副标题， 用于段落， 和 用于粗体和斜体文本。让我们从那篇文章结束的地方继续讲： 简易 Senet 简易 Senet 游戏玩法 游戏会自动为你“投掷”投掷棒，并在屏幕右下角显示结果。 如果“投掷”结果为零，你失去本轮机会。 轮到你的时候，游戏会自动选择 你在棋盘上的第一块棋子。 你不一定 能够用这个棋子走棋，所以选择你的棋子 移动，然后按 Space（或 Enter）移动 它。 你可以通过几种不同的方法进行选择： 向上/向下/向左/向右 to 朝特定方块移动。 加号 (+) 或减号 (-) 使棋子在棋盘上向“左”或向“右”移动。 请注意，它们会自动遵循棋盘的“倒过来的 S”方向移动。 Tab在棋盘上选择下一个你想要移动的棋子。 要随时退出游戏，请按 Q（大写 Q）或按 Esc，这样游戏会提示你是否想要 放弃比赛。 如果你比对手更快将所有棋子移出棋盘，你就赢得了比赛。 这同时需要运气和游戏策略！ 此 HTML 文档演示了利用 HTML 的技术写作者经常使用的一些块和内联元素。块元素在围绕文本定义一个矩形。段落和标题就是块元素，因为它们从文档的左边缘延伸到右边缘。例如， 在段落周围包含一个不可见的矩形。相比之下，内联元素的使用则紧跟在它们包围的文本。如果你在段落中的某些文本上使用 ，则只有被 和 包围的文本会变为粗体。你可以将直接样式应用于此文档以更改字体、颜色和其他文本样式，但修改文档外观的更有效方法是将样式表应用于文档本身。你可以在 元素中使用其他元数据执行此操作。你可以为样式表引用文件，但在这个例子中，我使用 ... 定义样式由于你刚刚开始学习样式表，因此这里先演示一种基本样式：背景色。我喜欢从背景颜色开始，因为它有助于演示块和内联元素。让我们应用一个有点华丽的样式表，为所有 段落设置浅蓝色背景颜色，为 无序列表设置浅绿色背景。对任何粗体文本使用黄色背景，对任何斜体文本使用粉红色背景。你可以在 HTML 文档的 请注意，每个样式都以分号结尾。如果在网页浏览器中查看此 HTML 文档，你可以看到 和 块元素如何填充为矩形，而 和 内联元素仅突出显示粗体和斜体文本。 这种对比色的使用可能看起来不太好看，但我想你可以清楚看到块和内联元素：应用样式你可以使用样式使这个自述文件更易于阅读。 因为你刚刚开始学习样式，还是先只用一些简单的样式元素：background-color 设置背景颜色color 设置文字颜色font-family 使用不同的文本字体margin-top 在元素上方添加空间margin-bottom 在元素下方添加空间text-align 改变文本的对齐方式，例如靠左、靠右或居中让我们重新开始你的样式表并将这些新样式应用到文档中。首先，在文档中使用更令人愉悦的字体。如果你的 HTML 文档没有指定字体，网络浏览器会为你选择一种。根据浏览器的设置方式，这可能是衬线字体（如我的屏幕截图中使用的字体）或无衬线字体。衬线字体在每个字母上添加了一个小笔画，这样在打印时更容易阅读。无衬线字体缺少这种额外的笔划，这使得文本在计算机显示器上显得更清晰。常见的衬线字体包括 Garamond 或 Times New Roman。 流行的无衬线字体包括 Roboto 和 Arial。例如，要将文档正文字体设置为 Roboto，你可以使用以下样式：body { font-family: Roboto; } 通过设置字体，你假设查看文档的人也安装了该字体。有些字体已经十分常见，以至于它们被认为是事实上的“网页安全”字体。 这些字体包括 Arial 等无衬线字体和 Times New Roman 等衬线字体。Roboto 是一种较新的字体，可能还无法随处可用。因此，网页设计师通常不会只列出一种字体，而是设置一种或多种“备用”字体。你可以通过用逗号分隔来添加这些替代字体。 例如，如果用户的系统上没有 Roboto 字体，你可以使用以下样式定义将 Arial 字体用作文本正文：body { font-family: Roboto, Arial; } 所有网络浏览器都定义了默认的衬线和无衬线字体，你可以使用这些名称来引用它们。用户可以更改他们喜欢用于显示衬线和无衬线的字体，因此不太可能对每个人都一样，但在字体列表中使用 serif 或 sans-serif 通常是个好主意。通过添加该字体，至少用户可以大致了解你希望 HTML 文档的呈现方式：body { font-family: Roboto, Arial, sans-serif; } 如果字体名称不止一个单词，则你必须在其两边加上引号。HTML 允许你在此处使用单引号或双引号。 为标题和副标题定义一些衬线字体，包括 Times New Roman：h1 { font-family: "Times New Roman", Garamond, serif; } h2 { font-family: "Times New Roman", Garamond, serif; } 请注意，H1 标题和 H2 副标题使用完全相同的字体定义。如果你想避免无谓的打字，可以使用样式表快捷方式为 H1 和 22 使用相同的样式定义：h1, h2 { font-family: "Times New Roman", Garamond, serif; } 在编写文档时，许多技术作者更喜欢将主标题放在页面的中央。你可以在块元素（例如 H1 标题）上使用 text-align 来使标题居中：h1 { text-align: center; } 为了让粗体和斜体文本更突出，请将它们置于稍微不同的颜色中。对于某些文档，我可能会使用深蓝表示粗体文本，使用深绿表示斜体文本。这些颜色非常接近黑色，但颜色的细微差别足以吸引读者的注意力。b { color: darkblue; } i { color: darkgreen; } 最后，我更喜欢在我的列表元素周围添加额外的间距，以使它们更易于阅读。如果每个列表项只有几个词，额外的空间可能无关紧要。但是我的示例文本中的中间项很长，可以换到第二行。 额外的空间有助于读者更清楚地看到此列表中的每个项目。 你可以使用边距样式在块元素上方和下方添加空间：li { margin-top: 10px; margin-bottom: 10px; } 这种样式定义了一个距离，此处我将其指定为每个列表元素上方和下方的 10px（十个像素）。 你可以使用多种不同的距离度量。十像素实际上就是屏幕上十个像素的空间，无论是台式机显示器、笔记本电脑显示屏，还是手机或平板电脑屏幕。假设你真的只是想在列表元素之间添加一个额外的空行，你也可以使用 em 来测量。em 是一个旧的排版术语，如果你指的是左右间距，它就是大写 M 的宽度，或者对于垂直间距，就是大写 M 的高度。所以你可以改用 1em 来写边距样式：li { margin-top: 1em; margin-bottom: 1em; } HTML 文档中的完整样式列表如下所示： 简易 Senet 简易 Senet 游戏玩法 游戏会自动为你“投掷”投掷棒，并在屏幕右下角显示结果。 如果“投掷”结果为零，你失去本轮机会。 轮到你的时候，游戏会自动选择 你在棋盘上的第一块棋子。 你不一定 能够用这个棋子走棋。所以选择你的棋子 移动，然后按 Space（或 Enter）移动 它。 你可以通过几种不同的方法进行选择： 向上/向下/向左/向右 to 朝特定方块移动。 加号 (+) 或减号 (-) 使棋子在棋盘上向“左”或向“右”移动。 请注意，它们会自动遵循棋盘的“倒过来的 S”方向移动。 Tab在棋盘上选择下一个你想要移动的棋子。 要随时退出游戏，请按 Q（大写 Q）或按 Esc，这样游戏会提示你是否想要 放弃比赛。 如果你比对手更快将所有棋子移出棋盘，你就赢得了比赛。 这同时需要运气和游戏策略！ 在网页浏览器上查看时，你会看到采用无衬线字体的自述文件，标题和副标题使用衬线字体。 页面标题居中。粗体和斜体文本使用略有不同的颜色来吸引读者的注意力而不会分散注意力。 最后，列表项周围有额外的空间，使每个项目更易于阅读。这是在技术写作中使用样式的简单介绍。掌握了基础知识后，你可能会对 Mozilla 的 HTML 指南 感兴趣。它包括一些很棒的初学者教程，因此你可以学习如何创建自己的网页。有关 CSS 样式的更多信息，我推荐 Mozilla 的 CSS 指南。（题图： MJ:web internet traffic design）via: https://opensource.com/article/22/8/css-html-project-documentation作者：Jim Hall 选题：lkxed 译者：XiaotingHuang22 校对：wxy本文由 LCTT 原创编译，Linux中国 荣誉推出
Jekyll 是一个开源的静态网站生成器。你可以使用 Markdown 编写内容，使用 HTML/CSS 来构建和展示，Jekyll 会将其编译为静态的 HTML。近年来开始流行静态网站生成器和 JAMStack，而且理由很充分，它们不需要复杂的后端，只需要静态的 HTML、CSS 和 Javascript。没有后端意味着更好的安全性、更低的运营开销和更便宜的托管。双赢！在本文中，我将讨论 Jekyll。在撰写本文时，我的个人网站使用的是 Jekyll。Jekyll 使用 Ruby 引擎将用 Markdown 编写的文章转换成 HTML。Sass 可以将复杂的 CSS 规则应用到普通文本文件中。Liquid 允许对静态内容进行编程控制。安装 JekyllJekyll 网站 提供了 Linux、MacOS 和 Windows 安装说明。安装完成之后，快速引导 将会安装一个基础的 Hello-World 项目。现在在你的浏览器访问 http://localhost:4000，你可以看到你的默认“真棒”博客。目录结构这个默认站点包含以下的文件和文件夹：_posts: 你的博客文章。_site: 最终编译成的静态网站文件。about.markdown: “关于页”的内容。index.markdown: “主页”的内容。404.html: “404 页”的内容。_config.yml: Jekyll 的全站配置文件。创建新的博客帖子创建帖子很简单。你需要做的就是在 _post 目录下使用正确的格式和扩展名创建一个新文件，这样就完成了。有效的文件名像 2021-08-29-welcome-to-jekyll.markdown 这样。一个博客文件必须包含 Jekyll 所谓的 YAML 卷首块 Front Matter 。它是文件开头的一个包含元数据的特殊部分。如果你查看默认的帖子，你可以看到以下内容：--- layout: post title: "Welcome to Jekyll!" date: 2021-08-29 11:28:12 +0530 categories: jekyll update --- Jekyll 会使用上面的元数据，你也可以自定义 key: value 键值对。如果你需要一些提示，请查看我的网站的卷首。除了前面的问题，你还可以 使用内置的 Jekyll 变量 来自定义你的网站。让我们创建一个新的帖子。在 _posts 文件夹下创建 2021-08-29-ayushsharma.markdown。内容如下：--- layout: post title: "Check out ayushsharma.in!" date: 2021-08-29 12:00:00 +0530 categories: mycategory --- This is my first post. # This is a heading. ## This is another heading. This is a [link](<http://notes.ayushsharma.in>) This is my category: 如果 jekyll serve 命令仍在运行，刷新页面，你将看到下面的新帖子。恭喜你创建了你的第一篇帖子！这个过程看起来很简单，但是你可以通过 Jekyll 做很多事情。使用简单的 Markdown，你可以归档博客、高亮显示代码片段以及分类管理帖子。草稿如果你还没准备好发布你的内容，你可以创建一个 _drafts 文件夹。此文件夹中的 Markdown 文件仅通过传递 --drafts-- 参数来呈现。布局和包含请注意 _post 文件夹中两篇文章的卷首块，你将在其中看到 layout: post。_layout 文件夹中包含所有布局。你不会在源代码中找到它们，因为 Jekyll 默认加载它们。Jekyll 使用的默认源代码在 这里。如果你点击该链接，你可以看到 post 的布局使用了默认（default）布局。默认布局包含的代码 {{ content }} 是注入内容的地方。布局文件还将包含 include 指令。它们从 include 文件夹 加载文件，并使用不同的组件组成页面。总的来说，这就是布局的工作方式：你在卷首块定义它们并将你的内容注入其中。而包含则提供了页面的其它部分以组成整个页面。这是一种标准的网页设计技术：定义页眉、页脚、旁白和内容元素，然后在其中注入内容。这就是静态站点生成器的真正威力，完全以编程的方式控制，将你的网站组装起来并最终编译成静态的 HTML。页面你网站上的所有内容并不都是文章或博客。你需要“关于”页面、“联系”页面、“项目”页面或“作品”页面。这就是“页面”的用武之地。它们的工作方式与“帖子”完全一样，这意味着它们是带有卷首块的 Markdown 文件。但它们不会放到 _posts 目录。它们要么保留在你的项目根目录中，要么保留在它们自己的文件夹中。对于布局和包含，你可以使用与帖子相同的布局或创建新帖子。 Jekyll 非常灵活，你可以随心所欲地发挥你的创意！你的默认博客已经有 index.markdown 和 about.markdown。请随意自定义它们。数据文件数据文件位于 _data 目录中，可以是 .yml、.json、.csv 等格式的文件。例如，一个 _data/members.yml 文件可能包含：- name: A github: a@a - name: B github: b@b - name: C github: c@c Jekyll 在网站生成的时候读取这些内容。你可以通过 site.data.members 访问它们。 { % for member in site.data.members % } { { member.name } } { % endfor %} 永久链接你的 _config.yml 文件定义了永久链接的格式。你可以使用各种默认变量来组合你自己的自定义永久链接。构建你最终的网站命令 jekyll serve 非常适合本地测试。但是一旦你完成了本地测试，你将需要构建要发布的最终工作。命令 jekyll build --source source_dir --destination destination_dir 将你的网站构建到 _site 文件夹中。请注意，此文件夹在每次构建之前都会被清理，所以不要将重要的东西放在那里。生成内容后，你可以将其托管在你的静态托管服务上。你现在应该对 Jekyll 的功能以及主要部分的功能有一个全面的了解。如果你正在寻找灵感，官方 JAMStack 网站上有一些很棒的例子。编码快乐。本文首发于作者个人博客，经授权改编。via: https://opensource.com/article/21/9/build-website-jekyll作者：Ayush Sharma 选题：lujun9972 译者：perfiffer 校对：wxy本文由 LCTT 原创编译，Linux中国 荣誉推出
编写你的第一行 HTML 代码，来帮助蝙蝠侠写一封情书
在一个美好的夜晚，你的肚子拒绝消化你在晚餐吃的大块披萨，所以你不得不在睡梦中冲进洗手间。在浴室里，当你在思考为什么会发生这种情况时，你听到一个来自通风口的低沉声音：“嘿，我是蝙蝠侠。”这时，你会怎么做呢？在你恐慌并处于关键时刻之前，蝙蝠侠说：“我需要你的帮助。我是一个超级极客，但我不懂 HTML。我需要用 HTML 写一封情书，你愿意帮助我吗？”谁会拒绝蝙蝠侠的请求呢，对吧？所以让我们用 HTML 来写一封蝙蝠侠的情书。你的第一个 HTML 文件HTML 网页与你电脑上的其它文件一样。就同一个 .doc 文件以 MS Word 打开，.jpg 文件在图像查看器中打开一样，一个 .html 文件在浏览器中打开。那么，让我们来创建一个 .html 文件。你可以在 Notepad 或其它任何编辑器中完成此任务，但我建议使用 VS Code。在这里下载并安装 VS Code。它是免费的，也是我唯一喜欢的微软产品。在系统中创建一个目录，将其命名为 “HTML Practice”（不带引号）。在这个目录中，再创建一个名为 “Batman’s Love Letter”（不带引号）的目录，这将是我们的项目根目录。这意味着我们所有与这个项目相关的文件都会在这里。打开 VS Code，按下 ctrl+n 创建一个新文件，按下 ctrl+s 保存文件。切换到 “Batman’s Love Letter” 文件夹并将其命名为 “loveletter.html”，然后单击保存。现在，如果你在文件资源管理器中双击它，它将在你的默认浏览器中打开。我建议使用 Firefox 来进行 web 开发，但 Chrome 也可以。让我们将这个过程与我们已经熟悉的东西联系起来。还记得你第一次拿到电脑吗？我做的第一件事是打开 MS Paint 并绘制一些东西。你在 Paint 中绘制一些东西并将其另存为图像，然后你可以在图像查看器中查看该图像。之后，如果要再次编辑该图像，你在 Paint 中重新打开它，编辑并保存它。我们目前的流程非常相似。正如我们使用 Paint 创建和编辑图像一样，我们使用 VS Code 来创建和编辑 HTML 文件。就像我们使用图像查看器查看图像一样，我们使用浏览器来查看我们的 HTML 页面。HTML 中的段落我们有一个空的 HTML 文件，以下是蝙蝠侠想在他的情书中写的第一段。“After all the battles we fought together, after all the difficult times we saw together, and after all the good and bad moments we’ve been through, I think it’s time I let you know how I feel about you.”复制这些到 VS Code 中的 loveletter.html。单击 “View -> Toggle Word Wrap (alt+z)” 自动换行。保存并在浏览器中打开它。如果它已经打开，单击浏览器中的刷新按钮。瞧！那是你的第一个网页！我们的第一段已准备就绪，但这不是在 HTML 中编写段落的推荐方法。我们有一种特定的方法让浏览器知道一个文本是一个段落。如果你用 和 来包裹文本，那么浏览器将识别 和 中的文本是一个段落。我们这样做： After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. 通过在 和 中编写段落，你创建了一个 HTML 元素。一个网页就是 HTML 元素的集合。让我们首先来认识一些术语： 是开始标签， 是结束标签，“p” 是标签名称。元素开始和结束标签之间的文本是元素的内容。“style” 属性在上面，你将看到文本覆盖屏幕的整个宽度。我们不希望这样。没有人想要阅读这么长的行。让我们设定段落宽度为 550px。我们可以通过使用元素的 style 属性来实现。你可以在其 style 属性中定义元素的样式（例如，在我们的示例中为宽度）。以下行将在 p 元素上创建一个空样式属性： ... 你看到那个空的 "" 了吗？这就是我们定义元素外观的地方。现在我们要将宽度设置为 550px。我们这样做： After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. 我们将 width 属性设置为 550px，用冒号 : 分隔，以分号 ; 结束。另外，注意我们如何将 和 放在单独的行中，文本内容用一个制表符缩进。像这样设置代码使其更具可读性。HTML 中的列表接下来，蝙蝠侠希望列出他所钦佩的人的一些优点，例如：You complete my darkness with your light. I love: - the way you see good in the worst things - the way you handle emotionally difficult situations - the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over time.这看起来很简单。让我们继续，在 下面复制所需的文本： After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You complete my darkness with your light. I love: - the way you see good in the worse - the way you handle emotionally difficult situations - the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. 保存并刷新浏览器。哇！这里发生了什么，我们的列表在哪里？如果你仔细观察，你会发现没有显示换行符。在代码中我们在新的一行中编写列表项，但这些项在浏览器中显示在一行中。如果你想在 HTML（新行）中插入换行符，你必须使用 。让我们来使用 ，看看它长什么样： After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You complete my darkness with your light. I love: - the way you see good in the worse - the way you handle emotionally difficult situations - the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. 保存并刷新：好的，现在它看起来就像我们想要的那样！另外，注意我们没有写一个 。有些标签不需要结束标签（它们被称为自闭合标签）。还有一件事：我们没有在两个段落之间使用 ，但第二个段落仍然是从一个新行开始，这是因为 元素会自动插入换行符。我们使用纯文本编写列表，但是有两个标签可以供我们使用来达到相同的目的： and 。让我们解释一下名字的意思：ul 代表 无序列表 Unordered List ，li 代表 列表项目 List Item 。让我们使用它们来展示我们的列表： After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You complete my darkness with your light. I love: the way you see good in the worse the way you handle emotionally difficult situations the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. 在复制代码之前，注意差异部分：我们删除了所有的 ，因为每个 会自动显示在新行中我们将每个列表项包含在 和 之间我们将所有列表项的集合包裹在 和 之间我们没有像 元素那样定义 元素的宽度。这是因为 是 的子节点， 已经被约束到 550px，所以 不会超出这个范围。让我们保存文件并刷新浏览器以查看结果：你会立即注意到在每个列表项之前显示了重点标志。我们现在不需要在每个列表项之前写 “-”。经过仔细检查，你会注意到最后一行超出 550px 宽度。这是为什么？因为 HTML 不允许 元素出现在 元素中。让我们将第一行和最后一行放在单独的 元素中： After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You complete my darkness with your light. I love: the way you see good in the worse the way you handle emotionally difficult situations the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. 保存并刷新。注意，这次我们还定义了 元素的宽度。那是因为我们现在已经将 元素放在了 元素之外。定义情书中所有元素的宽度会变得很麻烦。我们有一个特定的元素用于此目的： 元素。一个 元素就是一个通用容器，用于对内容进行分组，以便轻松设置样式。让我们用 元素包装整个情书，并为其赋予宽度：550px 。 After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You complete my darkness with your light. I love: the way you see good in the worse the way you handle emotionally difficult situations the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. 棒极了，我们的代码现在看起来简洁多了。HTML 中的标题到目前为止，蝙蝠侠对结果很高兴，他希望在情书上标题。他想写一个标题： “Bat Letter”。当然，你已经看到这个名字了，不是吗？:D你可以使用 、 、 、 、 和 标签来添加标题， 是最大的标题和最主要的标题， 是最小的标题。让我们在第二段之前使用 做主标题和一个副标题： Bat Letter After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You are the light of my life You complete my darkness with your light. I love: the way you see good in the worse the way you handle emotionally difficult situations the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. 保存，刷新。HTML 中的图像我们的情书尚未完成，但在继续之前，缺少一件大事：蝙蝠侠标志。你见过是蝙蝠侠的东西但没有蝙蝠侠的标志吗？并没有。所以，让我们在情书中添加一个蝙蝠侠标志。在 HTML 中包含图像就像在一个 Word 文件中包含图像一样。在 MS Word 中，你到 “菜单 -> 插入 -> 图像 -> 然后导航到图像位置为止 -> 选择图像 -> 单击插入”。在 HTML 中，我们使用 标签让浏览器知道我们需要加载的图像，而不是单击菜单。我们在 src 属性中写入文件的位置和名称。如果图像在项目根目录中，我们可以简单地在 src 属性中写入图像文件的名称。在我们深入编码之前，从这里下载蝙蝠侠标志。你可能希望裁剪图像中的额外空白区域。复制项目根目录中的图像并将其重命名为 “bat-logo.jpeg”。 Bat Letter After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You are the light of my life You complete my darkness with your light. I love: the way you see good in the worse the way you handle emotionally difficult situations the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. 我们在第 3 行包含了 标签。这个标签也是一个自闭合的标签，所以我们不需要写 。在 src 属性中，我们给出了图像文件的名称。这个名称应与图像名称完全相同，包括扩展名（.jpeg）及其大小写。保存并刷新，查看结果。该死的！刚刚发生了什么？当使用 标签包含图像时，默认情况下，图像将以其原始分辨率显示。在我们的例子中，图像比 550px 宽得多。让我们使用 style 属性定义它的宽度： Bat Letter After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You are the light of my life You complete my darkness with your light. I love: the way you see good in the worse the way you handle emotionally difficult situations the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. 你会注意到，这次我们定义宽度使用了 “%” 而不是 “px”。当我们在 “%” 中定义宽度时，它将占据父元素宽度的百分比。因此，100% 的 550px 将为我们提供 550px。保存并刷新，查看结果。太棒了！这让蝙蝠侠的脸露出了羞涩的微笑 :)。HTML 中的粗体和斜体现在蝙蝠侠想在最后几段中承认他的爱。他有以下文本供你用 HTML 编写：“I have a confession to makeIt feels like my chest does have a heart. You make my heart beat. Your smile brings a smile to my face, your pain brings pain to my heart.I don’t show my emotions, but I think this man behind the mask is falling for you.”当阅读到这里时，你会问蝙蝠侠：“等等，这是给谁的？”蝙蝠侠说：“这是给超人的。”你说：哦！我还以为是给神奇女侠的呢。蝙蝠侠说：不，这是给超人的，请在最后写上 “I love you Superman.”。好的，我们来写： Bat Letter After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You are the light of my life You complete my darkness with your light. I love: the way you see good in the worse the way you handle emotionally difficult situations the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. I have a confession to make It feels like my chest does have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart. I don't show my emotions, but I think this man behind the mask is falling for you. I love you Superman. Your not-so-secret-lover, Batman 这封信差不多完成了，蝙蝠侠另外想再做两次改变。蝙蝠侠希望在最后段落的第一句中的 “does” 一词是斜体，而 “I love you Superman” 这句话是粗体的。我们使用 和 以斜体和粗体显示文本。让我们来更新这些更改： Bat Letter After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You are the light of my life You complete my darkness with your light. I love: the way you see good in the worse the way you handle emotionally difficult situations the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. I have a confession to make It feels like my chest does have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart. I don't show my emotions, but I think this man behind the mask is falling for you. I love you Superman. Your not-so-secret-lover, Batman HTML 中的样式你可以通过三种方式设置样式或定义 HTML 元素的外观：内联样式：我们使用元素的 style 属性来编写样式。这是我们迄今为止使用的，但这不是一个好的实践。嵌入式样式：我们在由 包裹的 “style” 元素中编写所有样式。链接样式表：我们在具有 .css 扩展名的单独文件中编写所有元素的样式。此文件称为样式表。让我们来看看如何定义 的内联样式： 我们可以在 里面写同样的样式：div{ width:550px; }在嵌入式样式中，我们编写的样式是与元素分开的。所以我们需要一种方法来关联元素及其样式。第一个单词 “div” 就做了这样的活。它让浏览器知道花括号 {...} 里面的所有样式都属于 “div” 元素。由于这种语法确定要应用样式的元素，因此它称为一个选择器。我们编写样式的方式保持不变：属性（width）和值（550px）用冒号（:）分隔，以分号（;）结束。让我们从 和 元素中删除内联样式，将其写入 Bat Letter After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You are the light of my life You complete my darkness with your light. I love: the way you see good in the worse the way you handle emotionally difficult situations the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. I have a confession to make It feels like my chest does have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart. I don't show my emotions, but I think this man behind the mask is falling for you. I love you Superman. Your not-so-secret-lover, Batman 保存并刷新，结果应保持不变。但是有一个大问题，如果我们的 HTML 文件中有多个 和 元素该怎么办？这样我们在 Bat Letter After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You are the light of my life You complete my darkness with your light. I love: the way you see good in the worse the way you handle emotionally difficult situations the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. I have a confession to make It feels like my chest does have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart. I don't show my emotions, but I think this man behind the mask is falling for you. I love you Superman. Your not-so-secret-lover, Batman HTML 已经准备好了嵌入式样式。但是，你可以看到，随着我们包含越来越多的样式， 将变得很大。这可能很快会混乱我们的主 HTML 文件。因此，让我们更进一步，通过将 。我们需要使用 HTML 文件中的 标签来将新创建的 CSS 文件链接到 HTML 文件。以下是我们如何做到这一点： 我们使用 元素在 HTML 文档中包含外部资源，它主要用于链接样式表。我们使用的三个属性是：rel：关系。链接文件与文档的关系。具有 .css 扩展名的文件称为样式表，因此我们保留 rel=“stylesheet”。type：链接文件的类型；对于一个 CSS 文件来说它是 “text/css”。href：超文本参考。链接文件的位置。link 元素的结尾没有 。因此， 也是一个自闭合的标签。 如果只是得到一个女朋友，那么很容易：D可惜没有那么简单，让我们继续前进。这是我们 “loveletter.html” 的内容： Bat Letter After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You are the light of my life You complete my darkness with your light. I love: the way you see good in the worse the way you handle emotionally difficult situations the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. I have a confession to make It feels like my chest does have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart. I don't show my emotions, but I think this man behind the mask is falling for you. I love you Superman. Your not-so-secret-lover, Batman “style.css” 内容：#letter-container{ width:550px; } #header-bat-logo{ width:100%; }保存文件并刷新，浏览器中的输出应保持不变。一些手续我们的情书已经准备好给蝙蝠侠，但还有一些正式的片段。与其他任何编程语言一样，HTML 自出生以来（1990 年）经历过许多版本，当前版本是 HTML5。那么，浏览器如何知道你使用哪个版本的 HTML 来编写页面呢？要告诉浏览器你正在使用 HTML5，你需要在页面顶部包含 。对于旧版本的 HTML，这行不同，但你不需要了解它们，因为我们不再使用它们了。此外，在之前的 HTML 版本中，我们曾经将整个文档封装在 标签内。整个文件分为两个主要部分：头部在 里面，主体在 里面。这在 HTML5 中不是必须的，但由于兼容性原因，我们仍然这样做。让我们用 <Doctype>, 、 和 更新我们的代码： Bat Letter After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You are the light of my life You complete my darkness with your light. I love: the way you see good in the worse the way you handle emotionally difficult situations the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. I have a confession to make It feels like my chest does have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart. I don't show my emotions, but I think this man behind the mask is falling for you. I love you Superman. Your not-so-secret-lover, Batman 主要内容在 里面，元信息在 里面。所以我们把 保存在 里面并加载 里面的样式表。保存并刷新，你的 HTML 页面应显示与之前相同的内容。HTML 的标题我发誓，这是最后一次改变。你可能已经注意到选项卡的标题正在显示 HTML 文件的路径：我们可以使用 标签来定义 HTML 文件的标题。标题标签也像链接标签一样在 内部。让我们我们在标题中加上 “Bat Letter”： Bat Letter Bat Letter After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. You are the light of my life You complete my darkness with your light. I love: the way you see good in the worse the way you handle emotionally difficult situations the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. I have a confession to make It feels like my chest does have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart. I don't show my emotions, but I think this man behind the mask is falling for you. I love you Superman. Your not-so-secret-lover, Batman 保存并刷新，你将看到在选项卡上显示的是 “Bat Letter” 而不是文件路径。蝙蝠侠的情书现在已经完成。恭喜！你用 HTML 制作了蝙蝠侠的情书。我们学到了什么我们学习了以下新概念：一个 HTML 文档的结构在 HTML 中如何写元素（ ）如何使用 style 属性在元素内编写样式（这称为内联样式，尽可能避免这种情况）如何在 中编写元素的样式（这称为嵌入式样式）在 HTML 中如何使用 在单独的文件中编写样式并链接它（这称为链接样式表）什么是标签名称，属性，开始标签和结束标签如何使用 id 属性为一个元素赋予 idCSS 中的标签选择器和 id 选择器我们学习了以下 HTML 标签： ：用于段落 ：用于换行 、 ：显示列表 ：用于分组我们信件的元素 、 ：用于标题和子标题 ：用于插入图像、：用于粗体和斜体文字样式 ：用于嵌入式样式 ：用于包含外部样式表 ：用于包裹整个 HTML 文档 ：让浏览器知道我们正在使用 HTML5 ：包裹元信息，如 和 ：用于实际显示的 HTML 页面的主体 ：用于 HTML 页面的标题我们学习了以下 CSS 属性：width：用于定义元素的宽度CSS 单位：“px” 和 “%”朋友们，这就是今天的全部了，下一个教程中见。作者简介：开发者 + 作者 | supersarkar.com | twitter.com/supersarkarvia: https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b作者：Kunal Sarkar 译者：MjSeven 校对：wxy本文由 LCTT 原创编译，Linux中国 荣誉推出
用一些简单的脚本，可以很容易地清理文档和其它大量的 HTML 文件。但是首先你需要解析它们。作为 Scribus 文档团队的长期成员，我要随时了解最新的源代码更新，以便对文档进行更新和补充。 我最近在刚升级到 Fedora 27 系统的计算机上使用 Subversion 进行检出操作时，对于下载该文档所需要的时间我感到很惊讶，文档由 HTML 页面和相关图像组成。 我恐怕该项目的文档看起来比项目本身大得多，并且怀疑其中的一些内容是“僵尸”文档——不再使用的 HTML 文件以及 HTML 中无法访问到的图像。我决定为自己创建一个项目来解决这个问题。 一种方法是搜索未使用的现有图像文件。 如果我可以扫描所有 HTML 文件中的图像引用，然后将该列表与实际图像文件进行比较，那么我可能会看到不匹配的文件。这是一个典型的图像标签： 我对 src= 之后的第一组引号之间的部分很感兴趣。 在寻找了一些解决方案后，我找到一个名为 BeautifulSoup 的 Python 模块。 脚本的核心部分如下所示：soup = BeautifulSoup(all_text, 'html.parser') match = soup.findAll("img") if len(match) > 0: for m in match: imagelist.append(str(m)) 我们可以使用这个 findAll 方法来挖出图片标签。 这是一小部分输出： 到现在为止还挺好。我原以为下一步就可以搞定了，但是当我在脚本中尝试了一些字符串方法时，它返回了有关标记的错误而不是字符串的错误。 我将输出保存到一个文件中，并在 KWrite 中进行编辑。 KWrite 的一个好处是你可以使用正则表达式（regex）来做“查找和替换”操作，所以我可以用 \n<img 替换 <img，这样可以看得更清楚。 KWrite 的另一个好处是，如果你用正则表达式做了一个不明智的选择，你还可以撤消。但我认为，肯定有比这更好的东西，所以我转而使用正则表达式，或者更具体地说 Python 的 re 模块。 这个新脚本的相关部分如下所示：match = re.findall(r'src="(.*)/>', all_text) if len(match)>0: for m in match: imagelist.append(m) 它的一小部分输出如下所示：images/cmcanvas.png" title="Context Menu for the document canvas" alt="Context Menu for the document canvas" /> <br images/eps-imp1.png" title="EPS preview in a file dialog" alt="EPS preview in a file dialog" images/eps-imp5.png" title="Colors imported from an EPS file" alt="Colors imported from an EPS file" images/eps-imp4.png" title="EPS font substitution" alt="EPS font substitution" images/eps-imp2.png" title="EPS import progress" alt="EPS import progress" images/eps-imp3.png" title="Bitmap conversion failure" alt="Bitmap conversion failure" 乍一看，它看起来与上面的输出类似，并且附带有去除图像的标签部分的好处，但是有令人费解的是还夹杂着表格标签和其他内容。 我认为这涉及到这个正则表达式 src="(.*)/>，这被称为贪婪，意味着它不一定停止在遇到 /> 的第一个实例。我应该补充一点，我也尝试过 src="(.*)"，这真的没有什么更好的效果，我不是一个正则表达式专家（只是做了这个），找了各种方法来改进这一点但是并没什么用。做了一系列的事情之后，甚至尝试了 Perl 的 HTML::Parser 模块，最终我试图将这与我为 Scribus 编写的一些脚本进行比较，这些脚本逐个字符的分析文本内容，然后采取一些行动。 为了最终目的，我终于想出了所有这些方法，并且完全不需要正则表达式或 HTML 解析器。 让我们回到展示的那个 img 标签的例子。 我决定回到 src= 这一块。 一种方法是等待 s 出现，然后看下一个字符是否是 r，下一个是 c，下一个是否 =。 如果是这样，那就匹配上了！ 那么两个双引号之间的内容就是我所需要的。 这种方法的问题在于需要连续识别上面这样的结构。 一种查看代表一行 HTML 文本的字符串的方法是：for c in all_text: 但是这个逻辑太乱了，以至于不能持续匹配到前面的 c，还有之前的字符，更之前的字符，更更之前的字符。最后，我决定专注于 = 并使用索引方法，以便我可以轻松地引用字符串中的任何先前或将来的字符。 这里是搜索部分： index = 3 while index < linelength: if (all_text[index] == '='): if (all_text[index-3] == 's') and (all_text[index-2] == 'r') and (all_text[index-1] == 'c'): imagefound(all_text, imagelist, index) index += 1 else: index += 1 else: index += 1 我用第四个字符开始搜索（索引从 0 开始），所以我在下面没有出现索引错误，并且实际上，在每一行的第四个字符之前不会有等号。 第一个测试是看字符串中是否出现了 =，如果没有，我们就会前进。 如果我们确实看到一个等号，那么我们会看前三个字符是否是 s、r 和 c。 如果全都匹配了，就调用函数 imagefound：def imagefound(all_text, imagelist, index): end = 0 index += 2 newimage = '' while end == 0: if (all_text[index] != '"'): newimage = newimage + all_text[index] index += 1 else: newimage = newimage + '\n' imagelist.append(newimage) end = 1 return 我们给函数发送当前索引，它代表着 =。 我们知道下一个字符将会是 "，所以我们跳过两个字符，并开始向名为 newimage 的控制字符串添加字符，直到我们发现下一个 "，此时我们完成了一次匹配。 我们将字符串加一个换行符（\n）添加到列表 imagelist 中并返回（return），请记住，在剩余的这个 HTML 字符串中可能会有更多图片标签，所以我们马上回到搜索循环中。以下是我们的输出现在的样子：images/text-frame-link.png images/text-frame-unlink.png images/gimpoptions1.png images/gimpoptions3.png images/gimpoptions2.png images/fontpref3.png images/font-subst.png images/fontpref2.png images/fontpref1.png images/dtp-studio.png 啊，干净多了，而这只花费几秒钟的时间。 我本可以将索引前移 7 步来剪切 images/ 部分，但我更愿意把这个部分保存下来，以确保我没有剪切掉图像文件名的第一个字母，这很容易用 KWrite 编辑成功 —— 你甚至不需要正则表达式。 做完这些并保存文件后，下一步就是运行我编写的另一个脚本 sortlist.py：#!/usr/bin/env python # -*- coding: utf-8 -*- # sortlist.py import os imagelist = [] for line in open('/tmp/imagelist_parse4.txt').xreadlines(): imagelist.append(line) imagelist.sort() outfile = open('/tmp/imagelist_parse4_sorted.txt', 'w') outfile.writelines(imagelist) outfile.close() 这会读取文件内容，并存储为列表，对其排序，然后另存为另一个文件。 之后，我可以做到以下几点：ls /home/gregp/development/Scribus15x/doc/en/images/*.png > '/tmp/actual_images.txt' 然后我需要在该文件上运行 sortlist.py，因为 ls 方法的排序与 Python 不同。 我原本可以在这些文件上运行比较脚本，但我更愿意以可视方式进行操作。 最后，我成功找到了 42 个图像，这些图像没有来自文档的 HTML 引用。这是我的完整解析脚本：#!/usr/bin/env python # -*- coding: utf-8 -*- # parseimg4.py import os def imagefound(all_text, imagelist, index): end = 0 index += 2 newimage = '' while end == 0: if (all_text[index] != '"'): newimage = newimage + all_text[index] index += 1 else: newimage = newimage + '\n' imagelist.append(newimage) end = 1 return htmlnames = [] imagelist = [] tempstring = '' filenames = os.listdir('/home/gregp/development/Scribus15x/doc/en/') for name in filenames: if name.endswith('.html'): htmlnames.append(name) #print htmlnames for htmlfile in htmlnames: all_text = open('/home/gregp/development/Scribus15x/doc/en/' + htmlfile).read() linelength = len(all_text) index = 3 while index < linelength: if (all_text[index] == '='): if (all_text[index-3] == 's') and (all_text[index-2] == 'r') and (all_text[index-1] == 'c'): imagefound(all_text, imagelist, index) index += 1 else: index += 1 else: index += 1 outfile = open('/tmp/imagelist_parse4.txt', 'w') outfile.writelines(imagelist) outfile.close() imageno = len(imagelist) print str(imageno) + " images were found and saved" 脚本名称为 parseimg4.py，这并不能真实反映我陆续编写的脚本数量（包括微调的和大改的以及丢弃并重新开始写的）。 请注意，我已经对这些目录和文件名进行了硬编码，但是很容易变得通用化，让用户输入这些信息。 同样，因为它们是工作脚本，所以我将输出发送到 /tmp 目录，所以一旦重新启动系统，它们就会消失。这不是故事的结尾，因为下一个问题是：僵尸 HTML 文件怎么办？ 任何未使用的文件都可能会引用图像，不能被前面的方法所找出。 我们有一个 menu.xml 文件作为联机手册的目录，但我还需要考虑 TOC（LCTT 译注：TOC 是 table of contents 的缩写）中列出的某些文件可能引用了不在 TOC 中的文件，是的，我确实找到了一些这样的文件。最后我可以说，这是一个比图像搜索更简单的任务，而且开发的过程对我有很大的帮助。关于作者Greg Pittman 是 Kentucky 州 Louisville 市的一名退休的神经学家，从二十世纪六十年代的 Fortran IV 语言开始长期以来对计算机和编程有着浓厚的兴趣。 当 Linux 和开源软件出现的时候，Greg 深受启发，去学习更多知识，并实现最终贡献的承诺。 他是 Scribus 团队的成员。更多关于我via: https://opensource.com/article/18/1/parsing-html-python作者：Greg Pittman 译者：Flowsnow 校对：wxy本文由 LCTT 原创编译，Linux中国 荣誉推出
HTML5 是第五个且是当前的 HTML 版本，它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。HTML5 通过 W3C 和 Web 超文本应用技术工作组 Web Hypertext Application Technology Working Group 之间的合作发展起来。它是一个更高版本的 HTML，它的许多新元素可以使你的页面更加语义化和动态。它是为所有人提供更好的 Web 体验而开发的。HTML5 提供了很多的功能，使 Web 更加动态和交互。HTML5 的新功能是：新标签，如 和 用于 2D 绘图的 元素本地存储新的表单控件，如日历、日期和时间新媒体功能地理位置HTML5 还不是正式标准（LCTT 译注：HTML5 已于 2014 年成为“推荐标准”），因此，并不是所有的浏览器都支持它或其中一些功能。开发 HTML5 背后最重要的原因之一是防止用户下载并安装像 Silverlight 和 Flash 这样的多个插件。新标签和元素语义化元素： 图 1 展示了一些有用的语义化元素。表单元素： HTML5 中的表单元素如图 2 所示。图形元素： HTML5 中的图形元素如图 3 所示。媒体元素： HTML5 中的新媒体元素如图 4 所示。图 1：语义化元素图 2：表单元素图 3：图形元素图 4：媒体元素HTML5 的高级功能地理位置这是一个 HTML5 API，用于获取网站用户的地理位置，用户必须首先允许网站获取他或她的位置。这通常通过按钮和/或浏览器弹出窗口来实现。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。地理位置的一些用途是：公共交通网站出租车及其他运输网站电子商务网站计算运费旅行社网站房地产网站在附近播放的电影的电影院网站在线游戏网站首页提供本地标题和天气工作职位可以自动计算通勤时间工作原理： 地理位置通过扫描位置信息的常见源进行工作，其中包括以下：全球定位系统（GPS）是最准确的网络信号 - IP地址、RFID、Wi-Fi 和蓝牙 MAC地址GSM/CDMA 蜂窝 ID用户输入该 API 提供了非常方便的函数来检测浏览器中的地理位置支持：if (navigator.geolocation) { // do stuff } getCurrentPosition API 是使用地理位置的主要方法。它检索用户设备的当前地理位置。该位置被描述为一组地理坐标以及航向和速度。位置信息作为位置对象返回。语法是：getCurrentPosition(showLocation, ErrorHandler, options); showLocation：定义了检索位置信息的回调方法。ErrorHandler（可选）：定义了在处理异步调用时发生错误时调用的回调方法。options （可选）： 定义了一组用于检索位置信息的选项。我们可以通过两种方式向用户提供位置信息：测地和民用。描述位置的测地方式直接指向纬度和经度。位置信息的民用表示法是人类可读的且容易理解。如下表 1 所示，每个属性/参数都具有测地和民用表示。图 5 包含了一个位置对象返回的属性集。图5：位置对象属性网络存储在 HTML 中，为了在本机存储用户数据，我们需要使用 JavaScript cookie。为了避免这种情况，HTML5 已经引入了 Web 存储，网站利用它在本机上存储用户数据。与 Cookie 相比，Web 存储的优点是：更安全更快存储更多的数据存储的数据不会随每个服务器请求一起发送。只有在被要求时才包括在内。这是 HTML5 Web 存储超过 Cookie 的一大优势。有两种类型的 Web 存储对象：本地 - 存储没有到期日期的数据。会话 - 仅存储一个会话的数据。如何工作： localStorage 和 sessionStorage 对象创建一个 key=value 对。比如： key="Name"， value="Palak"。这些存储为字符串，但如果需要，可以使用 JavaScript 函数（如 parseInt() 和 parseFloat()）进行转换。下面给出了使用 Web 存储对象的语法：存储一个值：localStorage.setItem("key1", "value1");localStorage["key1"] = "value1";得到一个值：alert(localStorage.getItem("key1"));alert(localStorage["key1"]);删除一个值： -removeItem("key1");删除所有值：localStorage.clear();应用缓存（AppCache）使用 HTML5 AppCache，我们可以使 Web 应用程序在没有 Internet 连接的情况下脱机工作。除 IE 之外，所有浏览器都可以使用 AppCache（截止至此时）。应用缓存的优点是：网页浏览可以脱机页面加载速度更快服务器负载更小cache manifest 是一个简单的文本文件，其中列出了浏览器应缓存的资源以进行脱机访问。 manifest 属性可以包含在文档的 HTML 标签中，如下所示： ... 它应该在你要缓存的所有页面上。缓存的应用程序页面将一直保留，除非：用户清除它们manifest 被修改缓存更新视频在 HTML5 发布之前，没有统一的标准来显示网页上的视频。大多数视频都是通过 Flash 等不同的插件显示的。但 HTML5 规定了使用 video 元素在网页上显示视频的标准方式。目前，video 元素支持三种视频格式，如表 2 所示。下面的例子展示了 video 元素的使用：<! DOCTYPE HTML> This browser does not support the video element. 例子使用了 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要使视频在 Safari 和未来版本的 Chrome 中工作，我们必须添加一个 MPEG4 和 WebM 文件。video 元素允许多个 source 元素。source 元素可以链接到不同的视频文件。浏览器将使用第一个识别的格式，如下所示： This browser does not support the video element. 图6：Canvas 的输出音频对于音频，情况类似于视频。在 HTML5 发布之前，在网页上播放音频没有统一的标准。大多数音频也通过 Flash 等不同的插件播放。但 HTML5 规定了通过使用音频元素在网页上播放音频的标准方式。音频元素用于播放声音文件和音频流。目前，HTML5 audio 元素支持三种音频格式，如表 3 所示。audio 元素的使用如下所示：<! DOCTYPE HTML> This browser does not support the audio element. 此例使用 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未来版本中使 audio 工作，我们必须添加一个 MP3 和 Wav 文件。audio 元素允许多个 source 元素，它可以链接到不同的音频文件。浏览器将使用第一个识别的格式，如下所示： This browser does not support the audio element. 画布（Canvas）要在网页上创建图形，HTML5 使用 画布 API。我们可以用它绘制任何东西，并且它使用 JavaScript。它通过避免从网络下载图像而提高网站性能。使用画布，我们可以绘制形状和线条、弧线和文本、渐变和图案。此外，画布可以让我们操作图像中甚至视频中的像素。你可以将 canvas 元素添加到 HTML 页面，如下所示： 画布元素不具有绘制元素的功能。我们可以通过使用 JavaScript 来实现绘制。所有绘画应在 JavaScript 中。 以上脚本的输出如图 6 所示。你可以绘制许多对象，如弧、圆、线/垂直梯度等。HTML5 工具为了有效操作，所有熟练的或业余的 Web 开发人员/设计人员都应该使用 HTML5 工具，当需要设置工作流/网站或执行重复任务时，这些工具非常有帮助。它们提高了网页设计的可用性。以下是一些帮助创建很棒的网站的必要工具。HTML5 Maker： 用来在 HTML、JavaScript 和 CSS 的帮助下与网站内容交互。非常容易使用。它还允许我们开发幻灯片、滑块、HTML5 动画等。Liveweave： 用来测试代码。它减少了保存代码并将其加载到屏幕上所花费的时间。在编辑器中粘贴代码即可得到结果。它非常易于使用，并为一些代码提供自动完成功能，这使得开发和测试更快更容易。Font dragr： 在浏览器中预览定制的 Web 字体。它会直接载入该字体，以便你可以知道看起来是否正确。也提供了拖放界面，允许你拖动字形、Web 开放字体和矢量图形来马上测试。HTML5 Please： 可以让我们找到与 HTML5 相关的任何内容。如果你想知道如何使用任何一个功能，你可以在 HTML Please 中搜索。它提供了支持的浏览器和设备的有用资源的列表，语法，以及如何使用元素的一般建议等。Modernizr： 这是一个开源工具，用于给访问者浏览器提供最佳体验。使用此工具，你可以检测访问者的浏览器是否支持 HTML5 功能，并加载相应的脚本。Adobe Edge Animate： 这是必须处理交互式 HTML 动画的 HTML5 开发人员的有用工具。它用于数字出版、网络和广告领域。此工具允许用户创建无瑕疵的动画，可以跨多个设备运行。Video.js： 这是一款基于 JavaScript 的 HTML5 视频播放器。如果要将视频添加到你的网站，你应该使用此工具。它使视频看起来不错，并且是网站的一部分。The W3 Validator： W3 验证工具测试 HTML、XHTML、SMIL、MathML 等中的网站标记的有效性。要测试任何网站的标记有效性，你必须选择文档类型为 HTML5 并输入你网页的 URL。这样做之后，你的代码将被检查，并将提供所有错误和警告。HTML5 Reset： 此工具允许开发人员在 HTML5 中重写旧网站的代码。你可以使用这些工具为你网站的访问者提供一个良好的网络体验。Palak Shah作者是高级软件工程师。她喜欢探索新技术，学习创新概念。她也喜欢哲学。你可以通过 palak311@gmail.com 联系她。via: http://opensourceforu.com/2017/06/introduction-to-html5/作者：Palak Shah 译者：geekpi 校对：wxy本文由 LCTT 原创编译，Linux中国 荣誉推出
将一个特定页面抓取为一张png图片的最简单的方法是使用CutyCapt，这是一种在Linux下的方便地将HTML网页转化成矢量图形和位图图像格式的命令行工具（比如，SVG, PDF, PS, PNG, JPEG, TIFF, GIF）。CutyCapt内部使用WebKit渲染引擎来导出网页渲染输出到图片文件中。它使用Qt构建，CutyCapt实际上是一个也可以在Windows上使用的跨平台应用。（译注：也有一个基于IE内核的 IECapt 可以作此用途）在本篇教程中，我会描述如何将一个HTML网页使用CutyCapt转化成png图片。在Linux上安装 CutyCapt这是在特定Linux发行版上的安装命令。在Debian, Ubuntu 或者 Linux Mint 安装 CutyCapt$ sudo apt-get install cutycapt 在Fedora上安装 CutyCapt$ sudo yum install subversion qt-devel qtwebkit-devel gcc-c++ make $ svn co svn://svn.code.sf.net/p/cutycapt/code/ cutycapt $ cd cutycapt/CutyCapt 在Fedora上编译前，你需要在源码上打上补丁。使用文本编辑器打开CutyCapt.hpp,并且加入在文件的开头加上下面的两行。#include #include 最后，如下编译并安装CutyCapt。$ qmake-qt4 $ make $ sudo cp CutyCapt /usr/local/bin/cutycapt 在CentOS 或者 RHEL安装 CutyCapt首先在你的Linux上启用EPEL仓库。接着和在Fedora上一样使用相同的步骤编译安装。使用CutyCapt将 HTML 转化成 PNG将一个HTML页面截图成一个png图片，只要使用下面的格式运行CutyCapt。$ cutycapt --url=http://www.cnn.com --out=cnn.png 要将HTML页面保存成不同的格式（比如，PDF），只要适当地指定输出文件。$ cutycapt --url=http://www.cnn.com --out=cnn.pdf 下图显示了CutyCapt命令选项。在一台不含X的服务器上使用CutyCapt将HTML转换成PNG虽然CutyCapt是一个命令行工具，但是它需要X服务运行。如果你尝试在不含X服务的机器上运行，你会得到下面这个错误：cutycapt: cannot connect to X server :0 如果你要不含X的服务器上运行CutyCapt，你可以在服务器上安装Xvfb（轻量级“假的”X11 服务）。这样CutyCapt就不会报错了。要在Debian, Ubuntu 或者 Linux Mint 上安装Xvfb：$ sudo apt-get install xvfb 要在Fedora, CentOS 或者 RHEL 上安装Xvfb:$ sudo yum install xvfb 在安装Xvfb之后，接下来像这样运行CutyCapt。$ xvfb-run --server-args="-screen 0, 1280x1200x24" cutycapt --url=http://www.cnn.com --out=cnn.png 它首先会运行Xbfb服务，接着使用CutyCapt来抓取网页。因此它可能会花费更长的时间。如果你想要截图多张截图，你可能事先需要将Xvfb作为后台守护进程启动。via: http://xmodulo.com/2014/02/convert-html-web-page-png-image-linux.html译者：geekpi 校对：wxy本文由 LCTT 原创翻译，Linux中国 荣誉推出
CuteMarkEd 0.9.0 是一个基于QT，免费开源带实时HTML预览的markdown编辑器，目前已经释出并已提供下载了。CuteMarkEd是一个非常有用的Qt文本编辑器，可以提供数学表达式、代码语法高亮、和markdown语法高亮的支持。CuteMarkEd 0.9.0 的亮点:加入了一个代码补齐系统;加入 "Go to Line" 菜单;在查找/替换功能中加入了新的"case sensitive," "whole words only," 和 "use regular expressions" 选项。支持将选中的单词加入用户词典;加入了改变tab字符宽度的选项在官方公告中查找完整的改变列表和提升。马上下载CuteMarkEd 0.9.0:CuteMarkEd 0.9.0 tar.gz [源码] [372 KB]记住这是一个开发版本，不应该在生产机器上安装。它只用于测试目的。via: http://news.softpedia.com/news/Markdown-Text-Editor-CuteMarkEd-0-9-0-Gets-News-Options-421082.shtml译者：geekpi 校对：wxy本文由 LCTT 原创翻译，Linux中国 荣誉推出