HTML の基本_html/css_WEB-ITnose-htmlチュートリアル-php.cn

1. HTML の概要

W3C (World Wide Web Consortium)、W3C 組織、World Wide Web Consortium は、Web 標準を開発する組織です。 W3C 標準は標準ではなく、構造標準、パフォーマンス標準、アクション標準の 3 つの部分からなる標準の集まりです。構造標準は HTML に対応し、パフォーマンス標準は CSS に対応し、アクション標準は CSS に対応します。 JavaScriptです。

HTML は Web で使用される一般的なマークアップ言語で、テキストの書式設定、画像の追加、リンクの作成、フォーム、フレーム、表などの入力をブラウザで行うことができます。読み取られて表示されます。 HTML の鍵となるのはタグであり、その役割はコンテンツをレンダリングすることです。ブラウザは HTML ファイルを読み取って Web ページとして表示するために使用されます。HTML タグは直接表示されませんが、タグを使用して HTML ページのコンテンツをユーザーに表示する方法を決定できます。

HTMLとは、Hyper Text Markup Languageのことです。 HTML はプログラミング言語ではなく、マークアップタグのセットであるマークアップ言語です。 HTML はマークアップタグを使用して Web ページを記述します。 HTML ドキュメントには HTML タグが含まれており、HTML ドキュメントは Web ページとも呼ばれます。

HTMLマークアップタグはHTMLタグと呼ばれることが多いです。 HTML タグは通常、

と

のようにペアで表示されます。タグペアの最初のタグは開始タグ、2 番目のタグは終了タグとも呼ばれます。タグと終了タグ。

HTML タグと HTML 要素は通常同じ意味を記述しますが、厳密に言えば、HTML 要素には次のような開始タグと終了タグが含まれます。

2. HTML タグ

HTML ドキュメントは HTML 要素によって定義されます。開始タグは開始タグと呼ばれることが多く、終了タグは終了タグと呼ばれることがよくあります。要素のコンテンツは、開始タグと終了タグの間のコンテンツです。一部の HTML 要素には空のコンテンツが含まれており、開始タグの終わりで終了します。

HTML ドキュメントは、ネストされた HTML 要素で構成されています:

私は段落です。

HTML要素は属性を設定できます属性はHTML要素によって提供される追加情報です。タグの場合、属性は常に名前と値のペアの形式で表示されます (name="value" など)。プロパティ値は常に引用符で囲む必要があります。二重引用符が最も一般的に使用されますが、一重引用符を使用しても問題ありません。まれに、属性値自体に二重引用符が含まれている場合など、一重引用符を使用する必要があります。 anuth

itaTがほとんどのHTML要素に適用可能：

：IDは、要素の一意のIDを定義します。要素のスタイル(インラインスタイルinline style)

④：title 要素の追加情報を記述する(ツールバーとして使用)

(1)、基本タグ

HTML5宣言：。この宣言は、ブラウザーが Web ページを正しく表示するのに役立ち、これが HTML5 Web ページであることをブラウザーに伝えます。宣言はドキュメントの最前面、タグの前にあり、宣言では大文字と小文字が区別されません。

タグは、これが HTML ドキュメントであることをブラウザーに伝えます。タグは HTML ドキュメントの最も外側の要素であり、ドキュメントのルート要素でもありますが、doctype 要素、つまりステートメント doctype 要素は含まれません。 HTML 要素

HTML5 では、ドキュメントのキャッシュ情報を記述する URL を定義するために使用される URL を値とする新しい属性、manifest が追加されました。
タグとタグの間に、ドキュメントの先頭と本文が定義されます。、および本文はタグによって定義されます。

🎜
　　元素包含了所有的头部标签元素。在元素中你可以插入脚本(scripts)，样式文件(CSS)，及各种 meta 信息。可以添加在头部区域的元素标签有 7 个: ，<style>，<meta>，<link>，<script>，<noscript> 和 <base>。</strong></p> <p> </p> <p>　　<strong><meta>标签描述了一些基本的元数据。元数据也不显示在页面上，但会被浏览器解析。</strong><strong><meta>元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面)，搜索引擎(关键词)，或其他Web服务。注意：<meta> 通常位于 <head> 区域内，在 HTML 中 <meta> 标签没有结束标签。</strong></p> <p>　　<strong>元数据（Metadata）是数据的数据信息，<meta> 标签提供了 HTML 文档的元数据。注意：元数据通常以名称/值对出现。注意：如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。</strong><strong>在 HTML5 中，有一个新的 charset 属性，它使字符集的定义更加容易</strong>：HTML 4.01： <meta http-equiv="content-type" content="text/html; charset=UTF-8">，<strong>HTML5： <meta charset="UTF-8"></strong>。</p> <p>　　<strong><meta> 标签使用实例：</strong></p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>1 定义编码格式：<meta charset="UTF-8">2 为搜索引擎定义关键词：<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">3 为网页定义描述内容：<meta name="description" content="HTML基础">4 定义网页作者：<meta name="author" content="Mr mo">5 每30秒中刷新当前页面：<meta http-equiv="refresh" content="30">6 常用的针对移动网页优化过 viewport 的 meta：<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p>　　<strong>上面实例最后一项代码解析：</strong></p> <p>　　<strong>width：控制 viewport(可视区) 的大小，可以是指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度，单位为缩放为 100% 时的 CSS 的像素。</strong></p> <p><strong>　　height：和 width 相对应，指定高度。</strong></p> <p><strong>　　initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。</strong></p> <p><strong>　　maximum-scale/minimum-scale：允许用户缩放到的最大/最小比例。</strong></p> <p><strong>　　user-scalable：用户是否可以手动缩放。</strong></p> <p> </p> <p>　　<strong><title> 标签定义HTML文档的标题。使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。</strong></p> <p>　　<strong><title> 标签在所有 HTML 文档中是必需的。<title>元素：</strong></p> <p>　　　　<strong>①：定义浏览器工具栏中的标题。</strong></p> <p><strong> 　　　　②：提供页面被添加到收藏夹时的标题。 </strong></p> <p><strong>　　　　③：显示在搜索引擎结果中的页面标题。</strong></p> <p>　　<strong>注意：一个 HTML 文档中不能有一个以上的 <title> 元素。如果你遗漏了 <title> 标签，文档作为 HTML 是无效的。</strong><strong><title> 标签定义了不同文档的标题。定义了浏览器工具栏的标题。当网页添加到收藏夹时，显示在收藏夹中的标题。显示在搜索引擎结果页面的标题。所以选择标题的时候，一定要简短，有说明性，采用关键词，与页面内容相关。</strong></p> <p> </p> <p>　　<strong><style> 标签定义了 HTML 文档的样式信息。</strong><strong>在 <style> 元素中，你可以规定在浏览器中如何呈现 HTML 文档，每个 HTML 文档能包含多个 <style> 标签。</strong><strong>注意：如果没有使用 "scoped" 属性，则每一个 <style> 标签必须位于 head 头部区域。</strong><strong>"scoped" 属性是 HTML5 中的新属性，它允许我们为文档的指定部分定义样式，而不是整个文档。如果使用 "scoped" 属性，那么所规定的样式只能应用到 style 元素的父元素及其子元素。</strong><strong>在 HTML5 中可以不定义类型（type）属性，默认值为 "text/css"。如需链接外部样式表，就使用 <link> 标签。<style>定义文本样式，<link> 定义资源引用地址。</strong></p> <p> </p> <p>　　<strong><link> 标签定义了文档与外部资源之间的关系。<link> 标签通常用于链接到样式表：<link rel="stylesheet" type="text/css" href="mystyle.css">。注意： link 元素是空元素，它仅包含属性，此元素只能存在于 head 部分，不过它可出现任何次数。</strong></p><p> </p> <p> JavaScript は HTML ページをより動的でインタラクティブにします。 HTML スクリプトタグ <script> は、クライアント側のスクリプトを定義するために使用されます。 <noscript> タグは、スクリプトをサポートしていないブラウザによるテキスト出力を定義します。この要素は、ブラウザでスクリプトを無効にしているユーザー、またはブラウザがクライアント側のスクリプトをサポートしていないユーザーに役立ちます。 </p> <p> <strong><script> は、JavaScript などのクライアント側のスクリプトを定義します。 </strong><strong><script> 要素には、スクリプトステートメントを含めることも、src 属性を通じて外部スクリプトファイルを指定することもできます。 </strong>JavaScript は、画像の操作、フォームの検証、および動的なコンテンツの変更に最も一般的に使用されます。 <strong>注: 「src」属性を使用する場合は、<script> 要素を空にする必要があります。 </strong></p> <p> 外部スクリプトを実行するにはいくつかの方法があります: <strong></strong> </p> <p>①: async="async" の場合: スクリプトはページの残りの部分に対して非同期に実行されます (ページの解析が継続されている間にスクリプトが実行されます) ）。 <strong></strong> </p><p> ②: async が使用されておらず、 defer="defer" の場合: ページの解析が完了するとスクリプトが実行されます。 <strong></strong> </p><p> ③: async も defer も使用されていない場合: ブラウザーがページの解析を続ける直前にスクリプトを読み取って実行します。 <strong></strong> </p> <p> HTML5では、「type」属性はオプションです。 src 属性は、外部スクリプトの URL を指定します。 <strong></strong>defer 属性は、ページの解析が完了した後にスクリプトが実行されることを指定するために使用され、外部スクリプトにのみ適用されます。 charset 属性は、スクリプトで使用される文字エンコーディングを指定するために使用され、外部スクリプトにのみ適用されます。 <strong></strong>「async」属性は HTML5 の新しい属性で、スクリプトの非同期実行を指定するために使用され、外部スクリプトにのみ適用されます。 <strong></strong> </p> <p> 外部スクリプトを参照するための構文: <script src="URL"></script> ここで、src="RUL" には、同じディレクトリ内の外部スクリプトファイルの名前が入ります。 <strong></strong> </p> <p>注: <strong></strong> </p> <p>①: 外部スクリプトファイルには任意の拡張子を付けることができます。通常、開発者は JavaScript 外部スクリプトの拡張子を script.js として記述します。 <strong></strong> </p><p> ②: 外部スクリプトファイルには、スクリプト言語コードのみを含めることができ、HTML コードなどの他のコードは含めることはできません。<script> 要素は、 HTML 言語の要素。 <strong></strong> </p><p> ③: 外部スクリプトファイルを参照する場合、<script> タグと </script> の間にスクリプト言語コードを含む他のコードを含めることはできません。 <strong></strong> </p><p> ④: 外部スクリプトファイルを参照する場合、<script>タグと</script>タグの間に他のコードを入れることはできません。 <strong></strong> </p> <p><noscript> タグは、ブラウザがスクリプトを無効にしている場合や、ブラウザがクライアント側のスクリプトをサポートしていない場合など、スクリプトが使用できない場合に代替コンテンツを提供します。 <noscript> 要素には、通常の HTML ページの body 要素内にあるすべての要素を含めることができます。 <noscript> 要素内のコンテンツは、ブラウザがスクリプトをサポートしていない場合、またはスクリプトが無効になっている場合にのみ表示されます。 <noscript> タグは、スクリプトが実行されない場合の代替コンテンツ (テキスト) を定義するために使用されます。このタグは、<noscript> タグを認識しても、その中のスクリプトをサポートできないブラウザで使用できます。ブラウザがスクリプトをサポートしている場合、noscript 要素内のテキストは表示されません。 HTML4.01 では、<noscript> タグは <body> 要素に挿入できます。。 <strong></strong> </p> <p> </p> <p><body> ドキュメントの本文を定義します。 <body> 要素には、ドキュメントのすべてのコンテンツ (テキスト、ハイパーリンク、画像、表、リストなど) が含まれます。 HTML 4.01 では、すべての body 要素の「レンダリング属性」が非推奨になりました。 HTML 5 では、すべての body 要素の「レンダリング属性」が削除され、スタイル定義が使用できるようになりました。 <strong></strong> </p> <p> </p> HTML タイトルは <h1> - <h6> タグによって定義されます。 <h1> は最大の見出しを定義し、<h6> は最小の見出しを定義します。 HTML タイトルタグは必ず見出しにのみ使用し、太字または大きなテキストを作成するためだけに見出しを使用しないでください。検索エンジンは、見出しを使用して Web ページの構造とコンテンツのインデックスを作成します。 h1 を主見出し (最も重要) として使用し、次に h2 (次に重要)、h3 というように使用する必要があります。 <h1> 最も重要度の高い見出しを定義します。 <h6> 重要度が最も低いタイトルを定義します。 <p><strong></strong></p><p> <strong>HTML 段落は <p> タグによって定義され、HTML はドキュメントを複数の段落に分割でき、ブラウザは段落の前後に空白行を自動的に追加します。 </strong><p> 要素はブロックレベルの要素であり、その前後に空白が自動的に作成されます。 <strong>新しい段落を作成せずに行を折り返す場合は、<br/> タグを使用します。 </strong><strong> 表示されている HTML の正確な効果を判断することはできません。画面のサイズやウィンドウの調整によって異なる結果が生じる可能性があります。HTML の場合、余分なスペースや改行を追加することによって出力の効果を変更することはできません。 HTMLコード。ページが表示されると、ブラウザーはソースコード内の余分なスペースと空行を削除し、連続するすべてのスペースまたは空行は 1 つのスペースとしてカウントされます。 </strong><strong>各段落の前に 2 つの単語があり、CSS スタイルで定義できます: <p style="text-indent:2em"></p></strong></p> <p> </p> <p> <strong><br/> ; タグを挿入します単純な改行文字。 </strong>コンテンツのない HTML 要素は、開始タグ内で閉じられています。<br/> は空要素です。 <strong><br/> タグは住所情報や詩を書くときにとても便利です。注: 段落を分割するのではなく、空白行を入力するには <br/> タグを使用します。 </strong></p> <p> </p> <p> <strong><hr/> タグは、HTML ページ内に水平線を作成してコンテンツを分離します。 <hr/> タグは、HTML ページ内のトピックの変更 (トピックの変更など) を定義し、HTML ページ内のコンテンツを区切る (または変更を定義する) ために使用されます。 HTML5 では、<hr/> はコンテンツ内のテーマのバリエーションを定義し、水平線として表示されますが、HTML 4.01 では、<hr/> タグは単純に水平線として表示されます。 CSS を使用して、<hr/> 要素のスタイルを定義できます。 </strong></p> <p> </p> <p> <strong>HTML コメント  </strong> <strong>コメントタグはソースドキュメントにコメントを挿入するために使用されます。コメントはブラウザーには表示されません。コメントを使用してコードを説明すると、特にコードの量が多い場合に、コードを編集するのに役立ちます。この場合、情報はコメントの内容に保存されます。ユーザーには見えませんが、プログラムでは利用できます。多くの Web サーバーは、ソースドキュメント内での明らかな役割に加えて、ドキュメントサーバーソフトウェアに固有の機能を実装するために注釈も使用します。これらのサーバーは、従来の HTML/XHTML コメントからドキュメントをスキャンして、コメントに埋め込まれたコマンドに基づいて適切なアクションを実行できます (いわゆるサーバー内部インクルード)。または、ドキュメントのコンテンツを動的に生成するために他のコマンドを実行するのが複雑になる場合もあります。 </strong></p> <p> </p> <p> <strong>(2)、styleタグ</strong></p> <p> <strong><article>(H5)タグは記事領域を定義します。 <article> タグは独立したコンテンツを定義します。定義するコンテンツはそれ自体で意味があり、ドキュメントの残りの部分から独立している必要があります。 <article> の考えられるソース: フォーラムの投稿、ブログの投稿、ニュース記事、コメント。 </strong></p> <p> <strong><aside> (H5) タグは、ページのサイドバーのコンテンツを定義します。 <aside> タグの定義 <article> タグ内のコンテンツは、近くのコンテンツと関連している必要があります。 <aside> コンテンツは記事のサイドバーとして使用できます。 </strong></p> <p> <strong><section> (H5) タグは、ドキュメントの特定の領域を定義します。文書の章、ヘッダー、フッター、その他の領域など。 </strong></p> <p> <strong><header> (H5) タグは、文書または文書の一部のヘッダーを定義します。 <header> 要素は、紹介コンテンツまたはナビゲーションリンクのコンテナとして機能する必要があります。ドキュメント内では、複数の <header> 要素を定義できます。注: <header> タグは、<footer>、<address>、または別の <header> 要素内に配置することはできません。 </strong></p> <p> <strong><footer> (H5) タグは、<section> ドキュメントまたはドキュメントの一部を定義するために使用されるフッターを定義します。 <footer> 要素には、その要素に含まれる要素に関する情報が含まれている必要があります。これには通常、ドキュメントの作成者の名前、ドキュメントの著作権情報、利用規約へのリンク、連絡先情報などが含まれます。ドキュメント内に複数の <footer> 要素を定義できます。 <footer> 要素を使用して連絡先情報を挿入する場合は、<footer> 要素内で <address> タグを使用する必要があります。 </strong></p><p> <strong><hgroup>(H5)タグは見出し要素をグループ化するために使用されます。タイトルに複数のレベル (字幕) がある場合、<hgroup> 要素は一連の <h1>h6> をグループ化するために使用されます。 </strong></p> <p> <strong><details> (H5) タグは、表示または非表示にするユーザー要件の補足詳細を指定します。 <details> タグは、ユーザーが対話型コントロールを開いたり閉じたりするために使用されます。 <details> 要素の内容は、open 属性が設定されていない限り、ユーザーには表示されません。このタグは、詳細のタイトルを定義するために <summary> タグと組み合わせて使用され、ユーザーがタイトルをクリックすると詳細が表示されます。 open 属性は、詳細を表示するかどうかを指定するために使用されます。 </strong></p> <p> <strong> <summary> (H5) タグは、ユーザーがタイトルをクリックすると詳細情報が表示される、<details> 要素の表示タイトルを定義します。注: <summary> 要素は <details> 要素の最初の子である必要があります。 </strong></p> <p> <strong><dialog> (H5) タグは、ダイアログボックス、確認ボックス、またはウィンドウを定義します。 open 属性は、ダイアログ要素が有効であり、ユーザーが対話できることを指定します。 </strong></p> <p> </p> <p><div> HTML文書内で区切られたブロックやエリア部分を定義する要素で、他のHTML要素を結合する際によく使われるコンテナです。ブロックレベルの要素を結合して、CSS でフォーマットできるようにします。 <div> 要素はブロックレベルの要素であるため、CSS で使用すると、ブラウザはデフォルトでその前後に改行を追加します。<div> 要素を使用して、大きなコンテンツブロックのスタイル属性を設定できます。 Web ページのレイアウトによく使用されます。 <strong></strong>これは、テーブルを使用してレイアウトを定義する昔ながらの方法を置き換えます。ドキュメントのレイアウトに <table> 要素を使用することは、表の正しい使用法ではありません。この要素の目的は、表形式のデータを表示することです。 <strong></strong> <strong> <span> タグは、ドキュメント内のインライン要素を結合するために使用されます。このタグにはスタイルが適用されない場合にのみ、視覚的な変更が生じます。 <span> に変更すると、<span> 要素内のテキストは他のテキストと視覚的に変わりません。 <span> タグを使用すると、テキストの一部またはドキュメントの一部を分離できます。<span> 要素を使用して、テキストの一部にスタイル属性を設定できます。 <span> 要素で囲まれたテキストは、CSS を使用してスタイル設定したり、JavaScript を使用して操作したりできます。 </strong></p> <p> <strong> </strong> </p>(3)、フォーマットタグ <p></p> <p> <strong><wbr> (H5) (Word Break Opportunity) タグは、テキスト内の改行を追加するのが適切な場所を指定します。単語が長すぎる場合、またはブラウザが間違った位置で改行することが心配な場合は、<wbr> 要素を使用して Word Break Opportunity (単語分割機会) を追加できます。ただし、ここで改行するのは単なる提案であり、必須ではありません。テキスト行全体の長さに依存するため、いくつかの <wbr> タグを挿入してください。改行の問題を解決するには、連続テキストの途中に適切に挿入します。 </strong></p> <p> <strong><meter> (H5) タグは度量衡を定義します。最大値と最小値がわかっている測定にのみ使用してください。例: ディスク使用量、クエリ結果の相関関係など。注: <meter> は進行状況バーとして使用できません。<progress> タグを使用してください。 </strong></p> <p> <strong><progress> (H5) タグは、実行中のタスクの進行状況 (プロセス) を定義します。タスクの進行状況を表示するには、JavaScript で <progress> タグを使用します。注: <progress> タグは、メトリクス (ディスク容量の使用状況や関連するクエリの結果など) を表すのには適していません。度量衡を表すには、代わりに <meter> タグを使用します。 </strong></p> <p> <strong><time> (H5) タグは、グレゴリオ時間 (24 時間時計) または日付を定義します。この属性は、日付または時刻がコンテンツ内で指定されていない場合に使用されます。要素。。この要素は、ブラウザーが読み取れる方法で日付と時刻をエンコードできます。たとえば、ユーザーエージェントは誕生日のリマインダーやスケジュールされたイベントをユーザーのカレンダーに追加でき、検索エンジンはよりスマートな検索結果を生成できます。 datetime 属性は日付/時刻を指定します。あるいは、日付/時刻は要素のコンテンツによって指定されますが、これはすべてのブラウザーで特別な効果をレンダリングするわけではありません。 </strong></p><p> <mark> (H5) タグは、テキストを強調表示する必要がある場合に使用します。 <strong></strong> </p> <p> </p> <p>HTML では、<b> タグと <i> タグを使用して、b 太字または i イタリック体などの出力テキストをフォーマットします。通常、太字タグ <b> の代わりにタグ <strong> が使用され、<i> タグの代わりに <em> が使用されます。ただし、これらのタグの意味は異なります。<b> と <i> は太字または斜体のテキストを定義します。 <strong> または <em> は、提示しているテキストが重要であることを意味します。 <strong>現在、すべての主要なブラウザはさまざまな効果を備えたフォントをレンダリングできますが、ブラウザは将来、より優れたレンダリング効果をサポートする可能性があります。 </strong> </p> <p><b> タグは太字のテキストを定義します。注: HTML5 仕様によれば、<b> タグは最後の手段として使用し、他のタグが適切でない場合にのみ使用する必要があります。 HTML5 の仕様では、タイトルは <h1> タグで表す必要があり、強調されたテキストは <em> タグで表す必要があります。 <mark> タグで表されます。 CSS の「font-weight」プロパティを使用して太字テキストを設定することもできます。 <strong></strong> </p> <p><i> タグは、テキストの残りの部分とは異なる部分を定義し、テキストのこの部分を斜体テキストとして表示します。 <i> タグは、専門用語、他の言語の慣用句、アイデア、宇宙船の名前などを表すために使用されます。 <i> 要素は、適切なセマンティクスを持つ他の要素が使用できない場合に使用されます。その他の意味要素は次のとおりです。<em> 要素は強調されたテキストを定義し、<mark> 要素はマーク付き/強調表示されたテキストを定義します。要素は定義項目を定義します。 HTML 4.01 では、<i> タグはテキストを斜体で表示していましたが、HTML5 ではこれは必要なく、スタイルシートを使用して <i> 要素内のテキストを書式設定できます。 <strong></strong> </p> <p><strong> タグは、コンピュータプログラムのサンプルの重要なテキストを定義するフレーズタグです。注: このタグの使用に異論はありませんが、特定の視覚効果を実現するためだけにこのタグを使用する場合は、より豊かな効果を実現できる CSS の使用をお勧めします。すべてのフレーズタグ: <em> は強調テキストとしてレンダリングされ、<dfn> はコンピュータコードテキストを定義し、<samp> はサンプルテキストを定義します。 <var> は変数を定義します。<pre class="brush:php;toolbar:false"> タグとともに使用できます。 HTML 4.01 では、<strong> タグは太字で強調されたテキストを定義しますが、HTML5 では、<strong> タグは重要なテキストを定義します。 <strong></strong> </p> <p><em> タグは、テキストを強調するために使用されるフレーズタグです。注: このタグの使用に異論はありませんが、特定の視覚効果を実現するためだけにこのタグを使用する場合は、より豊かな効果を実現できる CSS の使用をお勧めします。 <strong></strong> </p> <p><dfn> タグは、定義項目を定義するために使用されるフレーズタグです。 <code> タグは、コンピュータコードのテキストを定義するフレーズタグです。 <samp> タグは、コンピュータプログラムのサンプルテキストを定義するために使用されるフレーズタグです。 <var> タグは変数を定義するために使用されるフレーズタグです。ヒント: これらのタグの使用に反対するものはありませんが、特定の視覚効果を実現するためだけに使用する場合は、より豊かな効果を実現できる CSS を使用することをお勧めします。 <strong></strong> </p> <p><cite> タグは作品 (本、歌、映画、テレビ番組、絵画、彫刻など) のタイトルを定義します。注：名前は作品タイトルの一部ではありません。 HTML 4.01 では、<cite> タグは引用を定義しますが、HTML5 では、<cite> タグは作品のタイトルを定義します。 <strong></strong> </p> <p> <big> タグは大きなテキストを定義します。HTML5 ではサポートされなくなりました。代わりに CSS を使用できます。 <strong></strong> </p> <p><small> タグは小さいテキストを定義し、主に小さいテキストと補足を定義するために使用されます。 <strong></strong><p><pre class="brush:php;toolbar:false"> タグは、事前にフォーマットされたテキストを定義します。つまり、HTML コードに記述されたテキストはすべて、HTML ページに表示されます。つまり、空白行とスペースを制御できます。 &lt Text inside ;pre> タグで囲まれると、通常はスペースと改行が保持され、テキストも固定幅フォントで表示されます。 <pre class="brush:php;toolbar:false">タグの一般的な用途は、コンピュータのソースコードを表すことです。 <strong></strong> <strong> </strong><bdo> タグはテキストの方向を定義します。 </p>bdo は、デフォルトのテキスト方向をオーバーライドするために使用される Bidi オーバーライド (双方向オーバーライド) を指します。 <p><bdo dir="rtl">反転表示してみます。 </bdo></p> dir は <bdo> タグの属性で、この属性のもう 1 つの値はデフォルト値である ltr です。は正常に表示されます。 <p> <strong> </strong><bdi> (H5) タグを使用すると、親要素のテキスト方向の設定とは独立してテキストを設定できます。 bdi は、bidi アイソレーション (双方向アイソレーション) を指します。このタグは、ユーザーのコメントや、完全に制御できないその他のコンテンツを投稿する場合に役立ちます。 </p><p> <strong> </strong><q> タグは短い引用符を定義します。ブラウザでは、このような参照の前後に引用符が挿入されることがよくあります。この要素には、参照のソース URL を指定する URL の値を持つ cite 属性があります。別のソースから引用したブロック引用をマークするには、<blockquote> を使用してください。 </p><p> <strong> </strong><blockquote> タグは、別のソースから取得したブロック引用を定義します。通常、ブラウザは <blockquote> 要素をインデントします。この要素には属性 cite もあり、その値は引用元を指定する URL です。マークアップが段落分割を必要としない短い引用である場合は、<q> を使用します。 HTML 4.01 では、<blockquote> タグは長い引用符を定義しますが、HTML5 では、<blockquote> タグは別のソースから取得したブロック引用符を定義します。 </p><p> <strong> </strong><del> タグ定義のテキストが削除されました。 <ins> タグ定義がテキストに挿入されます。ヒント: <del> と <ins> は、通常、削除されたテキストに取り消し線を追加し、新しく挿入されたテキストに下線を追加するために使用されます。 </p><del> と <ins> には、cite と datetime という同じ 2 つの属性があります。cite の値は、テキストが削除された理由を説明するドキュメントの URL を指定します。 <ins> の cite 属性は、テキストが挿入された理由を説明するドキュメントの URL を指定します。 datetime の値は YYYY-MM-DDThh:mm:ssTZD で表され、<del> はテキストが削除/挿入された日時を指定します。 <p> <strong> </strong><s> タグは、間違っている、不正確、または役に立たないテキストを識別します。置換または削除されたテキストを定義する場合は、<s> タグを使用しないでください。 HTML 4.01 では、<s> タグは廃止され、テキストに取り消し線を引くために使用されていましたが、HTML5 では <s> タグが再定義され、正しくなくなったテキストを定義するために使用されるようになりました。 </p><p> <strong> </strong><u> タグは、中国語のスペルミスのある単語や固有名詞など、通常のテキストスタイルとは異なるテキストを定義します。 HTML では、<u> 要素は非推奨となり、HTML5 ではアンダースコアの定義に使用されていました。ヒント: ユーザーがテキストをハイパーリンクと混同する可能性があるため、テキストに下線を引くために <u> を使用することは避けてください。注: HTML5 仕様では、開発者は可能な限り <u> 要素の代わりに他の要素を使用することが推奨されています。 </p><p> <strong> </strong><sup> タグ定義の上付き文字。 </p>上付きテキストは、現在のテキストストリームの文字の高さの半分のベースラインの上に表示されますが、フォントとサイズは現在のテキストストリームのテキストと同じになります。 <p>上付きテキストを使用して脚注を追加できます。 <strong></strong> <strong> </strong><sub> タグは下付き文字を定義します。 </p>下付きテキストは、現在のテキストストリームの文字の高さの半分のベースラインの下に表示されますが、フォントとサイズは現在のテキストストリームのテキストと同じになります。 <p>下付きテキストを使用して化学式を表すことができます。 <strong></strong> <strong> </strong><abbr> タグ定義の省略形。 </p> <abbr> タグのある略語/頭字語の上にマウスを移動すると、<abbr> タグの title 属性を使用して略語/頭字語の完全版を表示できます。 <abbr> タグは、略語または頭字語を表すために使用されます。省略された単語にタグを付けることで、ブラウザ、スペルチェッカー、翻訳システム、検索エンジンインデクサーに有益な情報を提供できます。 <p><p> <strong><address> タグは、ドキュメントの作成者または所有者の連絡先情報を定義します。 </strong> <address> 要素が <body> 要素内にある場合、それはドキュメントの作成者/所有者の連絡先情報を表し、<address> 要素が <article> 要素内にある場合、それは記事を表します。著者/所有者の連絡先情報。 <address> 要素のテキストは通常斜体で表示され、ほとんどのブラウザでは要素の前後に改行を追加するか、<br/> 改行を使用できます。 <address> タグは、この情報が連絡先情報の一部でない限り、住所を説明するために使用しないでください。 <address> 要素は通常、<footer> 要素内に他の情報とともに含まれます。 </p> <p> </p> <p>（4）、リンクタグ <strong></strong> </p> <p><a> は、あるページから別のページにリンクするために使用されるハイパーリンクを定義します。 <a> 要素の最も重要な属性は、リンクのターゲットを指定する href 属性です。 href 属性を使用しない場合、hreflang、media、rel、target、および type 属性は使用できません。他の Target 属性が指定されていない限り、通常はリンクされたページを現在のブラウザウィンドウに表示します。 CSS を使用してリンクのスタイルを変更できます。 <strong></strong> </p> <p> HTML は、インターネット上の別のドキュメントに接続するためにハイパーリンクを使用します。リンクをクリックすると、あるページから別のページにジャンプできます。単語のグループ、または画像をクリックすると、新しい文書または現在の文書のセクションにジャンプできます。 Web ページ上のリンク上にマウスポインターを移動すると、矢印が小さな手に変わります。 <a> タグの href 属性を使用して、リンクのアドレスを記述します。<strong></strong> デフォルトでは、リンクはブラウザに次の形式で表示されます。未訪問のリンクには下線が付けられます。クリックされたリンクは紫色で表示され、下線が付きます。クリックされたリンクは赤色で表示され、下線が付きます。 <strong><a href="url">Jump</a> 「リンクテキスト」はテキストである必要はありません。Target 属性を使用して、リンクされたドキュメントの表示場所を定義できます。 </strong> </p> <p><a> タグのターゲット属性。 target="_blank" は、ターゲット Web ページを新しいウィンドウに表示することを定義します。 target="_self" は、現在のフォームで開かれるターゲット Web ページを定義します。このターゲットは、ドキュメントタイトルの <base> タグと一緒に使用しない限り、冗長であり、不要です。 target="_top" は、現在のフォームで開かれるリンクを定義し、現在のフォーム全体 (フレームページ) を置き換えます。ページがフレーム内でスタックしている場合は、_top 値を使用してフレームから抜け出すことができます。一番上のターゲットを使用すると、含まれているフレームがすべてクリアされ、ドキュメントがブラウザウィンドウ全体に読み込まれます。フレーム付きページは、上部ウィンドウに対象ページを表示します。 target="_parent" このターゲットにより、ドキュメントが親ウィンドウ、またはハイパーリンクによって参照されるフレームを含むフレームセットにロードされます。この参照がウィンドウ内またはトップレベルのフレーム内にある場合、それはターゲットと同等です。 self。フレーム Web ページの現在のウィンドウ全体です。この場所はランディングページを示します。 <strong></strong> </p> <p>ハイパーリンクの下線を削除し、色を定義します（デフォルトは黒）: a{color:#000;text-decoration:none} <strong></strong>マウスがハイパーリンクに移動したときのハイパーリンクの色を定義します。 hover{color :red}<strong></strong> </p><p> 画像のハイパーリンク: <a href="http://www.aaa.com"><img src="images/demo.jpg"></a> <strong></strong> </p><p> このテキストリンク:<p><a href="/index.html">このテキスト</a>は、このウェブサイト上のページへのリンクです。 </p>。 htef="/abc/" などの相対パスは、このサイト内のハイパーテキストを表します。 <strong></strong> </p> <p> HTMLリンクのid属性。クラスも使用できます。id は一意性を表し、クラスは集合です。つまり、同じ名前を持つすべてのクラスを定義できます。 id 属性を使用して、HTML ドキュメント内にブックマークタグを作成できます。このブックマークが一意になるように、ID を付けて名前を付けます。 HTML ドキュメントに ID を挿入します: <a id="tips">ハイパーリンク</a>。 HTML ドキュメント内に「ハイパーリンク(id="tips")」へのリンクを作成します: <a href="#tips">Jump</a>。あるいは、別のページから「ハイパーリンク (id="tips") セクション」へのリンクを作成します: <a href="index.html#tips">クリックしてジャンプ</a>。 <strong></strong> </p><p> メールリンク: <a href="mailto:123456@qq.com">メール</a><strong> 現在のシステムで使用するには、EMAIL クライアントプログラムをインストールする必要があります。Firefox/IE を使用して行うことができます。テストしてみると、メールへのリンクが表示されます。 </strong> </p> <p> <p>　　<strong><base> 标签定义页面中所有链接的默认地址或默认目标。</strong><strong>该标签作为 HTML 文档中所有的链接标签的默认链接。</strong>在 HTML 中，<base> 标签没有结束标签，且为为元信息标签。在一个文档中，最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部，而且 <base> 标签需要排在 <head> 元素中第一个元素的位置，这样 head 区域中其他元素就可以使用 <base> 元素中的信息了。如果使用了 <base> 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。<base target="_blank"> 可定义页面中所有的超链接都从新窗口打开，如其中有不需要在新窗口打开的，可在 <a> 标签内自行定义：<a href="url" target="_self">链接</a>。<br /></p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>示例</title> 6 <base href="http://www.demo.com/images/" target="_blank"> 7 </head> 8 <body> 9 <img src="images.gif"><br/>10 <a href="http://www.demo.com">跳转</a>11 </body>12 </html></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p>　　上面代码中，图像是默认链接的 demo.com 中一张名为 images 的图片，点击超链接跳转到该网站，并且在新窗口打开目标页面。</p> <p> </p> <p>　　<strong><nav> (H5) 标签定义导航链接的部分，并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域，在不同设备上(手机或者PC)可以制定导航链接是否显示，以适应不同屏幕的需求。</strong></p> <p> </p> <p>　　<strong>(5)、图像标签</strong></p> <p>　　<strong>HTML 图像是通过<img> 标签来定义的。图像的名称和尺寸是以属性的形式提供的，添加动态图片和添加静态图片格式是一样的，只是图像文件格式可能会有所不同。注意：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。通过在 <a> 标签中嵌套 <img> 标签，可以给图像添加到另一个文档的链接，浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。在 HTML 中，<img> 标签没有结束标签。</strong></p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><img src="images/head.gif" width="90" height="90" alt="替代文本" title="图片描述"> </pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p>　　<strong><img> 标签有两个必需的属性：src 和 alt。要在页面上显示图像，就需要使用源属性(src)，src 指 "source（来源）"，源属性的值是图像的 URL 地址，URL 指存储图像的位置。如果从另一个文件夹中添加图像，需要选择图片的路径：<img src="D/images/logo.jpg">。如果从另一个网站中添加图像，需要选择网站图片的路径，假如名为 "head.gif" 的图像位于 www.demo.com 的 images 目录中，那么其 URL 为 http://www.demo.com/images/head.gif。alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。</strong></p> <p>　　<strong>注意：title 属性用于把鼠标移动到图片上时显示文字信息，只有在重要的图片或者网站标志 LOGO 上加此属性。width 和 height 属性用于设置图像的高度与宽度。属性值默认单位为像素：px。指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。注意：假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件，加载图片是需要时间的，在加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。</strong></p> <p>　　<strong>ismap 属性是一个布尔属性，可直接使用，用于将图像规定为服务器端图像映射，图像映射指的是带有可点击区域的图像。usemap 属性值为 #mapname 用于将图像定义为客户器端图像映射。HTML5 中增加了一个新属性 crossorigin 值为 anonymous、use-credentials 用于设置图像的跨域属性。</strong></p><p> テキストに画像を挿入するには、画像をテキストの下部に揃える必要があります。ここで設定されていない場合は、画像がテキストの下部に配置されます。テキストの下から少し離れた位置になります。画像をテキストの中央に揃える必要がある場合は、.img{vertical-align:middle} に設定します。画像をテキストの上部に揃える必要がある場合は、-: .img{vertical-align:top} に設定します。 </p> <p> <strong>vertical-align この属性のデフォルト値はbaselineです。画像が高さをサポートしているため、挿入されたimg要素は親要素のベースラインに配置されます。実際には、テキストが下に移動するのではなく、画像の高さがテキストとは異なり、群衆の中で目立つように見えます。 vertical-align は「垂直」+「配置」を意味します。これは主にテーブルで使用され、行内の要素の垂直方向の配置を定義します。要素が配置されている行のベースラインすべてのブラウザすべてのコンバータは、vertical-align 属性をサポートします。 </strong></p> <p> <strong> 多くの値があります: </strong><br /><strong> baseline: ベースライン、デフォルト値。要素は親要素のベースライン上に配置されます。 </strong><br /><strong> sub: 縦方向に配置されたテキストの下付き文字。 </strong><br /><strong> sup: テキストの上付き文字を縦に揃えます。 </strong><br /><strong> 上: 要素の上部を行内の最も高い要素の上部に揃えます。 </strong><br /><strong> text-top: 要素の上部を親要素のフォントの上部に揃えます。 </strong><br /><strong> middle: この要素を親要素の中央に配置します。 </strong><br /><strong> bottom: 要素の上部を行の最下位の要素の上部に揃えます。 </strong><br /><strong> text-bottom: valign 機能をサポートするオブジェクトのテキストをオブジェクトの下部に揃えます。 </strong><br /><strong> length: 長さの値を使用して、ベースラインからのオフセットを指定します。負の値にすることもできます。数値のベースラインは 0 です。 </strong><br /><strong> パーセンテージ(%): ベースラインからのオフセットを指定するためにパーセンテージを使用します。パーセンテージのベースラインは 0% です。 </strong></p> <p><strong> vertical-align 属性は、要素が配置されている行のベースラインを基準とした、インライン要素のベースラインの垂直方向の配置を定義します。負の長さの値とパーセンテージ値を指定できます。これにより、要素が増加するのではなく減少します。表のセルでは、このプロパティはセルボックス内のセルの内容の配置を設定します。 valign は、テーブルの配置を定義するために使用されます (top (上部の配置) | middle (中央の配置) |bottom (下部の配置) | Baseline (ベースラインの配置))。 valign は通常、上、中、下として理解できます。整列との違いは次のとおりです。整列は左、中央、右で、テキストの配置を設定するために使用されます。text-align:center は中央に、text-align:left です。は左側、text-align:right は右側です。 </strong></p> <p> テキスト内の画像の位置を定義するには、下マージンを負の値に設定して、その設定を強制することもできます。画像の高さが 90px の場合、次のように定義できます。 bottom:-45px;}、つまり、画像は下から 45 ピクセルでインデントされます。ピクセルごとに異なる位置を定義できますが、この設定では行の高さが高くなります。この定義は推奨されませんが、特別な場所で使用できます。 </p> <p> </p> <p> <strong><map> はイメージマップを定義します。 <area> タグは、イメージマップ内のクリック可能な領域を定義します。クリック可能な領域を含むイメージマップを作成できます。各領域はハイパーリンクです。 </strong></p> <p><strong> <map> はクライアント側のイメージマッピングに使用されます。イメージマップは、クリック可能な領域のある画像です。 <img> タグの usemap 属性は、<map> の id または name 属性を参照できるため、id 属性と name 属性の両方を <map> に追加する必要があります。注: HTML5 では、<map> タグで id 属性を指定する場合は、name 属性も指定する必要があります。 name 属性は、必須属性であるイメージマップの名前を指定するために使用されます。 </strong></p> <p><strong> <area> タグはイメージマップ内のエリアを定義します。注: <area> 要素は常に <map> 要素内にネストされます。 <img> タグの usemap 属性は、<map> 要素の名前に関連付けられて、画像とマップ間の関係を作成します。 HTML では、<area> タグには終了タグがありません。 </strong></p> <p><strong>　　<area> 标签属性，href 属性规定区域的目标 URL。alt 属性规定区域的替代文本，如果使用 href 属性，则该属性是必需的。coords 属性值为 coordinates 规定区域的坐标。shape 属性值为（default(默认)、circle、rect、poly）规定区域的形状。target 属性规定在何处打开目标 URL。media 属性规定目标 URL 是为何种媒介/设备优化的，默认为：all。在 HTML5 中增加了一个新属性 rel ，他的值为（alternate、author、bookmark、help、license、next、nofollow、noreferrer、prefetch、prev、search、tag)）规定当前文档与目标 URL 之间的关系。</strong></p> <p><strong>　　图像映像的语法：</strong></p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>1 <img src="images/demo.jpg" alt="太阳系" usemap="#sun">2 <map name="sun">3 <area shape="circle" coords="132,570,122" alt="太阳" href="index.html" target="_blank">4 </map></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p>　　<strong><area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等：rect : 矩形，coords 对应的坐标为左上角和右下角。circle : 圆，coords 对应的是圆心(x，y)，和半径 r。poly：多边形，coords 对应的是每个点的坐标。</strong></p> <p>　　<strong>下面列出了每种形状的适当值：</strong></p> <p><strong>　　</strong><strong>圆形：shape="circle"，coords="x,y,r" 这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。</strong></p> <p><strong>　　矩形：shape="rectangle"，coords="x1,y1,x2,y2" 第一对坐标是矩形的左上角的顶点坐标，另一对坐标是对角的顶点坐标(右下角)，("0,0" 是图像左上角的坐标)，请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。</strong></p> <p><strong>　　多边形：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..." 每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标；定义多边形则需要更多数量的顶点。</strong></p> <p>　　<strong>用 HTML 语言创建图像映射时，我们需要确定图像区域中的点坐标，用以下几种方法可以实现：</strong></p> <p>　　　　<strong>①：可以利用系统自带的画图工具确定坐标。</strong></p> <p><strong>　　　　②：可以用 PS 确定坐标。按 Ctrl+r 快捷键，右键选定显示距离为像素，默认是厘米。</strong></p> <p><strong>　　　　③：采用逆向思维把图像转换成图像映射，可以利用以下代码实现：</strong></p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>1 <p>2 <a href="http://www.baidu.com/" target="_blank"><img src="images/demo.jpg" ismap alt="太阳系"></a>3 </p></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p>　　<strong>之所以图片代码前引用一段 url 是为了鼠标停留在图片上时，可以在浏览器窗口的状态栏中看到返回值出现的点坐标，小手指点在哪里，对应的就是像素点的纵横坐标值，记下这个值，把它应用到创建图像映射的语法中，就能实现区域取值了。注意：某些浏览器不支持此功能不能查看坐标返回值，比如 360浏览器，可以使用 IE 浏览器记录。</strong></p> <p> </p> <p>　　<strong><canvas> (H5) 标签定义图形，比如图表和其他图像，标签只是图形容器，你必须使用脚本来绘制图形。<canvas> 标签通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。注意：<canvas> 标签只是图形容器，必须使用脚本来绘制图形。<canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。width 和 height 属性规定画布的宽度和高度。</strong></p> <p>　　<strong><figure> (H5) 标签规定独立的流内容（图像、图表、照片、代码等等）。<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的，如果被删除，则不应对文档流产生影响。提示：<figcaption> 元素被用来为 <figure> 元素定义标题。</strong></p> <p><strong>　　<figcaption> (H5) 标签为 <figure> 元素定义标题。<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。</strong></p> <p>　　<strong><picture> (H5) 标签可以设置多张图片，主要被</strong><strong>用来处理响应式图片。<picture> 元素类似于 <video> 和 <audio> 元素。<picture> 元素本身没有属性，被用来当做 <source> 元素的容器。<source> 元素是用来加载多媒体的比如视频和音频，已经被更新用到图片的加载并且一些新的属性已经被添加，srcset 属性的必需的，定义了图片资源。<picture> 元素可以设置不同的资源，第一个设置的资源为首选使用的：</strong></p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>1 <picture>2 <source srcset="smallflower.jpg" media="(max-width:400px)">3 <source srcset="flowers.jpg">4 <img src="imges/flowers.jpg" alt="Flowers">5 </picture></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p>　　注意：火狐浏览器支持 picture 标签。360 和 IE 不支持 picture 标签，需要搭载 JS 环境让 IE 浏览器识别 picture 标签。</p> <p> </p> <p><strong>　　(6)、多媒体标签</strong></p> <p>　　<strong><audio> (H5) 标签定义音频内容，也就是定义声音，比如音乐或其他音频流。目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。有些浏览器不支持某种格式，建议采取两种格式写，用 MP3 或 Wav 就可以。音频格式的 MIME 类型：MP3-MIME-type：audio/mpeg 。Wav-MIME-type：audio/wav 。Ogg-MIME-type：audio/ogg 。可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。</strong></p> <p>　　<strong><audio> 是 HTML5 新增加的标签，src 属性用于规定音频文件的 URL。autoplay 属性：如果出现该属性，则音频在就绪后马上播放。controls 属性：如果出现该属性，则向用户显示音频控件(比如播放/暂停按钮)。loop 属性：如果出现该属性，则每当音频结束时重新开始播放。muted 属性：如果出现该属性，则音频输出为静音。preload 属性值为（auto、metadata、none），用于规定当网页加载时，音频是否默认被加载以及如何被加载。</strong></p> <p>　　<strong><video> (H5) 标签定义视频，比如电影片段或其他视频流。目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器。WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器。Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器。音频格式的 MIME 类型：MP4：video/mp4。WebM：video/webm。Ogg：video/ogg。可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。</strong></p> <p>　　<strong><video> 是 HTML5 新增加的标签，src 属性定义要播放的视频的 URL。width 和 height 属性用于设置视频播放器的宽度/高度。autoplay 属性值：如果出现该属性，则视频在就绪后马上播放。controls 属性：如果出现该属性，则向用户显示控件，比如播放按钮。loop 属性：如果出现该属性，则当媒介文件完成播放后再次开始播放。muted 属性：如果出现该属性，视频的音频输出为静音。poster 属性值为 URL 用于规定视频正在下载时显示的图像，直到用户点击播放按钮。preload 属性值为（auto、metadata、none）：如果出现该属性，则视频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性。</strong></p> <p> </p> <p>　　<strong><source> (H5) 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。<source> 标签允许规定两个视频/音频文件共浏览器根据它对媒体类型或者编解码器的支持进行选择。src 属性用于规定媒体文件的 URL。type 属性规定媒体资源的 MIME 类型。</strong></p> <p>　　<strong><track> (H5) 标签为媒体元素（比如 <audio> and <video>）规定外部文本轨道。这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。src 属性是必需的，用于规定轨道文件的 URL。default 属性规定该轨道是默认的。如果用户没有选择任何轨道，则使用默认轨道。kind 属性值为（captions、chapters、descriptions、metadata、subtitles）用于规定文本轨道的文本类型。srclang 属性用于规定轨道文本数据的语言，如果 kind 属性值是 "subtitles"，则该属性是必需的。label 属性规定文本轨道的标签和标题。</strong></p> <p> </p> <p>　<strong>　(7)、表单标签</strong></p> <p> <strong>HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。フォーム要素を使用すると、ユーザーはテキストフィールド、ドロップダウンリスト、ラジオボタン、チェックボックスなどのコンテンツを入力できます。、など。 </strong></p> <p><strong> フォームは、form タグ <form> を使用して設定されます。ほとんどの場合、使用される form タグは、input タグ <input> です。入力タイプは type 属性 (type) によって定義されます。一般的に使用される入力タイプのほとんどは次のとおりです。 </strong></p> <p> <strong>①: ユーザーが文字、数字などを入力する場合、テキストフィールドは <input type="text"> タグによって定義されます。フォームの場合、テキストフィールド入力を使用します。 </strong></p> <p><strong> ②: パスワードフィールドは <input type="password"> で定義されます。注: パスワードフィールドの文字はクリアテキストでは表示されず、アスタリスクまたはドットに置き換えられます。 </strong></p> <p><strong> ③: ラジオボタンは <input type="radio"> で定義されます。ラジオボタンは、ユーザーが複数の選択肢の中から 1 つを選択するときに使用されます。 </strong></p> <p><strong> ④: チェックボックスは <input type="checkbox"> で定義されます。ユーザーは、与えられた多数の選択肢から 1 つまたは複数のオプションを選択する必要があります。 </strong></p> <p><strong> ⑤: 送信ボタンは <input type="submit"> で定義されます。 </strong></p> <p><strong> ⑥: ドロップダウンリストボックスは、<form> タグの下の <select> タグで定義されます。 <option value="bmw">BMW</option> ラベルは、ドロップダウンリストボックスの内容を定義します。 </strong></p> <p> <strong>その他: ①: 事前に選択されたドロップダウンリストボックスの形式とドロップダウンリストボックスは同じで、事前に選択された値としてラベルに selected (selected) を追加するだけです: <option value="audi 「選択済み>Audi (アウディ) </option>」。 </strong></p> <p><strong> ②: 複数行のテキスト入力はタグ <textarea rows="5"cols="30"> を使用して定義されており、rows は行、cols は列を設定するために使用できます。テキストボックスのサイズを設定するかどうか。これは、テキストボックスに入力されるテキストの量には影響しませんが、テキストボックスの表示サイズにのみ影響します。より良い方法は、CSS を使用してテキストフィールドの幅と高さを定義することです。 </strong></p> <p> </p> <p> <strong><form> タグは、ユーザー入力用の HTML フォームを作成するために使用されます。 <form> には次のフォーム要素が含まれます: <button> <optgroup> 。注: フォーム自体は表示されません。 HTML5 では、autocomplete と novalidate という 2 つの新しい属性が追加され、HTML 4.01 の一部の属性はサポートされなくなりました。このタグの属性 action は必須であり、その値はサーバーアドレスです。action="www.demo. com/index.html"、サイト内のファイルを指す相対 URL (action="index.html" など)。 </strong><strong> </strong></p> <form> 2 つの最も重要な属性は、アクションとメソッドです。アクションは、フォームが送信されるときにフォームデータを送信する場所を指定するために使用されます。 Method はフォームデータの送信に使用される HTTP メソッドを指定します。デフォルトのメソッドは GET です。 accept-charset 属性は、サーバーが処理できるフォームデータの文字セットを指定します。 name 属性はフォームの名前を指定し、JS 内の要素を参照したり、フォームが送信された後にフォームデータを参照したりするために使用できます。 enctype 属性は、フォームデータをサーバーに送信する前にエンコードする方法を指定します。method="post" の場合に適用されます。 target 属性を使用して、アクション URL を開く場所を指定できます。 autocomplete 属性値は、フォームのオートコンプリート機能を有効にするかどうかを指定するために (on、off) 使用されます。 novalidate 属性: この属性を使用すると、フォームの送信時に検証は実行されません。 <p><strong> </strong> </p> <p> </p><input> タグは、入力コントロールを定義し、ユーザーがデータを入力できる入力フィールドを指定します。 <input> 要素は、ユーザーがデータを入力できるようにする入力コントロールを宣言するために <form> 要素内で使用されます。注: <input> 要素は空であり、label 属性のみが含まれています。 <label> 要素を使用して、<input> 要素のラベルを定義できます。 CSS を使用して <input> 要素の配置を定義できます。 HTML5 では、いくつかの新しい属性が <input> に追加され、対応する値が追加されました。 HTML では、<input> タグには終了タグがありません。 <p><strong><p><input> 要素の属性: <strong></strong>type 属性は、表示される <input> 要素のタイプを指定します。そのタイプは、テキスト (デフォルト、単一行のテキストフィールド、幅は 20 文字)、ボタン (ボタン) です。、radio (ラジオボタン)、checkbox (チェックボックス)、password (パスワード)、submit (送信ボタン)、image (送信ボタンとしての画像)、reset (リセットボタン)、hidden (非表示の入力フィールド)、file ( ファイル選択フィールドの定義ファイルアップロード用の「参照...」ボタン)。 HTML5 で新しく追加された type 属性値は次のとおりです: search (検索文字列の入力に使用)、url (URL の入力に使用されるフィールド)、email (電子メールアドレスの入力に使用)、tel (電話番号の入力に使用されます)、色 (カラーピッカー)、数値 (数値の入力に使用されるフィールド)、範囲 (スライダーコントロールなど、正確な値が重要ではない数値の入力に使用されるコントロール)、時間 (入力に使用されるコントロール) time、タイムゾーンなし)、month (月と年のコントロール、タイムゾーンなし)、week (週と年のコントロール、タイムゾーンなし)、<strong></strong>date (日付コントロール、年、月、日を含み、時間を除く)、datetime (日付と時刻の制御、UTC タイムゾーンに基づく、年、月、日、時、分、秒、秒の小数を含む)、datetime-local (年、月、日、時、分を含む日付と時刻の制御) 、秒、秒の小数点）秒、タイムゾーンなし）。 value 属性は、<input> 要素の値を指定します。 name 属性は、<input> 要素の名前を指定します。 src 属性には、type="image" の場合のみ、送信ボタンとして表示される画像の URL を指定します。 alt 属性は、type="image" の場合にのみ、画像入力の代替テキストを定義します。 selected 属性は、ページのロード時に事前に選択する必要がある <input> 要素を指定します (type="checkbox" または type="radio" の場合のみ)。 readonly 属性は、入力フィールドが読み取り専用であることを指定します。 disabled 属性は、どの <input> 要素を無効にするかを指定します。 size 属性は、<input> 要素の表示幅を文字数で指定します。 maxlength 属性は、<input> 要素で許可される最大文字数を指定します。 accept 属性値は (audio/* video/* image/* MIME_type) で、type="file" の場合にのみ、ファイルアップロードによって送信されるファイルの種類を指定するために使用されます。 <strong></strong><br> </p> <p> 以下は、<input> 要素に新しく追加された HTML5 の属性です。プレースホルダー属性は、入力 <input> フィールドの期待値を説明する短いプロンプトメッセージを指定します。 required 属性は、フォームを送信する前に入力フィールドに入力する必要があることを指定します。 <strong></strong>autocomplete 属性値 (on、off) は、<input> 要素の入力フィールドでオートコンプリート機能を有効にするかどうかを指定します。 autofocus 属性は、ページの読み込み時に <input> 要素が自動的にフォーカスを取得するように指定します。 multiple 属性は、ユーザーが <input> 要素に複数の値を入力できることを指定します。 pattern 属性は、<input> 要素の値を検証するために使用される正規表現を指定します。 step 属性は、<input> 要素の有効な数値間隔を指定します。 list 属性値は datalist_id で、<input> 要素の事前定義されたオプションを含む <datalist> 要素を参照します。 width 属性と height 属性は、type="image" の場合にのみ、<input> 要素の幅/高さを指定するために使用されます。 max 属性と min 属性は、<input> 要素の最大値/最小値を指定します。 form 属性値は、<input> 要素が属する 1 つ以上のフォームを指定する form_id です。 formaction 属性は、type="submit" および type="image" の場合にのみ、フォームの送信時に入力コントロールを処理するファイルの URL を指定します。 formenctype 属性は、サーバーに送信するときにフォームデータをエンコードする方法を指定します。これは、type="submit" および type="image" にのみ適しています。 formmethod 属性値は (get, post) を使用して送信を定義します。</p></strong></p> </div> </div> <div style="display: flex;"> <div class="wzconBq" style="display: inline-flex;"> <span>関連ラベル：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="https://www.php.cn/ja/search?word=html基础" target="_blank">HTML 基础</a> </div> </div>  </div> <div class="wzconOtherwz"> <a href="https://www.php.cn/ja/faq/270118.html" title="強力な CSS3 selector_html/css_WEB-ITnose"> <span>前の記事：強力な CSS3 selector_html/css_WEB-ITnose</span> </a> <a href="https://www.php.cn/ja/faq/270121.html" title="css3 グラデーション gradient_html/css_WEB-ITnose"> <span>次の記事：css3 グラデーション gradient_html/css_WEB-ITnose</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">このウェブサイトの声明</div> <div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzconZzwz"> <div class="wzconZzwztitle">著者別の最新記事</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ja/faq/1796639331.html">NullPointerException とは何ですか?どのように修正すればよいですか?</a> </div> <div>2024-10-22 09:46:29</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ja/faq/1796629482.html">初心者からプログラマーへ: 旅は C の基礎から始まります</a> </div> <div>2024-10-13 13:53:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ja/faq/1796628545.html">PHP による Web 開発のロックを解除する: 初心者ガイド</a> </div> <div>2024-10-12 12:15:51</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ja/faq/1796627928.html">C の謎を解く: 新人プログラマーのための明確でシンプルな道</a> </div> <div>2024-10-11 22:47:31</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ja/faq/1796627806.html">コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング</a> </div> <div>2024-10-11 19:36:51</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ja/faq/1796627670.html">内なるプログラマーを解き放つ: まったくの初心者のための C</a> </div> <div>2024-10-11 15:50:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ja/faq/1796627643.html">C で生活を自動化する: 初心者向けのスクリプトとツール</a> </div> <div>2024-10-11 15:07:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ja/faq/1796627620.html">PHP を簡単に: Web 開発の最初のステップ</a> </div> <div>2024-10-11 14:21:21</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ja/faq/1796627574.html">Python で何でも構築: 創造性を解き放つための初心者ガイド</a> </div> <div>2024-10-11 12:59:11</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ja/faq/1796627539.html">コーディングの鍵: 初心者のための Python の力を解き放つ</a> </div> <div>2024-10-11 12:17:31</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">最新の問題</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ja/wenda/.html" target="_blank" title="開発環境のインストール構成とHTMLの基礎知識" class="wdcdcTitle">開発環境のインストール構成とHTMLの基礎知識</a> <a href="https://www.php.cn/ja/wenda/.html" class="wdcdcCons"></a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 1970-01-01 08:00:00</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>0</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>0</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ja/wenda/.html" target="_blank" title="提供された画像に基づいて HTML テーブルをデザインします。" class="wdcdcTitle">提供された画像に基づいて HTML テーブルをデザインします。</a> <a href="https://www.php.cn/ja/wenda/.html" class="wdcdcCons"></a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 1970-01-01 08:00:00</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>0</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>0</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ja/wenda/.html" target="_blank" title="セレクターのグループ化機能が成功しませんでした" class="wdcdcTitle">セレクターのグループ化機能が成功しませんでした</a> <a href="https://www.php.cn/ja/wenda/.html" class="wdcdcCons"></a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 1970-01-01 08:00:00</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>0</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>0</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ja/wenda/.html" target="_blank" title="jqセレクターの問題" class="wdcdcTitle">jqセレクターの問題</a> <a href="https://www.php.cn/ja/wenda/.html" class="wdcdcCons"></a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 1970-01-01 08:00:00</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>0</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>0</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ja/wenda/.html" target="_blank" title="li に基づいてスパンを動的に生成する" class="wdcdcTitle">li に基づいてスパンを動的に生成する</a> <a href="https://www.php.cn/ja/wenda/.html" class="wdcdcCons"></a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 1970-01-01 08:00:00</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>0</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>0</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>関連トピック</div> <a href="https://www.php.cn/ja/faq/zt" target="_blank">詳細> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ja/faq/googleapi"><img src="https://img.php.cn/upload/subject/202407/22/2024072214371675475.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="グーグルマップAPI" /> </a> <a target="_blank" href="https://www.php.cn/ja/faq/googleapi" class="title-a-spanl" title="グーグルマップAPI"><span>グーグルマップAPI</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ja/faq/azhiddchic"><img src="https://img.php.cn/upload/subject/202407/22/2024072211481944336.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="a5用紙のサイズはどれくらいですか" /> </a> <a target="_blank" href="https://www.php.cn/ja/faq/azhiddchic" class="title-a-spanl" title="a5用紙のサイズはどれくらいですか"><span>a5用紙のサイズはどれくらいですか</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ja/faq/oraclezrowidd"><img src="https://img.php.cn/upload/subject/202407/22/2024072213380657298.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Oracle での ROWID の使用法の概要" /> </a> <a target="_blank" href="https://www.php.cn/ja/faq/oraclezrowidd" class="title-a-spanl" title="Oracle での ROWID の使用法の概要"><span>Oracle での ROWID の使用法の概要</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ja/faq/datgswj"><img src="https://img.php.cn/upload/subject/202407/22/2024072211490686967.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="DAT形式ファイル" /> </a> <a target="_blank" href="https://www.php.cn/ja/faq/datgswj" class="title-a-spanl" title="DAT形式ファイル"><span>DAT形式ファイル</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ja/faq/linuxscmljs"><img src="https://img.php.cn/upload/subject/202407/22/2024072213565293032.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Linuxの削除コマンドの概要" /> </a> <a target="_blank" href="https://www.php.cn/ja/faq/linuxscmljs" class="title-a-spanl" title="Linuxの削除コマンドの概要"><span>Linuxの削除コマンドの概要</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ja/faq/mulhsyf"><img src="https://img.php.cn/upload/subject/202407/22/2024072213374928726.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="mul関数の使い方" /> </a> <a target="_blank" href="https://www.php.cn/ja/faq/mulhsyf" class="title-a-spanl" title="mul関数の使い方"><span>mul関数の使い方</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ja/faq/postmessagesy"><img src="https://img.php.cn/upload/subject/202407/22/2024072213431229290.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="ポストメッセージの使い方" /> </a> <a target="_blank" href="https://www.php.cn/ja/faq/postmessagesy" class="title-a-spanl" title="ポストメッセージの使い方"><span>ポストメッセージの使い方</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ja/faq/cyyysfdyxjsx"><img src="https://img.php.cn/upload/subject/202407/22/2024072214271251973.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="C言語の演算子の優先順位" /> </a> <a target="_blank" href="https://www.php.cn/ja/faq/cyyysfdyxjsx" class="title-a-spanl" title="C言語の演算子の優先順位"><span>C言語の演算子の優先順位</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzrOne"> <div class="wzroTitle">人気のおすすめ</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="URLってどういう意味ですか？" href="https://www.php.cn/ja/faq/418772.html">URLってどういう意味ですか？</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="DOM とはどういう意味ですか?" href="https://www.php.cn/ja/faq/414303.html">DOM とはどういう意味ですか?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="画像サイズを変更する方法" href="https://www.php.cn/ja/faq/414252.html">画像サイズを変更する方法</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="HTMLでフォントを太字にする方法" href="https://www.php.cn/ja/faq/414520.html">HTMLでフォントを太字にする方法</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="HTML画像のサイズを設定する方法" href="https://www.php.cn/ja/faq/475145.html">HTML画像のサイズを設定する方法</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>人気のチュートリアル</div> <a target="_blank" href="https://www.php.cn/ja/course.html">詳細> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">関連するチュートリアル <div></div></div> <div class="tabdiv swiper-slide" data-id="two">人気のおすすめ<div></div></div> <div class="tabdiv swiper-slide" data-id="three">最新のコース<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="https://www.php.cn/ja/course/812.html" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)" href="https://www.php.cn/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)</a> <div class="wzrthreerb"> <div>1433345 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ja/course/74.html" title="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ" href="https://www.php.cn/ja/course/74.html">PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ</a> <div class="wzrthreerb"> <div>4288798 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ja/course/286.html" title="JAVA 初心者向けビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初心者向けビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 初心者向けビデオチュートリアル" href="https://www.php.cn/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a> <div class="wzrthreerb"> <div>2628206 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ja/course/504.html" title="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル" href="https://www.php.cn/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル</a> <div class="wzrthreerb"> <div>514426 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ja/course/2.html" title="PHP ゼロベースの入門チュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP ゼロベースの入門チュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP ゼロベースの入門チュートリアル" href="https://www.php.cn/ja/course/2.html">PHP ゼロベースの入門チュートリアル</a> <div class="wzrthreerb"> <div>873357 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/ja/course/812.html" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)" href="https://www.php.cn/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)</a> <div class="wzrthreerb"> <div >1433345 回の学習</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ja/course/286.html" title="JAVA 初心者向けビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初心者向けビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 初心者向けビデオチュートリアル" href="https://www.php.cn/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a> <div class="wzrthreerb"> <div >2628206 回の学習</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ja/course/504.html" title="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル" href="https://www.php.cn/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル</a> <div class="wzrthreerb"> <div >514426 回の学習</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ja/course/901.html" title="Web フロントエンド開発の簡単な紹介" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Web フロントエンド開発の簡単な紹介"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Web フロントエンド開発の簡単な紹介" href="https://www.php.cn/ja/course/901.html">Web フロントエンド開発の簡単な紹介</a> <div class="wzrthreerb"> <div >216749 回の学習</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ja/course/234.html" title="PSビデオチュートリアルをゼロからマスターする" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="PSビデオチュートリアルをゼロからマスターする"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PSビデオチュートリアルをゼロからマスターする" href="https://www.php.cn/ja/course/234.html">PSビデオチュートリアルをゼロからマスターする</a> <div class="wzrthreerb"> <div >912307 回の学習</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/ja/course/1648.html" title="[Web フロントエンド] Node.js クイックスタート" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web フロントエンド] Node.js クイックスタート"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web フロントエンド] Node.js クイックスタート" href="https://www.php.cn/ja/course/1648.html">[Web フロントエンド] Node.js クイックスタート</a> <div class="wzrthreerb"> <div >9051 回の学習</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ja/course/1647.html" title="海外のWeb開発フルスタックコースの完全なコレクション" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="海外のWeb開発フルスタックコースの完全なコレクション"/> </a> <div class="wzrthree-right"> <a target="_blank" title="海外のWeb開発フルスタックコースの完全なコレクション" href="https://www.php.cn/ja/course/1647.html">海外のWeb開発フルスタックコースの完全なコレクション</a> <div class="wzrthreerb"> <div >7265 回の学習</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ja/course/1646.html" title="Go言語実践GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go言語実践GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go言語実践GraphQL" href="https://www.php.cn/ja/course/1646.html">Go言語実践GraphQL</a> <div class="wzrthreerb"> <div >6153 回の学習</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ja/course/1645.html" title="550W ファンマスターが JavaScript をゼロから段階的に学習します" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W ファンマスターが JavaScript をゼロから段階的に学習します"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W ファンマスターが JavaScript をゼロから段階的に学習します" href="https://www.php.cn/ja/course/1645.html">550W ファンマスターが JavaScript をゼロから段階的に学習します</a> <div class="wzrthreerb"> <div >796 回の学習</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ja/course/1644.html" title="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる" href="https://www.php.cn/ja/course/1644.html">Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる</a> <div class="wzrthreerb"> <div >30635 回の学習</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>最新のダウンロード</div> <a href="https://www.php.cn/ja/xiazai">詳細> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">ウェブエフェクト <div></div></div> <div class="swiper-slide" data-id="twof">公式サイト<div></div></div> <div class="swiper-slide" data-id="threef">サイト素材<div></div></div> <div class="swiper-slide" data-id="fourf">フロントエンドテンプレート<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery エンタープライズメッセージフォームの連絡先コード" href="https://www.php.cn/ja/toolset/js-special-effects/8071">[フォームボタン] jQuery エンタープライズメッセージフォームの連絡先コード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 オルゴール再生効果" href="https://www.php.cn/ja/toolset/js-special-effects/8070">[プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 クールなパーティクルアニメーションナビゲーションメニューの特殊効果" href="https://www.php.cn/ja/toolset/js-special-effects/8069">[メニューナビゲーション] HTML5 クールなパーティクルアニメーションナビゲーションメニューの特殊効果</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery ビジュアルフォームのドラッグアンドドロップ編集コード" href="https://www.php.cn/ja/toolset/js-special-effects/8068">[フォームボタン] jQuery ビジュアルフォームのドラッグアンドドロップ編集コード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS 模倣 Kugou 音楽プレーヤーコード" href="https://www.php.cn/ja/toolset/js-special-effects/8067">[プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤーコード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="古典的な HTML5 プッシュボックスゲーム" href="https://www.php.cn/ja/toolset/js-special-effects/8066">[html5特殊効果] 古典的な HTML5 プッシュボックスゲーム</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="画像効果を追加または削減するための jQuery スクロール" href="https://www.php.cn/ja/toolset/js-special-effects/8065">[画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 個人アルバムカバーホバーズーム効果" href="https://www.php.cn/ja/toolset/js-special-effects/8064">[フォトアルバム効果] CSS3 個人アルバムカバーホバーズーム効果</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8328" title="室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8327" title="フレッシュカラーの個人履歴書ガイドページテンプレート" target="_blank">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8326" title="デザイナーのクリエイティブな仕事の履歴書 Web テンプレート" target="_blank">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8325" title="現代のエンジニアリング建設会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8324" title="教育サービス機関向けのレスポンシブ HTML5 テンプレート" target="_blank">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8323" title="オンライン電子書籍ストアモールのウェブサイトテンプレート" target="_blank">[フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8322" title="IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します" target="_blank">[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8321" title="パープルスタイル外国為替取引サービスウェブサイトテンプレート" target="_blank">[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-materials/3078" target="_blank" title="かわいい夏の要素のベクター素材 (EPS+PNG)">[PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-materials/3077" target="_blank" title="4 つの赤い 2023 卒業バッジベクター素材 (AI+EPS+PNG)">[PNG素材] 4 つの赤い 2023 卒業バッジベクター素材 (AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-materials/3076" target="_blank" title="歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）">[バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-materials/3075" target="_blank" title="金色の卒業帽ベクター素材（EPS+PNG）">[PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-materials/3074" target="_blank" title="黒と白のスタイルの山アイコンベクター素材 (EPS+PNG)">[PNG素材] 黒と白のスタイルの山アイコンベクター素材 (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-materials/3073" target="_blank" title="異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）">[PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-materials/3072" target="_blank" title="フラットスタイルの植樹祭バナーベクター素材 (AI+EPS)">[バナー画像] フラットスタイルの植樹祭バナーベクター素材 (AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-materials/3071" target="_blank" title="9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）">[PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8328" target="_blank" title="室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8327" target="_blank" title="フレッシュカラーの個人履歴書ガイドページテンプレート">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8326" target="_blank" title="デザイナーのクリエイティブな仕事の履歴書 Web テンプレート">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8325" target="_blank" title="現代のエンジニアリング建設会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8324" target="_blank" title="教育サービス機関向けのレスポンシブ HTML5 テンプレート">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8323" target="_blank" title="オンライン電子書籍ストアモールのウェブサイトテンプレート">[フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8322" target="_blank" title="IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します">[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ja/toolset/website-source-code/8321" target="_blank" title="パープルスタイル外国為替取引サービスウェブサイトテンプレート">[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p> </div> <div class="footermid"> <a href="https://www.php.cn/ja/about/us.html">私たちについて</a> <a href="https://www.php.cn/ja/about/disclaimer.html">免責事項</a> <a href="https://www.php.cn/ja/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1739912443"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>  <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script>  </body> </html>