ホームページ  >  記事  >  バックエンド開発  >  PHP ノート (HTML)

PHP ノート (HTML)

WBOY
WBOYオリジナル
2016-06-23 13:39:53924ブラウズ

私は多くの言語を学習してきましたが、最近ついに PHP を学習することにしました。

PHPを学ぶにはまずHTMLを学ばなければなりませんので、私もHTMLから始めます!

まずはどんなプログラミング言語でも学びましょう。何冊読んでも、それなしではいられない?? ヘルプ ドキュメント

HTML ヘルプ ドキュメント: http://pan.baidu.com/s/1hqxOymo

ノーとは言わないでください ご存知のとおり、近年普及している HTML5 は HTML の発展方向です。HTML の発展方向は次のとおりです。 XML は標準化されており、その過程で XHTML も派生します。

Webページを作る際に色を使うのは避けられませんが、色を表現する方法には単語表現と16進数表記があります。レビューのために投稿します。

RGB カラー テーブル:

プログラミング言語にはテキストとして直接表示できない特殊な記号が常にあり、HTML も例外ではありません。これらの特殊な記号は HTML でエンティティと呼ばれます。緊急時用のエンティティ比較表。

エンティティ比較表:

Web ページのコードはブラウザによって直接解析されます。Web ページを作成する際には、一般的に使用されるエンコードを選択する必要があります。ブラウザは、UTF-8、GBK、GD2312 などを選択できます。 Web ページを解析するためのエンコーディングも選択します。そこで問題は、ブラウザによって選択されたエンコーディングが Web ページの作成に使用されたエンコーディングと一致しない場合はどうなるかということです。解決策は 3 つあります:

    ブラウザに適応させるために最も一般的に使用されるエンコード方法を使用する
  1. Web ページに一致するようにブラウザのエンコードを設定する
  2. タグを使用する
明らかに、1 つのエンコードです。これはすべての人に適しているわけではなく、ユーザーがブラウザのコードを変更するほど賢明ではありません。したがって、最初の 2 つの方法は症状を治療するだけで根本的な原因は解決しません。3 番目の方法が最も重要です。

は単一のタグであり、その使用法は

in UTF -8 の例:

タグのその他の使用法ヘルプドキュメントを参照できます。

タグは、相対パスを絶対パスに変更したり、メソッドを開くなどのハイパーリンクを設定できます。 は単一のタグです。具体的な使用法についてはヘルプドキュメントを参照してください。

の属性設定は、Web ページ全体のデフォルト設定になります。フォントの色 (text)、背景の色 (bgcolor)、背景画像 (background)、背景のプロパティ (bgproperties) を設定できます。 )などを確認するか、ヘルプドキュメントを確認してください。

このタグは非常に特殊で、単一タグまたは二重タグとして使用できます。二重ラベルとして使用すると、ラベル間のコンテンツがセクションとして表示され、単一ラベルとして使用すると、ラベルから改行が始まります。二重ラベルの使用は比較的標準的で一般的です。

 タグは、 とは異なり、元の形式で出力されますが、<pre class="brush:php;toolbar:false"> タグ内のテキストは解析されます。 ;xmp> タグは解析できず、テキスト形式で出力されます。 <p> </p> <p> <li> タグは <ol> および <ul> とともに使用され、タグ間の内容がリスト内の項目として表示されます。デフォルトでは無効になっています。リストを順序付きリストにするには、<ul> タグを使用します。これらのタグのプロパティについては、ヘルプ ドキュメントを参照してください。 </p> <p> </p> <p><sub> と <sup>、下付きタグと上付きタグは両方とも二重タグです。 </p> <p> </p><img> は画像を表示するためのタグで、src 属性は画像のリンクを設定し、title 属性はマウスを置いたときに表示される名前を設定します。 alt 属性は、画像の読み込みに失敗した場合に表示される名前を設定します。他のプロパティについては、ヘルプ ドキュメントを参照してください。 <p> </p> <p> </p><a> は、ハイパーリンクに使用されるリンク タグであり、二重タグです。 href 属性はリンク アドレスを設定し、title 属性はラベルを配置したときに表示される名前を設定し、target 属性はリンクを開く方法を設定します。その他の属性についてはヘルプ ドキュメントを参照してください。 <p> </p><a> タグは、name 属性を使用して、特定の領域にリンクするためのアンカー ポイントを設定します。 Name は名前を設定し、href 属性が "#"+name に設定されている場合は、このページの名前にリンクできます。href が Web ページのパス + "#" + name に設定されている場合は、次のページの名前にリンクできます。 Web ページの場所。herf 属性が「#」または空に設定されている場合、このページの先頭にジャンプします。 <p> </p> <p> </p>現在のページにジャンプ<p> </p>
<p> </p>他のページにジャンプ<p> </p>
<p> </p>URL:Uniform Resource Locator<p> </p>URLは次で構成されます: http://i.cnblogs.com/EditPosts.aspx?postid=4275104&update =1 as例<p></p>
<li>プロトコル名: http://、ftp://、https://、file:// など (http://)</li> <li>ホスト名: (i.cnblogs.com) (cnblogs.com はドメイン名)</li> <li>ポート番号: 80、8080 など (範囲: 0~65535) (80) </li> <li>リソース名: アクセスされたファイル (EditPosts.aspx) </li> <li>パラメータ: "?" の後のキーと値のペア、複数のパラメータには " を使用します" &"Connection (パラメータを取得、パラメータは表示されます。パラメータを投稿、パラメータは表示されません) (postid=4275104&update=1) </li> <p> </p> <p> URL の相対パス: </p> <li>./: ローカル パスを表します</li> <li>../: 上位パスを表します </li> <li>../../: 上位パス (など) を表します </li> <p> </p> <p><table> ラベルはテーブルの構築に使用されます。これは二重ラベルです。 width 属性はテーブルの幅を設定し、height 属性はテーブルの高さを設定し、border 属性はテーブルの境界線を設定し、cellspacing 属性はセル間の幅を設定し、cellpadding 属性はセルのコンテンツ間の距離を設定します。そして国境。 </p> <p><tr> ラベルのネスト <table> ラベルはテーブルの行をデザインするために使用されます。これは二重ラベルです。 </p> <p><td> ラベルのネスト<tr> ラベルは、二重ラベルであるテーブルのセルを表すために使用されます。 rowspan 属性は行全体に設定され、属性値は複数の行にまたがる数を示します。colspan 属性は複数の列にまたがって設定され、属性値は複数の列にまたがる数を示します。 </p> <p> </p>
<th> ラベルのネスト </th>
<tr> ラベルはテーブルのヘッダーを表すために使用され、セルの内容は太字で中央揃えになります。  <p>その他の属性については、ヘルプドキュメントを確認してください。 </p> <p> </p> <p> </p> <p>HTML フレームはフレーミングとも呼ばれ、複数のページを 1 つのページに結合して表示します。 </p> <li>利点: </li> <li>ページをリロードするときに、ページ全体をリロードする必要がないため、Webページのダウンロード速度が向上します</li> <li>ナビゲーションバーを作成するのに便利です</li> <li>短所: </li> <li>複数のページがあるため、管理が難しい</li> <li>コードが複雑で検索できない</li> エンジンのインデックス<li> </li>マルチフレームページはサーバーのhttpリクエストを増加させる<li> </li>小型モバイルデバイスでは完全に表示できない<li> </li>上記の欠点により、標準に準拠していませんWebデザインのコンセプトは放棄してしまいましたが、背景は使えるのでまだまだ勉強が必要です。 <p> </p>Frame タグ: <li> <frameset> タグ、二重タグ</li> <frameset> タグはフレーム ページを定義するため、<frameset> タグは必要ありません。 <body> タグ<li> </li> border 属性はフレームの境界線のサイズを設定します <li> rows 属性はフレームの数と高さを設定します。「*」は残りのスペースを表します。 "," </li> <li>cols 属性はフレームの列数と幅を設定します。必要な数の列を記述します。「*」は残りのスペースを示し、「,」で区切られます</li> <li><frameset> をネストしてフレームを多様化できます。 format</li> <li><frame> ラベル、ダブルラベル </li> <li> は、<frameset> にネストされ、各ページのコンテンツを表示するために使用されます。 </li> <li> src 属性は、そのコンテンツを表示するページのパスを設定します </li> <li>name 属性は、設定できますリンク表示用のフレームの名前</li> <li><a>タグのtarget属性で表示ページのフレームを指定可能</li> <li><a>タグのtarget属性が「_parent」に設定されている場合、それを意味します「_top」に設定すると、トップレベルのフレーム表示と Web ページ全体のレイアウト表示を示します </li> <li> </li> <p class="sycode"> <br> ハイパーリンク </p> <p class="sycode"> </p><noframes&gt ; タグ、二重タグ <p class="sycode"> </p> ブラウザがフレームを読み込めない場合、<フレームは表示されません <p class="sycode"> <frameset> タグ内でネストされ、<body> タグとともに使用されます </p>
<p class="sycode"> </p>< ;iframe> タグ、単一タグ <p class="sycode"><li> </li> <li>別のドキュメント フレームを含むインラインを作成します</li> <li>このタグをサポートしていないブラウザでも表示できます</li> <li><body> タグで使用されます</li> <li><br /> <br />フレームのその他のプロパティと使用法については、ヘルプ ドキュメントを参照してください。 </li> <li> </li> <li> フォーム: 入力データをサーバーサイドプログラムに送信できる HTML 要素 </li><li><form> タグ、二重タグ  <li> HTML フォームを表します </li> <li>action 属性はデータ送信の宛先を設定します</li> <li>method 属性は get と post に設定できる送信方法を設定します </li> get は送信する情報が少なく、より速く、送信された情報はアドレスバーに表示されますが、これは安全ではありません<li> </li>post はより多くの情報を送信しますが、遅く、送信された情報はアドレスバーに表示されないため、より安全です<li> </li>enctype 属性はエンコードタイプを設定しますサーバーに送信されるデータの数<li> </li>application /x-www-form-urlencoded: フォーム データは、標準のエンコード形式、デフォルト値で名前と値のペアとしてエンコードされます <li> </li>multipart/form-data: フォーム データはメッセージとしてエンコードされます、ページ上の各コントロールの情報の一部に対応し、<li> </li>
<p> </p>
<input>タグ、単一タグ <li> </li>type、入力フィールドの表示モードを表します(入力タイプ、選択タイプ、クリックタイプに分けられます) ) <li> </li>テキスト、単一行 テキスト入力フィールド、入力タイプ <li> </li>パスワード、パスワード入力フィールド、入力された文字は「*」で表示されます、入力タイプ <li> </li>ファイル、ファイルアップロード、入力タイプ <li> </li>チェックボックス、チェックボックス、選択タイプ <li> </li>radio、ラジオ ボックス、選択タイプ <li> </li>hidden、隠しフィールド、通常はデフォルト値の転送に使用されます、<li> </li>ボタン、ボタン、クリックしてもフォームは送信されません、他の操作を実行できます、クリック タイプ <li> </li>image、imageボタン、クリックしてフォームを送信します、クリックしてタイプ <li> </li>submit、クリックしてフォームを送信、クリックタイプ <li> </li>reset、リセット ボタン、タイプ <li> </li>name をクリックし、フォーム項目の名前 <li> </li> は通常、次と同じに設定されますデータベース内の対応するフィールド名<li> </li>click この属性はタイプには必要ありません<li> </li>データ送信時の識別子<li> </li>チェックボックスの名前の値は通常配列で表されます<li> </li>ラジオボタンボックスの名前の値がは同じです。オプションは相互に排他的です<li> </li>value、フォーム項目の値<li> </li>Select Type は属性値を設定します。選択後、フォームで送信できます <li> </li>画像以外のタイプをクリックして、この属性を設定します。つまり、ボタンの表示名を設定します <li> </li>入力タイプ 属性値を設定し、デフォルト値を設定します <li> </li>maxlength、テキスト入力の長さを制限します <li> </li><textarea> ラベル、ダブルラベル <li> </li>複数行のテキストフィールド、入力できます複数行のテキスト <li> </li>cols、列数を設定、列数を渡し、幅を設定 <li> </li>rows、行数を設定、行数を渡し、高さを設定 <li> </li>残りの属性は次のとおりです。 <input> ラベル入力タイプと一致します <li> </li><select> ラベル、ダブルラベル <li> </li>ドロップダウンメニュー<li> </li> name 属性は、通常はデータベースフィールド名と一致するフォーム項目名を設定します <li> </li>複数の属性セットフォームを複数の Select <li> <option> タグ、二重タグ </li> ドロップダウン メニューのオプションを表すために <select> タグ内でネストして使用されます <li> </li> value 属性は、選択後のオプションの値を設定します。 、フォームで送信されます <li> </li>選択された属性の設定 デフォルトで選択されています <li> </li><lable>タグはテキストとオプションをバインドするように設定できるため、テキストをクリックして選択できます <li> </li><li> </li>その他の属性の場合フォームの使用方法については、ヘルプ ドキュメントをご覧ください。 <p> </p><div> タグ、二重タグ <p> </p>Layer タグ、要素またはレイアウトの配置に使用されます <p> </p> レイヤー内のコンテンツはブラウザ内のどこにでも配置でき、HTML 要素も配置できます <li> </li> CSS と組み合わせて使用​​されることが多い<li> </li> CSSと合わせて使われることが多いので、CSSを学ぶ際にはぜひ学んでください! <li> </li> <p> </p>この時点で、HTML の基本要素を学習し、単純な静的 Web ページの作成を開始できますが、動的な Web サイトにはまだ程遠いです。次はCSSを勉強しましょう! <p></p>
<p></p>
<p class="sycode"></p>
<p class="sycode"></p>
<p class="sycode"></p>
<p class="sycode"></p>
<p class="sycode"></p>
<p class="sycode"></p>
<p class="sycode"></p>
<p class="sycode"></p>
<p class="sycode"></p>
</tr>
</ol></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明:</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事:<a class="dBlack" title="新しい配列を追加するときに配列を宣言するにはどうすればよいですか?" href="http://m.php.cn/ja/faq/256645.html">新しい配列を追加するときに配列を宣言するにはどうすればよいですか?</a></span><span>次の記事:<a class="dBlack" title="新しい配列を追加するときに配列を宣言するにはどうすればよいですか?" href="http://m.php.cn/ja/faq/256648.html">新しい配列を追加するときに配列を宣言するにはどうすればよいですか?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-6t+ed+2i-1n-4w"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="8966999616"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/1.html" title="cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法" class="aBlack">cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1.html" title="cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法" class="aBlack">cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1.html" title="cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法" class="aBlack">cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1.html" title="cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法" class="aBlack">cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2.html" title="正規表現内のすべての式記号 (概要)" class="aBlack">正規表現内のすべての式記号 (概要)</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="5027754603"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><p>ホームページ</p></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><p>コース</p></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><p>に質問</p></a></li><li><a href="http://m.php.cn/ja/login"><b class="icon5"></b><p>私の</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ja/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><span>ホームページ</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><span>コース</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/article.html"><b class="icon3"></b><span>記事</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><span>に質問</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/dic.html"><b class="icon6"></b><span>辞書</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course/type/99.html"><b class="icon7"></b><span>マニュアル</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/xiazai/"><b class="icon8"></b><span>ダウンロード</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/faq/zt" title="特集"><b class="icon12"></b><span>特集</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ja/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ja/" >ホームページ</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/article.html" class="hover">記事</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/wenda.html" >に質問</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/course.html" >コース</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/faq/zt" >特集</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/xiazai"  >ダウンロード</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/game" >ゲーム</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/dic.html" >辞書</a></div><div class="clear"></div></div></div><div class="langadivs"  ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a  onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan "  href="javascript:;"><span>简体中文</span><span>(ZH-CN)</span></a><a  onclick="javascript:setlang('en');" class="language course-right-orders chooselan "  href="javascript:;"><span>English</span><span>(EN)</span></a><a  onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan "  href="javascript:;"><span>繁体中文</span><span>(ZH-TW)</span></a><a  onclick="javascript:;" class="language course-right-orders chooselan chooselanguage"  href="javascript:;"><span>日本語</span><span>(JA)</span></a><a  onclick="javascript:setlang('ko');" class="language course-right-orders chooselan "  href="javascript:;"><span>한국어</span><span>(KO)</span></a><a  onclick="javascript:setlang('ms');" class="language course-right-orders chooselan "  href="javascript:;"><span>Melayu</span><span>(MS)</span></a><a  onclick="javascript:setlang('fr');" class="language course-right-orders chooselan "  href="javascript:;"><span>Français</span><span>(FR)</span></a><a  onclick="javascript:setlang('de');" class="language course-right-orders chooselan "  href="javascript:;"><span>Deutsch</span><span>(DE)</span></a></div></div><script>            var swiper = new Swiper('.nphpNavSwiper1', {
                slidesPerView : 'auto',
                observer: true,//修改swiper自己或子元素时,自动初始化swiper
                observeParents: true,//修改swiper的父元素时,自动初始化swiper

            });
        </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了,就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

            _self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>