HTML コードを書くための 30 のヒント-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML コードを書くための 30 のヒント

PHPz

May 16, 2016 pm 04:42 PM

htmlコードの作成

HTML コードを書くための 30 のヒント

1. HTML タグ

を必ず閉じてください。前のページのソースコードでは、次のようなステートメントがよく見られました。

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

以前は、このような非終了 HTML タグを許容できたかもしれませんが、今日の基準によれば、これは非常に望ましくなく、100% 回避する必要があります。 HTML タグは必ず閉じてください。閉じないと検証が失敗し、予期しない問題が発生する可能性があります。

次の形式を使用するのが最善です:

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

2. 正しい文書タイプ (DocType) を宣言します

作成者は多くの文書を追加しました。 CSS フォーラムでは、ユーザーが問題に遭遇した場合、最初に次の 2 つのことを行うようアドバイスします。

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

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

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 などのフレームワークを使用します。

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

7. 標準化開発中いつでも検証

多くの人は標準検証の意味と価値をよく理解していません。つまり、標準検証は自分のためのものではなく、ブログで詳しく分析しています。

Web ページの作成を始めたばかりの場合は、この

Web 開発ツールバーをダウンロードして「HTML 標準」を使用することを強くお勧めします。「コーディングプロセス中にいつでも。検証」と「CSS 標準検証」を参照してください。CSS が非常に簡単に学習できる言語であると考えている場合、コードが甘いとページが抜け穴や問題でいっぱいになってしまいます。

8. Firebug をダウンロードする

Firebug は間違いなく Web 開発に最適なプラグインです。

Firebug 公式 Web サイト:

https://getfirebug.com/

注: 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. 使用小写的标记

理论上讲，你可以像这样随性的书写标记：

<DIV>
<P>Here&#39;s an interesting fact about corn. </P>
</DIV>

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

<DIV>
<P>Here&#39;s an interesting fact about corn. </P>
</DIV>

11.使用H1-H6标签

笔者建议你在网页中使用其中全部六种标记，虽然大部分人只会用到前四个，但使用最多的H会有很多好处，比如设备友好、搜索引擎友好等，不妨把你的P标签都替换成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. 使用一个好的代码编辑器

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

Mac 用户

Coda
Espresso
TextMate
Aptana
DreamWeaver CS4

PC 用户

InType
E-Text Editor
Notepad++
Aptana
Dreamweaver CS4

17. 压缩前端代码！

Javascript 压缩服务

Javascript Compressor
JS Compressor

CSS Compression Services

CSS Optimiser
CSS Compressor
Clean CSS

18. 缩减，缩减，缩减

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

网页写完后，一定要多次回头检查，尽量的减少元素的数量。

能用UL布局的列表就不要用一个个的DIV去布局。

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

19. 为所有的图片加上Alt属性

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

Firefox不支持显示图像Alt属性，可以加入title属性：

<img src="/static/imghwm/default1.png"  data-src="cornImage.jpg"  class="lazy"   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 つの優れたチュートリアルがあります:

PSD をスライスしてダイスする
PSD から HTML/CSS へ

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

Javascript と CSS の両方に優れたフレームワークが多数ありますが、初心者であれば、焦って使用しないでください。 CSS にまだ習熟していない場合、フレームワークを使用すると知識体系が混乱する可能性があります。

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言，而CSS是一种用来表现HTML或XML等文件样式的样式设计语言；html和css不具备很强的逻辑性和流程控制功能，缺乏灵活性，且html和css不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式，希望对大家有所帮助！

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html中document是什么Jun 17, 2022 pm 04:18 PM

在html中，document是文档对象的意思，代表浏览器窗口的文档；document对象是window对象的子对象，所以可通过“window.document”属性对其进行访问，每个载入浏览器的HTML文档都会成为Document对象。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。