简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML 初心者のための 30 のベスト プラクティス_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-21 08:53:561171ブラウズ

Nettuts+ を運営する上で最も難しいのは、さまざまなスキル レベルの多くのユーザーにサービスを提供することです。高度なチュートリアルを公開しすぎると、初心者ユーザーはその恩恵を受けられなくなります。その逆もまた真です。最善を尽くしておりますが、見落とされていると思われる場合はご連絡ください。このサイトはあなたのためにありますので、声を上げてください!そうは言っても、今日のチュートリアルは、Web 開発を始めたばかりの人のために特別に用意されています。経験が 1 年以下の場合は、ここにリストされているヒントのいくつかが、より優れた、より効率的な開発者になるのに役立つことを願っています。

それでは早速、30 個の作成マーカーのベスト プラクティスを確認してみましょう。

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

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

<li>Some text here.  <li>Some new text here.  <li>You get the idea.
より良い方法

<ul>    <li>Some text here. </li>    <li>Some new text here. </li>    <li>You get the idea. </li>  </ul>
2. 正しいドキュメント タイプを宣言します

作成者は、以前からユーザーがいつでも多くの CSS フォーラムに参加しています。問題が発生した場合は、最初に次の 2 つのことを行うよう提案します。

  1. CSS ファイルを検証して、エラーがないことを確認します。

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

DOCTYPE は HTML タグの前に表示され、このページに次の内容が含まれていることをブラウザーに伝えます。ブラウザが正しく解析できるように、 HTML 、 XHTML 、またはその 2 つの混合。

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

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
どのドキュメント タイプ宣言を使用するかについては、さまざまな意見があります。一般に、最も厳密な宣言を使用することが最良の選択であると考えられていますが、調査によると、ほとんどのブラウザはこの宣言を解析するために通常の方法を使用するため、多くの人が HTML4.01 標準の使用を選択します。ステートメントを選択する際の重要な点は、それが本当に自分に適しているかどうかです。そのため、プロジェクトに適したステートメントを選択するには、それを総合的に考慮する必要があります。

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

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

コードを記述するときは、コンテンツ構造が完成するまでスタイル コードを追加しないことをお勧めします。 
<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>

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

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

推奨事項

4. すべての外部 CSS ファイルを head タグ内に配置します

理論的にはどこにでも CSS スタイルシートを導入できますが、HTML 仕様では導入することが推奨されています。 Web ページの head タグに追加すると、ページのレンダリングが高速化されます。 
#someElement > p {    color: red;  }

Yahoo の開発プロセス中に、head タグにスタイル シートを導入すると、ページが段階的にレンダリングされるため、Web ページの読み込み速度が向上することがわかりました。 —— ySlow チーム

5.javascript ファイルは一番下に配置されます 

<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>

覚えておくべき原則の 1 つは、ページをできるだけ早くレンダリングすることです。ユーザーの目の前で。スクリプトがロードされると、スクリプトが完全にロードされて実行されるまで、ページのロードが一時停止されます。したがって、ユーザーはより多くの時間を無駄にすることになります。

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

推奨事項

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. 開発しながら検証する 

$('a#moreCornInfoLink').click(function() {    alert('Want to learn more about corn?');  });

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

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

8.下载firebug

Firebug是当之无愧的网页开发最佳插件，它不但可以调试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。

  1. 观看Psdtuts+上的 视频课程 。

  2. 花费每月25$注册成为 Lynda.com 的会员，海量精品课程。

  3. 推荐“ You Suck at Photoshop ”系列

  4. 花费几个小时记住尽可能多的PS快捷键。

25.学习每一个HTML标签

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

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

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

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

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转换为网页上的图片和背景，下面有两个不错的教程：

  • Slice and Dice that PSD

  • From PSD to HTML/CSS

30. フレームワークをむやみに使用しないでください

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

CSS フレームワークは熟練した開発者向けに設計されており、時間を大幅に節約できます。

翻訳者メモ

この記事は 2009 年に公開されました。あっという間に 4 年間が静かに過ぎていきました。記事内の知識の一部は古いように思えますが、ルールの多くは古いものです。以下は翻訳者によって追加された古い提案です。改善の必要があると思われる場合は、ディスカッションに参加してください。

#1

HTML5 標準では要件が緩和され、タグを閉じることができるようになり、ブラウザもこの問題を適切に修正できますが、これは使用しない理由にはなりません。タグを閉じるとそうでない場合があります。タグを閉じると、予期しないエラーが発生する可能性があります。基準を緩和すると、実際には開発の敷居が下がります。これが Web の本当の意味です。実際、xhtml の仕様では、エラーが発生した場合にページのレンダリングを停止する必要があります。これは現実的ではありません。結局のところ、ユーザーは白紙のページよりも、いくつかのエラーがあるページを見たほうが良いのです。

#8

クロスブラウザ Firebug は開発中ですが、リリース日はまだ先です。Chrome、Safari、IE、Opera にはそれぞれ独自の開発者ツールがあり、機能も優れています。 . ここではchromeの開発者ツールが推奨されており、後発者が追いつく傾向にあり、firebugを超えるのは目前と言えると思います。

#9

Firebug 入門 - Ruan Yifeng のブログ

#16

崇高

#20

私も以前はそうでしたし、多くの知識を学びましたが、屈立民准教授が解説する『黄帝内経』を読んでからは、もうこのようではなくなりましたので、あなたにもこれをお勧めしません。 . 11時が寝るのが一番遅い時間です

#23

英語の原題は「Use twitter」、これは中国のWeiboでしょうか！ ！ ！

#25

アドレスタグも悪用されやすいですが、あなたは知らないかもしれません。

#27

上記のコードは更新されている可能性があります。rerset.css の代わりにnormalize.css を使用することをお勧めします。 >

meyer リセット.css

  • html5doctor リセット.css

  • Normalize.css

  • #30
現在では、ブートストラップが主流になるかもしれません。もちろん、非常に優れたフレームワークはたくさんあります。

#31

この記事は、「初心者のための 30 HTML ベストプラクティス」の原文を翻訳したものです。 原文の翻訳はこちらです。原文の翻訳について。

このシリーズには 3 つの記事があり、そのうちの 2 つは次のとおりです:

JavaScript 初心者向けの 24 の提案

  • 効率的 jQuery の秘密

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：UI テストに F# ライブラリ キャノピーを使用する_html/css_WEB-ITnose次の記事：UI テストに F# ライブラリ キャノピーを使用する_html/css_WEB-ITnose

関連記事

続きを見る