ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTMLコードの書き方
HTMLコードの書き方
- PHPzオリジナル
- 2023-04-23 10:14:564117ブラウズ
<p>HTML は Web ページ制作の基本言語で、正式名は「Hyper Text Markup Language」といい、Web ページの構造や内容を記述するためのコンピュータ言語です。 HTML コードの書き方を学ぶことは Web ページ作成の第一歩です。基本的な HTML 構文とコードの書き方を紹介します。
<ol><li>基本構造の構築
<p>HTML コードの最初の行は、ドキュメント タイプ宣言、つまり
<!DOCTYPE html> である必要があります。 。この宣言は、このドキュメントがどのドキュメント タイプ定義 (DTD) を採用するかをブラウザーに伝えます。 <html> タグが続き、Web ページの始まりと終わりを示すために使用されます。 <html> タグ内には、通常、<head> と <body> という 2 つの重要なサブタグがあります。
<ul>
<li>
<head> タグ: タグ内のコンテンツはブラウザーに直接表示されませんが、主にページにメタデータを提供するために使用されます。 <title> タグ (Web ページのタイトルの設定に使用) と <meta> タグ (Web ページのキーワード、説明、その他の情報の設定に使用) を含めることができます。ウェブページ）など
<li>
<body> タグ: これはページの主要部分であり、Web コンテンツの HTML タグが含まれています。
<p>以下は、基本的な HTML 構造コードです:
<!DOCTYPE html> <html> <head> <title>我的网页标题</title> <meta charset="utf-8"> </head> <body> 这里是内容 </body> </html>
- <li>テキストとタイトル
<p> タグです。
<p>这是一个段落。</p><p>上記のコードでは、
<p> タグ「これは段落です。」内のテキストが段落のテキスト コンテンツです。同時に、HTML では、記事の階層化と構造を強化するために、複数レベルのタイトル (h1, h2, h3...h6) も提供されます。
<h1>这是一个一级标题。</h1> <h2>这是一个二级标题。</h2>
- <li>Pictures
<img> タグを使用して、画像を挿入します。
<img src="图片路径" alt="图片描述"><p>このうち、
src 属性は必須であり、画像ファイルの URL または相対ファイル パスを指定するために使用されます。 alt 属性は、画像が表示できない場合に、画像の内容を説明するテキストをページ上に表示するために使用されます。
- <li>リンク
<a> タグを使用してリンクを作成できます。 . .
<a href="http://www.example.com">这是一个链接</a><p>
href 属性は必須であり、リンクのターゲット URL を指定するために使用されます。同時に、<a> タグに title 属性を追加して、マウスホバー時のプロンプト情報を追加することもできます。
<p>同じディレクトリ内の他の HTML ドキュメントにリンクする場合は、相対パスを使用することもできます。
<a href="./about.html">关于我们</a>
- <li>List
<ul> タグと <li> タグを使用して順序なしリストを作成できます。<ol> タグと <li> タグを使用します。 ; タグを使用して順序付きリストを作成します。
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>
- <li>Table
<table>、<tr>、## を使用できます。 # タグと タグを使用してテーブルを作成します。
<table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>18</td> <td>男</td> </tr> <tr> <td>李四</td> <td>22</td> <td>女</td> </tr> </table>このうち、<p>
ラベルはヘッダー セルを表し、 ラベルはデータ セルを表し、<tr> ラベルは行を表し、<table> ラベルはテーブル全体を表します。
- フォーム<li>
、## を使用できます。 # <input>、<label>、<select>、および <textarea> を使用してフォームを作成します。 <pre class="brush:php;toolbar:false"><form>
<label>用户名:</label>
<input type="text" name="username"><br>
<label>密码:</label>
<input type="password" name="password"><br>
<label>年龄:</label>
<input type="number" name="age"><br>
<label>性别:</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女<br>
<label>兴趣爱好:</label>
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="traveling">旅游
<input type="checkbox" name="hobby" value="swimming">游泳<br>
<label>个人介绍:</label><br>
<textarea name="introduction" rows="6" cols="50"></textarea><br>
<input type="submit" value="提交">
</form></pre> このうち、<p> ラベルはフォーム要素を表し、name 属性はフォームデータの名前を表し、type はフォーム要素を表します。 属性はフォーム要素の名前を表します。タイプ、value 属性はフォーム要素の値を表します、<select> ラベルはドロップダウン メニューを表します、<textarea> ラベルは複数行のテキスト ボックスを表します。 <label> ラベルはフォーム要素を説明するために使用されます。 <form> ラベルは次の内容を含むために使用されます。 form 要素、<input type="submit"> は送信ボタンを意味します。 -
<li>HTML には、オーディオとビデオの再生、アニメーション、Canvas など、他にも多くのタグがあります。さらに多くのタグと実装方法を知る必要がある場合は、公式 HTML ドキュメントまたは関連するチュートリアルや書籍を参照してください。
以上がHTMLコードの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：htmlタグとは何ですか?次の記事：htmlタグとは何ですか?