HTMLタグと使用

HTMLの文書構造

<!DOCTYPE HTML> 
<HTML LANG = "ZH-CN"> 
<HEAD> 
  <メタ文字コード= "UTF-8"> 
  <タイトル> CSS样式优先级</ TITLE> 
</ HEAD> 
<BODY> 

</ BODY> 
</ HTML>

  

1. <!DOCTYPE HTML> HTML5の文書の宣言。

文書の2. <HTML>、</ html>タグには、開始と終了タグです。その中でルート要素のHTMLページ、文書(ヘッド)と、本体(ボディ)のヘッドです。

3. <ヘッド>、</ HEAD>は、HTML文書の始まりを定義します。それらの間のコンテンツは、ドキュメントウィンドウのブラウザでは表示されません。これは、文書の元(メタ)データが含まれています。

4. <タイトル>、</タイトル>は、ページタイトルは、ブラウザのタイトルバーに表示されて定義されています。

<BODY>、</ BODY>の間のテキストは、目に見えるページの本文の内容です。

HTMLフォーマット・タグ

1.HTMLタグは、<HTML>、<div>などのように角括弧で囲まれたキーワード、あります

2.HTMLタグは、次のようなペア、通常、次のとおりです。の<div>と</ DIV>、タグはまず、第2ラベルの端を開始しています。終了タグはスラッシュます。

<BR/>、<hr />、<IMG SRC = "1.JPG" />等3.ラベルの一部はまた、同様に、別々に提示されます。

4.なしの属性かもしれ属性は複数のラベルがあるかもしれません

タグの構文:

1. <タグ属性名= 1 "の属性値1" 項目2 = "属性値2" ......>コンテンツ部分</タグ名>

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

いくつかの非常に重要な特性:

1.id:ユニークなID定義されているタグ、独自のHTMLドキュメントツリー

2.class:html要素のための1つまたは複数のクラス名(クラス名)(CSSスタイルクラス名)を定義

3.style:指定された要素のインラインスタイル(CSSスタイル)

[A] headタグ内で使用

 

メタタグの説明:

  • <META>要素は、検索エンジンのページと説明とキーワードを更新する頻度に関するメタ情報を提供します。
  • ドキュメントの先頭に<META>タグには、任意のコンテンツが含まれていません。
  • <META>は提供される情報は、ユーザーには見えません。

メタタグからなる:metaタグには2つの属性があり、彼らはHTTP-当量と名前属性である、異なる属性が異なるパラメータ値を持って、これらの異なるパラメータ値が異なるページ機能を実現しています。 

1.http-equiv属性:HTTPファイルの先頭の役割に相当し、それは正しく、対応する属性値のコンテンツをWebコンテンツを表示するために役立つブラウザ、いくつかの有用な情報に戻すことができ、コンテンツが実際のコンテンツです各パラメータの変数値

<! - エンコードタイプ指定された文書(知っている必要があります)- > 
< メタHTTP-当量=「Content-Typeの」文字セット= UTF8 " >   
<! - 2秒に対応するウェブサイトへのジャンプの後、学習(引用符に注意を払います)- > 
< メタHTTP-当量= "更新" のコンテンツを= "2; = HTTPSのURL://www.oldboyedu.com" > 
<! - 理解して)最も先進的なモードで文書をレンダリングするためにIEを伝えます- > 
< メタHTTP-当量= "X-UA-互換" コンテンツ= "のIE =エッジ" >

2.nameプロパティ

主にそれに対応するページのコンテンツの属性値を記述するために使用される、主コンテンツのコンテンツ情報と分類情報を見つけるために検索エンジンロボットを容易にすることです。

[ジ]タグの本体内で使用

<B>太字</ B> 
<I>イタリック</ I> 
<U>下線</ U> 
<S>削除</ S> 
<P>段落タグ</ P> 
タイトル1 </ H1 <のH1> > 
<H2>表題2 </ H2> 
<H3>表題3 </ H3> 
<H4>表題4 </ H4> 
<H5>表題5 </ H5> 
<H6>表題6 </ H6>。
<! -ラップ- > 
<BR> 
<! -水平線- > <時間>

 特殊文字:

 

divタグやラベルがまたがります

divタグはブロックレベル要素を定義するために使用され、実用的な意義がありません。主にCSSスタイルを通じてそれに異なった性能を与えること。
スパンはない実用的な意義のインライン(内側の線)の要素を定義するために使用されます。主にCSSスタイルを通じてそれに異なった性能を与えること。

ブロックレベル要素とインライン要素との間の差:
別個のラインスタートレンダリング要素に基づいて、いわゆるブロック要素は、インライン要素は、新しい行を受けません。別のWebページでこれらの2つの要素を挿入すると、ページ上の任意の影響を与えることはありません。
これらの2つの要素が生まれたCSSスタイルのために特別に定義されています。

注意:

ネストされたタグについて:ブロック要素は、典型的には、いくつかのインライン要素やブロック要素を含んでいてもよいが、要素は、インラインブロック要素を含めることはできません、それは他のインライン要素を含めることができます。

pはブロックレベルのタグのラベルを含めることはできません、ラベルは、p pタグを含めることはできません。

 

imgタグ

<IMG SRC =「イメージパス」ALT =「プロンプト画像が正常にロードされていない場合、」2つだけのプロパティを自動的様タイトル=「マウスが中断されたメッセージ」幅=「幅」高さ=「ハイ(幅と高さズーム比)「>

 

ラベル

ハイパーリンクのラベル

Webページからのいわゆるハイパーリンクがゴールへの接続点との間の関係を意味し、この目標は、別のWebページであることができ、それが同じページ上の別の場所することができ、それはまたしても、画像、電子メールアドレス、ファイル、またはすることができアプリケーション。

<a target="_blank" href="http://www.oldboyedu.com">点我する</a>

href属性は、リンク先ページのアドレスを指定します。アドレスは、いくつかのタイプがあります

  • 絶対URL - (などのhref =「http://www.jd.comなど)他のサイトへのポイント
  • 相対URL - 正確なパスで、現在のサイト(HREF =「index.htmを」)を指し
  • アンカーURL - ページのアンカーへのポイント(HREF =「#トップ」)

ターゲット:

  • _blankは、新しいタブで開いてランディングページを意味し、
  • _selfは現在のタブでランディングページを開くことを意味し

リスト

1.順不同リスト

<ULタイプ= "ディスク"> 
  <LI>最初</ LI> 
  <LI>第二</ LI> 
</ UL>

プロパティのタイプ:

  • ディスク(黒丸、デフォルト値)
  • 円(白丸)
  • 四角(黒四角)
  • なし(ノースタイル)

2.順序付きリスト

<OLタイプ=」1" START = "2"> 
  <LI>最初</ LI> 
  <LI>第二</ LI> 
</ OL> 

プロパティのタイプ:

  • 番号のリストは、デフォルト値
  • キャピタルレター
  • 小文字
  • Ⅰ首都ローマ
  • Ⅰ小文字のローマ

3.タイトルのリスト

<DL> 
  <DT>タイトル1 </ DT> 
  <DD>内容。1 </ DD> 
  <DT>タイトル2 </ DT> 
  <DD>内容。1 </ DD> 
  <DD>概要2 </ DD> 
</ DL>

  

[三]テーブル

データテーブルは、複数のセルが別の行を形成し、ジェリー部は、テキストコンテンツ、リスト、パターン、形、数字、記号、テキスト、および他のプレフォームなどを含んでいてもよい、テーブルは行で構成され、二次元空間です。
テーブルの最も重要な目的は、カテゴリデータを示す表です。クラスデータテーブルは、テーブル形式最も適切な組織を指す(すなわち、行と列に編成)データ

テーブルの基本的な構造:

<TABLE> 
  <THEAD> 
  <TR> 
    <TH>序号</番目> 
    <TH>姓名</番目> 
    <TH>爱好</番目> 
  </ TR> 
  </ THEAD> 
  <TBODY> 
  <TR> 
    <TD> 1 </ TD> 
    <TD>エゴン</ TD> 
    <TD>杠娘</ TD> 
  </ TR> 
  <TR> 
    <TD> 2 </ TD> 
    <TD>元</ TD> 
    <TD>日天</ TD> 
  </ TR> 
  </ TBODY> 
</ TABLE>

属性:

  • ボーダー:テーブルのボーダー。
  • CELLPADDING:パディング
  • CELLSPACING:余白。
  • 幅:ピクセルの割合(長さと幅は、好ましくは、CSSで設定されています)。
  • ROWSPAN:どのくらいの垂直クロスセルライン
  • COLSPAN:どのように多くの列のセルスパン(つまり、マージされた細胞です)

[四]フォーム

特徴:

Webサーバーと対話するためにユーザを有効にすると、サーバーへの転送のためのデータを形成します

フォームは、そのようなので、上のテキストフィールド、チェックボックス、ラジオボタン、送信ボタンおよびなどの入力ラベル、一連のを含めることができます。

また、テキストエリア、選択フィールドセットのラベルとラベルが含まれていてもよいフォーム

属性:

 

 

 

 フォーム要素:

基本的な考え方:
動的なWebサイトのコンテンツを作成することが非常に重要であるので、HTMLは、HTMLのフォーム要素、より複雑な部品、多くの場合、フォームやスクリプト、動的なページ、データ処理と組み合わせた他の機能です。
一般的な情報フォームを入力し、ユーザーを収集するために使用される
フォームの作品を:
訪問者がWebフォームを閲覧しながら、必要な情報を記入して、提出するボタンを押すことができています。この情報は、インターネットを介してサーバに送信されます。 
エラーがある場合は、データを処理するために、サーバ上の特別なプログラムは、エラーメッセージを返し、エラーを修正するように依頼します。データが完全かつ正確である場合には、入力サーバは、フィードバック情報を完了します。

 

[五]入力

<入力>要素には、type属性は、様々な形態に変更されるに応じて異なるであろう。

 

 

 

プロパティ説明:

  • フォームが送信される違い、「キー」、およびIDに注意してください。名前
  • 値:フォームの対応する項目の値が送信されます
    • タイプ=「ボタン」、「リセット」「送信」、コンテンツのテキストがボタンの上に表示されている場合
    • タイプ=「テキスト」、「パスワード」、「隠された」、初期値入力ボックスなど
    • タイプ=「チェックボックス」、「ラジオ」、「ファイル」、入力に関連付けられた値
  • 点検:ラジオとチェックボックスは、デフォルトのエントリで選択されています
  • 読み取り専用:テキストと設定読み取り専用パスワード
  • 無効:すべての入力が適用されます

[六] selectタグ

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

属性说明:

  • multiple:布尔属性,设置后为多选,否则默认单选
  • disabled:禁用
  • selected:默认选中该项
  • value:定义提交时的选项值

label标签

定义:<label> 标签为 input 元素定义标注(标记)。
说明:

    1. label 元素不会向用户呈现任何特殊效果。
    2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

 

おすすめ

転載: www.cnblogs.com/wujc3/p/11454969.html