「HTML5 と CSS3 の基本チュートリアル」学習ノート --Four Day_html/css_WEB-ITnose

第 16 章

1. 入力と要素

メールボックス

検索ボックス
電話ボックス
URL ボックス
次の要素は一部のブラウザでサポートされています
Date

Number
Range
データリスト

<input type="text" name=" "  list="fruit" /><datalist><option> </option><option> </option><option> </option></datalist>

次の入力または要素はほとんどサポートされておらず、W3C は 2014 年の HTML5 への最終決定時にはリストに掲載されない可能性が高いと述べています
Color

グローバル日付と時刻
ローカル日付と時刻
月
時刻<入力タイプ="time" />
week
output

2. 属性:

1) ユーザーがアップロードできるファイルの種類を制限します

2) オートコンプリート

3) autocomplete="off" をフォーム要素または特定のフィールドに追加すると、ブラウザーはそのフィールドのフォームまたは自動入力機能を閉じます。デフォルト値はオンです。 4) AutoFocus ページがロードされ、フィールドにフォーカスが置かれます

5) Multiple では、複数の電子メール アドレスを入力するか、複数のファイルをアップロードできます

6) 入力する DataList をリンクするリスト

77 ) maxlengthテキストエリアの最大文字数を指定します (HTML5 がこの機能をサポートする前のテキスト ボックス)

8) pattern は、ユーザーが入力したテキストを送信する前に従う必要があるパターンを定義します プレースホルダーは、テキスト ボックスに表示されるプロンプト テキストを指定します 、ユーザーが入力を開始するとテキストが消えます

9) 訪問者はフォームを送信する前にフィールドに入力する必要があります

10) formnovalidate は HTML5 の自動検証機能をオフにします。 novalidate を送信ボタンに適用すると、HTML5 の自動検証がオフになります。フォーム要素に適用されます

3.

を追加してタイトルを追加できます

4. 特別な属性: 値はフォームフィールドの id の値と同じです

例:

 <p class="row"><label for="first-name"> First Name:</label><input type="text" id="first-name"  name="first_name"  class="field-large" /></p>

5. 命名習慣: for、id、name

1) 単一の単語: 3 つの一貫性

​​

2) 複数の単語: for、id は - で区切られ、名前は _ で区切られます

6. box

eg

:

<textarea id="bio" name="bio" cols="40" rows="5" class="field-large"></textarea>

7. 選択ボックスのオプションをグループ化します:

eg:

<select id="referral" name="referral"><optgroup label=" "><option value=" "> </option><option value=" "> </option></optgroup><optgroup label=" "><option value=" "> </option><option value=" "> </option></optgroup></select>

8訪問者がファイルをアップロードできるようにします:

enctype= multipart/form-data"

<form method="post"action="show-data.php"  enctype="multipart/form-data">

9. 隠しフィールドを作成します: type="hidden"

1) Name="サーバーに送信された情報"

2) Value="送信する情報それ自体「

、10、ステータスに応じて、フォームのスタイルを設定します

1、ビデオファイル形式: .ogg、.mp4、.webm

2、ビデオ属性

1)) src (ソース) はビデオ ファイルの URL を指定します

2) autoplay (自動再生) はビデオが再生可能になるとすぐに再生を開始します

3) コントロール (controls) はビデオに対してブラウザによって設定されたデフォルトのコントロールを追加します

4 ) muted (ミュート) ) 動画をミュートします

5) ループ (loop) 動画をループ再生させます

6) ポスター (poster) 動画をロードしたときに表示する画像を指定します（最初のフレームを表示せず）ビデオ）。希望の画像ファイルの URL を受け入れます

7) width（宽度） 视频的宽度（以像素为单位），通常默认为 300

8) height（高度） 视频的高度（以像素为单位），通常默认为 150

9) preload（预加载） 告诉浏览器要加载的视频内容的多少。可以是以下三个值：

‰ none表示不加载任何视频

metadata 表示仅加载视频的元数据（如长度、尺寸等）
‰ auto

3、 添加控件和自动播放：controls、autopaly

4、 循环播放：loop

5、 海报图像：poster=”xx.jpg”

6、 防止预先加载视频：preload=”none/auto/metadata(最好)”

7、 使用多种来源的视频和备用文本（音频还没有加载出来显示文本）

eg:

<video width="369" height="208" controls><source src="paddle-steamer.mp4"  type="video/mp4"><source src="paddle-steamer.webm" type="video/webm"><p><a href="paddle-steamer.mp4">Download the video</a></p></video>

8、 音频格式：.ogg/.mp3/.wav/.aac/.mp4/opus

9、 添加音频：

10、 音频属性

11、 提供带备用内容的多个视频源

1)        <script src="build/jquery.js"> </script><script src="build/mediaelement-and- player.min.js"></script><link rel="stylesheet" href="build/ mediaelementplayer.min.css" />2)        <!-- 下面的代码放在所有内容之后 --><script>$('audio/video').mediaelementplayer();</script>

 

 

第十八章

1、  scope=”col/row” 列/行的标题单元格

2、  跨越多行和多列rowspan/colspan=”n”