Web前段基礎復習

Web前段基礎復習
HTML
HTMLとは
HTML(Hyper Text Markup Language):ハイパーテキストタグ言語
HTMLはウェブページを記述するための言語です
HTMLタグ
HTMLドキュメントはHTMLタグで構成されています
開始ラベル
要素の内容
終了ラベル
内容
内容
HTMLタグ構文

HTML要素ラベル開始

を開始

HTML要素はラベル終了

を終了する.

要素の内容は、開始ラベルと終了ラベルとの間の内容

である.

一部のHTML要素には空のコンテンツ(empty content)

がある.

空の要素は、開始ラベルで閉じる(ラベルの終了を開始する)

.

ほとんどのHTML要素は、属性

を持つことができる.
HTMLタグの属性
属性はHTML要素が提供する追加情報です.

HTML要素は、属性

を設定することができる.

属性は、要素に追加情報を追加することができるabout an element

.

の属性は、一般に開始ラベル

に記述する.

プロパティは、name=「value」

など、常に名前/値ペアで表示されます.
ほとんどのHTMLタグのプロパティ:
ツールバーの
説明
class
html要素のクラス名(classname)を1つ以上定義します(スタイルファイルからクラス名が導入されます)
id
要素の一意idを定義する
style
規定要素の行内スタイル(inline style)title text規定要素の追加情報(ツールチップに表示可能)
title
要素の追加情報(ツールバーとして使用)について説明します.
重要ラベル

table(テーブルラベル)thead tr th tbody tr th

<table border="1">
    <thead>
    	<tr>
        	<th>  1th>
            <th>  2th>
        tr>
    thead>
    <tbody>
    	<tr>
        	<th>  1th>
            <th>  2th>
        tr>
    tbody>
table>

テーブルの定義を推奨する場合は、thead、tbodyを説明します.

form(フォームラベル)プロパティ:

action:submitオペレーション実行要求アドレス

method:要求のタイプget/post

を指定
注意:

formフォームのコミットはsubmit操作によって行う必要はなく、Ajax要求シーケンス化フォーム(serialized)によってフォームデータのコミットを完了することができる.

formフォーム提出とAjax要求方式提出データは2つの原理が全く聞かない2つの設計方式である.

フォーム要素ラベルはsubmitでコミットされ、ブラウザはフォーム要素のデータを名前値ペアでサーバにコミットします.

<input>:type(text, password, radio, checkbox, hidden)
<select>
<textarea>

selectがJSで選択した値と選択したテキストの内容をどのように取得するかについては、データのコミット時にselectで選択したoptionのvalue値のみが渡されるのがデフォルトです.
formはどんな概念ですか.Webプログラミングでは、formを1つのデータ集合(グループ)と理解することができ、私たちはこのグループのデータをformに包み、バックグラウンドを統一的に提出し、ビジネスロジックの処理を行い、1つのページに複数のformが存在することができます.ただしAJAXリクエストではformの存在を要求しなくてもよい.
ラベルの意味h 1/h 2/h 3表現アウトラインレベルdiv/span/p表現レイアウト
意味のあるラベルを使用すると、検索エンジンがすばやく収録できます.
異なるラベルは同じ表示効果が得られるかもしれませんが、意味化ラベル+CSSスタイルで制御することを強くお勧めします.
CSS CSS(Cascading Style Sheets):積層スタイルシート要素スタイルは、複数の方法で重ね合わせることができます.
HTML要素自体はスタイルを備えていませんが、スタイルを定義しない場合、ブラウザが異なるラベルに対してデフォルトのスタイルを設定しているため、異なるラベルでも異なる表示スタイルを表現できます.
ボックスモデルのすべてのHTML要素はボックスと見なすことができ、CSSでは「box model」という用語は設計とレイアウトに使用されます.CSSボックスモデルは本質的にボックスであり、周囲のHTML要素をパッケージ化しています.これには、余白、枠線、塗りつぶし、実際の内容が含まれています.ボックスモデルでは、他の要素と周囲の要素の枠線の間の空間に要素を配置できます.異なるセクションの説明:

Margin-枠線領域をクリアします.Marginは背景色がなく、完全に透明です.

Border-枠線の周囲の塗りつぶしと内容.枠は箱の背景色の影響を受ける

です.

Padding-コンテンツの周囲の領域をクリアします.ボックスに塗りつぶされた背景色の影響を受ける

.

Content-ボックスの内容、テキストと画像の表示***注意:***CSS要素の幅と高さのプロパティを指定すると、コンテンツ領域の幅と高さだけを設定します.完全なサイズの要素には、塗りつぶし、枠線、エッジ

も追加する必要があります.

例:

width:220px;
padding:10px;
border:5px solid gray;
margin:0px; 

要素の合計幅=幅+左塗りつぶし+右塗りつぶし+左ボーダー+右ボーダー+左マージン+右マージン

要素の高さ=高さ+上部の塗りつぶし+下部の塗りつぶし+上部の塗りつぶし+上部の塗りつぶし+下部の枠線+上部のピッチ+下部のピッチ

JavaScript

プログラミング言語に対する認識:成熟したプログラミング言語は、変数、データ型、演算子、制御文(順序構造、分岐構造、循環構造)、自成体系のAPIを備えなければならない.

JavaScriptの役割

ビジネスロジック処理

DOMに対する操作(DOM:Document Object Model):イベント駆動ページモデルによって変化(DOMツリー内の要素の削除・変更、特に変更:内容変更、スタイル変更)、JavaScriptがDOMを操作できるのはJavaScriptがDOM関連操作のインタフェースを実現し、DOMに対する操作を満たすためである.

JavaScriptは弱いタイプの言語で、書くのが勝手です.

弱いタイプのスーツケースは、変数に正確なデータ型定義がありません.(varキーワードで変数を定義)

//     ，        
var flag = 'abc';
flag = 12;
flag = true;
flag = {name : 'JO'};
flag = function() {
    alert("Hello World!");
}

JavaScriptの判断条件について

条件式では、0および0以外の数値もtrueおよびfalse

として表現することができる.

 var flag = 1;
 if(flag) {
     alert("true");
 }

分岐構造の3つの表現方式

三目演算子は熟練して把握する必要があり、その本質は式

である.

   var age = 20;
   var str = age >= 18 ? '  ' : '   ';
   console.log(str);