HTMLのWeb標準とセマンティック

Baiduの百科事典:WEB標準は標準ではなく、標準のコレクションではありません。構造(構造)、パフォーマンス(プレゼンテーション)と行動(行動):メインページは、3つの部分から構成されています。その上で、XHTMLやXMLなどの標準語の構造、CSSなどの性能基準言語(例えば、W3C DOMなど)のオブジェクトモデルを含む行動規範、ECMAScriptのと:対応する標準は、3つの領域に分割することができます。(言語略称:W3C)これらの規格のほとんどが起草し、ワールドワイドウェブコンソーシアムによって解放、他のいくつかの標準化団体は、このようなのECMAScript標準のECMA(欧州電子計算機工業会)などの規格を開発するためにあります。

  • Web標準
    • 構造化された標準言語:XHTMLおよびXML
    • パフォーマンス基準言語:CSS
    • 、ECMAScriptの(例えばW3C DOMなど)オブジェクトモデル:行動基準

Web標準の役割:の開発と保守が容易

コードの標準

タグはペアで来ます

不正な言葉遣い

<p>这一段文本
<ul>
	<li>item
</ul>
复制代码

法的文言

<p>这一段文本</p>
<ul>
	<li>item</li>
</ul>
复制代码

それだけではラベル上にない場合は、最後のタグを追加します/例えば:

天生我才必有用 <br/>
千金散尽还复来
<img src="images/moon.png" alt="moon" title="古诗配图"/>
复制代码

小文字の要素:HTMLとは異なり、XHTMLは、大文字と小文字が区別され、<title>かつ<TITLE>異なるラベルです。XHTMLは、すべてのタグを必要とし、名前は小文字でなければならない属性。たとえば:<BODY>あなたは記述する必要があります<body>封入ケースが認識されません

適切にネストされた:XHTMLと同じので、すべてのための違法文言にネストされている必要があり、厳格な構造が必要

<p><b>这是一段文本</p></b>
复制代码

法的文言

<p><b>这是一段文本</b></p>
复制代码

属性値は引用符を必要とします

HTMLでは、あなたは引用符で属性値をする必要はないかもしれませんが、XHTMLで、違法な文言を引用符で囲む必要があります

<img src=images/picture.png />
复制代码

法的文言

<img src="images/picture.png" />
复制代码

すべてのプロパティの割り当て

XHTMLが値を持たなければならないすべての属性を必要とし、何の価値は、それ自体を繰り返してないだろう

不正な言葉遣い

<td nowrap>data<td>
<input type="checkbox" checked>
复制代码

法的文言

<td nowrap="nwrap">data<td>
<input type="checkbox" checked="checked">
复制代码

非再利用可能なIDセレクタと

正しいタブ順序

JavaScriptの言葉遣い

不正な言葉遣い

<script language="javascript"></script>
复制代码

正しい言葉遣い

<script type="text/javascript"></script>
<script language="javascript" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
复制代码

テキスト画像タグのALTを追加=「説明」違法な言葉遣い

<img src="bg.gif" height="50" border="0" />
复制代码

リーガルライティング

<img src="bg.gif" height="50" border="0" alt="说明文字" />
复制代码

背景音楽が許可されていません<bgsound>

フレームラベルを使用しないでください<iframe>

テキストを含めることはできません注意事項--シンボルを

CSSスタイルシートの適切な使用

<link>または<style>配置する必要があります<head></head>

符号化表現シンボルの非ラベル部分は、符号を含む記号は前記フォームマスト

<するに&lt;表現する>ために&gt;表す&ために&amp;表します

セマンティックHTML

ブラウザベースの構造化コンテンツ(意味内容)ながら、うまく解決し、よりエレガントな爬虫類や機械を読み書きする開発者のための適切なタグ(コードの意味)を選択するように。

意味役割をHTML:

  • また、優れたプレゼンテーション時にノーページ構造のCSSスタイル
  • ユーザーエクスペリエンスを向上させます
  • 検索エンジン最適化(SEO)を助長します
  • その他の便利な分析装置(モバイル機器、ブラインドリーダー、スクリーンリーダー)
  • より、読みやすい簡単なウェブページのソースコードを開発し、維持するために

セマンティックタグ

一般的な意味ラベルは:

<header></header>

<nav></nav>

<section></section>

<main></main>

<artical></artical>

<aside></aside>

<footer></footer>

例えば:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>#title</title>
</head>
<body>
<header>
	<nav>头部导航栏</nav>
</header>
<main>
	<aside>侧边栏</aside>
	<section>
		<article>主要部分的文章</article>
	</section>
</main>
<footer>页脚</footer>
</body>
</html>
复制代码

ます。https://juejin.im/post/5cf9cfa06fb9a07ecc447694で再現

おすすめ

転載: blog.csdn.net/weixin_34062469/article/details/91465541