在查看我们的 Photoshop 模型时,我们开始编写 HTML 来描述我们看到的内容。当然,只要有意义,我们就会使用 HTML5,并尽可能保持语义化。例如,我们对文章的发布日期使用<time>
元素,因为,你知道,这很聪明也很语义化。
我们稍微提到了使用Zen Coding,并跳转到CodePen,因为它内置了该功能。此外,在 Sublime Text 2 中使用 command 键点击非常棒。
我们使用 HTML 注释(目前)来表示与其开始标签相距很远的结束标签。例如:
<div class='page-wrap'>
... lots of space
<div><!-- END div.page-wrap -->
对于我们的标题,我们使用了一些来自网站的真实标题,以便我们能够使用一些真实的内容。
我遇到了这个错误
“未找到支持的格式或 MIME 类型的视频问题”
嘿,Chris,你是如何获得 Chrome 自动更新的?浏览器插件还是 Sublime 的特殊操作?
我喜欢你从 body 类设置活动菜单项的方式。
CodeKit
一些视频会崩溃和停止:((
我也无法下载视频。
尝试刷新页面并点击“下载视频文件”按钮。否则,您可以直接向我报告问题,我的邮箱地址是[email protected]。
我将把这个帖子埋起来,以努力使评论线程直接针对内容。
有一个名为“AutoFileName”的 ST2 包(https://github.com/BoundInCode/AutoFileName)可以自动为你完成文件名…非常方便
Chris,你使用的是你使用的任何 Mac 附带的 Apple 键盘吗?你有没有考虑过购买第三方键盘?多年来,我在你的屏幕录像中看到的错字数量令人难以置信!;
我使用的是Microsoft 人体工学键盘,因为我有 RSI 问题。
我确实犯了很多错字。部分原因可能是整个屏幕录像过程(压力很大!)。你是否觉得这很分散注意力?如果你不得不猜测,你认为你在开发时犯的错字更多还是更少?
啊,我对 RSI 问题并不陌生,但幸运的是,我的问题都没有持续很久。显然,你必须小心处理这类事情,尤其是在你演奏乐器的时候!
我一点也不觉得它分散注意力——除了当你错过变量中的 $ 符号,然后你花几分钟时间试图找出问题所在的时候,但这是我们每个人都会不时犯的错误。当这种事情发生在屏幕录像中时,实际上是又好笑又让人恼火!
我想说的是,我在编码时犯的错字要少得多,但我曾经遇到过犯错字很多的情况,更换键盘对我有很大的帮助。不过,我并没有像你说的那样,一边说话一边录制屏幕录像,承受着压力。
嘿,Chris,
Zen Coding 中有一个很酷的技巧,它允许你遍历一整节导航链接来键入锚文本。对于类名也可能有效。因此,与其移动光标或点击来键入“首页”、“代码片段”等…,你只需按 Tab 键并键入…按 Tab 键并键入…非常酷,我发现它非常有用。
你为什么不将 CSS-Tricks 包裹在 h1 中或将主导航放在 ul 中?
我喜欢将 h1 标签用于文章标题。我认为在一个理想的世界里,我应该做的是让它在主页上输出一个 h1 标签,但在任何其他页面上都只输出一个链接。然后以某种方式对其进行样式设置,使其在视觉上没有任何区别。
我知道一个人,他实际上使用屏幕阅读器他说列表中的导航实际上更糟糕。
在 SEO 领域,H1 标签就像一场宗教辩论。我认为至少值得一提的是,H1 仍然被视为搜索引擎的一个次要排名因素。显然,CSS-Tricks 在 SEO 方面可以为所欲为,但如果你正在构建一个全新的网站,那么值得考虑你如何使用 H1 标签。
Chris 在这里做了一个很好的选择,将 H1 保留用于文章标题。这在语义上是有道理的,它也有助于 Google 更好地理解内容。如果每个页面都有一个“CSS-Tricks”的 H1,当然,每个页面在技术上都是一个“CSS-Trick”,但这对任何人(人类或机器)都没有帮助。
但我也要在这里自相矛盾地说,就 SEO 而言,这真的无关紧要。我见过 SEO 领域的人让客户为每个页面都添加一个独特的、关键词填充的 H1 标签,这让我感到心碎。影响非常微不足道。
你说得对,这就像一场宗教辩论,就像宗教辩论一样,有太多人持有绝对主义立场。从语义上讲,在主页上将 CSS Tricks 作为 h1 可能是有意义的,因为主页的功能本质上是作为网站的介绍。
我必须承认,我确实发现 CSS Tricks 的首页没有 h1 这一点很奇怪,尽管当然,这在实践中没有任何后果。
嘿,Chris——我最近一直在读到,所有 section 标签都需要包含一个 h1 作为 HTML5 页面大纲的一部分。我注意到你在这里没有这样做。只是想知道你对此的看法。这是 HTML5 中比较令人困惑的方面之一。
好的……我在这里会被纠正……但是使用 HTML5 文档类型的主要好处之一不是我们可以访问更高级的文档大纲技术吗……我认为文档的顶部应该是一个 h1……然后每个部分和文章也可以再次拥有一个 h1 标签,因为它们被认为是新的部分……因此可以维护正确的结构……也就是说,如果你要通过一个大纲器运行你的文档,你的顶级 h1 将是正确的,然后你 section 和 article 中的 h1 将被视为文档的子标题和子子标题,但它们仍然是它们各自的 section 或 article 的主要标题。
嗨,Chris,
我有一个非常天真,甚至可能很愚蠢的问题,但由于它一直困扰着我,我需要问一下……
我注意到你几乎总是在使用 div 时使用 class 属性,我特地回到这个第一个 HTML 视频中再次查看并确认。
我错过了什么?为什么要使用 div class="logo",为什么不使用 id?你是否计划在文档的其他地方使用另一个“logo”类?
谢谢
这里有一些你可以阅读的内容。
感谢你提到 ST2 的 Cmd+Opt+period 快捷键来关闭标签(大约 12:05)!我一直在纳闷。
现在,如果我能够弄清楚如何仅突出显示(和/或跳转到)开始或结束标签的对应标签;它将为我节省大量的滚动和咒骂。有什么想法吗?
喜欢这个系列,虽然我来小屋有点晚了。