html
1.HTML5
1.1. HTML 構造を理解する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
最简单的html页面
</body>
</html>
htmlページ:
<!DOCTYPE>これは HTML タグではなく、ドキュメント タイプ宣言タグです。このコードは次のことを意味します: 現在のページは HTML5 バージョンを使用して Web ページを表示します
- 宣言はドキュメントの先頭、タグの前に配置されます。
- HTML タグではなく、Doctype 宣言タグです。
lang言語タイプ。現在のドキュメントに表示される言語を定義するために使用されます。
- en は言語を英語として定義します
- zh-CN は言語を中国語として定義します
<meta charset=" UTF-8" />文字セット（Character set）とは、複数の文字の集合です。コンピュータがさまざまな文字を認識して保存できるようにします。
上記の構文は必ず記述するコードです。記述しないと文字化けが発生する可能性があります。一般に、エンコーディングは一律「UTF-8」を使用し、
「utf8」や「UTF8」ではなく、標準の「UTF-8」で統一して記述するようにしてください。
1.2、h1～h6（見出しタグ）
重要度の高い順にタイトルとして使用されます。
特徴：
- タイトルのテキストが太字になり、フォント サイズが順に大きくなります。
- タイトルは 1 行で構成されます。
コード例:
1.3, p (段落タグと改行タグ)
<p>タグは段落を定義するために使用され、Web ページ全体を複数の段落に分割できます。
特徴：
- 段落内のテキストは、ブラウザ ウィンドウのサイズに応じて自動的に折り返されます。
- 段落と段落の間にはスペースがあります。
コード例:
1.4、br 改行ラベル
<br />強制的に改行します。
特徴：
<br />シングルレーベルです。<br />段落とは異なり、タブは単に新しい行を開始するだけであり、タブの間に垂直方向のスペースが挿入されます。
コード例: 2 つの改行
1.5、テキストの書式設定
Web ページでは、テキストに太字、斜体、下線などの効果を設定する必要がある場合がありますが、このとき、HTML のテキスト書式タグを使用して、テキストを特別な方法で表示する必要があります。
ラベルのセマンティクス: 重要性を強調表示します。通常のテキストよりも重要です。
| セマンティクス | ラベル |
|---|---|
| 大胆な | <strong><strong/> |
| 傾ける | <em><em/> |
| 取り消し線 | <del><del/> |
| 下線 | <ins><ins/> |
1.6、divタグとspanタグ
<div>セマンティクスはなく<span>、単なるコンテンツのボックスです。
特徴：
<div>ラベルはレイアウトに使用されますが、<div>大きなボックスは1 つだけ一列に配置できるようになりました。<span><span>ラベルはレイアウトに使用され、複数の小さなボックスを1 行に配置できます。
1.7、imgイメージタグ
<img>タグは、HTML ページ内の画像を定義するために使用されます。
<img src="图像URL" />
属性:
| 属性 | 属性値 | 説明する |
|---|---|---|
| str | 画像パス | 必須の属性 |
| 代替 | 文章 | 置換テキスト。画像にテキストを表示できません |
| タイトル | 文章 | プロンプトテキスト。画像上にマウスを置くと、表示される文字が |
| 幅 | ピクセル | 画像の幅を設定する |
| 身長 | ピクセル | 画像の高さを設定する |
| 国境 | ピクセル | 画像の枠線の太さを設定します |
コード例:
相対パスと絶対パス
相对路径: 参照ファイルの場所に基づいて確立されたディレクトリ パス。
绝对路径: ディレクトリの下の絶対的な場所を指し、ターゲットの場所を直接指します。通常はドライブ文字から始まるパスです。
たとえば、「D:\web\img\logo.gif」または完全な Web アドレス「http://www.itcast.cn/images/logo.gif」などです。
1.8、ハイパーリンクラベル
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
| 属性 | 効果 |
|---|---|
| href | リンク先を指定するURLアドレス（必須属性） タグにhref属性を付与するとハイパーリンクの機能を持つ |
| 目標 | これは、リンク ページを開く方法を指定するために使用されます。_self はデフォルト値、_blank は新しいウィンドウで開く方法です。 |
リンクカテゴリー:
- ラベルターゲットを開くメソッドは次のとおりです。
_blank: 新しいウィンドウを開きます。
_parent: 親ウィンドウでリンクを開きます。
_self: デフォルト、現在のページがジャンプします。
_top: 現在のフォームでリンクを開き、現在のフォーム全体 (フレーム ページ) を置き換えます。 - 外部リンク: < a href="http://www.baidu.com "> Baidu など。
- 内部リンク: Web サイトの内部ページ間の相互リンク。< a href="index.html"> ホーム ページなど、内部ページ名への直接リンクで十分です。
- 空のリンク: < a href="#"> ホームページ (その時点でリンク先が決定されていない場合)。
- ダウンロード リンク: href 内のアドレスがファイルまたは圧縮パッケージの場合、ファイルがダウンロードされます。
- Web ページ要素へのリンク: ハイパーリンクは、テキスト、画像、表、オーディオ、ビデオなど、Web ページ内のさまざまな Web ページ要素に追加できます。
- アンカー リンク: リンクをクリックすると、ページ上の特定の位置にすばやく移動します。
- リンクテキストの href 属性に、次のように #name の形式で属性値を設定します。
<a href="#two"> 第2集 </a> - ターゲットの場所タグを見つけて、次のように id 属性 = 先ほどの名前を追加します。
<h3 id="two">第2集介绍</h3>
- リンクテキストの href 属性に、次のように #name の形式で属性値を設定します。
コード例:
1.9、テーブル テーブルラベル
1.9.1、フォームラベル
<table align="center" border="1">
<!-- 表头-->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<!-- 数据-->
<tr>
<td>何某某</td>
<td>23</td>
<td>男</td>
</tr>
<tr>
<td>某某何</td>
<td>23</td>
<td>女</td>
</tr>
</table>
<table> </table>テーブルを定義するために使用されるラベルです。<tr> </tr>ラベルはテーブル内の行を定義するために使用され、<table> </table>ラベル内でネストする必要があります。<td> </td>テーブル内のセルを定義するために使用され、<tr></tr>ラベル内でネストする必要があります。- 文字 td はテーブル データ、つまりデータ セルの内容を指します。
<th>このタグは、HTML 表のヘッダー部分 (table head の略) を示します。通常、ヘッダー セルは表の最初の行または列に位置し、ヘッダー セル内のテキストの内容は太字で中央揃えで表示されます。
テーブル属性:
テーブルタグの属性は実際の開発では一般的に使用されないため、後で CSS を通じて設定します。
1.9.2、テーブル構造ラベル
テーブルは非常に長くなる可能性があるため、テーブルのセマンティクスをより適切に表現するために、テーブルをテーブル ヘッダーとテーブル本体の 2 つの部分に分割できます。
table タグでは、 を使用します<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域。これにより、テーブル構造をより明確に区別できます。
コード例:
<table align="center" border="1">
<!-- 表头-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<!-- 数据-->
<tbody>
<tr>
<td>何某某</td>
<td>23</td>
<td>男</td>
</tr>
<tr>
<td>某某何</td>
<td>23</td>
<td>女</td>
</tr>
</tbody>
<thead></thead>: テーブルのヘッダーを定義するために使用されます。内側にはラベルが付いている必要があります。通常は最初の行にあります。<tbody></tbody>: テーブルの本体を定義するために使用され、主にデータ オントロジーを配置するために使用されます。- 上記のタグはすべて
<table></table>タグ内に配置されます。
1.9.3. セルの結合
セルを結合する方法:
- 行全体を結合: rowspan="結合されたセルの数"、最上位のセルがターゲットセルとなり、結合コードを記述します。
- 列全体を結合: colspan="結合されたセルの数"、一番左のセルがターゲットセルです、結合コードを記述します。
コード例:<td rowspan="2">何某某</td>
1.10、リスト
1.10.1、UL 順序なしリスト
<ul>タグは、HTML ページ内の項目の順序なしリストを表します。一般に、リスト項目は黒丸で表され、リスト項目はタグを使用して順序 <li>なしリストを定義します。基本的な構文形式は次のとおりです。
- 順序なしリストのさまざまなリスト項目の間に順序レベルはなく、並列です。
<ul></ul>はネストすることのみ可能であり<li></li>、<ul></ul>タグ内に他のタグやテキストを直接入力することはできません。<li> 与 </li>Between は、すべての要素を収容できるコンテナーに相当します。- 順序なしリストには独自のスタイル プロパティがありますが、実際には CSS を使用して設定します。
1.10.2、ol 順序付きリスト
順序付きリストは並べ替え順序を持つリストであり、各リスト項目は特定の順序で定義されます。
HTML タグでは、<ol> タグは順序付きリストを定義するために使用され、リストの順序は番号で示され、 <li>タグはリスト項目を定義するために使用されます。
順序付きリストの基本的な構文形式は次のとおりです。
<ol></ol>ネストすることのみが可能であり<li></li>、<ol></ol>ラベル内に他のラベルやテキストを直接入力することはできません。<li>との間</li>は、すべての要素を収容できるコンテナに相当します。- 順序付きリストには独自の style 属性が設定されますが、実際に使用する場合は CSS を使用して設定します。
1.10.3、カスタムリスト
カスタム リストは、用語や名詞を説明するためによく使用されます。定義リストのリスト項目の前に箇条書きはありません。
使用シナリオは次の
コード例です。
<dl></dl><dt>とのみを含めることができます<dd>。<dt>合計の数に制限はなく、<dd>多くの場合、1 つは<dt>複数の に対応します<dd>。
1.11. フォームラベル
1.11.1、フォームフォームフィールド
フォームフィールドは、フォーム要素を含む領域です。
HTML タグでは、<form>タグはユーザー情報を収集および送信するためのフォーム フィールドを定義するために使用されます。
<form>範囲内のフォーム要素情報をサーバーに送信します
<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>
共通の属性:
| 属性 | 属性値 | 効果 |
|---|---|---|
| アクション | URLアドレス | フォームデータを受信して処理するサーバープログラムのURLアドレスを指定するために使用されます。 |
| 方法 | 取得/投稿 | フォームデータの送信方法を設定するために使用され、その値は get または post です。 |
| 名前 | 名前 | 同じページ上の複数のフォームフィールドを区別するためにフォームの名前を指定するために使用されます。 |
1.11.2、入力フォーム要素
タグには<input>type 属性が含まれており、さまざまな type 属性値に応じて、入力フィールドにはさまざまな形式 (テキスト フィールド、チェック ボックス、マスクされたテキスト コントロール、ラジオ ボタン、ボタンなど) が含まれます。 。
<input type="属性值" />
type 属性の属性値とその説明は次のとおりです。
| 属性値 | 説明する |
|---|---|
| ボタン | クリック可能なボタンを定義する |
| チェックボックス | チェックボックスを定義する |
| ファイル | ファイルアップロード用の入力フィールドと「参照」ボタンを定義します |
| 隠れた | 非表示の入力フィールドを定義する |
| 画像 | 画像の形式でボタンを定義します |
| パスワード | 文字がマスクされるパスワードフィールドを定義します |
| 無線 | ラジオボタンを定義する |
| リセット | リセットボタンを定義します。リセットボタンはフォーム内のすべてのデータをクリアします |
| 提出する | 送信ボタンを定義します。送信ボタンはフォームデータをサーバーに送信します |
| 文章 | ユーザーがテキストを入力できる単一行の入力フィールドを定義します。デフォルトの幅は 20 文字です |
| 色 | カラーピッカーから色を選択します |
| 日付 | 日付コントロールを定義します。年、月、日を選択できます |
| datetime-local | 定义 datetime 日期控件，可选择年月日时分秒 |
| time | 定义用于输入时间的控件，可选时分秒 |
| 定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证） | |
| number | 定义用于输入数字的字段（您可以设置可接受数字的限制） |
| range | 定义用于精确值不重要的输入数字的控件（比如 slider 控件） |
除 type 属性外，标签还有其他很多属性，其常用属性如下：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
- name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
- name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
- checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
- maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.
代码示例：
1.11.3、label 标签
<label> 标签为 input 元素定义标注（标签）。
<label> 标签用于绑定一个表单元素, 当点击
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同
代码示例：
1.11.4、select表单元素
使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。
<select>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
代码示例：
- 中至少包含一对 。
- 在 中定义 selected =“ selected " 时，当前项即为默认选中项。
1.11.5、textarea 表单元素
使用シナリオ: ユーザーが大量のコンテンツを入力する場合、テキスト ボックス フォームは使用できませんが、<textarea>現時点ではラベルを使用できます。
フォーム要素では、<textarea>ラベルは複数行のテキスト入力を定義するために使用されるコントロールです。
掲示板やコメントでよく使用される複数行のテキスト入力コントロールを使用すると、さらに多くのテキストを入力できます。
<textarea rows="3" cols="20">
文本内容
</textarea>
- ラベルを使用すると、複数行のテキスト入力フィールドを簡単に作成できます。
- Cols = 「各行の文字数」、rows = 「表示行数」ですが、実際の開発では使用せず、CSSを使用してサイズを変更します。
1.12、コメントと特殊文字
HTML 内のコメント:<!--”开头，以“ -->で終わる。
<!-- 注释语句 --> ショートカットキー：ctrl + /
特殊文字:
