html紹介
1.1htmlの概要
htmlフルネーム：ハイパーテキストマークアップ言語（ハイパーテキストマークアップ言語）ハイパーテキストマークアップ言語
は、標準一般マークアップ言語（SGML）に基づくアプリケーションであり、仕様、標準でもあり、マークアップ記号を使用して表示するWebページをマークします。部品。
Webページファイル自体は、テキストファイルにタグを追加することにより、テキストファイルになります。
コンテンツの表示方法（テキストの処理方法、画面の配置方法、画像の表示方法など）をブラウザーに指示できます。
ブラウザはウェブページファイルを順番に読み取り、マークされたコンテンツをマーカーに従って解釈して表示します。誤って書き込まれたマークはエラーを示すものではなく、解釈と実行のプロセスを停止することはありません。コンパイラは、表示効果を通じてのみエラーの原因を分析できます。そして、エラーの場所。ただし、ブラウザが異なれば、同じタグの解釈も異なるため、表示効果も異なる可能性があることに注意してください。
1.2 htmlの機能
ハイパーテキストマークアップ言語のドキュメント作成はそれほど複雑ではありませんが、強力な機能を備え、さまざまなデータ形式でのファイルの埋め込みをサポートします。これは、ワールドワイドウェブの人気の理由の1つでもあります。主な機能は次のとおりです
。1シンプルさ：ハイパーテキストマークアップ言語のバージョンアップグレードの使用より柔軟で便利なスーパーセットモード。
2スケーラビリティ：ハイパーテキストマークアップ言語の広範なアプリケーションにより、機能が強化され、識別子の要件が増加しました。ハイパーテキストマークアップ言語は、システム拡張を確実にするためにサブクラス要素の方法を採用しています。
3プラットフォームの独立性：パーソナルコンピュータは人気がありますが、MACなどの他のマシンを使用する人も多くいます。ハイパーテキストマークアップ言語はさまざまなプラットフォームで使用できます。これが、ワールドワイドウェブが人気のあるもう1つの理由です。
4汎用性：さらに、HTMLはインターネットのユニバーサル言語であり、シンプルでユニバーサルなマークアップ言語です。これにより、Web作成者は、テキストと画像を組み合わせた複雑なページを作成できます。これらのページは、使用されているコンピューターやブラウザーの種類に関係なく、インターネット上の他のユーザーが表示できます。
1.3html文法規則
<!DOCTYPE html>
<html>
<head>
<!--设置页面的字符集编码 -->
<meta charset="utf-8" />
<!--设置页面的标题 -->
<title></title>
</head>
<body>
<!--需要展示的信息-->
</body>
</html>
1.
html構造：ヘッドボディを含む2.htmlタグは山括弧で囲まれたキーワードです3.htmlタグ
は通常、ペアのタグと独立したタグを含む、開始と終了のペアで表示されます
4.htmlは通常属性、形式：属性名= "属性値"（複数の属性間のスペースを区切る）
5。htmlタグは大文字と小文字を区別しないため、小文字を使用することをお勧めします
html基本タグ
2.1構造ラベル
<html><html>：ルートタグ
<head></head>：ヘッドタグ
<title></title>：ページタイトル
<body></body>：ボディタグ：Webコンテンツ
属性：
色：テキストの色<font color="red">内容</font>
bgcolor：背景色 <body bgcolor="bisque"> </body>
背景：背景画像
色表現：
最初の方法：色名を使用：赤緑青
2番目の方法：RGBモード（＃000000＃ffffff＃325687＃377405）
2.2タイプ設定ラベル
1.注釈ラベル：<!--注释-->
2。改行ラベル：<br/>
3。段落ラベル：<p>文本文字</p>
機能：段落間に線の高さがあります
属性：位置合わせ（左：左揃え中央：中央右：右揃え）
4。水平線ラベル：<hr/>
属性：
幅：水平線の長さ（2つのタイプ：最初のタイプ：ピクセル表現、2番目のタイプ、パーセンテージ表現）
サイズ：水平線の太さ（ピクセル単位、例：10px）
色：
水平線の色align：水平線の配置（左：左揃え中央：中央右：右揃え）
2.3コンテナラベル
<div></div>：ブロックラベル、1行のみ、改行
<span></span>：行レベルのラベル、すべてのコンテンツは同じ行にあります
効果：
<div></div>：主にcssページブロックレイアウトと組み合わせる
<span></span>：わかりやすいプロンプト情報を実行する
2.4テキストラベル
2.4.1基本的なテキストラベル
<font></font>
属性：サイズ：フォントサイズの設定
色：フォントの色の
設定面：フォントの設定
2.4.2タイトルタグ
<h1></h1>—-<h6></h6>
数が増えると、テキストは小さくなり、フォントは太字になり、組み込みのフォントサイズはデフォルトで1行を占めます。
2.5リストラベル
2.5.1順不同リスト
インクルード
順序付けられていないリストタグ：<ul></ul>
属性：タイプ：3つの値、つまり、
円（白丸）、ディスク（デフォルト、黒丸）、正方形（黒四角）の
リスト項目：<li></li>
例は次のとおりです。
<ul type="square">无序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
2.5.2注文リスト
ol
順序付きリストタグ：
属性：タイプ：1、A、a、I、i（数字、文字、ローマ数字）
リスト項目：
<li></li>
例は次のとおりです。
<ol type="I">有序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
2.5.3定義リスト
dl
定义列表 <dl>
<dt>苹果</dt>
<dd>苹果是一种水果，富含维生素C，美容养颜，吃了长寿....</dd>
</dl>
2.5.4リストのネスト
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
2.6画像タグ
<img/>独立したラベル
属性：
src：画像アドレス：相対パス（同じWebサイト）絶対パス（異なるWebサイト）
幅：幅
高さ：高さ
ボーダー：ボーダー
align：配置、画像と隣接するテキストの相対位置を表します（3つの属性値があります：上中央下）
alt：画像のテキスト説明
hspaceとvspaceは、テキストや他の画像が近すぎないように、画像の上、下、左、右の余白を設定します
2.7リンクラベル
ハイパーリンクは、テキストまたは画像にすることができます。コンテンツをクリックすると、新しいドキュメントまたは現在のドキュメントの特定の部分にジャンプできます。
<a>文本或图片</a>
属性：
href：ジャンプ先のページのアドレス（外部ネットワークにジャンプするにはプロトコルを追加する必要があります）;
名前：名前、アンカーポイント（アンカーポイントに戻る：上、下、中央）、訪問アンカーポイントの書き込み形式：#name値の
ターゲット：_self（self）_blank（新しいページ、前のページが存在します）
_parent_topデフォルトの_self_searchは、ページに名前を付けることと同じです。ページを再度開いたときにページが存在する場合、新しいページは開かれません。任意の名前にすることができます。
2.8フォームラベルフォームはラベル
によって<table>定義されます。各テーブルには（<tr>ラベルの定義により）複数の行があり、各行は複数のセル（<td>カスタムラベル）に分割されます。データセルには、テキスト、画像、リスト、段落、フォーム、水平線、表などを含めることができます。
2.8.1通常の形式
（テーブル、tr、td）
<!--border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度 height:高度-->
<table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100">
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
2.8.2テーブルヘッダー
（th）
<table border="1" bordercolor="red" cellspacing="0" align="center">
<caption>学生表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
2.8.3テーブルの列を組み合わせる
colspan属性
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td colspan="2">各科成绩</td>
</tr>
<tr>
<td>1</td>
<td>aa</td>
<td>80</td>
<td>90</td>
</tr>
</table>
2.8.4テーブルの行を組み合わせる
rowspan属性
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>语文成绩</td>
<td>数学成绩</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">aa</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>80</td>
<td>90</td>
</tr>
</table>
2.9テキストフォーマットタグ
<b>は太字のテキストを定義します。
<big>大きな文字を定義します。
<em>定義はテキストに焦点を当てています。
<i>イタリック体を定義します。
<small>小さいフォントを定義します。
<strong>定義はトーンを強調します。
<sub>添え字を定義します。
<sup>上付きの単語を定義します。
<ins>挿入された単語を定義します。
<del>削除ワードを定義します。
htmlフォームタグ
HTMLフォームは、さまざまなタイプのユーザー入力を収集するために使用されます
3.1フォームタグ
共通属性：アクション：アクションを表し、値はサーバーのアドレスであり、フォームのデータは処理のためにアドレスに送信されます
メソッド：リクエストメソッド：取得して投稿
enctype：フォーム送信のタイプを示します
デフォルト値：application / x-www-form-urlencoded通常のフォーム
multipart / form-dataマルチパートフォーム（通常はファイルのアップロードに使用されます）
取得する：
1.アドレスバーで、リクエストパラメータはすべてアドレスパスの後にスプライスされますか？name = "Zhang San"＆password = "123456"
2.安全ではありません
3.高効率
4. getリクエストのサイズは制限されており、ブラウザによって異なりますが、
使用量は約2KBです。通常、データのクエリに使用されます。
投稿：
1。アドレスバー：リクエストパラメータは個別に処理されます。
2.安全で信頼できる
3.低効率
使用法：通常、操作の挿入と変更に使用されます
3.1.1入力タグ
タイプ：タイプの可能な値は次のとおりです：
1.1テキスト入力コンテンツ
1.2パスワードパスワードボックス暗号テキストまたはマスク
1.3無線は単一選択を意味し、名前は一貫している必要があります。値：サーバーに送信されたデータは、同じグループで1つしか選択できないことを意味します（チェック済み=「チェック済み」は選択済みを
意味します）1.4チェックボックスは複数選択を意味し、名前は一貫している必要があります。つまり、同じグループを選択できることを意味します複数選択すると、戻り値は配列になります（チェック済み=「チェック済み」は選択済みを
意味します）1.5ファイル：コントロールのアップロードを意味します。上記の入力プロパティにはname属性が必要であり、最初の値はデフォルト値を意味します（入力ボックスの内容を取得した後）。それは、次のボタンは、入力特性を有していない）名前に基づいてとられる必要があるとname属性は必要ありませんが、value属性使用してボタンプロンプトのテキスト
1.6が提出を
1.7リセット
1.9画像画像送信ボタン
上記のすべての入力の属性：widthは幅を設定し、heightは高さを設定しますborderは境界線を設定します
1.10ボタン通常ボタン
1.11非表示とは、ボックスのコンテンツサーバーに必要であるが、ユーザーに知られたくない非表示のドメインを意味します（インターフェイスに明確に表示したくない）
name属性：フォーム要素の名前。サーバーに送信できるのはname属性のみです。
3.1.2要素の選択
（ドロップダウンリスト）
<select name="city"> <!--select标签添加该属性multiple="multiple"表示多选-->
<!--option表示下拉列表项-->
<option value="北京">北京</option>
<!--selected="selected"表示选中该项-->
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
<option value="杭州">杭州</option>
</select>
3.1.3textarea要素
（テキストフィールド）
入力領域のサイズを指定する必要があります
<textarea cols="100" rows="5">5行100列の領域を入力でき、この要素に値属性がないことを示します
3.1.4例とレンダリングは次のとおりです
<form action="" method="get">
<table align="center">
<caption>
<h1>注册</h1></caption>
<tr>
<td align="right">用户名：</td>
<td><input type="text" name="username" value="bluesky" /></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input type="password" name="confirmpwd" /></td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" checked="checked" />女
</td>
</tr>
<tr>
<td align="right">爱好：</td>
<td>
<input type="checkbox" name="hobby" value="篮球" checked="checked" />篮球
<input type="checkbox" name="hobby" value="足球 " />足球
<input type="checkbox" name="hobby" value="乒乓球 " />乒乓球
<input type="checkbox" name="hobby" value="羽毛球 " />羽毛球
</td>
</tr>
</tr>
<tr>
<td align="right">上传头像：</td>
<td>
<input type="file" name="upload" />
</td>
</tr>
</tr>
<tr>
<td align="right">居住地：</td>
<td>
<select name="city">
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
<option value="杭州">杭州</option>
</select>
</td>
</tr>
</tr>
<tr>
<td align="right">个人介绍：</td>
<td>
<textarea cols="100" rows="5">
</textarea>
</td>
</tr>
</tr>
<tr>
<td></td>
<td align="center">
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
htmlフレームタグ
フレームを使用すると、同じブラウザウィンドウに複数のページを表示できます。各HTMLドキュメントはフレームと呼ばれ、各フレームは他のフレームから独立しています。
フレームを使用するデメリット：
開発者は同時により多くのHTMLドキュメントを追跡する必要があり
、ページ全体を印刷することは困難です。
4.1フレームセット
フレーム構造ラベル
フレーム構造タグ（<frameset>）は、ウィンドウをフレームに分割する方法を定義します。
各フレームセットは、一連の行または
列を定義します。行/列の値は、画面の各行または列が占める領域を指定します。
4.2フレーム
フレームラベル
frameタグは、各フレームに配置されるHTMLドキュメントを定義します。
4.3基本的な考慮事項
1.ラベルに同時に<body></body>タグを<frameset></frameset>付けることはできません
2.フレームに表示されている境界線がある場合、ユーザーは境界線をドラッグしてサイズを変更できます。これを回避するために、<frame>タグを追加することができます：noresize = "noresize"。
4.4エフェクト画像とソースコードの例
！--主界面--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="15%,*" border="1px">
<frame src="FrameTop.html" name="topFrame" noresize="noresize" />
<frameset cols="15%,*">
<frame src="FrameLift.html" name="liftFrame" noresize="noresize"/>
<frame src="FrameRight.html" name="rigthFrame"/>
</frameset>
</frameset>
</html>
！--左侧超链接连接栏--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>a{text-decoration:none}</style>
</head>
<body>
<table width="100%" height="400px">
<tr align="center" >
<td>
<a href="a连接.html" target="rigthFrame"><font size="5">第一个连接</font></a>
</td>
</tr>
<tr align="center" >
<td>
<a href="Table.html" target="rigthFrame"><font size="5">第二个连接</font></a>
</td>
</tr>
<tr align="center" >
<td>
<a href="注册.html" target="rigthFrame"><font size="5">第三个连接</font></a>
</td>
</tr>
<tr align="center" >
<td>
<a href="综合案例.html" target="rigthFrame"><font size="5">第四个连接</font></a>
</td>
</tr>
<tr align="center" >
<td>
<a href="列表.html" target="rigthFrame"><font size="5">第五个连接</font></a>
</td>
</tr>
</table>
</body>
</html>
！--右侧显示页面--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body bgcolor="aquamarine">
<div align="center">
<form action="" method="post">
<table>
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" name="uName" /></td>
</tr>
<tr>
<td>密码：</td>
<td> <input type="password" name="pwb" /></td>
</tr>
<tr>
<td>确认密码：</td>
<td> <input type="password" name="qpwb" /></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="gender" checked="checked" value="男" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="动漫"/>动漫
<input type="checkbox" name="hobby" value="游戏"/>游戏
<input type="checkbox" name="hobby" value="社交"/>社交
</td>
</tr>
<tr>
<td>所在地</td>
<td>
<select name="address">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>广东</option>
</select>
</td>
</tr>
<tr>
<td>上传头像</td>
<td>
<input type="file" name="file" />
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea style="resize:none; height: 50px;" name="myself"></textarea>
</td>
</tr>
<tr >
<td colspan="2">
<input style="margin-left: 50px;" type="submit" name="submit"/>
<input style="margin-left: 50px;" type="reset" name="reset"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
!--顶部Hello World--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="coral">
<p align="center"><font size="7">Hello World</font></p>
</body>
</html>
htmlの他のタグと特殊文字
5.1その他のラベル
<!--该网页的关键字-->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta http-equiv="description" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> html4.01
<meta charset="UTF-8"> html5
<!-- href：引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src：js的文件地址-->
<script type="text/javascript" src=""></script>
5.2特殊キャラクター
<サイン未満
>より大きい
&そしてキャラクター
"引用符
®登録済み
©著作権
™商標
スペース