HTML 初心者のための 30 のベストプラクティス_html/css

1. ラベルを閉じたままにしておきます

過去には、次のようなコードがよく見られました (注釈: これはどれくらい前のことですか...):

<li>Some text here.  <li>Some new text here.  <li>You get the idea.

ログイン後にコピー

の UL/OL ラベルに注意してください。外側のパッケージがありません（意図的か非意図的かはわかりません）。また、LI タグを閉じるのを忘れていました。今日の基準からすると、これは明らかに悪い習慣であり、100% 避けるべきです。とにかくタグは閉じたままにしておきます。そうしないと、HTML タグを検証するときに問題が発生する可能性があります。

より良い方法

<ul>    <li>Some text here. </li>    <li>Some new text here. </li>    <li>You get the idea. </li>  </ul>

ログイン後にコピー

2. 正しいドキュメントタイプを宣言します

著者は以前から多くの CSS フォーラムに参加しており、ユーザーが問題に遭遇したときは、最初に次の 2 つのことを行うようアドバイスします。 CSS ファイルを検証して、エラーがないことを確認します。

2. 正しい doctype が追加されていることを確認します

DOCTYPE は、ページに HTML、XHTML、または両方の混合が含まれているかどうかをブラウザーに伝え、ブラウザーがそれを正しく解析できるようにします。

通常、次の 4 つのドキュメントタイプから選択できます。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><br /><br /><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><br /><br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /><br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

ログイン後にコピー

どのドキュメントタイプ宣言を使用するかについては、さまざまな意見があります。一般に、最も厳密な宣言を使用することが最良の選択であると考えられていますが、調査によると、ほとんどのブラウザはこの宣言を解析するために通常の方法を使用するため、多くの人が HTML4.01 標準の使用を選択します。ステートメントを選択する際の重要な点は、それが本当に自分に適しているかどうかです。そのため、プロジェクトに適したステートメントを選択するには、それを総合的に考慮する必要があります。

3. インラインスタイルは絶対に使用しないでください

コードの作成に没頭していると、次のように小さなインライン CSS コードを何気なくまたは怠惰に追加することがあります。ただし、これはコーディングの実践における間違いです。

コードを記述するときは、コンテンツ構造が完成するまでスタイルコードを追加しないことをお勧めします。

このコーディング方法はゲリラ戦のようなもので、非常に模倣的なアプローチです。 ——Chris Coyier

より良いアプローチは、タグ部分を完成させた後、外部スタイルシートファイルでこの P のスタイルを定義することです。

JS ファイルに特定の機能 (ボタンのクリックイベントなど) のみを実装する必要がある場合は、本文の下部に自由に導入してください。これは間違いなく最良の方法です。

アドバイス

<head>  <title>My Favorites Kinds of Corn</title>  <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />  <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />  </head>

ログイン後にコピー

6. インライン JavaScript は絶対に使用しないでください。これはもう 1996 年ではありません。何年も前には、JS コードを HTML タグに直接追加する方法がまだありました。これは、シンプルなフォトアルバムで特によく見られます。基本的に、「onclick」イベントがタグに付加され、その効果は一部の JS コードと同等です。あまり説明する必要はありませんが、このメソッドは使用しないでください。コードを外部 JS ファイルに転送してから、「addEventListener /attachEvent」を使用してイベントリスナーを追加する必要があります。または、jquery などのフレームワークを使用して、単に「クリック」メソッドを使用します。

<p>And now you know my favorite kinds of corn. </p>  <script type="text/javascript" src="path/to/file.js"></script>  <script type="text/javascript" src="path/to/anotherFile.js"></script>  </body>  </html>

ログイン後にコピー

7. 検証しながら開発する

標準検証の意味と価値をよく理解していない人が多いですが、この問題については著者がブログで詳しく分析しています。一言で言えば、検証はあなたに役立つものであり、あなたに迷惑をかけるものではありません。

Web ページの制作を始めたばかりの場合は、Web Developer Toolbar をダウンロードし (Chrome ユーザーはアプリストアで自分で検索してください。つまり、ユーザーは使用できない場合があります)、「」を使用することを強くお勧めします。「HTML 標準検証」および「HTML 標準検証」は、コーディングプロセス「CSS 標準検証」中にいつでも実行できます。 CSS を学ぶのがとても簡単な言語だと思っているなら、それはあなたを殺します。コードが甘いと、ページが抜け穴だらけになり、問題が絶えなくなります。検証、検証、再検証を繰り返すのが良い方法です。

8. firebug をダウンロードします

Firebug は間違いなく Web 開発に最適なプラグインであり、JavaScript をデバッグできるだけでなく、ページタグの属性と位置を直感的に理解することもできます。早速ダウンロードしてみましょう！

9. Firebug を使用します

据笔者观察，大部分的使用者仅仅使用了Firebug 20%的功能，那真是太浪费了，你不妨花几个小时的时间来系统学习这个工具，相信会让你事半功倍。

资源

Overview of Firebug

Debug Javascript With Firebug – video tutorial

10.保持标签名小写

理论上讲，html不区分大小写，你可以随意书写，例如：

<DIV>  <P>Here's an interesting fact about corn. </P>  </DIV>

ログイン後にコピー

但最好不要这样写，费力气输入大些字母没有任何用处，并且会让代码很难看.

建议

<div>  　　<p>Here's an interesting fact about corn. </p>  </div>

ログイン後にコピー

11.使用H1-H6标签

笔者建议你在网页中使用其中全部六种标记，虽然大部分人只会用到前四个，但使用最多的H会有很多好处，比如设备友好、搜索引擎友好等，不妨把你的P标签都替换成H6。

<h1>This is a really important corn fact! </h1>  <h6>Small, but still significant corn fact goes here. </h6>

ログイン後にコピー

12.写博客时，请将H1留给文章标题

今天笔者在Twitter上发起一次讨论：是该把H1定义到LOGO上还是定义到文章标题上，有80%的人选择了后者。

当然具体如何使用要看你的需求，但我建议你在建立博客的时候，将文章题目定为H1，这对搜索引擎优化(seo)是非常有好处的。

13.下载ySlow

在过去几年里，雅虎的团队在前端开发领域做了许多伟大的工作。前不久，它们发布了一个叫ySlow的Firebug扩展，它会分析你的网页，并返回一个“成绩单”，上面细致分析了这个网页的方方面面，提出需要改进的地方，虽然它有点苛刻，但它绝对会对你有所帮助，强烈推荐—— ySlow！

14.使用无序列表（UL）包裹导航菜单

通常网站都会有导航菜单，你可以用这样的方式定义：

<div id="nav">   <a href="#">Home </a>    <a href="#">About </a>    <a href="#">Contact </a>  </div>

ログイン後にコピー

如果你想书写优美的代码，那最好不要用这种方式。

为什么要用UL布局导航菜单？ ——因为UL生来就是为定义列表准备的

最好这样定义：

<ul id="nav">    <li><a href="#">Home</a></li>    <li><a href="#">About</a></li>    <li><a href="#">Contact</a></li>  </ul>

ログイン後にコピー

15.学习如何应对IE

IE一直以来都是前端开发人员的噩梦！

如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效：

<!--[if lt IE 7]>     <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />  <![endif]-->

ログイン後にコピー

这些代码的意思是：如果用户浏览器是IE6及以下，那这段代码才会生效。如果你想把IE7也包含进来，那么就把“[if lt IE 7]”改为“[if lte IE 7]”。

16.选择合适的IDE

不论你是Windows还是Mac用户，这里都有很多优秀的编辑器供你选择：

Mac 用户

Coda

Espresso

TextMate

Aptana

DreamWeaver CS4

PC 用户

InType

E-Text Editor

Notepad++

Aptana

Dreamweaver CS4

17.上线前，压缩代码

通过压缩您的CSS和Javascript文件，您可以减少总大小的25%左右，但在开发过程中不必压缩，然而，一旦网站完成后，利用一些网络压缩程序或多或少节省一些带宽。下面列出一些工具。

Javascript 压缩服务

Javascript Compressor

JS Compressor

CSS Compression Services

CSS Optimiser

CSS Compressor

Clean CSS

18.精简，精简，在精简

回望我们大多数人写的第一个页面，一定会发现严重的 “DIV癖”( divitis )，通常初学者的本能就是把一个段落用DIV包起来，然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。

网页写完后，一定要多次回头检查，尽量的减少元素的数量。能用UL布局的列表就不要用一个个的DIV去布局。

正如写文章的关键是“缩减，缩减，缩减”一样，写页面也要遵循这个标准。

19.给所有图片加上“alt”属性

为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息，并且对图像搜索引擎友好。

糟糕的做法

<IMG SRC="cornImage.jpg" />

ログイン後にコピー

更好的做法

<img src="cornImage.jpg" alt="A corn field I visited." />

ログイン後にコピー

20.通宵达旦

我经常不知不觉的学习工作到凌晨，我认为这是个很好的状况。

我的“啊～哈！”时间（ “AH-HA” moments，指柳暗花明或豁然开朗的时刻）通常都发生在深夜，比如我彻底理解JavaScript的“闭包”概念，就是在这样一种情况下。如果你还没有感受过这种奇妙的时刻，那就马上试试吧！

21.查看源代码

没有什么比模仿你的偶像能让你更快的学习HTML。起初，我们都要甘做复印机，然后慢慢得发展自己的风格。研究你喜欢的网站页面代码，看看他们是怎么实现的。这是高手的必经之路，你一定要试一下。注意：只是学习和模仿他们的编码风格，而不是抄袭和照搬！

留意网络上各种炫酷的JavaScript效果，如果看上去是使用了插件，那根据它源码中head标签内的文件名，就可以找到这个插件名称，然后就可以学习它据为己用。

22.为所有的元素定义样式

这一条在你制作其他公司企业网站时尤为必要。你自己不使用blockquote标记？那用户可能会用，你自己不使用OL？用户也可能会。花时间做一个页面，显示出ul, ol, p, h1-h6, blockquotes, 等等元素的样式，检查一下是否有遗漏。

23.使用第三方服务

现在互联网上流行着许多可以免费加在网页中的API，这些工具非常强大。它可以帮你实现许多巧妙的功能，更重要的是可以帮你宣传网站。

24.掌握Photoshop

Photoshop是前端工程师的一个重要工具，如果你已经熟练掌握HTML和CSS，那不妨多学习一下Photshop。

观看Psdtuts+上的视频课程。
花费每月25$注册成为Lynda.com的会员，海量精品课程。
推荐“You Suck at Photoshop”系列
花费几个小时记住尽可能多的PS快捷键。

25.学习每一个HTML标签

虽然有些HTML标签很少用到，但你依然应该了解他们。比如“abbr”、“cite”等，你必须学习它们以备不时之需。

顺便说下，如果你不熟悉上面两个标签，可以看下下面的解释：

abbr 和你估计的差不多，它是abbreviation的缩写（英语差的估计不到），“Blvd”能用标签包裹，因为他是“boulevard”的缩写。（喜大普奔也可以喽）。

cite 被用来作为引用内容的标题（blockquote）。例如，如果你在你的博客中引用本篇文章，你可以将“给HTML初学者的三十条最佳实践”用包裹，注意它不应该被用来包裹引用的作者，这是常见的误区。

26.参与社区讨论

网络上有许许多多优秀的资源，而社区中也隐藏着许多高手，这里你既可以自学，也能请教经验丰富的开发者。

27.使用reset.css

Css Reset也就Reset Css ,就是重置一些HTML标签样式，或者说默认的样式。

关于是否应该使用CSS Reset，网上也有激烈的争论，笔者是建议使用的。你可以先选用一些成熟的CSS Reset，然后慢慢演变成适合自己的。

html, body, div, span,   h1, h2, h3, h4, h5, h6, p, blockquote, pre,  a, abbr, acronym, address, big, cite, code,  img, ins, kbd, q, s, samp,  small, strike, strong,   dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td {      margin: 0;      padding: 0;      border: 0;      outline: 0;      font-size: 100%;      vertical-align: baselinebaseline;      background: transparent;  }  body {      line-height: 1;  }  ol, ul {      list-style: none;  }  blockquote, q {      quotes: none;  }  blockquote:before, blockquote:after,  q:before, q:after {      content: '';      content: none;  }    table {      border-collapse: collapse;      border-spacing: 0;  }

ログイン後にコピー

28.对齐元素

简单来说，你应该尽可能的对齐你的网页元素。可以观察一下你喜欢的网站，它们的LOGO、标题、图表、段落肯定是对得非常整齐的。否则就会显得混乱和不专业。

29.关于PSD切片

现在你已经掌握了HTML、CSS、Photoshop知识，那么你还需要学习如何把PSD转换为网页上的图片和背景，下面有两个不错的教程：

PSDをスライスアンドダイス

PSDからHTML/CSSへ

30.フレームワークを安易に使用しないでください

JavaScriptとCSSには優れたフレームワークがたくさんありますが、初心者の場合は、急いで使わないでください。 CSS にまだ習熟していない場合、フレームワークを使用すると知識体系が混乱する可能性があります。 JavaScript と jQuery は一緒に学習できると言われるかもしれませんが、CSS はそうではありません。私は個人的に 960 CSS Grid フレームワークを支持しており、定期的に使用しています。繰り返しになりますが、CSS の初心者の場合、フレームワークを学習してもさらに混乱するだけです。