HTML独習ツアー（I）基本要素と属性の演習（自作コード編）
2022-01-28 05:12:18
W3schoolのチュートリアルに従いましたが、個人的にはチュートリアルは非常に良いと思います。
演習1
<html>
<body bgcolor="yellow">
<h1 align="center">This is heading 1</h1>
<h2 align = "left">This is heading 1</h2>
<h3 align = "right">This is heading 1</h3>
<h4>This is heading 1</h4>
<h5>This is heading 1</h5>
<h6>This is heading 1</h6>
<! --<h7>This is heading 1</h7>-->
<! --<h7>This is heading 1</h7>-->
<p>This is the first paragraph
</p>
<hr /> This is the link area
<a href="http://www.baidu.com">This is baidu link</a>
<br/>
<a href="http://www.w3school.com.cn">This is w3school link</a>
<hr />This is the image area
<img src = "http://img.t.ifeng.com/201010/22/12/96x96_1758293e995c.jpg" />
<hr /> This is the table area
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<hr /> Line feed function
<p>This sentence
Line break here
</p>
<p>
This paragraph There are many
blank lines
Or spaces
But browsers automatically ignore
They are automatically ignored by the browser
</p>
<pre>
This is the pre-formatted text
You can display blank lines
and spaces
And the code
</pre>
<pre>
while(true)
{
sum=a+b;
return sum;
cout<<sum;
}
</pre>
</body>
</html>
演習2
<html>
<body>
<b>This text is bold</b>
<strong>This text is strong</strong>
<big>This text is big</big>
<small>This text is small</small>
<em>This text is emphasized</em>
<i>This text is italic</i>
This text contains<sub>subscripts</sub>
This text contains<sup>superscript</sup>
<hr />
<pre>
This is the pre-formatted text
Haha
Can output spaces
Blank lines, right?
</pre>
<code>
while(true)
{
computer code;
</code>
<kbd>keyboard input</kbd>
<samp>Sample text</samp>
<var>Computer variable</var>
<hr />
Address Exercise.
<address>
SHUDIP, Tianjin
FERT R
ABC (Receive)
Zip code: 123456
</address>
<hr /> Abbreviation exercise
<abbr title = "etcetera">etc.</abbr>
<acronym title = "World Wide Web">www.</acronym>
<hr />Text direction exercise // That's not supported here, right-to-left text should be output
<bdo dir="rt1">Here is some text</bdo>
<hr />Block citation exercise
This is a long quote
<blockquote>This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is the long quote. This is the long quote. This is the long quote. This is a long quote.
This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is a long quote.
This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote</blockquote>
This is a short quote
<q> short quote wow, short quote</q>
<hr />Delete or add text effects practice
<p>A dozen have <del>twenty </del><ins>twelve </ins>oh</p>
</body>
</html>
超簡単なんだろうな、おい、頑張れ!
演習1
コピーコード
コードは以下の通りです。
<html>
<body bgcolor="yellow">
<h1 align="center">This is heading 1</h1>
<h2 align = "left">This is heading 1</h2>
<h3 align = "right">This is heading 1</h3>
<h4>This is heading 1</h4>
<h5>This is heading 1</h5>
<h6>This is heading 1</h6>
<! --<h7>This is heading 1</h7>-->
<! --<h7>This is heading 1</h7>-->
<p>This is the first paragraph
</p>
<hr /> This is the link area
<a href="http://www.baidu.com">This is baidu link</a>
<br/>
<a href="http://www.w3school.com.cn">This is w3school link</a>
<hr />This is the image area
<img src = "http://img.t.ifeng.com/201010/22/12/96x96_1758293e995c.jpg" />
<hr /> This is the table area
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<hr /> Line feed function
<p>This sentence
Line break here
</p>
<p>
This paragraph There are many
blank lines
Or spaces
But browsers automatically ignore
They are automatically ignored by the browser
</p>
<pre>
This is the pre-formatted text
You can display blank lines
and spaces
And the code
</pre>
<pre>
while(true)
{
sum=a+b;
return sum;
cout<<sum;
}
</pre>
</body>
</html>
演習2
コピーコード
コードは以下の通りです。
<html>
<body>
<b>This text is bold</b>
<strong>This text is strong</strong>
<big>This text is big</big>
<small>This text is small</small>
<em>This text is emphasized</em>
<i>This text is italic</i>
This text contains<sub>subscripts</sub>
This text contains<sup>superscript</sup>
<hr />
<pre>
This is the pre-formatted text
Haha
Can output spaces
Blank lines, right?
</pre>
<code>
while(true)
{
computer code;
</code>
<kbd>keyboard input</kbd>
<samp>Sample text</samp>
<var>Computer variable</var>
<hr />
Address Exercise.
<address>
SHUDIP, Tianjin
FERT R
ABC (Receive)
Zip code: 123456
</address>
<hr /> Abbreviation exercise
<abbr title = "etcetera">etc.</abbr>
<acronym title = "World Wide Web">www.</acronym>
<hr />Text direction exercise // That's not supported here, right-to-left text should be output
<bdo dir="rt1">Here is some text</bdo>
<hr />Block citation exercise
This is a long quote
<blockquote>This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is the long quote. This is the long quote. This is the long quote. This is a long quote.
This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is the long quote. This is a long quote.
This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote</blockquote>
This is a short quote
<q> short quote wow, short quote</q>
<hr />Delete or add text effects practice
<p>A dozen have <del>twenty </del><ins>twelve </ins>oh</p>
</body>
</html>
超簡単なんだろうな、おい、頑張れ!
関連
-
div要素に丸みを帯びたボーダーを追加する方法
-
スクロールバーを非表示にするHTMLメソッドとスクロールバーを削除するHTMLメソッド
-
HTML学習ノート - HTMLの構文が詳しくわかる（必見）
-
vertical-alignで入力とimgを揃える。
-
IEブラウザのHTML Hackタグの概要
-
HTMLのFormのmethod属性の使い方を紹介します。
-
HTMLドロップダウンボックスのSELECTオプションを変更するさまざまな方法
-
セレクトドロップダウンメニューのテキストを左右にスクロールするように設定する方法
-
HTMLページにおけるURLの表現
-
初歩的な理解のためのWebページのhtnlの基礎知識
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン