ああ、今日続行
スローリンク2つのHTMLの研究ノートを
今みましょう猫の写真アプリのページが一時的に脇に置くと、HTMLスタイルについての詳細を学ぶことを学びます。
これが始まりです
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: red;
padding: 20px;
}
.green-box {
background-color: green;
padding: 10px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
ラベルレイアウトのページ14.
：各HTML要素の三つの重要な属性のコントロールレイアウトがありますpadding（パディング）、 margin（マージン）、 border（ボーダー）。
padding制御要素とそのフレーム境界との間の距離。
注置くためにということstyleで
.green-box {
background-color: green;
padding: 20px;
}
異なる方向有するように
padding-top、padding-right、padding-bottom及びpadding-leftパディングの四つの要素の方向を制御するプロパティを。
注置くためにということstyleで
.green-box {
background-color: green;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}
指定した要素に加えて、それぞれpadding-top、padding-right、padding-bottomとpadding-left外側の属性の下に示したように、あなたは、それらを一緒に指定することができます
注意を置くために、ということstyle
.green-box {
background-color: green;
padding:40px 20px 20px 40px;
}
これら四つの値は時計回りに配置されている：左上、右、底部は、と呼ば右下左。
margin距離要素の境界線と空間の周囲の要素は、実際の制御によって占有しました。
注置くためにということstyleで
.green-box {
background-color: green;
padding: 20px;
margin: 20px;
}
同様に、それぞれ指定された要素に加えてmargin-top、margin-right、margin-bottomおよびmargin-left属性に、そして以下に示すように、パディングとしてそれらを一緒に指定することができる。
なお、配置しますstyle
.green-box {
background-color: green;
margin:40px 20px 20px 40px;
}
同様に、右下に残っています！
あなたは要素のマージンを設定した場合は負で、その要素は大きくなります。
注置くためにということstyleで
.green-box {
background-color: green;
padding: 20px;
margin: -15px;
}
また、異なる方向に分けることが同じ缶
CSSは、あなたが使用することができmargin-top、margin-right、margin-bottomおよびmargin-left4つの要素のマージンの方向を制御する属性。
注置くためにということstyleで
.green-box {
background-color: green;
margin-top:40px;
margin-left: 40px;
margin-right: 20px;
margin-bottom: 20px;
}
私はこれにマージすることが驚いたような長い時間を書いて、ハッハッハハッハッハハッハッハ間
に行く！
しかし、それができるように、HTMLを思わ
大体それをまとめます
HTML 元素
<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
<br> 这是一个换行标签
これは段落です
これは、リンクされたHTML要素のための1つまたは複数のクラス名（クラス名）を定義改行タグ** HTML **クラスの属性であるインラインスタイル（クラス名は、スタイルファイルから導入される）id要素は、（所定のユニークなIDのスタイル要素を定義しますインラインスタイル）タイトル（）は、ツールバーなどの追加情報要素を記述します
HTMLの水平線
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
これは段落です。
これは段落です。
これは段落です。
HTMLのコメント
<!-- 这是一个注释 -->
HTMLテキスト書式タグ
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
太字テキストの定義
定義は、テキストに焦点を当てて
定義されたイタリック体
の小さなワード定義
重点を置いた定義は
下付き単語定義
定義ワードマークを
挿入単語の定義
単語の定義を削除します。
HTMLの画像
使用して<img>タグをHTMLページ内の画像を定義します。タグは、2つの本質的な性質を持っています
srcとalt。
<img border="0" src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
HTMLテーブル
<table>…</table>：定义表格
<th>…</th>：定义表格的标题栏（文字加粗）
<tr>…</tr>：定义表格的行
<td>…</td>：定义表格的列
例
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
| 行1、セル1 | 行1、セル2 |
| 行2、セル1 | 行2、セル2 |
一覧HTML
使用順不同リスト<ul>のラベルを
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
- コーヒー
- 牛乳
順序付きリストで始まる<ol>ラベル。リストの各項目で始まる<li>ラベル
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
- コーヒー
- 牛乳
するために、<dl>ラベルを開始します。する各カスタムリスト項目<dt>始めます。する各カスタム定義のリスト項目<dd>を開始します。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
- コーヒー
- - 黒のホットドリンク
- 牛乳
- - 白い冷たいドリンク
HTMLブロック
、多くの場合、新しい行を持つブラウザディスプレイのブロックレベル要素は、開始（及び終了）します。
例：<h1>、<p>、<ul>、<table>
表示されたとき、インライン要素は、通常、新しい行を開始しません。
例：<b>、<td>、<a>、<img>
HTMLの<div>要素は、相互に分離した別の部分に文書を置くことができます。それは他のコンテナのHTML要素と組み合わせて使用することができ、ブロックレベル要素です。具体的な意味はありません。それはブロックレベル要素に属しているのでまた、ブラウザは、その長手方向の折り線が表示されます。CSSと一緒に使用する場合は、コンテンツの大きなブロックの設定スタイルプロパティを使用することができます。
もう一つの一般的な用途は、その文書のレイアウトです。これは、レイアウトを定義するためにテーブルを使用する古い方法を置き換えます。
使用した<table>文書のレイアウトの要素は正しい使用形態ではありません。<table>要素は、表形式のデータを表示するために使用されます。
HTMLの<span>要素は、インライン要素であり、テキストコンテナとして使用することができ、特段の意味はありません。CSSで使用する場合は、設定されたテキストスタイル属性の一部として使用することができます。
HTMLフォームは
、ここで多くのことが非常に重要です。
をどうする例
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
姓：
フォーム自体は表示されません。一方、ほとんどのブラウザでは、テキストフィールドのデフォルトの幅は20文字です。
これは、パスワードを入力することです
<form>
Password: <input type="password" name="pwd">
</form>
パスワードフィールドの文字がクリアテキストではなく、代わりにアスタリスクまたはドットで表示されません。
無線（ラジオボタン）
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
女性
CSDNは、その内部が見えないことがあり
写真添付
（チェックボックス）ボックス
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
[送信]ボタンを（送信ボタン）
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
それを食べる
空腹
