正しいドキュメント タイプを使用してください
ドキュメント タイプの宣言は HTML ドキュメントの最初の行にあります:
<!DOCTYPE html>
他のタグと同様に小文字を使用したい場合は、次のコードを使用できます。
<!doctype html>
要素名には小文字を使用してください
HTML5 の要素名には大文字と小文字を使用できます。
小文字の使用を推奨します:
大文字と小文字の混合スタイルは非常に悪いです。
開発者は通常、小文字を使用します (XHTML と同様)。
小文字のスタイルはより爽やかに見えます。
小文字は書きやすいです。
<section>
<p>これは段落です。 </p>
</section>
すべての HTML 要素を閉じる
HTML5 では、必ずしもすべての要素 (<p> 要素など) を閉じる必要はありませんが、閉じることをお勧めします。すべての要素に終了タグを追加します。
<section>
<p>これは段落です。 </p>
<p>これは段落です。 </p>
</section>
空の HTML 要素を閉じる
HTML5 では、空の HTML 要素を閉じる必要はありません:
次のように記述できます:
<meta charset = "utf-8">
は次のように記述することもできます:
<meta charset="utf-8" />
XHTML および XML ではスラッシュ (/) が必要です。
XML ソフトウェアがページを使用することが予想される場合は、このスタイルを使用するのが最適です。
小文字の属性名を使用する
HTML5 の属性名では、大文字と小文字を使用できます。
属性名には小文字を使用することをお勧めします:
大文字と小文字を同時に使用するのは非常に悪い習慣です。
開発者は通常、小文字を使用します (XHTML と同様)。
小文字のスタイルはより爽やかに見えます。
小文字は書きやすいです。
<div class="menu">
属性値
HTML5の属性値は引用符なしで使用できます。
属性値には引用符を使用することをお勧めします:
属性値にスペースが含まれる場合は、引用符を使用する必要があります。
スタイルを混合することはお勧めできません。スタイルを統一することをお勧めします。
属性値は引用符を使用すると読みやすくなります。
<table class="table Striped">
画像の属性
画像は通常、alt属性を使用します。 画像が表示できない場合、画像表示を代替することができます。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
画像のサイズを定義し、読み込み時に指定されたスペースを確保してちらつきを軽減します。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
スペースと等号
等号の前後にスペースを使用できますサイン。
<link rel = "stylesheet" href = "styles.css">
ただし、スペースは少なくすることをお勧めします:
<link rel="stylesheet" href="styles.css">
長すぎるコード行は避けてください
HTML エディターを使用する場合、コードを左右にスクロールするのは不便です。
コードの各行は 80 文字未満に抑えるようにしてください。
空白行とインデント
理由もなく空白行を追加しないでください。
読みやすくするために、各論理関数ブロックに空白行を追加します。
インデントには 2 つのスペースを使用します。TAB は推奨されません。
短いコードの間に不必要な空白行やインデントを使用しないでください。
<body>
<h1>php 中国語ウェブサイト</h1>
<h2></h2>
<p>php 中国語ウェブサイト、技術だけでなく夢も学べます。
php 中国語のウェブサイト、あなたが学ぶのは技術だけではなく、夢でもあります。
php 中国語のウェブサイト、あなたが学ぶのは技術だけではなく、夢でもあります。
php 中国語のウェブサイト、あなたが学ぶのは技術だけではなく、夢でもあります。 </p>
</body>
フォーム例:
<table>
<tr>
<th>名前</th>
>A</td> ;
<td>Aの説明</td>
</tr>
<tr> ;
<td>B</td>
<td>B の説明</td>
</ tr>
</ol>
省略<html> と <body>
標準の HTML5 では、<html> と <body> タグは省略できます。
次の HTML5 ドキュメントは正しいです:
<!DOCTYPE html>
<head>
<title>ページタイトル</title>
</head>
<h1>これはタイトルです</h1>
<p>これは段落です。 </p>
<html> タグと <body> タグを省略することはお勧めできません。
<head>?
標準の HTML5 では、<head> タグを省略できます。
デフォルトでは、ブラウザはデフォルトの <head> 要素の前にコンテンツを追加します。
head タグの省略はまだ推奨されていません。
メタデータ
HTML5
要素は必須です: </p><p><title>php 中国のウェブサイト</title></p><p>タイトルと言語を指定すると、検索エンジンがページのトピックをすぐに理解できるようになります: </p><p><!DOCTYPE html><br/><html lang="zh"><br/><head><br/> <meta charset="UTF-8" ><br/> <!-- これはコメントです--><br/></p>長いコメントは <!-- と --> の間に別の行に書くことができます: <p><strong><!-- <br/> これは長いコメントです。 これは長いレビューです。これは長いレビューです。 </strong> これは長いレビューです これは長いレビューです。 これは長いレビューです。 </p>---><p style="border: 0px; margin: 2px 0px; padding: 0px; font-size: 1.8em; line-height: 1.8em; color: rgb(51, 51, 51); font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft Yahei", sans-serif; white-space: normal; widows: 1; background-color: rgb(255, 255, 255);"><p>長いコメントの最初の文字はスペース2つでインデントされ、読みやすくなります。 </p><p><strong><br/></strong></p><p style="border: 0px; margin: 2px 0px; padding: 0px; font-size: 1.8em; line-height: 1.8em; color: rgb(51, 51, 51); font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft Yahei", sans-serif; white-space: normal; widows: 1; background-color: rgb(255, 255, 255);">スタイルシート</p><p>スタイルシートは簡潔な構文形式を使用します(type属性は必要ありません):</p><p><link rel="stylesheet" href="styles.css"></p><p>短いルール1 行で記述することができます: </p><p>p.into {font-family: Verdana; font-size: 16em;}</p><p>長いルールは複数行で記述することができます: </p><p>body {<br/> background-color: lightgrey;<br/> font -family: " Arial Black"、Helvetica、sans-serif;<br/> font-size: 16em;<br/> color: black;<br/>}</p><p>左中括弧をセレクターと同じ行に配置します。 </p><p>左中括弧とセレクターの間にスペースを追加します。 </p><p>インデントにはスペースを 2 つ使用します。 </p><p>コロンと属性値の間にスペースを追加します。 </p><p>カンマや記号の後にはスペースを使用してください。 </p><p>各属性と値の末尾に記号を使用します。 </p><p>属性値にスペースが含まれる場合にのみ引用符を使用します。 </p><p>右中括弧を新しい行に置きます。 </p><p>1 行あたり最大 80 文字。 </p><p><br/></p><p><br/></p><p> 一般的なルールは、カンマとセミコロンの後にスペースを追加することです。 </p><p><br/></p><p><strong><br/></strong></p><p style="border: 0px; margin: 2px 0px; padding: 0px; font-size: 1.8em; line-height: 1.8em; color: rgb(51, 51, 51); font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft Yahei", sans-serif; white-space: normal; widows: 1; background-color: rgb(255, 255, 255);">HTMLでJavaScriptをロードします</p><p>外部スクリプトファイルをロードするには簡潔な構文を使用します(type属性は必要ありません):</p><p><script src="myscript.js"> ;</p><p><strong><br/> </strong></p><p style="border: 0px; margin: 2px 0px; padding: 0px; font-size: 1.8em; line-height: 1.8em; color: rgb(51, 51, 51); font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft Yahei", sans-serif; white-space: normal; widows: 1; background-color: rgb(255, 255, 255);">JavaScript を使用して HTML 要素にアクセスする</p><p> HTML の形式が不適切であると、JavaScript 実行エラーが発生する可能性があります。 </p><p>次の 2 つの JavaScript ステートメントは、異なる結果を出力します:</p><p>例</p><p>var obj = getElementById("Demo")<br/><br/>var obj = getElementById("demo")</p><p><br/>試してみる »</p><p> で JavaScript を使用してみるHTML 同じ命名規則。 </p><p><br/></p><p style="border: 0px; margin: 2px 0px; padding: 0px; font-size: 1.8em; line-height: 1.8em; color: rgb(51, 51, 51); font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft Yahei", sans-serif; white-space: normal; widows: 1; background-color: rgb(255, 255, 255);">ファイル名は小文字を使用してください</p><p>ほとんどの Web サーバー (Apache、Unix) では大文字と小文字が区別されます。London.jpg を介して london.jpg にアクセスすることはできません。 </p><p>他の Web サーバー (Microsoft、IIS) は大文字と小文字を区別しません。london.jpg には、London.jpg または london.jpg 経由でアクセスできます。 </p><p>一貫したスタイルを維持する必要があり、小文字のファイル名を一律に使用することをお勧めします。 </p><p><strong><br/></strong></p><p><br/></p><p style="border: 0px; margin: 2px 0px; padding: 0px; font-size: 1.8em; line-height: 1.8em; color: rgb(51, 51, 51); font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft Yahei", sans-serif; white-space: normal; widows: 1; background-color: rgb(255, 255, 255);">ファイル拡張子</p><p>HTMLファイルの拡張子は.html (またはr .htm)です。 </p><p>CSS ファイルの拡張子は .css です。 </p><p>JavaScript ファイルの拡張子は .js です。 </p><p><strong><br/></strong></p><p style="border: 0px; margin: 2px 0px; padding: 0px; font-size: 1.8em; line-height: 1.8em; color: rgb(51, 51, 51); font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft Yahei", sans-serif; white-space: normal; widows: 1; background-color: rgb(255, 255, 255);"> .htm と .html の違い </p><p> .htm と .html の拡張子ファイルには本質的に違いはありません。ブラウザーと Web サーバーは両方とも、これらを HTML ファイルとして扱います。 </p><p>の違いは次のとおりです: </p><p>.htm は初期の DOS システムで使用されており、現在システムには 3 文字しかありません。 </p><p> Unix システムのサフィックスには特別な制限はなく、一般に .html が使用されます。 </p><p style="border: 0px; margin: 2px 0px; padding: 0px; font-size: 1.8em; line-height: 1.8em; color: rgb(51, 51, 51); font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft Yahei", sans-serif; white-space: normal; widows: 1; background-color: rgb(255, 255, 255);">技術的な違い</p><p> URL でファイル名が指定されていない場合 (http://www.php.cn/css/ など)、サーバーはデフォルトのファイル名を返します。通常、デフォルトのファイル名は、index.html、index.htm、default.html、default.htm です。 </p><p>サーバーがデフォルトのファイルとして「index.html」のみを使用して構成されている場合は、ファイルに「index.htm」ではなく「index.html」という名前を付ける必要があります。 </p><p>ただし、通常、サーバーは複数のデフォルトファイルを設定できますが、必要に応じてデフォルトファイルを設定できますか。 </p><p><strong>とにかく、HTMLの完全な接尾辞は「.html」です。 </strong></p><p><strong><br/></strong><br/></p></div></div></div></div><div id="js-editor-container" class="cwrap-autoheight editor-container"><div id="js-editor-drag-wrap" class="editor-drag-wrap"><div id="js-editor-drager" class="editor-drager" unselectable="on"
style="-webkit-user-select: none; display: none;"><span>||</span></div></div><div class="editor-box" id="J_EditorTabs"><div class="editor-tab js-editor-tab"><div class="editor-left icon-left editor-op"></div><div class="editor-view"><ul class="clearfix" id="J_TabType" style="width: 120px; margin-left: 0px;"><li class="ui-tabs-active"><a href="#editor-tabs-html">新しいファイル</a></li></ul></div><div class="editor-right icon-right editor-op"></div></div><div class="tab-con editor-item ace_editor ace-tomorrow-night ace_dark"
id="editor-tabs-html" data-filename="index.html" data-lang="php" style="font-size: 16px;"><!DOCTYPE html> <!-- HTML5 doctype 标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现-->
<html lang="zh-CN"> <!-- 语言属性 有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等 -->
<head>
<!-- 字符编码 通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式 -->
<meta charset="UTF-8">
<!-- IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。
除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Page title</title>
<!-- External CSS 根据 HTML5 规范，在引入 CSS 文件时一般不需要指定 type 属性，因为 text/css 是它的默认值 -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript 根据 HTML5 规范，在引入 JavaScript 文件时一般不需要指定 type 属性，因为 text/javascript 是它的默认值 -->
<script src="code-guide.js"></script>
</head>
<body>
<!-- 属性顺序 HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位 -->
<a class="..." id="..." data-modal="toggle" href="#">
Example link
</a>
<br><br>
<input class="form-control" type="text">
<br><br>
<img src="..." alt="...">
<br><br>
<!-- 布尔（boolean）型属性 不用赋值 元素的布尔型属性如果有值，就是 true，如果没有值，就是 false -->
<select>
<option value="1" selected>1</option>
</select>
<br><br>
<!-- JavaScript 放在 body 底部加载可增快页面渲染速度 -->
<script src="code-guide.js"></script>
</body>
</html></div></div><div class="editor-btn"><div class="editor-btn-inner"><a href="javascript:;" class="code-btn-submit r" id="J_Commit" title="提出する">提出する</a><a href="javascript:;" class="code-btn-reset " id="J_EditorReset" title="リセットコード">リセットコード</a><div class="r aotorun" style="display: block;"><input type="checkbox" id="aotoruncheck" class="l" title="選択すると、コードの変更が自動的に有効になります。チェックを外した場合、有効にするために送信が必要です"><label for="aotoruncheck" class="l" title="選択すると、コードの変更が自動的に有効になります。チェックを外した場合、有効にするために送信が必要です">自動運転</label></div></div></div><div class="editor-commit hide" id="J_EditorCommit"></div></div><div id="js-result-container" class="cwrap-autoheight result-container" style="width:400px;"><div id="js-result-drag-wrap" class="result-drag-wrap"><div id="js-result-drager" class="result-drager" unselectable="on"
style="-webkit-user-select: none; display: none;"><span>||</span></div></div><div class="result-wrap"><div id="viewPort-content"></div></div></div><div id="viewPort-header" class="result-triggers"><a href="javascript:;" id="js-toggle-width" class="result-toggle result-toggle-width"
style="visibility: hidden;"><i></i><span>全画面表示</span></a><a href="javascript:;" id="js-toggle-vsb" class="result-toggle result-toggle-vsb"
style="display:none;"><i></i><span>実行結果</span></a></div></div></div><div class='learn-menu bto'><span data-i="2">章</span><span data-i="4">コースウェア</span></div><div class='course-section layui-clear p-10 mb-30' style="display: none;"><dl><dt>章1HTML5 チュートリアルの概要</dt><dd><a href='https://m.php.cn/ja/code/760.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/769.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5ブラウザのサポート<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/771.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5 の新しい要素<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/777.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5キャンバス<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/783.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5 インライン SVG<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/787.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5 MathML (数学的マークアップ)<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/792.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5 ドラッグ アンド ドロップ<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/794.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5 地理位置情報<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/799.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5ビデオ(ビデオ)<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/808.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5オーディオ(音声)<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/813.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5 の新しい入力タイプ<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/821.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5の新しいフォーム要素<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/826.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5の新しいフォーム属性<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/832.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5 セマンティック要素<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/837.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5ウェブストレージ<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/845.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5 Web SQLデータベース<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/849.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5 アプリケーションのキャッシュ<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/851.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5 Web ワーカー<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/855.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5 サーバー送信イベント<i
class='layui-icon layui-icon-play f-right'></i></a></dd><dd><a href='https://m.php.cn/ja/code/861.html'><i class='layui-icon layui-icon-triangle-r f-left mr-10'></i>HTML5コーディング標準<img src='/static/images/ico/bofang.png'
style='float: right; margin-top: 7px;'></a></dd></dl></div><ul class="lesson_download bg-white discuss"><div class="no_data"><div></div>なし</div></ul><div class='layui-clear mt-50'></div><script src="/static/src-min-noconflict/ace.js"></script><script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script><script>isLogin = 0;</script><script type="text/javascript" src="/static/js/jquery.min.js"></script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.4.8"></script><script>
(function () {
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
} else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?43f47cabf6856204df6d083dd89ae407";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script></body></html>