HTML詳細連載(2)
コラムリンクlink
次のコラムで紹介します
このコラムは、フロントエンドを独学で学ぶ旅であり、コードを純粋に手で入力し、ダークホースコースに従い、コードとメモに適切な修正を加えるために私自身の理解をいくつか加えました
。皆さんのお役に立てれば幸いです。同時に、私を監督し、私が書いたコードに提案を与え、お互いに学び合ってください。
始める
ハイパーリンク
効果
クリックすると他のページにジャンプします。
コード例
<a href=”https://www.baidu.com”>跳转到百度</a>
説明する
href属性值是跳转地址，是超链接的必须属性。
属性加上target=”_black”新窗口打开页面
経験の共有
開発の初期段階では、ハイパーリンクのジャンプ アドレスは不明でした。href 属性に # を記述します。これは空のリンクを意味し、ジャンプしません。
オーディオタグ
コード例
<audio src=”音频的URL”></audio>
知らせ
| 共通の属性 | 効果 | 特別な指示 |
|---|---|---|
| src (必須属性) | 音声 URL | サポートされている形式: MP3、Ogg、Wav |
| コントロール | オーディオコントロールパネルを表示 | |
| ループ | ループ | |
| 自動再生 | 自動再生 | ユーザーエクスペリエンスを向上させるために、ブラウザでは通常、自動再生機能が無効になっています。 |
強調する
HTML5 では、属性名が属性値とまったく同じである場合、単語として省略できます。
ビデオタグ
コード例
<video src=”视频的URL”></video>
知らせ
| 共通の属性 | 効果 | 特別な指示 |
|---|---|---|
| src (必須属性) | 音声 URL | サポートされている形式: MP4、Ogg、WabM |
| コントロール | ビデオコントロールパネルを表示 | |
| ループ | ループ | |
| 自動再生 | 自動再生 | ユーザーエクスペリエンスを向上させるために、ブラウザはミュート状態での自動再生機能をサポートしています |
強調する
ブラウザで自動的に再生したい場合は、ミュート属性が必要です
リスト
機能: レイアウトコンテンツが整然と配置される領域。
カテゴリ: 順序なしリスト、順序付きリスト、定義リスト
順序なしリスト
効果
順序を指定する必要のないエリアをきれいに配置
ラベル
ul ネストされた li、ul は順序なしリスト、li はリストエントリ
例
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ul>
予防：
li タグのみを ul タグで囲むことができ、
任意のコンテンツを li タグで囲むことができます
順序付きリスト
効果
指定された順序が必要なエリアをきれいに配置する
ラベル
ol は li をネストします。ol は順序付きリスト、li はリスト項目です
例：
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ol>
予防：
ol タグは li タグのみをラップでき、
li タグは何でもラップできます。
定義リスト
ラベル
dl は dt と dd をネストします。dl は定義リスト、dt は定義リストのタイトル、
dd は定義リストの説明/詳細です。
例
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
……
</dl>
予防：
dl には dt と dd のみを含めることができます
dt と dd には任意のコンテンツを含めることができます
フォーム - 基本的な使用法
Web ページのテーブルは Excel テーブルに似ており、データを表示するために使用されます。
ラベル
テーブルのネストされた tr、tr ネストされた td/th
タグ名と説明
| タグ名 | 説明する |
|---|---|
| テーブル | シート |
| tr | わかりました |
| 番目 | ヘッダーセル |
| た | コンテンツセル |
予防：
Web ページでは、デフォルトではテーブルに境界線がありません。border プロパティを使用してテーブルに境界線を追加できます。
テーブル構造タグ
効果
テーブル構造タグを使用してコンテンツを領域に分割し、テーブル構造とセマンティクスをより明確にします。
| タグ名 | 意味 | 特別な指示 |
|---|---|---|
| 宣伝 | フォームヘッダー | テーブルヘッダーの内容 |
| ボディ | フォームボディ | メインコンテンツエリア |
| tフット | テーブルの下 | 概要情報エリア |
セルを結合します
効果
複数のセルを 1 つのセルに結合して、同じ種類の情報を結合します。
ステップ
1. 結合ターゲットをクリアします
。 2. 左端と一番上のセルを保持し、属性を追加します (値は、結合する必要があるセルの数を示す数値です)。 行全体を結合し、一番上のセルを保持し、属性 rowspan を追加し
ます
。列全体を結合し、左端のセルを保持し、属性colspanを追加します
。 3. 他のセルを削除します。