HTML の概要

高洛峰
高洛峰オリジナル
2016-10-31 11:45:563437ブラウズ

HTML の概要

1. Web ブラウザの機能は、HTML ドキュメントを読み取り、Web ページの形式で表示することです。ブラウザは HTML タグを表示しませんが、タグを使用してページのコンテンツを解釈します。

2.

私の最初の見出し

私の最初の段落。

#

#

#と

の間のテキスト

#と

の間のテキストは

1.HTMLリンクは
タグによって定義されます。

これはリンクです

HTML画像

HTML画像はタグで定義されています。

HTML の概要HTML要素の構文

HTML要素は開始タグで始まります

HTML要素は終了タグで終わります

要素の内容は開始タグと終了タグの間の内容です

一部のHTML要素は空のコンテンツ (空のコンテンツ)

空の要素は開始タグ内で閉じられます (開始タグの終わりで終了します)

ほとんどの HTML 要素は属性を持つことができます

空の HTML 要素

コンテンツのない HTML コンテンツは空と呼ばれます要素。空の要素は開始タグで閉じられます。

は、終了タグ (

タグ定義の改行) のない空の要素です。


XHTML、XML、および HTML の将来のバージョンでは、すべての要素を閉じる必要があります。

などの開始タグにスラッシュを追加することは、空の要素を閉じる正しい方法であり、HTML、XHTML、および XML で受け入れられます。

はすべてのブラウザで動作しますが、

を使用すると実際には長期保証が得られます。


HTML Centering

には、配置に関する追加情報があります。

背景色に関する追加情報があります。

HTML水平線


タグは、HTMLページに水平線を作成します。

hr 要素はコンテンツを分離するために使用できます。


属性値を常に引用符で囲む

属性値は常に引用符で囲む必要があります。二重引用符が最も一般的に使用されますが、一重引用符を使用しても問題ありません。

属性値自体に二重引用符が含まれているなど、いくつかの個別のケースでは、一重引用符を使用する必要があります。例:

name='Bill "HelloWorld" Gates'

空の段落タグを使用してください

それは悪いです空白行を挿入する習慣を付けてください。

タグに置き換えてください!

新しい段落を作成せずに改行 (新しい行) が必要な場合は、

タグを使用します:

これは
改行のあるパラグラフです



要素は空の HTML 要素です。終了タグは意味がないので、終了タグはありません。

整形済みテキスト

この例では、pre タグを使用して空の行とスペースを制御する方法を示します。

これは

フォーマット済みテキストです。 >>>>>>>>>>>> フォーマット済みのテキスト。

スペースを保持します <p></p> スペース <p></p> と改行を保持します。そして改行。 <p></p> <p></p>pre タグは、コンピューター コードを表示するのに最適です <p></p> <p></p>Address<p></p> この例では、HTML ファイルにアドレスを記述する方法を示します。 <p></p> <p></p><p>ドナルドダックの住所: </p><p></p><p></p><p>ドナルドダック</p><address>
<p>BOX 555<br></p>
<p>ディズニーランド<br></p>
<p>USA<br></p>
<p><br> </p> <p></p>
</address><p></p><p><br></p><p>W3学校の住所: </p><p></p><p> </p><p> </p><address>ユーザーサービスメールボックス<p><a href="mailto:service@w3school.com.cn"></a> 上海英科投資有限公司<br></p>
<p> 金橋開発区789号<br></p>
<p><br></p>
<p> 結果: </p>
</address> ドナルドダックのアドレス: <p></p> <p></p>ドナルドダックBOX 555 <p></p><p></p>WWW <p></p><p></p><p>テキストの方向</p><p></p><p></p>ここにヘブライ語のテキストがあります<p></p><p></p><p>ここにヘブライ語のテキストがあります</p><p></p><p>ブロック引用<abbr title="United Nations"> </abbr></p><p><acronym title="World Wide Web">これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。 </acronym></p><p></p><p> blockquote 要素を使用すると、ブラウザーは改行と余白を挿入し、q 要素には特別なレンダリングが行われません。 </p><p><br></p><p>HTML スタイルの例 - 背景色 </p><p>background-color 属性は、要素の背景色を定義します: </p><p></p><p></p><h2 style="background-color:red">これは見出しです</h2><p></p><p style="background-color:green">これは段落です</p><p></p> <p>font -family、color、および font-size 属性は、要素内のテキストのフォント ファミリー、色、フォント サイズをそれぞれ定義します: </p><p></p><h1 style="font-family:verdana">見出し</h1><p></p><p style="font-family:arial;color:red;font-size:20px;">段落。</p><p> text-align 属性は、次の内容を指定します要素内のテキストの水平方向の配置 メソッド: sこれは見出しです</p><p></p><h1 style="text-align:center"> </h1> 方式 方式 方式 <p></p> <p></p> <p><a href="../example/html/lastpage.html" tppabs="http://www.w3school.com.cn/example/html/lastpage.html"> 表の表のヘッダーは、表のヘッダーとして定義されます。 </a></p><p><img  border="0" src="../i/eg_buttonnext.gif" tppabs="http://www.w3school.com.cn/i/eg_buttonnext.gif" alt="HTML の概要" ></p><p></p><p></p>見出し<p> >>>>>>>>注意</p><p></p><th>別の見出し<p></p>
<table border="1">
<p></p>
<tr>
<p></p>
<th></th>行1、セル1 <p></p>
<th> </th>行 1、セル 2 <p></p>
</tr>
<p></p>
<tr>
<p></p>
<td></td>行2、セル1<p></p>
<td></td>行2、セル2table border="1"><p> </p>
</tr>
<p></p>
<tr>行1、セル1<p></p>
<td></td> 行 1、セル2<p></p>
<td></td>
<p></p>
</tr>
<p></p>
</table>行2、セル1<p></p>
<p></p>
<p></p> <p></p>
</th><tr>
<p></p>
<td>
<p> </p>
<p>順序なしリスト:</p>
<p></p>
<h4>順序なしリスト:</h4>
<p></p>
<ul>
<p> </p>
<li>コーヒー</li>
<p> </p>
<li>紅茶</li>
<p> </p>
<li>牛乳</li>
<p> </p>
</ul>
<p> </p>
<p>順序付きリスト: </p>
<p></p>
<h4>1 つの順序付きリスト: </h4>
<p></p>
<ol>
<p> </p>
<li>コーヒー</li>
<p> </p>
<li>紅茶</li>
<p> </p>
<li>ミルク</li>
<p></p>
</ol>
<p> </p>
<p>定義リスト</p>
<p></p>
<dl> <p>コーヒー</p>
<dt></dt>
<p>ブラックホットドリンク</p>
<dd></dd>
<p>ミルク</p>
<dt></dt> <p>白い冷たい飲み物</p>
<dd></dd>
<p></p>
</dl>
<p><br></p>フォーム<p></p> フォームとは、フォーム要素を含む領域です。 <p></p>フォーム要素は、ユーザーがフォームに情報を入力できるようにする要素です (テキストフィールド、ドロップダウンリスト、ラジオボタン、チェックボックスなど)。 <p></p>フォームはフォームタグ(<p>)を使用して定義されます。 </p>
<form>Input<p></p> ほとんどの場合に使用される form タグは input タグ (<p>) です。入力タイプは type 属性 (type) によって定義されます。 <input></p>テキストフィールド<p></p>テキストフィールドは、ユーザーがフォームに文字や数字などを入力する場合に使用されます。 <p></p>
<p></p>
<p></p>
</form>
<form>名:<p></p>
<p><input type="text" name="firstname"></p>
<p><br></p>姓:<p></p>
<p><input type="text" name="lastname"></p>
<p></p>
</form>
<p><br></p>ラジオボタン<p> </p>
<p></p>
<form> 男性 名前と値は何を意味しますか?私は自転車を持っています<p><input type="radio" name="sex" value="male"></p>
<p><br>フォームのアクション属性(アクション)と確認ボタン</p>
<p><input type="radio" name="sex" value="female">価値とはどういう意味ですか? </p>
<p></p>
</form>
<p> </p>
<p>例: </p>
<form>単純なドロップダウン リスト<p><input type="checkbox" name="bike"> この例は、HTML ページに単純なドロップダウン リスト ボックスを作成する方法を示します。ドロップダウン リスト ボックスは選択可能なリストです。 </p>
<p></p>
<p><br></p>
<p><input type="checkbox" name="car"></p>ボルボ<p></p>
<p></p>
</form>サーブ<p></p>
<p>フィアット</p>
<form name="input" action="html_form_action.asp" method="get"> 》》》》お気に入りに追加<p></p>アウディ<p><input type="text" name="user"></p>
<p><input type="submit" value="Submit"> </p>
<p></p>
</form>テキストフィールド<p></p>この例では、次の方法を示します。テキスト フィールド (複数行のテキスト入力コントロール) を作成します。ユーザーはテキストフィールドにテキストを書き込むことができます。書き込める文字数に制限はありません。 <p></p>
<p></p>
<p>エディタでは入力にテキストエリア</p>
<p>を使用しており、ブラウザではテキストエリア内のテキストエリアが許可されていないため</p>
<form>この例は編集できません<p><select name="cars"></select></p>
<p><option value="volvo"></option></p>
<p><option value="saab"> </option>猫は庭で遊んでました。</p>
<p>作成ボタン<option value="fiat" selected></option></p>
<p><option value="audi"></option></p>
<p></p>
<p>ボックスの作成:</p>
</form>
<p></p>
<p></p>健康情報:<p></p>
<p></p>
<p></p>
<p> </p>身長: <p></p>
<p></p>
<p>体重: </p>
<p></p>
<p></p>
<p><textarea rows="10" cols="30"></textarea></p>
<p> </p>
<p>入力ボックスと確認ボタン付きのフォーム</p>
<p></p>
<form>
<p> <input type="button" value="Hello world!">名: </p>
<p></p>
</form> <p>姓: </p> <p></p>
<fieldset> <p><legend></legend></p>
<p>チェックボックスフォーム付き</p>
<form>
<p><label><input type="text">私は自転車を持っています:</label></p>
<p><label><input type="text"></label></p>
<p>私は車を持っています:</p>
</form>
<p></p>
</fieldset>
<p></p>
<p>私は飛行機を持っています:</p>
<p></p>
<form action="http://www.w3school.com.cn/example/html/form_action.asp" method="get"> <p> </p>
<p><input type="text" name="fname"></p>
<p></p>
<p><input type="text" name="lname"></p> <p>ラジオボタン付きフォーム<input type="submit" value="Submit"></p>
<p></p>
</form>男性:<p></p>
<p></p>
<form name="input" action="http://www.w3school.com.cn/html/html_form_action.asp" method="get">
<p></p>
<p>女性:<input type="checkbox" name="vehicle" value="Bike" checked></p>
<p><br></p>
<p></p> <p>垂直ヘッダー: <input type="checkbox" name="vehicle" value="Car"></p>
<p><br></p>
<p></p>
<p><input type="checkbox" name="vehicle" value="Airplane"> </p> name<p>billgates<br><br></p>
<p><input type="submit" value="Submit"></p>
<p></p>
</form>
<p>phone</p>
<p></p>
<form name="input" action="http://www.w3school.com.cn/html/html_form_action.asp" method="get">55577854<p></p>
<p><input type="radio" name="Sex" value="Male" checked></p>
<p><br></p>
<p> </p>
<th>電話</th>
<p> </p>
<td>555 77 855</td>
<p></p>
</form>
</td>
</tr><p></p><p> </p><p>イラスト: 名前 Bill Gates</p><p> 電話 555 77 854</p> <p>電話 555 77 855</p><p><br></p><p>タイトル付きの表</p><p> この例タイトル (キャプション) を持つ表を示します </p><p></p>

は 2 つのセル列にまたがります:

私のタイトル

2 行にまたがるセル:


Name Phone
Phone 555 77 854
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。