HTMLコードの書き方-フロントエンドQ&A-php.cn

HTMLコードの書き方

PHPz

リリース： 2023-04-23 16:21:43

オリジナル

4107 人が閲覧しました

<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>HTML 言語では、さまざまなコードを使用できます。さまざまな種類のテキストを定義します。その中で最も基本的なのは、段落を表す <p> タグです。

<p>这是一个段落。</p>

ログイン後にコピー

<p>上記のコードでは、<p> タグ「これは段落です。」内のテキストが段落のテキストコンテンツです。同時に、HTML では、記事の階層化と構造を強化するために、複数レベルのタイトル (h1, h2, h3...h6) も提供されます。

<h1>这是一个一级标题。</h1>
<h2>这是一个二级标题。</h2>

ログイン後にコピー

<li>Pictures <p>画像の挿入は、Web デザインにおける一般的な操作です。HTML 言語では、<img> タグを使用して、画像を挿入します。

<img src="图片路径" alt="图片描述">

ログイン後にコピー

<p>このうち、src 属性は必須であり、画像ファイルの URL または相対ファイルパスを指定するために使用されます。 alt 属性は、画像が表示できない場合に、画像の内容を説明するテキストをページ上に表示するために使用されます。

<li>リンク <p>リンクを通じて Web ページ間を移動できます。HTML では、<a> タグを使用してリンクを作成できます。 . .

<a href="http://www.example.com">这是一个链接</a>

ログイン後にコピー

<p>href 属性は必須であり、リンクのターゲット URL を指定するために使用されます。同時に、<a> タグに title 属性を追加して、マウスホバー時のプロンプト情報を追加することもできます。

<p>同じディレクトリ内の他の HTML ドキュメントにリンクする場合は、相対パスを使用することもできます。

<a href="./about.html">关于我们</a>

ログイン後にコピー

<li>List <p>HTML では、 <ul> タグと <li> タグを使用して順序なしリストを作成できます。<ol> タグと <li&gt タグを使用します。 ; タグを使用して順序付きリストを作成します。

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

<ol>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
</ol>

ログイン後にコピー

<li>Table <p>HTML では、<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> フォームは、Web デザインにおける一般的な対話方法の 1 つです。HTML では、<p><form>、## を使用できます。 # <input>、<label>、<select>、および <textarea> を使用してフォームを作成します。

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;form&gt;
   &lt;label&gt;用户名:&lt;/label&gt;
   &lt;input type=&quot;text&quot; name=&quot;username&quot;&gt;&lt;br&gt;
   &lt;label&gt;密码:&lt;/label&gt;
   &lt;input type=&quot;password&quot; name=&quot;password&quot;&gt;&lt;br&gt;
   &lt;label&gt;年龄:&lt;/label&gt;
   &lt;input type=&quot;number&quot; name=&quot;age&quot;&gt;&lt;br&gt; 
   &lt;label&gt;性别:&lt;/label&gt;
   &lt;input type=&quot;radio&quot; name=&quot;gender&quot; value=&quot;male&quot;&gt;男
   &lt;input type=&quot;radio&quot; name=&quot;gender&quot; value=&quot;female&quot;&gt;女&lt;br&gt;
   &lt;label&gt;兴趣爱好:&lt;/label&gt;
   &lt;input type=&quot;checkbox&quot; name=&quot;hobby&quot; value=&quot;reading&quot;&gt;阅读
   &lt;input type=&quot;checkbox&quot; name=&quot;hobby&quot; value=&quot;traveling&quot;&gt;旅游
   &lt;input type=&quot;checkbox&quot; name=&quot;hobby&quot; value=&quot;swimming&quot;&gt;游泳&lt;br&gt;
   &lt;label&gt;个人介绍:&lt;/label&gt;&lt;br&gt;
   &lt;textarea name=&quot;introduction&quot; rows=&quot;6&quot; cols=&quot;50&quot;&gt;&lt;/textarea&gt;&lt;br&gt;
   &lt;input type=&quot;submit&quot; value=&quot;提交&quot;&gt;
&lt;/form&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

このうち、

<p> ラベルはフォーム要素を表し、name 属性はフォームデータの名前を表し、type はフォーム要素を表します。 属性はフォーム要素の名前を表します。タイプ、value 属性はフォーム要素の値を表します、<select> ラベルはドロップダウンメニューを表します、<textarea> ラベルは複数行のテキストボックスを表します。 <label> ラベルはフォーム要素を説明するために使用されます。 <form> ラベルは次の内容を含むために使用されます。 form 要素、<input type="submit"> は送信ボタンを意味します。

その他のタグ

<li>HTML には、オーディオとビデオの再生、アニメーション、Canvas など、他にも多くのタグがあります。さらに多くのタグと実装方法を知る必要がある場合は、公式 HTML ドキュメントまたは関連するチュートリアルや書籍を参照してください。 <p>つまり、HTML コードを記述するには、基本的な構文とタグを習得し、さまざまなタグと属性を柔軟に使用して美しく機能的な Web ページを作成する必要があります。

以上がHTMLコードの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。