JAVA学習ノート16——HTML,CSS
47130 ワード
HTML
1.基本概念ソフトウェアアーキテクチャ1.C/Sアーキテクチャ:クライアント/サーバー側のメリット:ユーザー体験のより良い欠点:設置と配置とメンテナンスが面倒である.B/Sアーキテクチャ:ブラウザ/サーバーの利点:インストールと配置とメンテナンスの簡単な欠点:応用が大きすぎると、ユーザー体験が影響を受ける.ハードウェアに対する要求が高すぎるBSアーキテクチャ資源の分類:1.静的資源静的ウェブページ開発技術、HTML、CSS、JavaScriptユーザーが静的資源を要求すると、サーバーは直接静的資源をブラウザに送信し、ユーザーが得た資源は同じである.動的資源は動的ウェブページを使用して適時に発表した資源のすべてのユーザーがアクセスし、得られた結果は異なるかもしれないjsp/servlet基本概念の最も基礎的なウェブページ開発言語Hyper Text Markup Languageハイパーテキストタグ言語快速入門ラベル分類:1.囲いラベル:開始ラベルと終了ラベルがあります.例えば、2.「自閉」タブ:「開始」タブと「終了」タブを一緒にします.のように
2.ファイルラベルhtmlを構成する最も基本的なラベルhtml:htmlテキストを表すルートラベルhead:ヘッダラベル.htmlのいくつかの属性を指定するために、外部リソースtitle:タイトルラベルbody:ボリュームラベル3を導入します.テキストラベルとテキストについてh 1:タイトルラベルp:段落ラベルbr:改行ラベルhr:水平線bを表示する:フォント太字i:フォント斜体center:中央ラベル
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<!-- -->
<!-- -->
<h1>HelloWorld</h1><br>
<h2>HelloWorld</h2><br>
<h3>HelloWorld</h3><br>
<h6>HelloWorld</h6>
<!--h1 h6 -->
<!-- <p>-->
<p>HelloWorld</p>
<p>HelloWorld</p>
<p>HelloWorld</p>
<p>HelloWorld</p>
<!--<hr/> -->
<hr/>
<!-- -->
<hr color="blue" width="500" size="5" align="right"/>
<!--<b></b> -->
<b>HelloWorld</b><br>
<!--<i></i> -->
<i>HelloWorld</i><br>
</body>
</html>
4.画像ラベルimg:画像を表示する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<!--img ， -->
<img src="img/picture.jpg" align="left" width="500" height="300"/>
</body>
</html>
相対パス:./:現在のパスを表す.../:前のレベルのディレクトリを表す5.リストラベル整列リスト:ol li無秩序リスト:ul li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<!-- ol-->
Name
<ol type="disc">
<li>Kobe</li>
<li>James</li>
<li>Jordan</li>
</ol>
<hr>
Name
<ul type="A">
<li>Kobe</li>
<li>James</li>
<li>Jordan</li>
</ul>
</body>
</html>
6.リンクラベルa:ハイパーリンクtargetを定義する(リソースを開く方法を指定する)self:現在のページで開く_blank:空白のページで開く
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<!--href： url-->
<a href="https://www.csdn.net/">click</a>
<!--_self: ；_blank -->
<a href="https://www.csdn.net/" target="_self">click</a>
<a href="https://www.csdn.net/" target="_blank">click</a>
</body>
</html>
div:各divは1行全体spanにまみれている:テキスト情報は1行、行内ラベルの意味化ラベル:header、footer 7.表ラベルtable:表trの定義表tr:行の定義td:セルthの定義:表ヘッダーセルcaptionの定義:表ヘッダーthead:表のヘッダー部分を表すtbody:表の本体部分を識別するtfoot:表の足部分を表すrowspan:行colspanのマージ:列のマージ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<table border="1" width="50%">
<thead>
<caption>Information</caption>
<tr>
<th>Name</td>
<th>Number</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#8a2be2" align="center">
<td>Kobe</td>
<td>24</td>
<td>Los Angeles</td>
</tr>
<tr bgcolor="red" align="center">
<td>Jordan</td>
<td>23</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</body>
</html>
8.フォームラベルフォーム:ユーザー入力データを収集するための、サーバと対話するためのラベル:form属性:action:データをコミットするurl method:コミット方法を指定します.分類:getとpost
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<!--form ， ， -->
<!-- ， name -->
<form action="" method="get">
：<input name="username"><br>
：<input name="password"><br>
<input type="submit" value=" ">
</form>
</body>
</html>
getとpostの違い:1.コミット方式はgetで、要求パラメータはアドレスバーに表示されます.コミット方式はpostで、要求パラメータはアドレスバーに表示されず、要求体にカプセル化される.getリクエストパラメータのサイズに制限があり、postリクエストパラメータのサイズに制限はありません.getは安全ではありませんpostは安全です
フォームアイテムラベルinputはtype属性値を使用して、要素表示スタイルtype属性を以下のように変更できます.text:テキスト入力ボックス2.placeholder:入力ボックスのプロンプト情報を指定し、入力ボックスの内容が変化すると自動的にプロンプト情報3をクリアする.password:パスワード入力ボックス4.radio:ラジオボックス注意:複数のラジオボックスにラジオ効果を実現させるには、複数のラジオボックスのname属性値が同じである必要があります.一般的には、各ラジオボックスにvalue属性値を提供し、選択するとコミットされる値check属性を指定し、デフォルト値5を指定できます.checkbox:チェックボックス6.Label:入力項目の文字記述を指定する注意:labelのfor属性は一般的にinputのid属性値に対応し、対応する場合はlabel領域をクリックするとinput入力ボックスに焦点7を取得する.file:ファイル選択ボックス8.submit:コミットボタン9.button:JavaScriptと動的効果10を実現する.date/datetime-local:日付selectドロップダウンtextareaテキストドメイン
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<!--form ， ， -->
<!-- ， name -->
<form action="" method="get">
<label for="username"> ：</label><input type="text" name="username" placeholder=" " id="username"><br>
<label for="password"> ：</label><input type="password" name="password" placeholder=" " id="password"><br>
:<input type="radio" name="gender" value="male" checked="checked">
<input type="radio" name="gender" value="female">
<br>
：<input type="checkbox" name="hobby" value="basketball">
<input type="checkbox" name="hobby" value="game">
<input type="checkbox" name="hobby" value="running"> <br>
：<input type="file"><br>
:<input type="date" name="birthday"><br>
：<select name="province">
<option value=""> </option>
<option value="1"> </option>
<option value="2"> </option>
<option value="3"> </option>
</select>
<br>
:
<textarea cols="20" rows="5" name="des">
</textarea><br>
<input type="submit" value=" ">
</form>
</body>
</html>
CSS
1.基本概念Cascading Style Sheets積層スタイルシートの利点:機能が強く、内容展示とスタイル制御を分離して結合度を下げ、開発効率を高める.使用方法インラインスタイル:ラベル内でstyleプロパティを使用してCSSコードを作成します.内部スタイルはあまり使用されません:
Title
HelloCSS
外部スタイル:1.CSSリソースファイル2を定義する.headラベルでlinkラベルを定義し、外部リソースファイルを導入
"en">
"UTF-8">
Title
"stylesheet" href="css/a.css">
HelloCSS
CSSファイル:
div{
color:red;
}
3.基本構文形式:セレクタ{属性名1:属性値1;...}セレクタは、類似の特徴を持つ要素基本セレクタ1をフィルタする.idセレクタは、特定のid属性値の要素id属性値{}を選択し、1ページでid値が一意であることを推奨する.エレメントセレクタ同じラベル署名を持つエレメントラベル名{}idセレクタの優先度がエレメントセレクタ3より高いことを選択する.クラスセレクタは、同じclass属性値を持つ要素を選択する.class属性値{}クラスセレクタ優先度が要素セレクタより高い
"div1">HelloCSS
HelloCSS
"cls"
>HelloCSS
拡張セレクタ1.すべての要素*{}2を選択します.セレクタセレクタ1,セレクタ2{}3を並列にセット.サブセレクタフィルタセレクタ1要素の下のセレクタ2要素セレクタ1セレクタ2{}4.親セレクタ1>セレクタ2{}セレクタ2の親セレクタ1 5をフィルタする.属性セレクタ要素名、属性名=属性値の要素要素名を選択[属性名=属性値]{}6.擬似クラスセレクタいくつかの要素が持つ状態要素を選択:状態{}link:初期化状態visited:アクセスされた状態activate:アクセス中状態hover:マウス懸濁状態
HelloCSS
HelloCSS
"text">
"password">
"https://www.csdn.net/" target="_blank">click
属性1.フォントテキストfont-sizeフォントサイズcolorテキスト色text-align揃えline-height行2.背景background:背景色、複合属性3.ボーダーborder:ボーダー4を設定.寸法width:幅height:高さ
HelloCSS
HelloCSS
5.ボックスモデル制御レイアウトプロパティ:margin:外側距離(margin-left/right/top/bottom)padding:内側余白.既定では、既定の内側の余白はボックスのサイズに影響します.ボックスのプロパティを設定してwidthとheightが最終ボックスサイズfloatであるようにすることができます:フローティング
"div2">
"div1">
HelloCSS
"div3">HelloCSS
"div4">HelloCSS
"div5">HelloCSS