フロントエンドの開発、HTML、CSSベースの概要

ソフトウェアからの分類は、主にソフトウェア開発のために、目的に応じてソフトウェアは、システムソフトウェアおよびアプリケーションソフトウェアに分けることができますが、また、異なるソフトウェアプログラムおよびデータ格納場所に応じて、スタンドアロンのソフトウェア、Cに分けることができ、言語のプログラミングを学ぶようになりました/ Sソフトウェアアーキテクチャ、異なる方法B / S構造のソフトウェア開発、異なるソフトウェアアーキテクチャ、インタフェース：

スタンドアローンソフトウェア：ソフトウェアプログラムおよびデータは、クライアント・インタフェースに格納されています。GoQt、GXUIライブラリー
C / S（クライアント/サーバ）アーキテクチャソフトウェア：クライアントの部分があることをソフトウェアプログラムおよびデータは、サーバー側のインターフェイスの部分がある：GoQt、GXUIライブラリー
B / S（Broswer /サーバ）ソフトウェアアーキテクチャ：すべてのソフトウェアプログラムの存在とデータ・サーバ・インタフェース：Web（ウェブ）

また、ソフトウェアのB / S構造のためのインターフェース・ソリューションを提供する、ウェブフロントエンド開発フロントエンド開発として知られています。

1.1html文書の基本的な構造の概要とhtml

htmlの概要

HTMLは次のいずれかの言語、HTMLは、ハイパーテキストのハイパーリンクを指し、タグはラベルを参照し、Webページを作成するために使用される言語であることを意味し、ハイパーテキストマークアップ言語速記の最初の文字でありますラベル組成、この言語に細工されたファイルの保存は、テキストファイル、ファイル拡張子HTMLまたはHTMです。

HTML文書の基本的な構造

次のように基本的な構造をHTML：

<！DOCTYPE HTML> 
<HTML> 
    <HEAD>             
        <METAのcharset = "UTF-8"> 
        <タイトル>ページのタイトル</ TITLE> 
    </ HEAD> 
    <BODY> 
          ページの表示内容
    </ BODY> 
</ HTML>

最初の行は、宣言文書、二行目「<HTML>」タグと最後の行の「</ HTML>」一体HTML文書で定義され、「<HEAD>」タグと第一の層である「<BODY>」タグでありますページヘッダとフォーマット定義セットのページをコーディングなど、いくつかの設定を定義する、チェーンCSSスタイルファイルやJavaScriptファイルは、コンテンツ設定がページに表示されていない、タイトルのために責任がある子要素、「<ヘッド>」タグ内容は、内部の「<BODY>」ページに表示されているコンテンツを書いて、タイトルバーに表示されます。

Webページ、テキストの表示を開くには、エディタでhtmlファイルhtmlファイルは、あなたがブラウザを開くと、ブラウザはファイルレンダリングされたページの内容を記述したラベルに続く、テキストモードで編集することができます。

すばやく作成するためのHTMLファイル

新しいHTMLドキュメントの後、あなたはすぐに道のショートカットを使ってHTMLドキュメントを作成することができます。ショートカット:! + Tabキー、またはHTML：5 + Tabキー

1.2 htmlタグの取得

タグの構文：

言語を学ぶことはこれらのラベルを使用することを学ぶ、20以上のhtmlタグの使用状況、一般的に使用されるHTMLタグを学ぶことです、基本的にHTMLを使用する方法を学びましたです。

ラベルの使用：

< -ペアで1つのラベル:! - > 

<H1> h1は見出し</ H1> 
の<div>これでdivタグ</ div> 
<p型>段落タグ</ p型> 


<！ - - 2、各出現タグに： - > 
<BR> 
<IMG SRC = "画像/ pic.jpg" Altキー= "画像"> 

< - 3は、そのようなので、SRC、ALTし、hrefとしてラベルテープの特性を、！プロパティがある- > 
<IMGのSRC = "ロイヤリティーフリー/ pic.jpg" ALT = "画像"> 
<a href="http://www.baidu.com"> Baiduのネット</a>の

<！ - 4、ネストされたタグ- > 
の<div> 
    <IMGのSRC = "ロイヤリティーフリー/ pic.jpg" ALT = "画像"> 
    <a href="http://www.baidu.com"> Baiduのネット</a>の
< / DIV>

タグブロック要素（要素の行）と要素タグインライン（インライン要素）

タグは、ページ上のボックスとして表示されます。：ブロック付加として示され、それらは一般的に以下の2種類に分類される
ブロック要素：個別の行で、デフォルトのレイアウト、列に配置されたトランスデューサブロック要素のエレメントの親の幅に等しいデフォルトの幅。
インライン要素：要素間の行に配置することができ、幅と高さの設定が無効である、それはコンテンツの幅と高さによって張架されており、そこにデフォルトの要素間の小さな間隔であり、（下にテキストを整列させる）は、ベースラインと整列されます。

共通ブロック要素タグ

図1に示すように、特性が実質的要素をブロック有することに加えて、文書のタイトルを示すタイトルタグだけでなく、デフォルトのフォントサイズと余白が含ま

<H1>タイトル</のH1> 
<H2>小見出し</ H2> 
<H3> 3つのタイトル</ H3> 
<H4>フォータイトル</ H4> 
<H5> 5タイトル</ H5> 
<H6>タイトル6 </ H6>

2、段落タグは、特性が実質的要素をブロックすることに加えて、テキスト文書、段落を示すだけでなく、デフォルトのマージンを含ま

<P>私は、陽気です、23歳、張シャン、コンピュータ科学と大学の技術的専門知識の卒業生と呼ばれる
安定した、誠実、情熱的。強力な組織力とチームの精神、良好なコミュニケーションスキルや社会持つ
関係のすべての種類を扱うのが得意クロス能力を、。迅速な環境にして一つに適応することができます。</ p型> 
<p型>私は、エンタープライズサービスのための努力の中で独自の値を実現することを期待して、研究技術、愛のプログラミングが大好きです。</ P>

文書の内容を示す図3に示すように、共通ブロックコンテナラベル、ブロック要素の基本的な特徴は、他のデフォルトのスタイルを持ちません

<div>これはdiv要素は</ DIV> 
<DIV>これは二div要素</ div> 
<div>の
    <H3>自己紹介</ H3> 
    <P-は>私は張シャン、大学の卒業と呼ばれます23歳のコンピュータ科学技術は、私は、陽気だ
情熱的な、誠実で、安定しました。強力な組織力とチームの精神、良好なコミュニケーションスキルや社会持つ
関係のすべての種類を扱うのが得意クロス能力を、。迅速な環境にして一つに適応することができます。</ P> 
</ div>

一般的なインライン要素タグ

1、ハイパーリンクタグ、別のWebページへのリンクは、インライン要素の基本的な特性を持っている、デフォルトのテキストブルー、下線

<a href="02.html">第二个网页</a>の
<a href="http://www.baidu.com">百度网</a>の
<のhref = "のhttp：// WWW .baidu.com "> <IMG SRC ="画像/ logo.png」ALT = "ロゴ"> </a>の
<a href="#">默认链接する</a>

2、実質上のインライン要素を特性を有する一般的なインライン容器ラベル、他のデフォルトのスタイルません

<P>これはテキストの段落で、段落テキストを持っている<span>の特定のマークやパターン</ span>のテキスト</ P>

図3に示すように、画像タグは、特性を実質的にインライン要素を有する、ページ画像に挿入され、それは幅と高さが提供されるサポートされています。

<IMG SRC = "画像/ pic.jpg" ALT = "图片" />

その他の一般的な機能のラベル

1.ブレークタグ

<P>これは、テキストの行があり、<BR>これは、テキストの行です。</ P>

2、HTMLのコメント：

HTMLドキュメントのコードは、HTMLコード方式は、コメントを挿入することで、コードの説明やコメントの内容を説明しているコメントは、ページ上には表示されません挿入することができます。

<！ - これはコメントです - >

一般的なHTML文字エンティティ

セグメントに文字コードの文字の間にスペースがより多くのスペースが必要な場合は、次のように、Webページにレンダリングされたコードでより多くの中空空間は、あなたが複数のスペースを表示したい場合は、あなたがスペース文字エンティティを使用することができ、空白が表示されます：

< -段落のインデント前に2つのテキストのスペースが欲しい、スペース文字実体:!使用- > 
<p型> 
  WebページのHTMLファイル、テキストの表示を開くには、エディタでHTMLファイルを、あなたは<BRを使用することができます/> 
それは、あなたがブラウザを開くと、ブラウザはファイル<br />の内容記述ラベル続くテキスト編集
、Webページにレンダリングし、表示されたページが別のページに1つのページのリンクからジャンプすることができます。</ P>

ページに表示される「<」と「>」、ラベルに誤解される表示する「<」と「>」の文字エンティティはページ上の例えば、それらを使用することができます。

！ - "<"と">"文字エンティティ<と> - > 
<p型> 
    <div>タグがのhtmlです<BR> 
    3 <5 <BR> 
    10> 5 
</ p型>

1.3 HTMLレイアウト

ページレイアウトの原則

タグは、ページは、複数の行に分割されているワンボックス、最初の行のようにWebページに表示され、その後、全体として列を表現するために、再ネストされたタグのタグラインを表している列内の行を分割します最初の大きな注文後、局所の後、全体の最初に従って、小さな構造を書き込みます。

レイアウト例

例えば上記ページレイアウト、コードライトHTMLページの構造の原理に従って。

セマンティックタグ

最初の意味タグを使用する目的は、検索エンジンはより良いウェブの構造を理解し、検索でのサイトのランキングを向上させることができるようにすることですとレイアウトで簡単にコードに続いて、（もSEOとして知られている）、セマンティックタグの使用で可能な限り必要読んで維持します。
セマンティックラベル用テープ
1、H1〜H6：ヘッダが表す
P、2：段落表す
3、IMGは：画像が表す
、4：リンクを表します

セマンティックタグなし
1、DIV：コンテンツを表す
2、スパン：コンテンツの行を示し

だから我々は、適切なラベルを使用して、ページに表示された内容に基づいてしなければならない、あなたは前にコードを最適化することができます。

はじめに1.4 CSS

CSSの概要

、ウェブページのコンテンツとスタイルが開いて分割することができます可能にするために、スタイルのページ要素は、より豊かな、それによってアイデアが生まれたCSSを作成するには、CSSはカスケーディングスタイルシートているカスケーディング・スタイル・シートを意味し、略語の最初の文字です。CSSを使用すると、HTMLラベルの演奏スタイルのほとんどは、文書の構造と内容についてのみ責任を負うのhtmlを放棄したことになる、完全にCSSのフォーム、HTMLドキュメントは、より簡潔になります。

CSSの基本的な構文

CSSの定義は次のとおりです。

セレクタ{属性：値;属性：値;属性：値;}

セレクタは一緒にスタイルの名前と関連するページ要素で、それぞれ属性が1つ以上の値を持って、望ましいプロパティセットのスタイル属性です。結腸、属性値および属性と属性値の間に次の値との間のセミコロン、そして最後にセミコロンを省略することができる、サンプルコード：

/ *書かれた注釈スタイル、単一行または複数行のコメント* / 
DIV { 
    幅100ピクセル、
    高さ：100pxに、
    背景：ゴールド; 
}

導入の1.5 CSSの道

CSS 3つの方法でページを紹介する方法：

1、インライン：スタイル属性タグ、ラベルに直接書き込みパターン。

<divのスタイル= "幅：100ピクセル、高さ100ピクセル;背景：赤"> ...... </ div>

2は、埋め込まれた：スタイルタグによって、ページに埋め込まれたスタイルシートを作成します。

<スタイルタイプ= "テキスト/ cssの"> 
    のdiv {幅：100pxに。高さ：100pxに。背景：赤} 
    ...... 
</スタイル>

図3は、チェーン外：リンクタグを通じて、ページに外部スタイルファイルをリンクします。

<リンクのrel = "スタイルシート" タイプ= "テキスト/ cssの" のhref = "CSS /のmain.css">

セレクタ1.6 CSS

図1に示すように、タグセレクタ

タグセレクタは、セレクタの影響このような範囲は、典型的には、いくつかの一般的な設定を行うために使用される、またはレベルのセレクタです。
例えば：

カラー{DIV：赤} 
...... 
<DIV>これは、最初のdiv </ div>である< - -上記のスタイルに対応！> 
の<div>これは第二のdiv </ div> <！ -上記のスタイルに対応します- >

図2に示すように、クラスセレクタ

クラス名で要素を選択し、クラスは複数の要素に適用することができ、要素は複数のクラスにも使用することができる、柔軟な、再利用可能な、最も広くCSSセレクタの一種です。
例えば：

.blue {色：青} 
.big {フォントサイズ：20ピクセル} 
■は{幅100ピクセル、高さ100ピクセル、背景：金} 
...... 
<DIV CLASS = "青"> ... < / div> 
<h3のクラス= "青い大きな箱"> .... </ H3> 
<Pクラス= "青いボックス"> .... </ P>

3、レベルセレクタ

タグは主に入れ子構造で使用され、レベルセレクタ、タグセレクタと組み合わせて使用することができるセレクタを書き込むための上記の二つのセレクタの組み合わせは、スタイルを制限するだけでなく、階層を介して、名前減らします範囲。
例えば：

.CON {幅300ピクセル、高さ：80px;背景：緑} 
.CONスパン{色：赤} 
.CON .pink {色：ピンク} 
.CON .gold {色：金} 
...... 
<DIVクラス= "CON"> 
    の<span> ... </スパン> 
    <a href="#" class="pink"> ... </a>の
    <a href="#" class="gold"> ... </a>の
</ div> 
<スパン> .... </ span>の
<a href="#" class="pink"> ....する</a>

1.7 CSSボックスモデルの要素と属性

ボックスモデル

ボックスのようなページ、上のボックスとして表示される要素、CSSボックスモデルは、私たちは、対応するスタイル要素を設定するのに役立ち、現実のメタファーに行うためのボックスを使用することです。次のようにボックスの模式モデルは次のとおりです。

ボックスという名前の要素、それぞれのスタイルに対応して設けられた：ボックスの幅（幅）、ボックス（高さ）の高さ、箱枠（ボーダー）、フレームボックス（パディング）内のコンテンツとの間の間隔、及びカセットボックス（マージン）の間の間隔。

幅と高さを設定します

幅：; 200pxの/ *ボックスの幅を設定し、この幅はボックスの内容の幅、ない場合全幅（難易度）* /である
高さ：200pxの; / *ボックスの高さを設定し、この高さは、ボックスのコンテンツの高さではありませんボックス（難易度）の全体の高さ* /

ボーダーを設定し
、そのようなフレームのトップとして、脇境界線の設定を以下のように設定することができます。

border-top：10pxの赤固体;

前記ワイヤフレーム10pxの厚さは、線形ソリッドを表します。

この方法は、上記の他の3つの側面は、上記の「上部」に置き換え「左」「ボトム」ベースに右に配置されている「右」、に、左側に配置されているが提供されるように。

同じ四辺場合、四辺が一組にまとめることができます。

ボーダー：赤10pxの固体;

ピッチ内に配置されたパディング

次のように間隔を設定することのできるボックスの四辺に配置されました：

パディングトップ：20ピクセル; / *セットトップインナー間隔20ピクセル* / 
パディング左：30px; / *設定左間隔30px * / 
パディング右：40ピクセル; / * 40ピクセル* /間隔右に設定
パディング底：は50px ; / * *は50px間隔内底を設定/

次のように上記の設定を省略することができます。

パディング：20ピクセル40ピクセルは50px 30px; / * 4つの時計回りの値、それぞれが、左右の下部に設けられた   
4つの方向内側マージン値。* /

パディングは、次のように提供されている3つの値が、二つの値と値との背後に投影できます。

パディング：20ピクセル40ピクセルは50px; / *トップ、40ピクセルの左右内側マージン、パディング底を20ピクセルに対するマージンを設定する*は50px / 
パディング：20ピクセル40ピクセル; / *左と右のマージン内に、上下20ピクセルに対するマージンを設定します* 40ピクセル/で
パディング：20ピクセル; / * 4辺に余白を設定する20ピクセル* /

提供される外縁間隔
「マージン」置換上記の項目「パディング」を設定し、同一の設定方法から設定方法及びパディングの外側には余白を設定する方法です。

実際のサイズカセット
ボックスの幅及び高さ固定値、及びボックスの境界パディングが増加すると、ボックスの全体のサイズが大きくなるようにボックスの実際のサイズ：

左右の幅+パディング+枠線の周りにボックスの幅=
垂直に上下高さ=高さ+パディングボックス+ボーダー

スキル中央のブロック要素
あなたは、あなたがautoキーワードでマージン値を使用することができ、中心の相対的なレベルを設定したい場合はブロック要素のページには、「自動」のみ上から下に使用することはできない余白設定の周りに使用することができます。

■は{ 
      幅：300ピクセル。
      高さ：300ピクセル; 
      背景：金; 
      余白左：0PX。
      マージントップ：0PX。
      余白左：自動; 
      マージン右：自動;    
}

次のように略称：

■は{ 
     幅：300ピクセル。
     高さ：300ピクセル; 
     背景：金; 
     マージン：0PX自動;   
 }

浮動要素は、プロパティを設定するフロート

フロート：ブロック要素は左フローティングフロートに分け、一列に配置可能フローティング左、右フローティング：フロート：右。

設定した背景のプロパティの背景要素

背景：次のような背景色または背景要素画像、設定金、金、背景色設定要素

1.8 CSSのテキスト属性

色：のような色設定テキストの色、赤。
フォントサイズ：次のようなフォント・サイズ文字サイズの設定、12ピクセル;
フォントファミリー：;：フォントファミリ：互換性のない文字を避けるために、通常のように書か「マイクロソフトエレガントな黒の」フォントファミリは、以下のようなテキストのフォント、セット「微軟雅黒を」;
フォント重量：フォント重量太字のテキストは、次のような、提供される太字、太字量を提供：通常設定は太字ではありません
行の高さ：テキストの高い線の高さの線は、次のような、提供さ24ピクセル、高さプラステキストは、各行が24ピクセルの高さを占めている、すなわち、垂直方向のピッチは、24ピクセルのテキストであることを示し
テキストの装飾設け下線のテキスト、例えば：テキスト装飾：なし;下線付きのテキストを除去
テキスト整列テキストの水平方向の配置は、テキストALIGNとして提供される：中心は、水平テキストの配置中心
テキストインデントなどの最初の行のインデントテキストの設定、テキストインデント：24ピクセル、24ピクセルは、テキストの最初の行のインデントを設定します

1.9 CSSレイアウトのデモ

スタイルで、次の図を参照して、レイアウトが最終的なレイアウトの効果を完了するために、さらに調整を前に書くことができます。