1. html の基本
html は、Web ページの作成に使用されるマークアップ言語であり、コンパイルを必要とせず、ブラウザーによって直接実行されます。大文字と小文字は区別されません。小文字を推奨します。 HTML ファイルでは、ファイル名の接尾辞として html または htm を使用する必要があります。
html のメイン構造:
(1)DTD ヘッダー: 現在のページを解析するために使用する標準をブラウザーに伝えるために使用されます
(2)head 部分: ブラウザーに対応する情報をいくつか伝えます
(3)body 部分:データを参照するため
2. HTML 言語の構文
2.1 HTML タグ
タグは、山括弧 < で囲まれた HTML の最も基本的な単位であり、最も重要なコンポーネントです。
タグは閉じていて、次の 2 つの形式があります: <タグ名>内容<タグ名> ;<タグ名 />
タグ名、表示されるデータ、表示データの 3 つの部分で構成されます
<タグ名 属性名 1 = "属性値" ... 属性名 n = "属性値" > -->
2.3 HTML コード形式
ソース コードでは改行とスペースが機能しないため、 HTML コードを記述するときにキャリッジ リターンやスペースを植字に使用できるため、コードが明確になり、チームワークが促進されます。 「Tab」キーを優先して、厳密なインデント規則を維持する必要があります。
コードを正しく書くことよりも、コードを美しく書くことの方が重要です。
3. head 部分
は、 で始まり で終わる HTML ドキュメントのヘッダー情報を表します。
タイトル情報、メタ情報など、現在のドキュメントの一部の情報が含まれています。通常の状況では、ヘッダー情報は HTML ドキュメントに表示されません。
よく使用されるタグ:
title タグ - HTML ドキュメントのタイトルを表します
base タグ - 相対 URL を完全な絶対 URL に変換します
meta タグ - ファイル情報の名前、内容、その他の情報を定義するために使用されます
link タグ - ドキュメント内で外部リソース (CSS など) の使用を宣言するときにこのタグを使用します
style タグ - ドキュメント内でスタイルを宣言する場合にこのタグを使用します
script タグ - ドキュメント内で JavaScript スクリプトを使用します
4 .body タグの共通属性 (デフォルト値に注意してください)
text--------ページのテキストの色を設定します
bgcolor--------ページの背景色を設定します
background--- ----ページの背景画像を設定します
bgroperties-------ページの背景画像を固定し、ページのスクロールと一緒にスクロールしないように設定します
link------ -ページのデフォルトのリンク色を設定します
alink-----------クリック時のマウスの色を設定します
vlink-----------アクセス後のリンクテキスト
topmargin---- -------ページの上マージンを設定します
leftmargin-------------ページの左マージンを設定します
5. テキストレイアウト編集
5.1 フォーマットタグ
スペース、キャリッジリターン、ラインフィード、タブキーが表示されます
HTML リスト項目を表し、各リスト項目は のペアを使用します;
html 順序なしリスト
段落間の分割に使用される水平分割線ラベル
; タイトル単語ラベル、n は 1 ～ 6、6 レベルのタイトルを定義し、空白行を自動的に折り返して挿入します
斜体フォント ラベル
フォント ラベル テキストの上付きフォント ラベル
テキストの下のテーブルのフォント ラベル
プロパティを通じてテキストのサイズ、色、フォントを指定できますラベルの タイプライターテキスト
引用や例では、通常、強調を表すために斜体が使用され、強調を表すために斜体が使用されます。
6. 画像を挿入します
img タグ、単独で表示されます、![]()
共通属性:
alt-----画像を表す代替テキストsrc-----画像ソース（つまり、画像の位置）
border----------画像の境界線の幅
height----------画像の高さ
width--- ------画像の幅
Web ページをデザインするときに一般的に使用される画像形式: gif、jpeg、png
7. アンカーポイントとハイパーリンクを確立します
7.1 タグ --- ----HTML リンクを表し、ペアで表示されます …
共通属性:
href--------URL リンク ソースを表します
url は Web にすることもできますページ、その他のファイル、HTML ファイルを指す 場所、電子メール アドレス
target--------- は、リンクを開く方法を示すために使用されます
target=_blank: リンクのコンテンツを新しいウィンドウで開きます
target=_parent: リンクのコンテンツをファイルの前の画面として扱います
target=_self: リンクされたコンテンツを現在のウィンドウに表示します
target=_top: 画面全体をリンクされた画面のコンテンツとして再表示します
リンク構文:
表示テキスト
7.2 Web ページ内のリンク (アンカー リンク) を検索します
を使用して定義します。例: パート 1、パート 1 にジャンプするには を使用します。ハイパーリンクで「パート 1」を見つけることができます。 「Web ページ内の位置」。
7.3 ハイパーリンク
3 つのリンク パス:
絶対パス: http://www.sohu.com/index.html
ドキュメント相対パス: adver/contents.html
サイト ルート ディレクトリへの相対パス: / support /app/customer.html
8. HTML テーブル
8.1 共通タグ
ペアで表示される HTML テーブルを表します
属性: width-----テーブル幅
height--- - --表の高さ
境界線-----表の境界線
セル間隔-----表の境界線と表の内容の塗りつぶしの間の距離は、内容の塗りつぶし間の距離でもあります
セルパディング----- -content パディングの幅
align 属性と valign 属性で設定できるテーブル タイトルの位置を定義します
テーブル内の行 | テーブル tr の th 属性: width と height-----幅と高さを表します colspan--------1 つの行が複数の列にまたがります Rowspan----- ---1 つの列が複数の行にまたがります align--- ----------水平方向の配置 (左、中央、右) valign----------垂直方向の配置 (上、中、下) align、valign については上記で説明しています 9. HTML フレーム構造 ブラウザフォームは次のことができます複数のページを組み合わせて表示します。これはフレームを使用して実行できます。行と列に分割できます。 利点: ページをリロードするときにページ全体をリロードする必要がなく、ナビゲーション バーを作成すると便利です。 欠点: 多くのページが生成されるため、管理が困難です。ブラウザの戻るボタンが無効です。一部の小型モバイル デバイス (PDA 携帯電話) では完全にインデックスを作成できません。フレームを表示する; マルチフレーム ページはサーバーの http リクエストを増加させます これらの多くの欠点のため、標準の Web デザインの概念に準拠しておらず、標準の Web デザインでは放棄されました 9.2 HTML フレーム タグ
共通属性: cols --- 列数と列サイズFrame contains rows----フレームの行数と行サイズ border ----フレームページに枠線があるかどうか framespacing----フレーム間の距離 <![CDATA[タグ-- <body> <p><iframe> タグと組み合わせて使用すると、フレームをサポートしていないブラウザでもテキストを表示できます -- 別のドキュメントを含むインライン フレームを作成します。ブラウザが iframe タグをサポートしていないかのように </p> <p>frame タグ ---frameset タグで各フレームを定義します。 ページのコンテンツ </p> <p> は単独で表示されます。<frame /></p> 共通の属性: <p> </p>frameborder- ---コンテンツ ページの境界線を定義します。値は (1|0)、デフォルト値は 1 です<p> </p>1 --各ページ間に境界線を表示します 0----境界線を表示しません <p> </p>name--- -- あるフレーム ページが別のフレーム ページにリンクするときに使用されます (別のフレーム ページはターゲットを使用してリンク ページを定義できます) <p> </p>Noresize---- ビューアがドラッグしてフレーム ページのサイズを変更できるかどうかを定義します。値は(noresize) <p> </p>scrolling---- スクロール バーがあるかどうかを定義します。値は (yes|no|auto )、デフォルト値は auto<p> です。 </p>yes---スクロール バーを表示します no----表示しませんスクロールバーの自動表示----必要に応じてスクロールバーを表示します<p> </p>src----コンテンツバーのURLを定義します<p></p>
<p>border---枠線の太さを設定します</p> <p>10. HTML フォーム設定</p> <p>10.1 フォームタグ</p> <p>Web ページはユーザーとどのように対話しますか?答えは次のとおりです。 HTML フォーム (フォーム) を使用します </p> <p>form タグ-----HTML フォームを表します </p> <p>共通属性: </p> <p>アクション ---JSP ページなど、ビューアによって入力されたデータの送信先 </p> <p>method ----データ送信方法、よく使われるpost</p> <p>10.2 inputタグ-----HTMLフォームの単行入力フィールド</p> <p>単独で現れる、<input /></p> <p>属性: </p> <p>type- ---入力フィールドの表示モードを表します（入力型、選択型、クリック型に分かれます） </p> <p>Value: </p> <p>text---テキスト入力フィールド（入力型） </p> <p>password---テキスト入力フィールド, しかし、入力 テキストはパスワード記号 * で表示されます (入力タイプ) </p> <p>file----ファイルパスを入力できます (入力タイプ) </p> <p>チェックボックス----チェックボックス、0個以上選択できます(選択タイプ) </p> <p> radio---ラジオボタン、1 つだけ選択する必要があります (選択タイプ)</p> <p>hidden---隠しドメインを表し、いくつかの非表示の情報をサーバーに送信できます</p> <p>button----ボタン(クリック型) (submit機能あり、全てのフォームをまとめて送信します) </p> <p>image----画像を使用してボタンを表示、src属性で画像の位置を指定(クリック型) </p> <p> submit---送信ボタン、value 属性を使用してボタン上のテキストを表示できます (クリックタイプ) </p> <p>reset----リセットボタン、フォーム内の情報をクリアできます (クリックタイプ) </p> <p>name- ----このフォーム項目の名前</p> <p>value----Input フィールドの値</p> <p>size----入力フィールドの長さ</p> <p>maxlength-----最大長(数値)入力フィールドに入力できるテキストの文字列</p> <p>checked-----選択入力フィールドの場合、選択されていることを表し、値がチェックされます</p> <p>readonly-----入力フィールドは選択されていますが、変更できません。値は読み取り専用です</p> <p>無効-----入力フィールドはフォーカスを取得できず、選択できず、フォームには影響しません</p> <p>アクセスキー----。 - フォームのショートカットキーのアクセス方法</p> <p>src- ---画像を使用する場合ボタンを表すには、画像 (URI) の場所を表します</p> <p>alt----送信ボタンの画像プロンプト情報を置き換えるために使用されます</p> <p>10.3 textarea タグ-----フォームの複数行入力を表しますフィールド </p> <p> ペアで表示されます。<textarea></textarea></p> <p>属性: </p> <p>cols----複数行入力フィールドの列数</p> <p>rows----行数複数行の入力フィールド</p> <p>name ----このフォーム項目の名前</p> <p>accesskey-----フォームのショートカットキーアクセス方法</p> <p>disabled-----フォーカスを取得できず、選択できません</p> <p>readonly----入力フィールドは選択できますが、変更できません</p> <p>tabindex-----入力フィールド、「tab」キーの走査順序を使用します</p> <p>10.4 タグを選択</p> <p>タグを選択---- select リスト タグ</p> <p> ペアで表示されます<select></select> </p> <p>このタグ内のオプション タグの各ペアは選択を表します </p> <p>属性: </p> <p>name---フォーム項目名</p> <p>size---高さ選択フィールド</p> <p>複数 --- 複数の選択肢を含めることができます</p> <p>無効---灰色で表示され、フォームには影響しません</p> <p>tabindex -- "tab"キーを使用した走査順序</p> <p>オプションラベル---選択リスト内の選択項目を表します</p> <p>ペアで表示されます <option> ;</option></p> <p>属性: </p> <p>label----選択項目を説明します</p> <p>value----選択の値を説明しますitem</p> <p>selected---この選択項目は選択されています</p> <p>disabled--- -入力ボックスはフォーカスを取得できず、フォームで無効であることを示す灰色で表示されます </p> <p>tabindex------使用した走査順序「Tab」キー </p> <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> </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="ハイパーリンク後にホバースタイルが表示されない問題_html/css_WEB-ITnose" href="http://m.php.cn/ja/faq/271942.html">ハイパーリンク後にホバースタイルが表示されない問題_html/css_WEB-ITnose</a></span><span>次の記事：<a class="dBlack" title="ハイパーリンク後にホバースタイルが表示されない問題_html/css_WEB-ITnose" href="http://m.php.cn/ja/faq/271945.html">ハイパーリンク後にホバースタイルが表示されない問題_html/css_WEB-ITnose</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><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><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>]]> |
