検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >効率的なHTML_html/css_WEB-ITnoseの書き方

効率的なHTML_html/css_WEB-ITnoseの書き方

WBOY
WBOYオリジナル
2016-06-24 11:46:091150ブラウズ

効率的な​​HTMLの書き方

個人翻訳、転載大歓迎！
英語の原文: https://samdutton.wordpress.com/2015/04/02/high-performance-html/
海外のブログ投稿を翻訳するのは初めてです。コメントや提案は大歓迎です。

どうすれば Web ページのパフォーマンスを向上させることができますか?

この質問を見たとき、ほとんどの開発者は画像の最適化、JavaScript の最適化、サーバー構成のアップグレード、ファイル圧縮、さらには CSS 圧縮を思い浮かべるでしょう。しかし、Web ページの中核言語である HTML は無視されてきました。

現在、HTML の負担はますます重くなっており、世界のトップ 100 の Web サイトの各ページの HTML コードの平均サイズは約 40k で、そのうち Amazon と Yahoo の HTML コードは平均数千行です。 Youtube ホーム ページには 3500 の HTML 要素もあります。ページごとの HTML の複雑さを軽減し、要素の数を減らしても、ページの読み込み時間は大幅に改善されませんが、適切な HTML コーディングの習慣は、Web ページの読み込み速度を向上させるための重要な基盤です。私がこの記事を書いた理由は、多くのデバイスで Web ページをすばやく読み込んで正常に実行できるように、クリーンで整然とした HTML コードを記述する方法を説明することです。その過程で、保守とデバッグが簡単な Web サイトとアプリを構築する方法を学ぶことができます。

コード、特に HTML を記述する方法はたくさんあります。この記事は、私たちの経験に基づいて比較的最適な提案を行っているだけであり、すべての提案がどのような状況でも効果を達成できることを意味するものではありません。

はじめに

    全員が自分の義務を果たします。CSS でスタイルを制御するだけで十分です。希望のスタイルを強制的に取得するために HTML 要素を使用しないでください。
    • 細心の注意: 開発プロセス中に必ずコード検証ツールを追加してください。コードに文法的および論理的なエラーがないことを確認します。
    • 整理整頓: コードの構造と形式の一貫性を維持するために自動組版ツールを使用します。
    • 言語に堪能であること: すべての要素の使用法を理解している必要があります。 HTML 要素でより多くのセマンティクスを使用します。
    • 全員を平等に扱います。バックアップ計画は重要であり、Web サイトが確実に機能するように、特別なグループに対してのみ ARIA (Accessible Rich Internet Application) を使用する必要があります。スクリーン リーダーまたはプレーン テキストでアクセスして表示できます。
    • 包括的なテスト: さまざまなツールを使用して、さまざまなデバイスや画面サイズで Web サイトのパフォーマンスをテストします。
ウェブの三人の友人

HTML の意味についてはあまり説明する必要はありません。百度百科を使用してください。

最初に言いたいのは、HTML と CSS の 2 つの兄弟は互いに情熱を持っていますが、その関係を複雑にしすぎてはいけないということです。HTML 要素を使用してスタイルを強制的に取得しないでください。テキストを大きくするためだけに 4a249f0d628e2318394fd9b75b4636b1、c1a436a314ed609750bd7c7d319db4da、684271ed9684bde649abda8831d4d355 のタイトル タグを使用しないでください。また、テキストをインデントするためだけに b8a712a75cab9a5aded02f74998372b4 タグを使用しないでください。
Chrome、Firefox、Internet Explorer、Opera にはそれぞれ独自のデフォルト スタイル シートがあり、HTML 要素のデフォルトの表示モードはこれらのデフォルト スタイル シートによって決まります。たとえば、Chrome の 4a249f0d628e2318394fd9b75b4636b1 のデフォルトのスタイルは 32 ピクセルの太字で、フォントは Times です。

友達の 3 つの原則:

HTML は構造の確立に使用され、CSS はスタイルのレンダリングに使用され、JavaScript は動作を制御するために使用されます
  • まず HTML の設計を完了し、次にスタイルの要件に従って CSS を設計し、最後に本当に必要な場合に JavaScript を設計します
  • CSS ファイルと JavaScript ファイルを HTML ファイルとは別にアーカイブします (これはページのキャッシュに役立つだけでなく、必要に応じて、CSS と JavaScript を HTML にリンクして、CSS と JavaScript コードを圧縮および暗号化することもできます。
    • 構造の構築

    HTML の構造を構築するときは次の点に注意する必要があります:

    HTML5 標準を採用する場合は、次のように先頭に 8b05045a5be5764f313ed5b9168a17e6 を追加する必要があります: 
  • <!DOCTYPE html><html>    <head>         <title>Recipes: pesto</title>    </head>    <body>          <h1>Pesto</h1>          <p>Pesto is good!</p>    </body></html>

    • CSS は、ブラウザが HTML を出力する前に CSS 情報を取得できるように、head タグ ファイルに導入する必要があります。 
  • <head>    <title>My pesto recipe</title>    <link rel="/css/global.css">    <link rel="css/local.css"></head>

    • 6c04bd5ca3fcae76e30b72ad730ca86d タグの最後に JavaScript ファイルを導入します。ページの表示後にコンパイルして、ページの読み取りを高速化することもできます。次のように、JavaScript がページ上の要素を操作するのにも役立ちます。 
  • <body>      ...      <script src="/js/global.js">      <script src="js/local.js"></body>

    • 要素の操作は、HTML ではなく JavaScript コードに追加する必要があります。それは間違っており、後で維持するのが困難になります。
    • 比如这样写就不太好：
      index.html 
    <head>    ...     <script src="js/local.js"></head><body onload="init()">    ...     <button onclick="handleFoo()">Foo</button>    ...</body>
    • 这样写就好多了：
      index.html 
    <head>    ...</head><body>     ...    <button id="foo">Foo</button>    ...     <script src="js/local.js"></body>
    ***js/local.js***
    javascriptinit(); var fooButton =  document.querySelector('#foo');fooButton.onclick = handleFoo();

    • 代码校验

    虽然现在浏览器的容错力越来越高，但这不能成为代码粗制滥造的借口。不管什么时候，正确的HTML代码都更易于debug、体积更小、运行更快、渲染时消耗资源更少，而错误的HTML代码只会使页面的最终设计难以实现想要的效果。特别是在使用模板来开发时，正确有效的HTML就更显得尤为重要，也许一个正常运行的模块会在其他环境中出现可怕的异常。
    如何才能提高HTML的正确性呢？可以有这些方式：

  • 在项目中加入校验过程：可以在代码编辑器中使用HTMLHint、SublimeLinter这类代码校验插件，也可以在build的时候使用HTMLHint with Grunt这类校验工具，还可以通过W3C HTML validator等网站来在线检测代码；
  • 尽量采用HTML5标准；

  • 确保正确的HTML层级：嵌套元素时确保元素首尾完整，在一个有大量内容的元素的结束标签后应添加注释，这样有助于后期debug，特别是在使用模板的时候，如下所示：

    <div id="foobar">    ...</div> <!-- foobar ends -->

  • 在所有不能自动结束的元素末尾添加结束标签；

    • 比如这个例子，这样写也可以可以正常运行：
    <p>Pesto is good to eat...<p>...and pesto is easy to make.
    • 不过还是下面这样比较不容易出错：
    <p>Pesto is good to eat...</p><p>...and pesto is easy to make.</p>

  • bed06894275b65c1ab86501b08a632eb结束标签不是必须的，所以有些人认为可以不写bed06894275b65c1ab86501b08a632eb，这可以接受，但是929d1f5ca49e04fdcb27f9465b944689和f6f112ef45f603be226bc581f9dd5e90标签一定要加：

    <ul>      <li>Basil      <li>Pine nuts      <li>Garlic</ul>

  • 39000f942b2545a5315c57fa3276f220和b97864c2e0ef2353a16c4d64c7734e92元素必须要有结束标签：

    <!-- 这样写不好 --><video src="foo.webm" /><!-- 还是这样写吧 --><video src="foo.webm">      <p>Video element not supported.</p></video>

    • 另一方面，要去掉冗余代码：

  • 像a1f02c36ba31691bcfe87b2722de723b和2cdf5bf648cf2f33323966d7f58a7f3f这一类元素可以不加结束标签;

  • 布尔型的属性可以不赋值，只要该属性出现，值就为true；

    • 下面这样是可以运行的（没有加autoplay和controls）：
    <video src="foo.webm">
    • 这样就不能运行，因为这两个属性值必须是true：
    <video src="foo.webm" autoplay="false" controls="false">
    • 这样改一下就可以运行了：
    <video src="foo.webm" autoplay="true" controls="true">
    • 这样写会更易读：
    <video src="foo.webm" autoplay controls>
  • CSS和 JavaScript链接不需要type属性，他们就是他们；

  • 外部链接可以省略协议部分（如http,ftp），这样可以避免内容太长而引起问题。像这样写是可以的：

    <a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>

    • 良好的代码排版

    保持一致的代码排版可以使HTML代码更易于理解、优化和debug，要做到良好的代码排版应注意以下这几点：

  • 在项目中保持统一的HTML代码风格；
  • 使用代码编辑器来帮助你自动排版，比如在Sublime Text中可以使用自带的Reindent，也可以找一些自动排版插件来帮助你。同样也可以使用一些在线工具比如CSS Beautifier和JS Beautifier；
  • 在HTML中用缩进来分层更易于阅读，如果代码编辑器没有自动缩进功能的话可以自行修改相应的设置。当你发现你的HTML层级过深的时候，那就表示你需要重构一下你的HTML了；
  • 缩进可以通过空格或者Tab来实现，但一定不要两者同时使用；

  • 用更直接易读的方式写HTML代码，比如这句话，就可以很明显的看出这是个标题：

    <h2><a href="/contact">Contact</a><h2>

    这样写的话就更像是一个链接：

    <a href="/contact"><h2>Contact</h2></a>
  • 元素要按常规放置，比如footer元素最好是放在HTML页面的底部，虽然理论上把它放在任何地方都可以正常运行；
  • 统一所有引号的使用规则，不要这里用双引号，那里又单引号；

  • 使用小写字母来写标签和属性，大写字母很不易读，像这样：

    <A HREF="/">Home</A>

    混合式的写法简直就是反人类：

    <H2>Pesto</h2>

    • 语义化设计

    语义化的意思是从名称一眼就能看出其内容和作用是什么，HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化的。HTML5又引进了一些新的语义化元素，比如1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d和c787b9a589a3ece771e842a6176cf8e9。
    为了是你的代码更易理解，一定要针对内容使用相应的语义化元素：

  • 标题使用4a249f0d628e2318394fd9b75b4636b1 (c1a436a314ed609750bd7c7d319db4da, 684271ed9684bde649abda8831d4d355…)，列表使用ff6d136ddc5fdfeffaf53ff6ee95f185或者c34106e0b4e09414b63b2ea253ff83d6；
  • 23c3de37f2f9ebcb477c4a90aac6fffd内容中的标题应该从4a249f0d628e2318394fd9b75b4636b1开始；
  • 在适当的地方使用HTML5的新元素，比如1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d, c787b9a589a3ece771e842a6176cf8e9和15221ee8cba27fc1d7a26c47a001eb9b；
  • 正文中的文本内容要用e388a4556c0f65e1904146cc1a846bee标签，内容的结构化可以使用HTML5的新元素（或者dc6dce4a544fdca2df29d5ac0ea9906b），不要颠倒；
  • 修改文字样式时，907fae80ddef53131f3292ee4f81644b和8e99a69fbe029cd4e2b854e244eab143要比5a8028ccc7a7e27417bff9f05adf5932和a4b561c25d9afb9ac8dc4d70affff419更好些，因为前者语义更加明显；
  • ff9c23ada1bcecdd1a0fb5d5a0f18437中要包含2e1cf0710519d5598b1f0f14c36ba674元素，input元素要有type、placeholder以及其他必要的属性，即使值为空都可以；

  • 不要把文字和元素混合在一起，这样容易导致布局出错，比如这样：

    <div>    Name:     <input type="text"></div>

    这样写会更好些：

    <div>    <label>Name:</label>    <input type="text"></div>

    • 布局

    首先再次强调一遍：

    样式由CSS来控制就够了，不要用HTML元素来强行获取想要的样式。

    布局需要注意的问题有这些：

  • e388a4556c0f65e1904146cc1a846bee元素用来放文字，而不是用来布局。在浏览器自身的样式表中默认e388a4556c0f65e1904146cc1a846bee有margin和其他样式；
  • 想实现换行可以使用11606cc87d8fd89bcb19e3fd11c7bb4b元素或者CSS的display属性，尽量避免使用0c6dc11e160d3b678d68754cc175188a来换行。文字内容中的换行可以用0c6dc11e160d3b678d68754cc175188a，但通常也很少这样用，有时在诗文中会把0c6dc11e160d3b678d68754cc175188a作为标点来使用；
  • 避免使用f32b48428a809b51f04d3228cdf461fa，因为这个元素对语义和结构都没有太大帮助，反而f32b48428a809b51f04d3228cdf461fa极差的灵活性对布局和显示都有很大的影响；
  • 不要滥用dc6dce4a544fdca2df29d5ac0ea9906b，W3C对dc6dce4a544fdca2df29d5ac0ea9906b的描述是这样的：当没有其他元素可用时才能使用dc6dce4a544fdca2df29d5ac0ea9906b。如果想让2cdf5bf648cf2f33323966d7f58a7f3f和a1f02c36ba31691bcfe87b2722de723b这类元素能够在结尾换行，可以在样式中添加display: block，这样要比把它们放进dc6dce4a544fdca2df29d5ac0ea9906b或者使用0c6dc11e160d3b678d68754cc175188a来换行要好得多;
  • 必须知道哪些是块级元素，这样就可以避免把块级元素放到dc6dce4a544fdca2df29d5ac0ea9906b里面，比如列表就不需要放到div里面；
  • f5d188ed2c074f8b944552db028f98a1是用来放表格数据的，不是用来布局的；
  • Flex box现在越来越流行，学一学没有坏处；
  • 盒模型一定要掌握，必须知道什么时候该用padding，什么时候该用margin；
  • 使用margin的规则：通常情况下，margin都是添加在元素的bottom和right，有时也可以是top或者left。无论如何，尽量避免同时在bottom和top，或者right和left添加margin。可以用last-of-type选择器来去掉最后一个子元素的margin。

    • CSS方面

    这篇文章虽然是讲HTML的，但也有些CSS的注意事项想说一说：

  • 不要将多句CSS写在同一行；
  • 不要重复使用同一个id；

  • 有时候给父元素添加class要比给子元素添加更简洁易维护（class的命名方式可以采用BEM规则），像这样：

    <!-- 这样看着好累>o< --> <ul>      <li class="ingredient">Basil</li>      <li class="ingredient">Pine nuts</li>      <li class="ingredient">Garlic</li> </ul> <!-- 看起来舒服多了^v^ --> <ul class="ingredients">      <li>Basil</li>      <li>Pine nuts</li>      <li>Garlic</li> </ul>

    • 易用性

    要多为用户考虑，不同的设备条件、使用环境以及输入法等都会给你的HTML带来不同的体验：

  • 尽可能的使用语义化元素；
  • 要准备好备用内容：比如给9bf7cbf2c39baa37076a22499de2f6ed元素添加说明和副标题，给39000f942b2545a5315c57fa3276f220和b97864c2e0ef2353a16c4d64c7734e92元素添加备用的文字或者图片，视频内容配上相应的截图或海报，每张图片都要加alt属性（如果图片只是用来装饰页面的话可以给alt赋空值）;
  • 链接要加title属性，title必须要有意义，不要只是链接的复述；
  • 在d5fd7aea971a85678ba271703566ebfd元素中要加入type和placeholder；
  • 设计时要尽量加入ARIA (Accessible Rich Internet Application)。

    • 其他建议

  • 符号的转义，比如0725adfcec0f6eeff1a2a038a9ca5204HTML & JavaScript6e916e0f7d1e588d4f442bf645aedb2f；
  • 有些符号不需要转义，比如破折号（如：4-5 weeks）还有货币符号（如：¢,?）；
  • 在代码中作用不明显的地方适当的添加注释（注释在重构时的作用性举足轻重，优秀的HTML代码，无论多么复杂都可以很好的阅读和理解）；

  • 有时全大写的标题会起到吸引注意力的作用，但没必要在HTML中真的输入大写的文字，可以在CSS中通过修改text-transform和font-variant来完成。这样做还有个好处，就是当用户复制这段文字时，他们可能不想要全大写的，像下面的3f7b3decd2dcafb07b84d2d3985d9f40，当用户复制文字内容时，得到的是大小写混合的文字：
    HTML

    <h4>W3C Web Accessibility Initiative ARIA guidance</h4>

    CSS

    h4 {    font-variant: small-caps;}

    • 测试

    重中之重，就是一定要做测试！
    在工作流程、调试工具和部署过程中都可以加入HTML测试。一定要测试你的页面在不同条件的设备，不同大小的屏幕以及不同网速的环境下的读取情况。还要使用纯文字浏览器（如： Lynx）或者屏幕阅读器（如：ChromeVox）来测试页面在特殊环境下的交互性。可以使用Chrome Dev Tools device mode这种仿真器来监视页面的变化。工作流程中可以加入Page Speed, Web Page Test等工具来做自动化测试。

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

    関連記事

    続きを見る