HTML コードを書くための 30 のヒント
1. HTML タグ
を必ず閉じてください。前のページのソース コードでは、次のようなステートメントがよく見られました。
<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. 正しい文書タイプ (DocType) を宣言します
作成者は多くの文書を追加しました。 CSS フォーラムでは、ユーザーが問題に遭遇した場合、最初に次の 2 つのことを行うようアドバイスします。- 1. CSS ファイルを確認し、目に見えるエラーをすべて解決します。2 .Addドキュメント タイプ Doctype
DOCTYPE は、HTML タグが表示される前に定義され、ページに HTML、XHTML、または両方の混合が含まれているかどうかをブラウザーに伝え、ブラウザーが正しく解析できるようにします。タグ。
通常、選択できる文書タイプは 4 つあります :
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3. 埋め込み CSS スタイルを使用しない
コードの作成に没頭していると、このように、小さな埋め込み CSS コードを都合良く追加することがあります。 :<p style="color: red;">脚本之家</p>
このコーディング方法はゲリラ戦のようなもので、非常に模倣的なアプローチです。 ——Chris Coyierより良い方法は、スタイル シート ファイルでこの P のスタイルを定義することです:
someElement > p {
color: red;
}4 ページ ヘッド タグ内に導入します。すべてのスタイル シート ファイル
理論的には、どこにでも CSS スタイル シートを導入できますが、HTML 仕様では、ページのレンダリングを高速化できる Web ページの head タグに CSS スタイル シートを導入することが推奨されています。Yahoo の開発プロセス中に、head タグにスタイル シートを導入すると、Web ページの読み込みが高速化されることがわかりました。これにより、ページが徐々にレンダリングされるためです。 —— ySlow チーム
<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>
5. ページの下部に JavaScript ファイルを導入します
覚えておくべき 1 つの原則は、ページを次のように実行することです。できるだけ早くユーザーに提示します。スクリプトをロードすると、スクリプトが完全にロードされるまでページのロードが一時停止されます。そのため、ユーザーの時間をさらに無駄にすることになります。 JS ファイルに特定の機能 (ボタン クリック イベントなど) のみを実装する必要がある場合は、本文の下部に自由に導入してください。これは間違いなく最良の方法です。例:
<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>
6. 埋め込み JavaScript は使用しないでください。これは 21 世紀です。
何年も前には、JS コードを HTML タグに直接追加する方法がありました。これは、シンプルなフォト アルバムで特によく見られます。本質的には、「 ラベル上では、その効果は一部の JS コードと同等です。あまり議論する必要はありません。この方法は使用しないでください。コードを外部 JS ファイルに転送してから、「」を使用する必要があります。 addEventListener /attachEvent」を使用して時間リスナーを追加します。または、「クロック」メソッドを使用する必要がある jQuery などのフレームワークを使用します。$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});7. 標準化開発中いつでも検証
多くの人は標準検証の意味と価値をよく理解していません。つまり、標準検証は自分のためのものではなく、ブログで詳しく分析しています。 Web ページの作成を始めたばかりの場合は、この8. Firebug をダウンロードする
Firebug は間違いなく Web 開発に最適なプラグインです。 Firebug 公式 Web サイト:注: Firebug 公式 Web サイトは、Firebug の開発、更新、保守の継続を中止し、Firefox の組み込みツール DevTools を使用するようすべての人に呼びかけていると発表しました。 相关推荐：<Firebug Alternatives: 10 Best JavaScript Debugging Tools>(Firebug替代品:10个最好的JavaScript调试工具) 9. 使用 Firefox 内置工具 DevTools！ DevTools下载地址：https://developer.mozilla.org/en-US/docs/Tools 10. 使用小写的标记 理论上讲，你可以像这样随性的书写标记： 最好不要这样写，费力气输入大些字母没有任何用处，并且会让代码很难看，这样子就很好： 11.使用H1-H6标签 笔者建议你在网页中使用其中全部六种标记，虽然大部分人只会用到前四个，但使用最多的H会有很多好处，比如设备友好、搜索引擎友好等，不妨把你的P标签都替换成H6。 12. 如果是博客，那把H1留给文章标题 今天笔者在Twitter上发起一次讨论：是该把H1定义到LOGO上还是定义到文章标题上，有80%的人选择了后者。 当然具体如何使用要看你的需求，但我建议你在建立博客的时候，将文章题目定为H1，这对搜索引擎优化(SEO)是非常有好处的。 13. 下载ySlow 在过去几年里，雅虎的团队在前端开发领域做了许多伟大的工作。前不久，它们发布了一个叫ySlow的Firebug扩展，它会分析你的<网页，并返回
一个“成绩单”，上面细致分析了这个网页的方方面面，提出需要改进的地方，虽然它有点苛刻，但它绝对会对你有所帮助，强烈推荐 ySlow！ 14. 使用UL列表布局导航菜单 通常网站都会有导航菜单，你可以用这样的方式定义： 如果你想书写优美的代码，那最好不要用这种方式， 为什么要用UL布局导航菜单？ ——因为UL生来就是为定义列表准备的 最好这样定义： 15. 学会怎样对付IE IE一直以来都是前端开发人员的噩梦！ 如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效： 这些代码的意思是：如果用户浏览器是IE6及以下，那这段代码才会生效。如果你想把IE7也包含进来，那么就把“[if lt IE 7]”改为“[if lte IE 7]”。 16. 使用一个好的代码编辑器 不论你是Windows还是Mac用户，这里都有很多优秀的编辑器供你选择： 17. 压缩前端代码！ 18. 缩减，缩减，缩减 回望我们大多数人写的第一个页面，一定会发现严重的 “DIV癖”( divitis )，通常初学者的本能就是把一个段落用DIV包起来，然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。 网页写完后，一定要多次回头检查，尽量的减少元素的数量。 能用UL布局的列表就不要用一个个的DIV去布局。 正如写文章的关键是“缩减，缩减，缩减”一样，写页面也要遵循这个标准。 19. 为所有的图片加上Alt属性 为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息，并且对图像搜索引擎友好。 Firefox不支持显示图像Alt属性，可以加入title属性： 20. 学会熬夜 我经常不知不觉的学习工作到凌晨，我认为这是个很好的状况。 我的“啊～哈！”时间（ “AH-HA” moments，指柳暗花明或豁然开朗的时刻）通常都发生在深夜，比如我彻底理解JavaScript的“闭包”概念，就是在这样一种情况下。如果你还没有感受过这种奇妙的时刻，那就马上试试吧！ 21. 查看源代码 アイドルを真似すること以上に HTML を早く学ぶのに役立つものはありません。最初は、私たち全員が喜んでコピー機になる必要があり、その後、ゆっくりと自分たちのスタイルを開発する必要がありました。お気に入りの Web サイトのページのコードを調べて、それらがどのように実装されているかを確認してください。これはマスターにとって唯一の方法です。ぜひ試してみてください。注: 盗用したりコピーしたりするのではなく、コーディング スタイルを学んで模倣するだけです。 インターネット上のさまざまなクールな JavaScript エフェクトに注目してください。プラグインが使用されているようであれば、そのプラグインの head タグ内のファイル名に基づいてプラグインの名前を見つけることができます。ソース コードを参照し、それを自分で使用する方法を学ぶことができます。 22. すべての要素のスタイルを定義する これは、他の企業の Web サイトを作成する場合に特に必要です。あなた自身も blockquote タグを使用しませんか?そうするとユーザーは使うかもしれないけど、OLさん自身は使わないんですか？ユーザーもそうかもしれません。時間をかけて、ul、ol、p、h1-h6、blockquotes などの要素のスタイルを表示するページを作成し、不足しているものがないか確認してください。 23. サードパーティのサービスを使用する 翻訳者注: 英語の原題は「Using Twitter」です。 インターネットで使用できる無料の API を Web ページに追加するこれらのツールは非常に強力です。これは、多くの賢い機能を実装するのに役立ちますが、さらに重要なことに、Web サイトの宣伝に役立ちます。 24. Photoshop を学ぶ Photoshop はフロントエンド エンジニアにとって重要なツールです。すでに HTML と CSS に精通している場合は、さらに詳しく学ぶことをお勧めします。フォトショップ。 Psdtuts には英語のジュエリー チュートリアルがたくさんあります: ビデオ セクション Lynda.com にもたくさんのチュートリアルがありますが、有料です$25 USD Photoshop チュートリアル シリーズはダメです 数時間かけて Photoshop のショートカット キーの操作を学習しましょう 25. すべての HTML タグを学習する 一部の HTML タグはめったに使用されませんが、それでも知っておく必要があります。たとえば、「abbr」や「cite」などは、必要になった場合に備えて学習する必要があります。 26. コミュニティのディスカッションに参加する インターネット上には多くの優れたリソースがあり、コミュニティには多くのマスターが隠れています。勉強するか、経験豊富な開発者にアドバイスを求めてください。 27. CSS リセットを使用する Css リセットは、一部の HTML タグ スタイルまたはデフォルト スタイルをリセットすることです。 CSS Reset を使用するかどうかについては、インターネット上でも激しい議論がありますが、著者は CSS Reset の使用を推奨しています。最初に成熟した CSS Reset を選択し、それを徐々に自分に合った CSS Reset に進化させることができます。 28. 要素を整列させる 簡単に言えば、Web 要素をできる限り整列させる必要があります。お気に入りの Web サイトのロゴ、タイトル、グラフ、段落が非常にきれいであることがわかります。そうしないと、混乱して専門的ではないように見えます。 29. PSD スライスについて HTML、CSS、Photoshop の知識は習得しましたが、PSD を画像に変換する方法を学ぶ必要があります。 Web ページの画像の背景として、以下の 2 つの優れたチュートリアルがあります: 30. フレームワークをむやみに使用しないでください Javascript と CSS の両方に優れたフレームワークが多数ありますが、初心者であれば、焦って使用しないでください。 CSS にまだ習熟していない場合、フレームワークを使用すると知識体系が混乱する可能性があります。 CSS フレームワークは熟練した開発者向けに設計されており、時間を大幅に節約できます。 <DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>
<DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>
<div id="nav">
<a href="#">Home </a>
<a href="#">About </a>
<a href="#">Contact </a>
</div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->
Mac 用户
PC 用户
Javascript 压缩服务
CSS Compression Services
<img src="cornImage.jpg" alt="脚本之家" title="脚本之家" />
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1664
14
1423
52
1320
25
1269
29
1249
24
HTMLの表の境界線
Sep 04, 2024 pm 04:49 PM
HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。
HTML のネストされたテーブル
Sep 04, 2024 pm 04:49 PM
これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。
HTML 左マージン
Sep 04, 2024 pm 04:48 PM
HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。
HTML テーブルのレイアウト
Sep 04, 2024 pm 04:54 PM
HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。
HTML入力プレースホルダー
Sep 04, 2024 pm 04:54 PM
HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
PHPでHTML/XMLを解析および処理するにはどうすればよいですか？
Feb 07, 2025 am 11:57 AM
このチュートリアルでは、PHPを使用してXMLドキュメントを効率的に処理する方法を示しています。 XML（拡張可能なマークアップ言語）は、人間の読みやすさとマシン解析の両方に合わせて設計された多用途のテキストベースのマークアップ言語です。一般的にデータストレージに使用されます
HTML の onclick ボタン
Sep 04, 2024 pm 04:49 PM
HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
