検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML コードの書き方ガイド

HTML コードの書き方ガイド

高洛峰
高洛峰オリジナル
2017-02-24 10:12:311122ブラウズ

一般規約

タグ

自己終了タグ、閉じる必要なし (例: img input br hr など)
オプションの終了タグ (終了タグ)、閉じる必要があります (for例: bed06894275b65c1ab86501b08a632eb または 36cc49f0c466276486e50c850b7e4956); 

<img src="images/google.png" alt="Google">
<input type="text" name="title">

<ul>
  <li>Style</li>
  <li>Guide</li>
</ul>

<!-- Not recommended -->
<span class="avatar">
  <img src="...">
</span>

<!-- Recommended -->
<img class="avatar" src="...">

クラスは式ではなく関数またはコンテンツに基づいて名前を付ける必要があります。 ;

クラスと ID 単語の文字は小文字であり、複数の単語で構成される場合はダッシュ区切りを使用します。一意の ID を Javascript フックとして使用し、スタイル情報のないクラスの作成を避けます。

HTML 属性は、読みやすさを確保するために特定の順序で表示される必要があります。

id
class

name

data-xxx

src, for, type, href

title, altaria-xxx, role

<!-- Not recommended -->
<p class="j-hook left contentWrapper"></p>

<!-- Recommended -->
<p id="j-hook" class="sidebar content-wrapper"></p>


引用符


属性の定義には一律に二重引用符を使用します。 

<a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="...">


b ネスト

a は p のネストを許可しません。この制約には、厳密なネスト制約が含まれます。たとえば、a は a のネストを許可しません。 すべてのブラウザで厳密なネスト制約が許可されるわけではありません。セマンティック ネスト制約については、ほとんどのブラウザがフォールト トレランスを処理し、生成されるドキュメント ツリーは互いに異なる可能性があります。

セマンティックネスト制約

ff6d136ddc5fdfeffaf53ff6ee95f185 で使用される、73de882deff7a050a357292d0a1fca94 b7a81eb0585fc29e7036804019f9c739、06669983c3badb677f993a8c29d18845、a34de1251f0d9fe1e645927f19a896e8、b6c5a531a458a2e790c1fd6421739d1c

厳密なネスト制約

で使用されます。テキストまたはその他のインラインのみを含めることができます。 -レベル要素;

3499910bf9dac5ae3c52d5ede7383485 インタラクティブ要素bb9345e55eb71822850ff156dfde57c8、221f08282418e2996498697df914ce4e など;

e388a4556c0f65e1904146cc1a846bee、4a249f0d628e2318394fd9b75b4636b1

、

、

    /
    /
  1. 、
    /
    /
    、
    など。 ブール属性



    HTML5 仕様では、disabled、checked、selected などの属性に値を設定する必要はありません。 

    <!-- Not recommended -->
<span id=&#39;j-hook&#39; class=text>Google</span>

<!-- Recommended -->
<span id="j-hook" class="text">Google</span>


    セマンティック

    CSS を使用しない HTML は、UI システムではなくセマンティック システムです。

    通常、各タグにはセマンティクスがあり、いわゆるセマンティクスとは、衣服がジャケット、パンツ、スカート、下着などに分類され、それぞれに対応する機能と意味があることを意味します。そのため、下着を首に掛けることはできません。 --

    のヒント さらに、セマンティックな HTML 構造は、機械 (検索エンジン) の理解に役立ちますが、一方で、複数の人が共同作業する場合、開発者の意図をすぐに理解することができます。

    一般的なタグのセマンティクス


     タグ

    セマンティクス


    85f4714244428b190f930ba6a160174c

    スタイルを太字にするために太字にする beafbc2b8a3a352ee5f41c5a0c884975 強調するために太字にする スタイルのため 強調のため斜め 907fae80ddef53131f3292ee4f81644b 強調のため斜め コード コード識別 abbr 略語


    示例

    将你构建的页面当作一本书，将标签的语义对应的其功能和含义；

    书的名称：4a249f0d628e2318394fd9b75b4636b1
    书的每个章节标题: c1a436a314ed609750bd7c7d319db4da
    章节内的文章标题: 684271ed9684bde649abda8831d4d355
    小标题 / 副标题: 3f7b3decd2dcafb07b84d2d3985d9f40 39318b6f72ed39310530dfd69d0078e1 4e9ee319e0fa4abc21ff286eeb145ecc
    章节的段落: e388a4556c0f65e1904146cc1a846bee

    HEAD
    文档类型

    为每个 HTML 页面的第一行添加标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。

    <!DOCTYPE html>
语言属性   

<!-- 中文 -->
<html lang="zh-Hans">

<!-- 简体中文 -->
<html lang="zh-cmn-Hans">

<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">

<!-- English -->
<html lang="en">

    字符编码

    以无 BOM 的 utf-8 编码作为文件格式；
    指定字符编码的 meta 必须是 head 的第一个直接子元素

    <html>
  <head>
    <meta charset="utf-8">
    ......   
  </head>
  <body>
    ......   
  </body>
</html>

    IE 兼容模式

    优先使用最新版本的 IE 和 Chrome 内核。

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    SEO 优化

    
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    Style Guide

    viewport

    viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
    width: 浏览器宽度，输出设备中的页面可见区域宽度；
    device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
    initial-scale: 初始缩放比例；
    maximum-scale: 最大缩放比例；
    为移动端设备优化，设置可见区域的宽度和初始缩放比例。

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    iOS 图标

    apple-touch-icon 图片自动处理成圆角和高光等效果；
    apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图；

    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

<!-- iPad，72x72 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">

<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">

<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">

    favicon

    在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico。为了保证 favicon 可访问，避免 404，必须遵循以下两种方法之一：

    在 Web Server 根目录放置 favicon.ico 文件；
    使用 link 指定 favicon；

    <link rel="shortcut icon" href="path/to/favicon.ico">

    HEAD 模板

    


    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    Style Guide
    
    
    

    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    
    

    
    <link rel="shortcut icon" href="path/to/favicon.ico">

    HTML 注释

    模块注释

    <!-- 文章列表列表模块 -->
<p class="article-list">
...   
</p>
区块注释   
<!--   
@name: Drop Down Menu   
@description: Style of top bar drop down menu.   
@author: Ashu(Aaaaaashu@gmail.com)   
-->

    更多HTML代码书写规范指南相关文章请关注PHP中文网！

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

関連記事

続きを見る