HTMLの基本タグ(1)
1. HTMLとは
html: Hyper TextMakeup言語: ハイパーテキストマークアップ言語
html: Webページの「ソースコード」
ブラウザ: HTMLソースの「解釈と実行」コード ツール
2. Web ページの概要情報
Web ページの概要情報は、ブラウザ分析と検索エンジンの検索に役立ちます:
2.1
タグを使用します </p> <p><head></p> <p><tlite>最大のポータルウェブサイト＆lt;/gt;</p>＆lt;/head＆gt; 3. HTMLページのブロックと行<p>HTMLタグ分類（後続のレイアウトデザインを促進するため）</p>‐ 's<p></p>
<p>‐ ‐ ‐ - - - ブロックレベルタグ：</p>の前後の1行で「ブロック」として表示されます<p>：ブロックレベルと行レベルのタグの違い：</p>ブロックレベル：1つのラインで表示レイアウトで一般的に使用されるレベル タグ、ブロック レベル タグ <p> </p> 基本ブロック レベル タグ: <p> </p>001.Title タグ<p> </p><h1>Title</h1><p> </p>…<p> </p><h6>Title</h6><p> </p>h1 が最大、h6 が最小です<p> </p> 002 .段落タグ <p> </p><p>...</p><p> </p> 003. 水平線タグ <p> </p><hr/><p> </p> ブロックレベルレイアウトで一般的に使用されるタグ: <p> </p>001. 順序付きリスト タグ <p> </p><ol><p> </p> <li>リスト項目 1</li><p> </p></ol><p> </p>002.順序なしリスト タグ<p> </p>< ul><p> </p> <li>リスト項目 1</ li><p> </p></ul><p> </p>003 説明タグを定義します (グラフィックとテキストの混合によく使用されます)<p> </p><dl><p> </p><dt>タイトル</dt><p><dd>説明1</dd></p>
<p></p>
<p>「#」></p>
<p>...</p></form><p></p>
<p></p>007。 v<p> </p>キーポイント: 通常、構造化されたブロック要素として使用され、論理パーティション (ブロック) またはコンテナーとして使用されます。 <p> </p> <p> </p>04. 実際の開発でよく使われる4つのブロック構造を教えてください。 <p> </p> 01.div-ul(ol)-li: カテゴリ ナビゲーションやメニューなどによく使用されます。 ... フォームのレイアウト <p> 5 505。行レベルのラベル </p> 001、画像ラベル <p> & & lt; img src = "画像アドレス" alt = "プロンプト テキスト" title = "プロンプト テキスト" & gt;プロンプトテキストが確実に表示されるように Title 属性を使用することをお勧めします </p> <p> alt: 画像が表示されていない場合、画像上に表示されるテキスト </p> Title: 画像上に表示されるテキスト 002 上にマウスが留まります <p> 002. :Show特定の行内の固有のスタイル</p> <p> <span>テキストなどの行レベルのコンテンツ</span></p> <p>003. 改行タグ<br/></p> <p> </p>06. w3c 標準が必要なのはなぜですか? <p>w3c:World Wide Web Consortium、World Wide Web Consortium </p> <p>W3C の機能: Web 業界標準の策定と維持を担当します </p> <p> W3C が提唱する Web 構造: </p> <p>1. コンテンツ (構造) とパフォーマンス (スタイル) の分離 </p> <p> 2. HTML コンテンツ構造にはセマンティクスが必要です </p> <p>07. 文書型宣言を追加する必要があります </p> <p>文書宣言は文書の先頭にある必要があります: Strict (厳密型)、Transitional (移行型) の 3 つのレベルがあります。 , Frameset（フレームタイプ） </p> <p> </p> <p> HTML基本タグ(2) </p> <p>01.ハイパーリンク--ページ間のナビゲーションを実現します</p>
<p>構文: <a href="リンク アドレス" target="ターゲット ウィンドウの位置">ホット テキストまたは画像をリンク</a></p> 例: <p> </p>02. 相対パス: 現在のディレクトリからの相対アドレス。一般的に使用される <p> </p><a href="login/login.htm">Login</a><p> </p>絶対パス: ターゲット アドレスの完全な説明を指し、使用数は少なくなります <p> </p><a href="memAdmin/ログイン/ログイン.htm">ログイン</a><p> </p><a href="http://www.sohu.com">Sohu</a><p> </p>重要: 上部にアクセスしたい場合は、現在のパスのレベル パス ../<p> </p> <p> 03. ハイパーリンクの 3 つのアプリケーション </p> <p>002. アンカー リンク </p> <p> 001. ページ間のリンク </p> <p> href="login/login.htm">[ログイン]</a></p> <p> 適用される場面: Web サイトのナビゲーションによく使用されます</p> <p> 002. アンカーリンクの実装 (同一ページアンカーリンクとページ間アンカーリンクに分けられます) ) </p> <p> 同じページへのアンカー リンク: </p> <p> 1. タグ (アンカー) を定義します: <a name="タグ名">ターゲット位置</a></p> <p> 2. タグの位置へのリンクを設定します: <a href="# タグ名">現在地</a></p> <p> 該当する場合: ページのコンテンツが大きく、1 画面を超える場合に適しています</p> <p> ページ間リンク: </p> <p> 1.タグの位置: <a name=" タグ名">[スターゾーン]</a></p> <p> アンカーリンクは同じページまたはページをまたいで使用できます </p> <p> 2. マークされた位置にリンクを設定します: <a href="anchor.html#star"> ;セレブエリア</a></p> <p> 003. 機能リンク</p> <p>電子メール、QQ リンクなど</p> <p>書くべき...</p> <p>04.コメント</p> <p><!--コメント内容--!></p> <p>はコメントされています。行はコードの可読性を高めるために使用されており、</p> <p>05は表示されません。特殊記号</p> <p>スペース: </p> <p>より大きい: > ;</p> <p> 以下: <</p> <p>引用符 ("): "</p> <p>著作権番号 (): ©</p> <p> <、> などの記号は HTML で使用されているため、他の記号に置き換える必要があります。すべて; で終わります。 </p> <p> </p> <p>06. 共通のフォーム要素 </p> <p> 単一行テキスト ボックス (テキスト) </p> <p> パスワード ボックス (パスワード) </p> <p><textarea></textarea></p> <p>ラジオボタン（ラジオ）</p> <p>チェックボックス（チェックボックス）</p> <p>送信ボタン（送信）</p> <p>ドロップダウンリスト（選択）</p> <p><select></p> <p><option vlalue=”1”>1月</option> </p> <p></select></p> <p>リセットボタン(リセット)</p> <p> </p>07. フォームの基本構文<p> </p><form action="フォーム提出先アドレス" method="提出方法">: 提出は2つだけですメソッド: 投稿と取得<p> </p> テキスト ボックスやボタンなどのフォーム要素<p> </p></form><p> </p> アクション: 送信後に送信を処理するサーバー上のハンドラーを指定します<p> </p>メソッド: サーバーに送信するメソッドを指定します: 通常は post メソッドまたは get メソッドですが、post メソッドの方が安全です。 <p> </p>08. フォームの実行原理<p> </p>クライアント: ログインを要求し、フォームを通じてアカウント情報を入力します<p> </p> クライアントとサーバーは通信する2人のようなものであり、それによってインタラクティブなアクティビティが確立されます<p> </p>サーバー: アカウント情報を確認します送信してから、フィードバックを送信してください。 <p> </p>09. フォーム要素の基本フォーマット<p> </p><input name="フォーム要素名" type="タイプ" value="値" size="表示幅" maxlength="最大長"checked="選択有無"/ ><p> </p>10. フォーム要素を一つずつ紹介<p> </p>テキストボックス<p><input name="name" type="text" value="初期値" size="number"></p> <p>nameを使用サーバー側でデータを取得します。例: request.getParameter("userName")</p> <p>Password box</p> <p><input name="name" type="password" value="initial value" size="number"> </p> <p>button</p> <p> <input name="名前" type="ボタンの種類" value="ボタンのテキスト" src="画像ボタンの画像URL"></p> <p>通常ボタン: button</p> <p>送信ボタン: submit</p> <p>リセット（クリア）ボタン：リセット</p> <p>写真ボタン：画像</p> <p>ラジオボタン</p> <p><input name="グループ名" type="radio" value="text" selected="..."></p> <p>同じ名前は同じグループに属していることを示します</p> <p>特徴: 単一選択</p><p> チェックボックス</p> <p><int type="checkbox" name=" "value=" " selected=" "></p> <p>機能: 複数選択</p> <p>ファイルフィールド</p> <p><input type="file" name= "" ></p> <p>例:<p><input type="file" name="files"/><br/></p> <p><input type="submit" name="upload" value ="アップロード"/></p></p> <p><select name="リスト名を指定" size="行数"></p> <p><option value="オプション値" selected="選択済み"> 。 ..</option></p> <p></select></p> <p>機能: ユーザー入力エラーを回避するための固定オプションを提供します</p> <p>複数行のテキストボックス</p> <p><textarea name=""cols="列幅" rows= 「線幅」></p> <p>テキストコンテンツ</textarea></p> <p> </p> <p>隠しフィールド</p> <p> サーバーがクライアントの情報を「記憶」するのは便利ですが、クライアントにデータを見られることは望ましくありません </p> <p> < ;input type= "hidden" name="" value=""></p> <p> </p> <p>読み取り専用属性と無効な属性</p> <p>readonly: 特定のボックス内のコンテンツはユーザーのみが表示でき、変更できないことを望みます</p> <p>無効: 使用条件が満たされていないため、ユーザーの使用を制限します </p> <p> </p> <p><textarea name="content"cols="60" rows="8" readonly="readonly"></p> <p>へようこそ利用規約、Guimei の権利と義務を読みます</p> <p>< /textarea><br/><br/></p> <p>上記の契約に同意します<input name="agree" type="checkbox"/ ></p> <p><input name="btn" type="submit " value="Register" disabled="disabled"/></p> <p> </p> テーブルのアプリケーションとレイアウト <p> </p>1. テーブルを使用する理由<p> </p>テーブルの一般的なアプリケーション: <p> </p>01 フォーラム <p> </p>02. ショッピング Web サイト <p> </p>03. ポータル アプリケーション フォーム <p> </p> <p> </p> テーブルの基本構造 <p> </p> 行、列、セル <p> </p>特徴: 通常この場合、同じ行の高さ、同じ列の幅は同じです <p> </p> <p> </p>3. テーブルの基本構文 <p> </p><table><p> </p><tr><p> </p>< td>百度</td><p> </p><td>新那</td><p> </p><tr><p> </p><tr><p> </p><td>Google</td><p> </p><td>56 ネット< ;/td><p> </p>< /tr><p> </p></table><p> </p> <p> </p> <p> </p> <p>テーブルを作成するには? </p> <p><table> はテーブルの先頭を表し、border="2" は境界線の幅が 2 であることを意味します</p> <p> </p>4. テーブルは行と列にまたがります (強調、強調!!!) <p> </p> 列をまたぐ方法<p> </p> ;td>数学< ;/td><p> </p> <p> </p> <p> </p>rowspan 属性は、行数を示します <p> </p> <p> </p>5. テーブルの詳細ラベル <p> </p>テーブル タイトル: <caption> <p> </p>ヘッダー: <th><p> </p>ヘッダー: <thead><p> </p>データ件名: <tbody><p> </p>フッター: <tfoot><p> </p> <p> </p>6. テーブルレイアウト<p> </p>グラフィックの実装方法そしてテキストレイアウト? <p> </p>実装手順: <p> </p>01. 行と列の数を決定します: 5 行 2 列 <p> </p>02. 5 行 2 列のテーブルを作成します <p> </p>03. 行と列にまたがるセルを決定します: <p> </p> 1行、1列、セルは2列にまたがります <p> </p> 2行と1列のセルは4行にまたがります <p> </p>04. rowspanとcolspanを追加して、冗長なセルを削除します。 <p> </p> <p> </p><table border="1px"><p> </p> <tr><p>＆lt; td rowspan = "4"＆lt; ;/tr> </p>
<p> </p>< ;/table><p> </p> <p> </p> 7. フォームレイアウトを実装するには? <p> </p> レイアウトにテーブルを使用する場合、データを表示するための要件は何ですか?実装のアイデアは何ですか? <p> </p> 使用場面: データ表示要件は定期的であり、テーブル レイアウトの特性と一致しています <p> </p> レイアウト実装のアイデア: <p> </p> 01. テーブルの行と列は何行必要ですか? <p> </p> 02. 行または列にまたがるセルはどれですか? <p> </p> 03. 実装するテーブル コードを作成します <p> </p> <p> </p> 注: 1. 同じ列内のセルの幅は、その列内で最大の幅を持つセルによって決まります <p> </p> 2. 同じ行内のセルの幅は行内で最も高い高さのセルによって決定されます <p> </p> <p> </p> 8. ネストされたレイアウト <p> </p> ネストされたテーブル レイアウトの欠点: <p> </p> 01、大量のコード <p> </p> 02、階層構造が比較的複雑 <p> </p> 03、役に立たないGoogle やその他の検索エンジンでデータを検索して見つけるため <p> </p> 9. テーブル レイアウトが適しています 用途: <p> </p> 01、通常のデータ表示 <p> </p> 02、フォーム ページ <p> </p> ヒント: テーブル レイアウトは、不規則で複雑なページには適していません。この場合 <p> </p> DIV+CSS レイアウトを使用する必要があります <p> </p> <p> </p>フレームワーク <p> </p>1. フレームを使用する理由<p> </p> フレームの 2 種類の使用: <p> </p> 01. マルチウィンドウ ページの表示 - <frameset> フレームセットを使用します <p> </p> 02. ページの再利用 - <iframe/> を使用します <p> </p> <p> </p> 2.フレームファイル<p> </p> 複数のページファイルで構成されています<p> </p> メインファイル(index.html): <p> </p> 01.top.html 02.left.html 03.right.html<p> </p> <p> </p> 3. フレームの基本構造 <p> </p>フレーム Web ページを作成する手順: <p> </p> 01. 各サブウィンドウに対応する HTML ファイルを作成します <p> </p> 02. フレーム ページ ファイル全体を作成し、サブウィンドウ ファイルを参照します <p> </p> フレーム ページの基本構文: <p> </p> ＆lt; frameset cols = "25％、50％。左、中央と右側の3部は、2つの部品に分割するために、Out Out Off Off Off -Off -Off -Off -‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ Outを使用して使用して使用して使用して使用しています。 <p> , *" border="5"></p> <p> <frame src="subframe/the_first.html" name="top" /></p> <p> <frame src="subframe/the_first.html" name=" middle" /></p> <p> <frame src="subframe/the_third.html" name="bottom" /></p> <p></frameset></p> <p><noframes></p> <p> <body>フレームはサポートされていないため、本文のコンテンツのみが表示されます </body></p> <p></noframes></p> <p> 注: 01. フレームと本文は共存できません</p> <p> 02. 互換性のために、<noframes> を使用できます。タグ </p> <p> でウィンドウを水平に分割します ：</p> <p> <framesetcols="200,*,200" border="5" bordercolor="#FF0000"></p> <p> <frame name="leftFrame" src="subframe/ the_first.html" /> </p>
<p></p>
<p></p>
<p></p>
<p>フレームマルチウィンドウページを実装します。 "name =" leftframe "scrolling =" no "</p> <p> </p> <p> </p> <p> & & LT; Frame SRC =" Subframe/Rightml "Name =" Rightframe " /& Gt; </p> & lt;/Frameset & GT ;<p> </p> < ;/frameset><p> </p> <p> </p> ウィンドウ間の関連付けを実現する方法: <p> </p> 01. ウィンドウ名 (フレームのホームページ) を設定します <p> </p> <frameset rows="20%,*" farmeborder="0"> <p> <frame src="subframe/right.html" name="rightFrame"></p> <p> href="buy.html" ">Go for a</a></p> <p> リンクを次のように設定します右側のウィンドウで開きます </p> <p> </p> <p> target のその他の使用法: </p> <p> 新しいウィンドウで表示: _blank</p> <p> 独自のウィンドウで表示: _self</p> <p> 上位ウィンドウで表示: _top</p> <p> 親ウィンドウで表示: _parent</p> <p> </p> <p> 3. <iframe/>を使用する理由</p> <p> 01.<frameset> は複数のファイルを使用する必要があり、ディレクトリ構造が複雑です </p> <p> 02. 埋め込みはより柔軟で、Web ページのどこでも使用できます </p> <p> 03. このウェブサイトの複数のページでテンプレートとして再利用できます </p> <p> </p> <p> iframe の基本的な使い方 </p> <p> <iframe src ="参照ページアドレス" name="フレーム識別名"</p> <p> Frameborder=" border"scrolling="no"></p> <p> 注: <frameset> とは異なり、iframe は <body> タグ内に配置されます</p> <p> </p> <p> 共通プロパティ </p> <p> インライン ウィンドウ表示の設定方法 </p> <p> <a href ="subframe/the_third.html" target="mainFrame"></p> <p> 以下の 3 ページ目を表示します </p> <p> </a></p> <p> <iframe name="mainFrame" width="800px" height="150px"</p> <p>scrolling="yes" noresize="noresize"</p> <p> src="subframe/the_second.html"/> </p> <p> </p> <p> CSS スタイル テーブル (1) </p> <p>1. CSS スタイル シートを使用する理由</p> <p>CSS フルネーム (カスケード スタイル シート) </p> <p> </p>スタイル シートはコンテンツとスタイルを分離できるため、チーム開発が容易になります<p> </p>スタイルの再利用により、Web サイトの事後メンテナンスが容易になります<p> </p>美しく複雑なページを実現するためのページの正確な制御<p> </p> <p>説明: CSS はページを美しくするために使用され、ページ要素のより詳細な設定を行うことができます。スタイルは主に要素のフォントの色、背景色、境界線などを記述します。 </p> <p>2. CSSの目的</p> <p> </p>外観の美化<p> </p>レイアウト、配置<p> </p> CSSの基本構文: <ol> <li> <head></li> <li><style type="text/css"></li> <li>セレクター (それは変更されたオブジェクトです) {</li> </ol> オブジェクトの属性 1: 属性値 1; <p> </p> オブジェクトの属性 2: 属性値 2 <p> </p>}<ol> <p> </style></p> <p> </head></p> <p>例子：</p> <p> Li</p> <p>{</p> <p> Color:red;</p> <p> Font-size:30px;</p> <p> Font-family:隶书;</p> <p>}</p> <p> 3.选择器的分类</p> <p> 选择器分为：标签选择器、类选择器、ID选择器(重点)</p> <ol> <li>标签选择器</li> </ol> <p><style type=”text/css”></p> <p> Li{</p> <p> Color:red;</p> <p> Font-size:28px;</p> <p> Font-family:隶书;</p> <p>} </p> <p></style></p> <p>作用：用于修饰同类HTML标签的共同风格</p> <ol> <li>类选择器</li> </ol> <p><style type="text/css"></p> <p> .blue{color:blue;} </p> <p> ……</p> <p></style></p> <p> ……</p> <p><ul></p> <p><li class="blue">家用电器</li></p> <p><li>各类书籍</li></p> <p><li class="blue">手机数码</li></p> <p><li>日用百货</li></p> <p></ul></p> <p>注意：类名有点号</p> <ol> <li>ID选择器</li> </ol> <p> <style></p> <p>#menu{</p> <p> width:200px; background:#ccc;</p> <p> font:bold 14px 宋体;</p> <p>}</p> <p></style></p> <p>… …</p> <p><div id="menu"></p> <p> <ul></p> <p> <li>家用电器</li></p> <p> ……</p> <p> </ul></p> <p></div></p> <p>4.文本属性</p> <p>字体、字号：</p> <p> Font(缩写形式)</p> <p> Font-weight(粗细)</p> <p> Font-size(大小)</p> <p> Font-family(字体)</p> <p> 行距、对齐等：</p> <p> Line-height(行高)</p> <p> Text-align(对齐)</p> <p> Letter-spacing(字符间距) 我 是</p> <p> Text-decoration(文本修饰) </p> <p> </p> <p> White-space(空白处理) 属性值：nowrap:不换行</p> <p><style tylie="text/css"></p> <p>li{</p> <p> font: 12px 宋体;</p> <p> text-align:left;</p> <p> line-height:28px;</p> <p> }</p> <p>.title{ </p> <p> letter-spacing:5px;</p> <p> white-space:nowrap;</p> <p> text-decoration:underline;</p> <p> }</p> <p>.bigFont {</p> <p> font-size:16px;</p> <p> color:red; </p> <p> }</p> <p></style></p> <p> </p> <p>5.背景属性</p> <ol> <li>background(缩写形式)</li> <li>background-color(背景色)</li> <li>background-image(背景图)</li> <li>background-repeat(背景图重用方式)</li> <li>background-position(位置坐标、偏移量)</li> </ol> <p> </p> <p>div{ </p> <p> background:url(images/bg.jpg) no-repeat; </p> <p> background-position: -70px -60px</p> <p>}</p> <p>6 .背景属性的经典应用</p> <p>图标截取-背景偏移量技术：理解清楚是左移还是右移，然后设置div的宽度和高度以适应图片的显示。</p> <p><html></p> <p><head></p> <p><title>文本属性
购 物 车
帮助中心
登录
＆lt;/body＆gt;
＆lt;/html＆gt; -style:circle;一緒にブラッシングを終了する, -Stedyle: Square; ■ ブラシ
10 進数 (& LT; OL & GT; デフォルトタイプ) list-style: 10 進数; 1. ブラシ
共通属性を形成します。
: テキストの色
border-style: 実線の境界線 (デフォルトはなし)、および点線 (点) に相当します
border-color: 境界線の色
border-width: 境界線の幅0)
CSS スタイル表 (2)
1. CSS スタイルの制御方法
ボックスモデル
Web ページ内のすべての要素を 1 つずつボックスとして見ることができます
ボックス モデルには以下が含まれます。
要素の内容
パディング (内側のエッジとも呼ばれます) 間隔):padding
ボーダー: border
ボーダー (外側のマージンとも呼ばれます): margin
スタイル コントロールのアイデア
インボックス スタイルの変更: Web 要素の色、フォント、その他の外観
ボックスの位置レイアウト: OK ボックスの位置と他の Web ページ要素との関係-
2. ボックス モデルの詳細な説明
box 属性が必要な理由
1. ボックス モデルは Web ページ レイアウトの基礎です
2. ボックス属性はボックス モデルのキー属性です
- マージン (外側の距離) /boundary)
各属性は 4 つの方向に分割されます
Margin-top
Margin-Right
Margin-BOTTOM
- Margin -left
Margin: 1px, 2px, 3px, 4px (各値は次のとおりです)右、下、左、時計回り)
マージン: 値 1、値 2、値 3; (意味: 上が値 1、左と右の値が 2、下が値 3)
マージン: 1px,2px; (意味: 上下の値が 1、左右の値が 2)
- Margin:0 auto; つまり、上下です。は 0、左右は自動で、中央に表示するには HTTP ヘッダー プロトコルが必要です。
- Margin: value 1; (意味: 上、右、下、左はすべて値 1)。 -left: 1px;
Border (ボーダー)
変更属性:
Border-color
Border-width
Border-style
-top
Border-right
Border-bottom
Border -left
一般的なアプリケーション
Border-style:none;
Border:1px 実線赤;
Border-right:5px 点線青;
(実線、点線、点線)
border 属性を使用するフォームを変更するには
< /head>
