この記事では、HTML タグと属性について説明し、HTML ドキュメントの主な構造と関連タグについて説明します。お役に立てば幸いです。
#HTML の主な構造
HTML ページの基本構造は次のとおりです。 Web ページの作成に必要なさまざまなタグ (doctype、html、head と body など) が含まれています。
<!--这是html的注释信息-->
<!DOCTYPE html> <!--这是DOCTYPE声明-->
<html> <!--这是根-->
<head> <!--这是头-->
<meta charset = "UTF-8"> <!-- 描述性标签 -->
<title>Hello</title> <!--标题栏-->
</head>
<body> <!--网页体-->
<!--这里的内容显示到网页上-->
这是我的第一个HTML页面
</body>
</html>ログイン後にコピー
HTML タグの構文形式
通常、HTML タグは次の要素で構成されます。開始タグ、属性、コンテンツ、終了タグ。タグの名前は大文字と小文字を区別しませんが、以下に示すように、ほとんどの属性の値は大文字と小文字を区別する必要があります。 class 属性、開始タグには、id、title などの他の属性も含めることができます。これらについては後で説明します。
HTML タグは構文上大文字と小文字が区別されませんが、標準化と専門性の観点から、タグを定義するときは常に小文字を使用することを強くお勧めします。
ブラウザを使用して作成した HTML ドキュメントを開くと、ブラウザはドキュメント内のコンテンツを上から下に読み取り、HTML タグに基づいてブラウザ内のタグ内のコンテンツをレンダリングします。容器内の属性。
ブラウザが通常のテキストと HTML ドキュメントを区別できるように、HTML ドキュメントにはいくつかの基本タグが必要です。達成したい効果に応じてタグはいくつでも使用できますが、次の点に注意してください:
すべての HTML タグは山括弧 < > で囲む必要があります。 ;
- #HTML 内のタグが異なると、異なる効果が得られます;
- 特定のタグを使用する場合は、対応する終了タグで終了する必要があります（自閉症とラベルを除く）。
自己終了タグとタグ
一部の HTML タグには個別の終了タグがありませんが、開始タグに / を追加して終了します。 . このようなラベルを自閉症やラベリングと呼びます。次の例を参照してください。
属性
↓
<div class="foo">PHP中文网</div>
↑ ↑ ↑
开始标签 内容 结束标签
ログイン後にコピー
#<!-- --> HTML コードの説明に使用される HTML コメントを表します。ブラウザはコメントの内容を無視するため、ユーザーは Web ページ上のコメントを見ることができません
HTML 属性の概念と使用法
##属性とは##属性を提供できる対象HTML タグ 追加情報、または HTML タグの変更。属性は開始タグに追加する必要があり、構文形式は次のとおりです。 <img src="/static/imghw/default1.png" data-src="./logo.png" class="lazy" alt="C语言中文网Logo" /> <!-- 图像 -->
<hr /> <!-- 分割线 -->
<br /> <!-- 文本换行 -->
<input type="text" placeholder="请输入内容" /> <!-- 文本输入框 -->
ログイン後にコピー
attr
は属性名を表し、value は属性値を表します。属性値は二重引用符
""
または一重引用符
''
で囲む必要があります。 二重引用符と一重引用符の両方で属性値を囲むことができますが、標準化と専門性の観点から、可能な限り二重引用符を使用してください。
特別なプロパティ
HTML 属性は多数あり、大きく 2 つのカテゴリに分類できます:
一部の属性はほとんどまたはすべての HTML タグに適用され、これらの属性をユニバーサル属性と呼びます。
一部の属性は 1 つまたはいくつかの特定の HTML タグにのみ適用され、これらの属性を特殊属性と呼びます。 HTML の タグには、src と alt という 2 つの特別な属性があります。次の例に示すように、 タグにも、href と target という 2 つの特別な属性があります:
<p id="user-info" class="color-red">
欢迎 <font color="red" size="3">Tom</font> 来到PHP中文网。
<p>
ログイン後にコピー
コードの説明:
タグ内の src 属性は画像のパスを定義するために使用され、alt 属性は説明を定義するために使用されます。画像の情報を表示します 画像が異常な場合は正常に表示できませんが、altの情報が表示されます。
タグの href 属性はリンクのアドレスを定義するために使用され、target 属性はブラウザで新しいページを開く方法を定義するために使用されます。
data-*
属性は、プライベート ページの背後に適用されるカスタム データを保存するために使用されます。これは HTML5 の新しい属性です。 <img src="/static/imghw/default1.png" data-src="./logo.png" class="lazy" alt="PHP中文网Logo" style="max-width:90%" style="max-width:90%">
<a href="http://c.biancheng.net/" target="_blank">PHP中文网</a>
ログイン後にコピー
somevalue: 属性値 (文字列) を指定します
data-* 属性可以在所有的 HTML 元素中嵌入数据。
自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。
data-* 属性由以下两部分组成：
注意： 自定义属性前缀 "data-" 会被客户端忽略。
利用dataset可以获取data-属性构造的对象，该方法目前只能在Chrome 、Opera等部分浏览器中实现，其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。
只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。
<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>
ログイン後にコピー
ログイン後にコピー
这个data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）：
<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>
ログイン後にコピー
#myDiv{
position: ralative;
}
#myDiv:hover:after{
position: absolute;
top: 0px;
left: 0px;
content: attr(data-attribute);
color: red;
}ログイン後にコピー
如何获取data属性的值？
<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>
ログイン後にコピー
ログイン後にコピー
1、使用getAttribute来获取
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");ログイン後にコピー
2、使用Html5自定义属性对象Dataset来获取
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.dataset.attribute;ログイン後にコピー
注意：带连字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如data属性为data-other-attribute，则我们要获取相应的值可以使用：myp.dataset.otherAttribute
如果Html元素定义了多个自定义属性，如何获取？
<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>
ログイン後にコピー
1、使用循环遍历
var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;
for (i = 0, j = attrs.length; i < j; i++) {
if(attrs[i].name.substring(0, 5) == 'data-') {
expense[attrs[i].name.substring(5)] = attrs[i].value;
}
}ログイン後にコピー
2、使用dataset属性
var expense = document.getElementById('myDiv').dataset;
ログイン後にコピー
注：dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量
1）、让所有的自定义的属性值塞到一个数组中
var chartInput = [];
for (var item in expense) {
chartInput.push(expense[item]);
}ログイン後にコピー
2）、删掉一个data属性
delete myDiv.dataset.attribute;
ログイン後にコピー
3、增加一个data属性
myDiv.dataset.attribute4 = 'value4';
ログイン後にコピー
dataset的兼容性处理
如果浏览器不支持dataset，有必要做一下兼容处理：
if(myDiv.dataset) {
myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
var theValue = myDiv.dataset.attribute; // 获取自定义属性
} else {
myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
}ログイン後にコピー
结语：
使用dataset操作data 要比使用getAttribute速度稍微慢些，虽然使用dataset不能提高代码的性能，但是对于简洁代码，提高代码的可读性和可维护性是很有帮助的。
通用属性介绍
HTML 标签中有一些通用的属性，如 id、title、class、style 等，这些通用属性可以在大多数 HTML 标签中使用，下面来简单介绍一下它们的用法。
1) id
id 属性用来赋予某个标签唯一的名称（标识符），当我们使用 CSS 或者 JavaScript 来操作这个标签时，就可以通过 id 属性来找到这个标签。
为标签定义 id 属性可以给我们提供很多便利，比如：
如果标签中带有 id 属性作为唯一标识符，通过 id 属性可以很方便的定位到该标签；
如果 HTML 文档中包含多个同名的标签，利用 id 属性的唯一性，可以很方便的区分它们。
注意：在一个 HTML 文档中 id 属性的值必须是唯一的。
示例代码如下所示：
<input type="text" id="username" />
<div id="content">PHP中文网</div>
<p id="url">https://www.php.cn/</p>
ログイン後にコピー
2) class
与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。另外，还可以为一个 HTML 标签定义多个 class 属性值，如下所示：
<div class="className1 className2 className3"></div>
<p>PHP中文网</p>
<div>https://www.php.cn/</div>
ログイン後にコピー
当使用 CSS 或者 JavaScript 来操作 HTML 标签时，同样可以使用 class 属性来找到对应的 HTML 标签。由于 class 属性不是唯一的，所以通过 CSS 或 JavaScript 对 HTML 标签的操作会应用于所有具有同名 class 属性的标签中。
3) title
title 属性用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title 属性的值，如下例所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
</head>
<body>
<a href="https://www.php.cn/" title="HTML教程">HTML教程</a>
</body>
</html>ログイン後にコピー
运行结果如下图所示：
将鼠标在链接处悬停片刻才能看到提示框。
4) style
使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式，例如设置文本的颜色、字体等，如下例所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
</head>
<body>
<p style="color:red;">https://www.php.cn/</p>
<img src="/static/imghw/default1.png" data-src="./logo.png" class="lazy" style="max-width:90%" alt="PHP中文网LOGO">
<div style="padding:10px;border:2px solid #999;text-align:center;">PHP中文网</div>
</body>
</html>ログイン後にコピー
运行结果如下图所示：
标签中常用的标签
1、 标签</strong></p><p><title> 标签用来定义 HTML 文档的标题，只有包含 <title> 标签的文档才算是一个有效的 HTML 文档。另外，一个 HTML 文档中仅允许存在一个 <title> 标签，并且 <title> 标签必须放置在 <head> 标签中。</p><p><strong>2、<base> 标签</strong></p><p><base> 标签用于为页面中所有相对链接指定一个基本链接，当您设置了基本链接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀，如下例所示：</p><p><strong>3、<link> 标签</strong></p><p><link> 标签经常用于引用外部 CSS 样式表，<link> 标签中包含两个主要的属性，分别是 rel 和 href。rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径。示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="stylesheet" href="common.css"></pre><div class="contentsignin">ログイン後にコピー</div></div><p><strong>4、<style>标签</strong></p><p>使用 <style> 标签可以在 HTML 文档中嵌入 CSS 样式，需要注意的是在 <style> 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><style>
body { background-color: YellowGreen; }
h1 { color: red; }
</style></pre><div class="contentsignin">ログイン後にコピー</div></div><p><strong>5、<meta> 标签</strong></p><p><meta> 标签用于提供有关 HTML 文档的元数据，例如页面有效期、页面作者、关键字列表、页面描述等信息。<meta> 标签定义的数据并不会显示在页面上，但却会被浏览器解析。</p><p><strong>6、<script> 标签</strong></p><p><script> 标签用于定义 JavaScript 脚本，示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script>
document.write("PHP中文网")
</script></pre><div class="contentsignin">ログイン後にコピー</div></div><p><strong>7、<noscript> 标签</strong></p><p>当用户的浏览器不支持 JavaScript 脚本或者禁用 JavaScript 脚本时，可以在 <noscript> 标签中定义一些内容来替代不能运行的 JavaScript 脚本或者给用户一些提示。除了 <script> 标签外，在 <noscript> 标签中可以包含任何 HTML 元素</p><p><strong><span style="font-size: 18px;">HTML注释标签<code><!-- --></code></span></strong></p><p>在 HTML 中您可以使用<code><!-- --></code>在代码中添加注释，<code><!--</code>和<code>--></code>之间的所有内容都会被视为注释。示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<!-- head 开始 -->
<head>
<meta charset="UTF-8"> <!-- 当前文档采用UTF-8编码 -->
<title>HTML注释的写法</title>
</head>
<!-- head 结束 -->
<!-- body 开始 -->
<body>
<!-- 一段文本 -->
<p>欢迎来到PHP中文网</p>
</body>
<!-- body 结束 -->
</html></pre><div class="contentsignin">ログイン後にコピー</div></div></p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/659/984/226/1659436774839636.png" class="lazy" title="1659436774839636.png" alt="1 つの記事で HTML のタグと属性について詳しく説明しています (主な構造の簡単な分析)。"></p>
<p>注释可以出现在 HTML 文档的任意位置，包括文档开头、文档末尾、文档中间、标签外部、标签内容中等。</p>
<p>相关推荐：《<a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">html视频教程</a>》</p><p>以上が1 つの記事で HTML のタグと属性について詳しく説明しています (主な構造の簡単な分析)。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">このウェブサイトの声明</div>
<div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div>
</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="AI_ToolDetails_main4sR">
<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="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796780570.html" title="R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796780641.html" title="R.E.P.O.最高のグラフィック設定" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.最高のグラフィック設定</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796785841.html" title="アサシンのクリードシャドウズ：シーシェルリドルソリューション" class="phpgenera_Details_mainR4_bottom_title">アサシンのクリードシャドウズ：シーシェルリドルソリューション</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2週間前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796780520.html" title="R.E.P.O.誰も聞こえない場合はオーディオを修正する方法" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.誰も聞こえない場合はオーディオを修正する方法</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796780523.html" title="R.E.P.O.チャットコマンドとそれらの使用方法" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.チャットコマンドとそれらの使用方法</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div> -->
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>ホットAIツール</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>リアルなヌード写真を作成する AI 搭載アプリ</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>写真から衣服を削除するオンライン AI ツール。</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>脱衣画像を無料で</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI衣類リムーバー</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title">
<h3>AI Hentai Generator</h3>
</a>
<p>AIヘンタイを無料で生成します。</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796780570.html" title="R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796780641.html" title="R.E.P.O.最高のグラフィック設定" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.最高のグラフィック設定</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796785841.html" title="アサシンのクリードシャドウズ：シーシェルリドルソリューション" class="phpgenera_Details_mainR4_bottom_title">アサシンのクリードシャドウズ：シーシェルリドルソリューション</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2週間前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796780520.html" title="R.E.P.O.誰も聞こえない場合はオーディオを修正する方法" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.誰も聞こえない場合はオーディオを修正する方法</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796780523.html" title="R.E.P.O.チャットコマンドとそれらの使用方法" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.チャットコマンドとそれらの使用方法</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>ホットツール</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="メモ帳++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title">
<h3>メモ帳++7.3.1</h3>
</a>
<p>使いやすく無料のコードエディター</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 中国語版" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 中国語版</h3>
</a>
<p>中国語版、とても使いやすい</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ゼンドスタジオ 13.0.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title">
<h3>ゼンドスタジオ 13.0.1</h3>
</a>
<p>強力な PHP 統合開発環境</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title">
<h3>ドリームウィーバー CS6</h3>
</a>
<p>ビジュアル Web 開発ツール</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac版</h3>
</a>
<p>神レベルのコード編集ソフト（SublimeText3）</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>ホットトピック</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/gmailyxdlrkzn" title="Gmailメールのログイン入り口はどこですか？" class="phpgenera_Details_mainR4_bottom_title">Gmailメールのログイン入り口はどこですか？</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>7541</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>15</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/cakephp-tutor" title="CakePHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">CakePHP チュートリアル</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1381</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>52</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/steamdzhmcssmgs" title="Steamのアカウント名の形式は何ですか" class="phpgenera_Details_mainR4_bottom_title">Steamのアカウント名の形式は何ですか</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>83</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>11</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/winactivationkeyper" title="Win11 Activation Key Permanent" class="phpgenera_Details_mainR4_bottom_title">Win11 Activation Key Permanent</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>55</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>19</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/newyorktimesdailybrief" title="NYTの接続はヒントと回答です" class="phpgenera_Details_mainR4_bottom_title">NYTの接続はヒントと回答です</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>21</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>86</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ja/faq/zt">もっと見る</a>
</div>
</div>
</div>
</div>
</div>
<div class="Article_Details_main2">
<div class="phpgenera_Details_mainL4">
<div class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div class="phpgenera_Details_mainL4_info">
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/1796600245.html" title="HTMLの表の境界線" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416492486715.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTMLの表の境界線" />
</a>
<a href="https://www.php.cn/ja/faq/1796600245.html" title="HTMLの表の境界線" class="phphistorical_Version2_mids_title">HTMLの表の境界線</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span>
<p class="Articlelist_txts_p">HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/1796600238.html" title="HTML 左マージン" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416482056439.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML 左マージン" />
</a>
<a href="https://www.php.cn/ja/faq/1796600238.html" title="HTML 左マージン" class="phphistorical_Version2_mids_title">HTML 左マージン</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:48 PM</span>
<p class="Articlelist_txts_p">HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/1796600244.html" title="HTML のネストされたテーブル" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416491283996.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML のネストされたテーブル" />
</a>
<a href="https://www.php.cn/ja/faq/1796600244.html" title="HTML のネストされたテーブル" class="phphistorical_Version2_mids_title">HTML のネストされたテーブル</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span>
<p class="Articlelist_txts_p">これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/1796600271.html" title="HTML テーブルのレイアウト" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416543391948.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML テーブルのレイアウト" />
</a>
<a href="https://www.php.cn/ja/faq/1796600271.html" title="HTML テーブルのレイアウト" class="phphistorical_Version2_mids_title">HTML テーブルのレイアウト</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:54 PM</span>
<p class="Articlelist_txts_p">HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/1796600269.html" title="HTML入力プレースホルダー" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416542577781.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML入力プレースホルダー" />
</a>
<a href="https://www.php.cn/ja/faq/1796600269.html" title="HTML入力プレースホルダー" class="phphistorical_Version2_mids_title">HTML入力プレースホルダー</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:54 PM</span>
<p class="Articlelist_txts_p">HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/1796600210.html" title="HTML 順序付きリスト" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416432927533.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML 順序付きリスト" />
</a>
<a href="https://www.php.cn/ja/faq/1796600210.html" title="HTML 順序付きリスト" class="phphistorical_Version2_mids_title">HTML 順序付きリスト</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:43 PM</span>
<p class="Articlelist_txts_p">HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/1796600227.html" title="HTML 内のテキストの移動" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416455153019.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML 内のテキストの移動" />
</a>
<a href="https://www.php.cn/ja/faq/1796600227.html" title="HTML 内のテキストの移動" class="phphistorical_Version2_mids_title">HTML 内のテキストの移動</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:45 PM</span>
<p class="Articlelist_txts_p">HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/1796600246.html" title="HTML の onclick ボタン" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416493797970.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML の onclick ボタン" />
</a>
<a href="https://www.php.cn/ja/faq/1796600246.html" title="HTML の onclick ボタン" class="phphistorical_Version2_mids_title">HTML の onclick ボタン</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span>
<p class="Articlelist_txts_p">HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。</p>
</div>
</div>
<a href="https://www.php.cn/ja/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<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?1744888287"></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>
<script>
// top
layui.use(function () {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function (type) {
layer.closeAll("tips");
},
},
});
});
document.addEventListener("DOMContentLoaded", (event) => {
// 定义一个函数来处理滚动链接的点击事件
function setupScrollLink(scrollLinkId, targetElementId) {
const scrollLink = document.getElementById(scrollLinkId);
const targetElement = document.getElementById(targetElementId);
if (scrollLink && targetElement) {
scrollLink.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认链接行为
targetElement.scrollIntoView({
behavior: "smooth"
}); // 平滑滚动到目标元素
});
} else {
console.warn(
`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
);
}
}
// 使用该函数设置多个滚动链接
setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
// 可以继续添加更多的滚动链接设置
});
window.addEventListener("scroll", function () {
var fixedElement = document.getElementById("Article_Details_main1Lmain");
var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
var scrollHeight = document.documentElement.scrollHeight; // 页面总高度
// 计算距离底部的距离
var distanceToBottom = scrollHeight - scrollTop - clientHeight;
// 当距离底部小于或等于300px时，取消固定定位
if (distanceToBottom <= 980) {
fixedElement.classList.remove("Article_Details_main1Lmain");
fixedElement.classList.add("Article_Details_main1Lmain_relative");
} else {
// 否则，保持固定定位
fixedElement.classList.remove("Article_Details_main1Lmain_relative");
fixedElement.classList.add("Article_Details_main1Lmain");
}
});
</script>
</body>
</html>
タグには、src と alt という 2 つの特別な属性があります。次の例に示すように、 タグにも、href と target という 2 つの特別な属性があります: 
