「HTML5 決定版ガイド」_html/css_WEB-ITnose

アダム・フリーマン、謝庭生、牛華城、劉美英、翻訳、人民郵政出版社。全部で34章あります。

散りばめシリーズもございます！遊ぶことも態度です。

---

第 1-20 章: 1. data で始まるカスタム属性は、HTML の将来のバージョンで追加される可能性のある属性名との競合を避けるために使用されます。 2. XHTML は、HTML のシリアル化された形式であり、XML 解析プログラムによる処理のために、コンテンツ、HTML 要素および属性を XML 仕様で表現します。 3. HEAD タグ内の要素は、タイトルなどのメタデータに属します。 4. accesskey="n" の場合、ウィンドウ システムで ALT+n を押して要素にフォーカスを移動します。 5. Tabindex 属性、使用法 tabindex="-1/1/2/3"。ユーザーが TAB キーを押すと、フォーカスは 1 から 2、3 に移動します。 -1 は、対応する要素をスキップします。 6. CSS での @import の効率は、複数の <link /> 要素ほど良くありません。 7. CSS の使用方法 (ランク付け) には、要素に埋め込まれたスタイル属性、ドキュメントに埋め込まれた <style></style>、および外部参照 <link /> の 3 つの方法があります。 8. JavaScript は属性を削除します (object.prop を削除するか、object['prop']; を削除します)。オブジェクトが特定の属性を持っているかどうかを判断するには、in, var hasProp = "prop" in object; 9. JavaScript の基本型の比較は値の比較であり、オブジェクトの比較は参照の比較です。 10. JavaScript の基本型、String(5) OR Number("5")。 11. <base href="xxx" target="xxx" /> ドキュメント内の相対リンクをこれに基づいて解析できるように、ベース URL を設定します。 <a></a> OR <src /> などに href または src 属性を含めます。 12. <link rel="prefetch" src="xxx" /> CSS ファイルをプリロードします。 FireFox でのみサポートされています。 13. デフォルトでは、ブラウザはスクリプト要素に遭遇するとすぐに HTML ドキュメントの処理を一時停止し、代わりにスクリプト ファイルをロードしてその中のスクリプトを実行します。ブラウザはスクリプトの実行後も HTML の解析を続けます。したがって、スクリプトはエラーを報告する可能性があります。解決策:

• スクリプト要素をドキュメントの最後に配置します。
• defer。スクリプトの読み込みが遅延すると、実行の遅延に影響します。 <スクリプトは src="xxx" を延期></script>。

14. ドキュメント内に、HTML 要素と対話したり関係を持たないスクリプトがあります。 async 属性を使用すると、スクリプトを非同期的にロードして、スクリプトの追跡などのパフォーマンスを向上させることができます。 15. <meta /> 要素は検索エンジンにとって非常に重要です。これには、アプリケーション名、作成者、説明、キーワードなど、多くの情報が含まれます。

• <meta name="著者" content="Will" />
• <meta name="説明" content="これは説明です"
• 。 UTF-8 は、Unicode 文字を最小限のバイトで表します。
• <meta http-equiv="refresh" content="5" /> 5 秒ごとにページを更新します。

16. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />Web サイトのロゴを追加します。 Web サイト識別ファイルがサーバーのルート ディレクトリにある場合、この属性を使用する必要はなく、ブラウザによって自動的にロードされます。 17. マージン開始/マージン終了/マージン前/マージン後。 margin-left/margin-right/margin-top/margin-bottom と同様です。普遍的ではありません。 18. <details></details> タグ。このラベルは面白いですね。

<details>  <summary>this is summsary</summary>  this is content.  </details>

19. form タグの name 属性はサーバーに送信されません。その子要素の name 属性がサーバーに送信されます。 20. fieldset 要素はフォームをグループ化します。 label 要素の for 属性は、対応する入力の id 値に設定され、input 要素と label 要素が関連付けられます。

<fieldset>  <legend>this is legend</legend>  <p>    <label for="name">Name:<input id="name" name="name" /></label>  </p></fieldset>

21、disabled属性对应元素的数据不会发送到服务器。22、<optgroup label="this is one title"></optgroup>。label设置选项组的一个标题或说明。23、<output for="num1 num2"></output>。for属性的值是元素的ID。24、for属性可以将元素关联起来。甚至不用标签包裹就可以相关联。个人感觉这种方式不好，包裹起来更利于维护。25、感觉这些用法很少用。span.class1.class2可以指定不同的类名。[attr~="val"]，属性中包含某值。如[class~="red"]表示class属性中含有red值的元素。p span含有空格，表示<p>标签中所有的<span>标签。p>span直接后代，即子元素。p+a返回p元素之后相邻的一个span元素。p~a，表示p元素之后同级的的所有a元素。26、伪类一个冒号，如:first-child；伪元素两个冒号，如::before。尽管浏览器都当做一个冒号处理，但是为了向后兼容最好区分写法。27、:only-child返回只有一个子元素的元素的子元素。也就是返回没有同级元素的元素。:only-of-type返回一个独有的元素，即该元素和其他元素都不相同。:nth-child(n) OR :nth-last-child(n)选择父元素的第n个子元素与父元素的倒数第n个元素。p:nth-of-type(2) OR p:nth-last-of-type返回第二个p元素与返回倒数第2个p元素。28、em与元素的字号挂钩。font-size: 15pt; height: 2em即2倍字体高度。rem与根元素的字号挂钩。html {font-size: 0.2in;} p {font-size: 2rem; height: 2em;}。font-size: 2rem表示该钙元素字号为根元素字号的2倍。29、border-radius可以用数值或者百分数。百分数值是相当于元素盒子的宽度和高度来说的。border-top-left-raidus: 20px 15px；分别表示水平半径和垂直半径。border-radius: 20px / 15px;用/将水平半径和垂直半径分开。border-radius: 50% 20px 25% 5em / 25% 15px 40px 55%;用/分开的是水平和垂直半径。第一组是四个角的水平半径、第二组是四个角的垂直半径。从top-left到top-right到bottom-left到bottom-right。