HTMLの基礎知識まとめ

タグの属性です。 複数の属性の間にスペースがある場合

< タグ名 属性名1 = " 属性値 " 属性名2 = " 属性値 " ></ タグ名 >

<p id = "p1" name = "p1" >

</p>

タグのカテゴリー

タグ分類：ブロック要素、行レベル要素

ブロック要素 : 一般に、インライン要素や他のブロックレベル要素を保持できる新しい行です。

行レベル要素 : これらは一般的に意味レベルの基本要素で、一般的にテキストや他のインライン要素のみを保持することができます。

ブロック要素とインライン要素の違い。 

• 1 、ブロックレベル要素は行を占有し、その幅は親要素の幅を自動的に埋める。インライン要素は同じ行に整列し、その幅は要素の内容に応じて変化する。
• 2. ブロック-レベル要素はその幅と高さを設定することができるが、インライン要素はそうではない。
• 3. ブロック-レベル要素はmarginとpadding属性を設定できる。インライン要素の水平パディングはmarginの効果を持つが、垂直パディングは効果がない。(ここの属性は後述します）。

のブロック要素に属する。

ヘッダタグ h1-h6。

段落タグ p ,

横線タグ hr,

順序付きリストタグ ol--li, the

順不同のリストタグul--li、は

説明タグdl-dt-ddを定義しています。

コンテナタグdiv.

行レベル要素である要素に対して

範囲指定タグ：span

画像タグ：img

基本的な構造です。

共通タグ

テキストタグ<h1></h1>

段落タグ <p></p>

改行タグ<br/>

横線タグ <hr/>

範囲タグ<span></span>

画像タグ <img 属性 />

画像タグのホットスポット領域 <map name="? " /> <atea shape range link title / >.画像タグのホットスポット領域 <map name="?

 リストタグ：unordered<ul> <li/> <ul/> ordered<ol> <li/> <ol/>.List タグ：unorder<ul> <li/> <li/> <ol>

説明タグ：グラフィックミックス <dl> <dt>(text or image)<dt/> <dd>(text description multiple)<dd/> <dl/>.Description タグは、グラフィック、テキスト、画像のいずれにも対応しています。

レイアウトタグ： <div> 中央の <div/> に他のタグを格納するコンテナ。

ハイパーリンクとアンカーリンク： <a><a/>

属性名：アンカー herf：ターゲット（ページ＃アンカー）

ルールテーブル： <table> <tr > <td> <td/> <td> <tr/> <table/>     <th>title row<th/>

align 左-右 alignment valign 上-下 alignment

不規則な形。

 属性 colspan="columns" rowspan="rows" で、占有されているセルを削除します。

 上級者向けタグ：タイトルタグ、論理パーティションタグ

 フォームのタイトル： <caption> キャプションテキスト <caption/>

 フォームの論理的なパーティション: thead tbody tfoot

フォーム

id:- 要素のユニークな表現、重複なし

name: サーバーがデータを取得するフォーム項目要素の名前

値を指定します。フォーム項目要素の値、サーバーは名前によってデータを取得します、これは値です

type: フォームアイテム要素がどのようにレンダリングされるかを示す

クラスを使用します。スタイル名を示す

readonly: 読み取り専用を意味し、ユーザーは見るだけで、変更することはできません。

disabled: 無効を意味し、要素は変更できず、背景は灰色になります。

テキストボックスです。

パスワードボックスです。

ラジオボタンです。

チェックボックスです。

ドキュメントのドメインです。

日付 -h5 の新機能 :

隠しフィールド。

ドロップダウンリストボックスです。

テキストフィールドです。

ボタンです。 

 投稿ボタン、画像ボタン、リセットボタン、一般ボタン

最終的な効果

アドレスバーの内容です。 

dest.html?

userId=1001&

ユーザー名=lina&

password=12312&

gender= 女性 &

statu=1&

趣味=水泳;趣味=映画;

headImg=a.png&

birthday=2020-10-24T20%3A19&

month=3&x=25&y=46

フレーム 

ページiframeで他のページを紹介する

 フレームセットです。HTML5 は非推奨となりました

一般的なレイアウトの組み合わせタグ

div-ul-li/div-ol-li : ナビゲーションレイアウトによく使われるものです。

div-dl-dt-dd: テキスト混在のレイアウトによく使われる

div-form。フォームレイアウトによく使われる

div-table。ローカルルールのデータ表示レイアウトによく使われます。

HTML4とHTML5の違い。

HTML5の新しいセマンティックタグ - 理解する

タグ 説明

article ページの独立したコンテンツ領域を定義する。

aside ページのサイドバーコンテンツを定義します。

bdi は、親要素のテキスト方向から外れるようにテキストの一部を設定することができます。

詳細文書または文書の一部の詳細を記述するためのものです。

dialog プロンプトボックスなどのダイアログボックスを定義します。

summaryタグには、detail要素のタイトルが入ります

ヘッダーは、ドキュメントの先頭領域を定義します。

footer は、セクションやドキュメントのフッターを定義します。

nav ナビゲーションリンク用のセクションを定義します。

progress あらゆる種類のタスクの進捗状況を定義します。

section ドキュメントのセクション (セクション、セグメント) を定義します。

time 日付または時刻を定義します。

wbr テキストのどこに改行が収まるかを指定します。

HTML5新フォーム属性

フォームの新属性

オートコンプリート 属性は、フォームまたは入力フィールドにオートコンプリート機能を持たせることを指定します。

ユーザーがオートコンプリートフィールドに入力を始めると、ブラウザはそのフィールドに入力された選択肢を表示する必要があります。

プロンプト : form要素でオートコンプリート属性がon、input要素でoffになっている可能性があります。

なお : オートコンプリートは、<input>タグに加え、text, search, url, telephone, email, password, datepickers, range, and colorというタイプの<input>タグに適用されます。

<form action = "" autocomplete = "on" >
        name: <input type = "text" name = "name" ><br>
        Phone: <input type = "text" name = "phone" ><br>
        email: <input type = "email" name = "email" autocomplete = "off" ><br>
        <input type = "submit" >
</form>
When testing, you need to enter it once, then refresh the page and enter it again to see the effect.
Some browsers may not automatically support this, so you need to enable it yourself.

input 新規属性

リスト 属性は、入力フィールドのdatalistを指定します。datalistは入力フィールドのオプションのリストです。

<input list = "companys" >
<datalist id = "companys" >
        <option value = "alibaba" >
        <option value = "baidu" >
        <option value = "tencent" >
        <option value = "zijie" >
        <option value = "didi" >
</datalist>

複数 属性はブーリアン属性です。

複数 属性は、<input> 要素で複数の値を選択できることを指定します。

注意事項 : multiple 属性は、次のタイプの <input> タグに適用されます: email および fifile

複数ファイルのアップロード : <input type="file" name="img" multiple>

プレースホルダー 属性は、入力フィールドに期待される値を記述するヒントを提供します。

ユーザーが値を入力する前に、入力フィールドに短いヒントが表示されます。

備考 : placeholder属性は、次のタイプの<input>タグに適用されます： text, search, url, telephone, email, and password。

<input type = "text" name = "userName" placeholder = " Please enter username " >

必須 属性はブーリアン属性です。

必須 属性は、入力フィールドが送信される前に入力されなければならない (空にすることはできない) ことを指定します。

ただし : required属性は、次のタイプの<input>タグに適用されます： text, search, url, telephone, email, password, date pickers, number, checkbox, radio, and fifileです。

username : <input type = "text" name = "username" required >.ユーザー名 : <input type = "text" name = "username" required >

HTML5 の新しいフォーム要素について学ぶ

 タグの説明
datalist input タグは、オプションのリストを定義します。input 要素と一緒に使用することで、入力に使用できる値を定義することができます。
keygen は、フォームに使用するキーペアジェネレータのフィールドを指定します。
出力タグは、スクリプトの出力など、さまざまな種類の出力を定義します。

HTML5における新しい入力タイプ

HTML5では、いくつかの新しいフォーム入力タイプが追加されました。これらの新機能は、より優れた入力制御と検証を提供します。

カラー

日付

日時

日時-ローカル

電子メール

月

番号

範囲

検索

テル

時間

url

週間

備考 : すべての主要なブラウザが新しい入力タイプをサポートしているわけではありませんが、すでにすべての主要なブラウザで使用することができます。サポートされていない場合でも、通常のテキストフィールドとして表示することができます。

HTML5における新しいオーディオ

これまで、ウェブページで音声を再生するための規格はありませんでした。ほとんどのオーディオは、Flashなどのプラグインを通して再生されています。しかし、すべてのブラウザが同じプラグインを持っているわけではありません。HTML5では、Webページに音声を埋め込むための規格として、<audio>という要素が規定されています。

<audio controls >
        <source src = "horse.ogg" type = "audio/ogg" >
        <source src = "horse.mp3" type = "audio/mpeg" >
Your browser does not support the audio element.
</audio>

PS : 再生、一時停止、音量調節を追加するためのコントロールプロパティです。
<audio> と </audio> の間に、ブラウザがサポートしていない <audio> 要素用のプロンプトテキストを挿入する必要があります。
audio>要素では、複数の<source>要素を使用することができます。また、<source> 要素は、異なる音声ファイルをリンクすることができ、ブラウザは最初にサポートされた音声ファイルを使用します。

現在、<audio> 要素は、3つのオーディオフォーマットのファイルをサポートしています。MP3、Wav、Oggです。

音声フォーマットのMIMEタイプ

フォーマットMIMEタイプ
MP3オーディオ/MPEG
Oggオーディオ/ogg
Wavオーディオ/Wav

HTML5による新しい動画

<video width = "320" height = "240" controls >
<source src = "movie.mp4" type = "video/mp4" >
<source src = "movie.ogg" type = "video/ogg" >
Your browser does not support the Video tag.
</video>

<video> 要素は、動画を制御するための再生、一時停止、および音量コントロールを提供します。
また、 <video> 要素は、動画のサイズを制御するための width 属性と height 属性を提供します。height と width が設定されている場合、必須である
のビデオ領域は、ページがロードされるときに確保されます。これらの属性が設定されておらず、ブラウザがビデオのサイズを知らない場合、ブラウザは以下の場合にロードできなくなります。
を保持する場合、元の動画のサイズに応じてページが変化してしまいます。
video> と </video> の間に挿入されるコンテンツは、video 要素をサポートしていないブラウザで表示するために用意されています。

現在、<video> 要素は、3つの動画フォーマットに対応しています。MP4、WebM、Ogg です。

フォーマットMIMEタイプ
MP4ビデオ/mp4
Oggオーディオ/ogg
WebM ビデオ/webm

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" >
<title> Video Audio </title>
</head>
<body>
<h1> audio </h1>
<audio controls >
<source src = "audio/wgs.ogg" type = "audio/ogg" >
<source src = "audio/zjl.mp3" type = "audio/mpeg" >
Your browser does not support the audio element.
</audio>
<h1> video </h1>
<video width = "1320" height = "640" controls >
<source src = "audio/ruhai.mp4" type = "video/mp4" >
<source src = "audio/wgs.ogg" type = "video/ogg" >
Your browser does not support the Video tag.
</video>
</body>
</html>

HTML5で削除された要素

フレーム

フレームセット

ノーフレーム

エスケープシンボル

HTMLの基礎知識についての記事は以上です。HTMLの基本についての詳しい情報は、Script Houseの過去の記事を検索するか、以下の記事を引き続き閲覧してください。