目次
HTMLの基本
HTML言語の基本フォーマット：
よく使われるHTMLタグ
(1) 段落タグ、インラインタグ、改行タグ
(2) テキストスタイルタグ
HTML では、<font> タグを使用して、フォント、フォント サイズ、色など、Web ページ内のテキストのスタイルを制御します
<font>タグの基本的な構文形式は次のとおりです。<font 属性="属性值">文本内容</font>
色は英単語を使用して設定することも、16 進数で表すこともできます。たとえば、green は #00ff00 で表すことができます。purple は#ff00ff
一般的な色:
複合トレーニング:
html部分:
具体的なコード:
<!DOCTYPE html>
<html>
="utf-8"> .css" type="text/css" /> </head> <div class="dis"> <div class="ss"> <p class="dsjk" > ;恋煩い</p> <p class="hj">タン・ワン・ウェイ</p> "nk" 最も恋煩い< ;/span> ;ss"> <p class="dsjk">黄鶴楼プレゼンツ孟浩然の広陵李白</ p> ; <p class="hj">Li Bai.Tang</p> 習氏の黄鶴楼についての言葉 < /p> </div> <div class="ss"> <p class ="dsjk">Yuan Ershi Anxi に送信</p> <p class="hj">Wang Wei.Tang</p> ; ; 新しい a i=29> </div> <div class="ss"> <p class="dsjk">春日 </p> ; <p class="hj">朱熹、宋時代</p> ;> それは常にその鮮やかな色で春です＆lt;/span＆gt; </html> </body> </div> <p class="dkds">xxx 学校 張三</p> ;＆lt; p class="dkds">xxx 学校 張三< /p> =＆quot; dkds＆quot;＆gt; xxx school＆amp; nbsp; Zhang san＆lt;/p＆gt;
CSS部分：
具体的なコード:
p{ text-align: center; } .dsjk{ font-family: 'Times New Roman'、Times、serif; font-size: 30px; フォントの太さ: 800; } .hj{ font-size: 18px; font-weight: 400; color: #0000ff; } .nk{ font-family: 'Courier New'、Courier、等幅; font-size: 18px; font-weight:300; letter-spacing: 7px; } .ss{ width: 25%; float: left; /* margin: 0px 40px; */ } .dis{ 幅: 100%; 高さ:500px; 背景: url(hj.jpg) 繰り返しなし; } transform:回転(-25deg); color:rgba(01, 01,01,0.2); font-weight: 800; font-size: 40px; float: left; .dkds{ } 背景サイズ: 100% 100%;
最終的なレンダリング:
(3) 表のラベル
HTML Web ページで表を作成するための基本構文形式<table> <tr> <td>セル内のテキスト</td> </tr> </table>
<table>、<tr>、<td> はテーブルを作成するための基本タグであり、必須です。 <table> はテーブルを定義するために使用され、<tr> はテーブル内の行 (テーブル行) を定義するために使用され、<table> タグ内でネストする必要があります、<td> はセルを定義するために使用されます。テーブル (テーブル データ) はテーブル内の列とも呼ばれ、<tr> タグ内にネストする必要があります。
特定のケース:
コード：
<!DOCTYPE html>
<html>
<head>
<メタ文字セット="utf-8">
<title></title>
<style type="text/css">< /span> transform:scale(1.1,1. 1); </html> </body> < /table> </tr> 88 < td>69 <td>86</td> <td>赵星名</td> ＆lt; tr＆gt; ＆lt;/tr＆gt; ＆lt; td＆gt; 98＆lt;/td＆gt; 90＆lt;/td＆gt; <td>96</td> <td>张九龄</td> ＆lt; tr＆gt; ＆lt;/tr＆gt; ＆lt; td＆gt; 98＆lt;/td＆gt; 80＆lt;/td＆gt; <td>95</td> <td>张三丰</td> <tr> </tr> <td>语文</td> <td>数学< ;/td> <td>语文</td> <td>姓</td> <tr class="sfs"> <table> <body> </head> ; </style> } トランジション: すべて 0.5 秒; color: #ffffff; background-color:#55aa7f; TD :ホバー{ } color: #ffffff; background-color:#566a21; .sfs:hover{ } background-color:#d2f8ff; 表{ } font-weight: 600; font-size: 20px; .sfs{ } ボーダー：1px solid; マージン：0px; Text-align：center; td{ } border: 1px ソリッド; tr{ } 高さ: 180px; 幅: 400px; ボーダー: 3px 実線 #739096; マージン: 自動;
テーブル{
レンダリング：
(4) フォームタグ
フォームフィールド<form>
<form>基本的なタグ構文:
<フォームアクション="URLアドレス"メソッド="送信方法"名前="フォーム名">
さまざまなフォームコントロール
</フォーム>
action属性: フォーム送信用のアドレスを指定するために使用されます。
method属性: フォーム データの送信方法を設定するために使用されます。これには GET と POST の 2 つの値があります。GET がデフォルト値です。この方法で送信されたデータはブラウザのアドレス バーに表示されます。機密性が低く、データ量の制限; POST 送信メソッドを使用すると、機密性が高いだけでなく、大量のデータを送信できるため、開発中のフォームの送信には通常 POST メソッドが使用されます。
2. フォーム コントロール<input>
Web を閲覧していると、単一行のテキスト入力ボックス、ラジオ ボタン、チェック ボックス、リセット ボタンなどがよく表示されます。< を使用します。 input> コントロールはフォーム内のこれらの要素を定義できます。
<input>コントロールの基本構文形式: <input type="Control type" />
type 属性は、<input> コントロールの最も基本的な属性であり、さまざまなコントロール タイプを指定するために使用されます。
<input> コントロールでは、他にも多くの属性を定義できます。その中で、より一般的に使用されるのは、ID 値、名前、サイズを指定するために使用される ID、名前、値、サイズです。それぞれ <input> コントロール ページ上のコントロールのデフォルト値と表示幅。
特定のケース:
具体的なコード:
<!DOCTYPE html>
<html>
<head>
<メタ文字セット="utf-8">
<title>htmlDemo05</title>
</head>
<body>
<form action="#" method="post">
<table cellpadding="2" align="center">
<tr>
<td align="right">用户名：</td>< /span> <tr> </tr> </td> <input type="checkbox"名前=「興味」値="ゲーム"/>玩游戏 <input type="checkbox"名前=「興味」値="コード"/>敲代码 <入力タイプ="チェックボックス"名前=「興味」値="フィルム"/>看电影 <td> <td align="right">兴趣：</td> </tr> </td> <input type="radio"名前=「性別」値="女性"/>女性 <input type="ラジオ」名前=「性別」値="男性"/>男 <td> <td align="right">性别：</td> </tr> </td> <input type="password" id="パスワード"名前=「パスワード」 /> <!--2.秘密输入框控件--> <td> <td align="right">秘密：</td> </tr> </td> <input type="text" id="ユーザー名"名前= "ユーザー名" /> <!--1.文本输入框控件-->
<td> <input type="file" ;名前=「写真」 /> </td> </tr> <tdcolspan="2" align="center"> <input type="submit" value="注册"/> <input type="reset"値="重充填" /> </td> </tr> </table>< a i=51> </form> </body> </html>
レンダリング：
(5) 複数行のテキストラベル
HTML には<textarea></textarea> タグがあり、これを使用して複数行のテキスト ボックスを作成できます。
<textarea></textarea>タグの基本構文形式
<textareacols="各行の文字数"rows="表示行数">
テキストコンテンツ
</textarea>
(6) リストタグ
1. 順序なしリスト
- 順序なしリストは、並べ替えられていないリストです。リスト項目間に順序レベルはなく、通常は並べて配置されます。
- 順序なしリストの基本的な構文形式を定義する
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul> <li>Web フロントエンド開発</li>
<!--type 属性値を指定します。デフォルト値は disc です --> <li type="circle">Spring Boot フレームワーク</li> <li type="square">Python オブジェクト指向</ li> ;
<li type="disc">Java 高度なプログラミング</li>
効果：
2. 順序付きリスト
順序付きリストは、並び順を重視したリストです。<ol> タグを使用して定義され、複数の <li> タグを使用できます。内部にネストされます。たとえば、Web ページ上の一般的な曲のランキングやゲームのランキングは、順序付きリストを通じて定義できます。
注文リストの基本的な構文形式を定義します
＆lt; ol＆gt;
.. </ol>
効果：
3. 定義リスト
定義リストは、順序付きリストや順序なしリストの使用とは異なり、dl、dt、dd という 3 つのタグが含まれています。
定義リストの基本構文形式
<dl>
<dt>名詞 1</dt> ケース: </dl>
<!DOCTYPE html>
<html>
="utf-8"> 3 原色と 4 つの心理色の 1 つ 、非常に強い、情熱的な色など & lt;/ dd & gt; & lt; dt & gt; 緑 & lt;/dt & gt; & lt & gt; /dd & gt; > & lt; dd & gt; 緑は生命を表し、希望を象徴しています < ;/dd> & lt; dd & gt; 緑は汚染志向です & lt;/dd & gt;
効果：
(7) ハイパーリンクタグ
ハイパーリンクは、<a></a> タグでリンクする必要があるオブジェクトを囲むだけで済みます。
<a></a> タグを使用してハイパーリンクを作成するための基本構文形式:
<a href="ジャンプターゲット" target="ターゲットウィンドウのポップアップメソッド">
テキストまたは画像
</a>
<a>タグはハイパーリンクの定義に使用されるインライン タグです。href と target は <a> タグの共通属性です
| 属性 | 意味 |
| href | href 属性は、リンクが指すページの URL を指定するために使用されます。href 属性が <a></a> タグで使用されると、タグはハイパーリンクの機能を持ちます。 。 |
| 目標 | target 属性はページの開き方を指定するために使用され、その値は _self、_blank、_parent、_top です (_self と _blank がより一般的に使用されます)。このうち、_self はデフォルト値で、元のウィンドウで開くことを意味し、_blank は新しいウィンドウで開くことを意味し、_parent はリンクされたドキュメントを親フレーム セットで開くことを意味し、_top はリンクされたドキュメントをウィンドウ全体で開くことを意味します。 |
場合：
<!DOCTYPE html>
<html>
="utf-8"> <body> 新しいウィンドウで開きます: <a href="http://www.lzy.edu.cn/" target= "_blank">蘆州職業技術学院</a><br /> 元のウィンドウで開く: http:/ /www.chinaskills-jsw.org/" target="_self">全国専門学校技能競技大会</a> </body> </html>
効果：
(8) 画像タグ
HTML Web ページに画像を表示するには、画像タグ <img> を使用する必要があります。
<img>タグの基本構文形式: <img src= 「画像 URL」 />
ケース:
具体的なコード:
<!DOCTYPE html>
<html>
<head>
<メタ文字セット="utf-8">
<title>indexg</title>
</head>
<body>
本地图片：
<img src="../img/img01a.jpg"幅= "256px"高さ= "140ピクセル" border="1px"/><br />
网络图片：
<img src="https://img1.baidu .com/it/u=2231820758,601427063&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500"width="256px"高さ= "140ピクセル" border="1px"/><br />
</body>
</html>
レンダリング：
