接触前端（好大气的名字啊）已经一个多月了，看了很多视频和博客，有了一定的感性认识，但还是需要总结一下以便系统化所学习的知识，就从html标签开始吧。关于标签，谈论最多的就是简洁和语义化。简洁指html标签仅仅负责把页面中的内容进行正确标示即可，而对内容的表现形式则统统交由css负责。语义化本不应成为问题，因为就像人与人之间的交流需要有意义的语言一样，html文档作为人与浏览器交流的语言自然是有意义的，但这并不能使所有人都遵循（类似于有了普通话，但各地方言依然流行，因为有时都可以达到一样的目的，所以人们总是按其最习惯的方式来进行）。简洁的问题到css是在进行总结，现在先谈谈语义化的问题。
w3school中共有117个标签，其中html5有16个不支持，29个新标签，以及从以前延续下来的72个标签。
今天先大致分类（按照我对其语义的理解）一下这72个“旧”标签吧，在此基础上以后分步进行语义辨析：
4个框架标签：,,,
1 <!DOCTYPE>2 <html>3 <head>4 <title>标题</title>5 </head>6 <body>7 内容。。。8 </body>9 </html>
Copier après la connexion
这里面的
标签是必须出现在<head>标签内的，但并不属于我所说的第一部分。</p> 4个只能（但并不必须）或必须在<head></head>标签之内出现的标签：<title>,<meta>,<base>,<link> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>1 <head>2 <title>标题</title>3 <meta http-equiv="content-type" content="text/html; charset=utf-8">4 <base href="#" />5 <link rel="stylesheet" type="text/css" href="#" />6 </head></pre><div class="contentsignin">Copier après la connexion</div></div> </p> 22个与文本有关的标签：<abbr>,<b>,<bdo>,<blockquote>,<cite>,<code>,<dfn>,<del>,<em>,<h1>-<h6>,<i>,<ins>,<p>,<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">,<q>,<small>,<smap><sub>,<sup>,<span>,<strong>,<var>,这么多标签与文本有关也传递出一个信息，那就是文本内容才是网页中最重要的部分。 10个与表格有关的标签：<caption>,<col>,<colgroup>,<table>,<th>,<tr>,<td>,<thead>,<tbody>,<tfoot>。 <p class="sycode"> <pre class='brush:php;toolbar:false;'><table> <caption>每月的存款</caption> <colgroup span="3"> <col span="1" style="background-color:red"> <col span="3" style="background-color:blue"> <tr> <th>月份</th> <th>一月</th> <th>二月</th> <th>三月</th> </tr> <tr> <td>存款</td> <td>1000元</td> <td>1000元</td> <td>1000元</td> </tr></table></pre><div class="contentsignin">Copier après la connexion</div></div> </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> 1 <table> 2 <thead> 3 <tr> 4 <td>THEAD 中的文本</td> 5 </tr> 6 </thead> 7 <tfoot> 8 <tr> 9 <td>TFOOT 中的文本</td>10 </tr>11 </tfoot>12 <tbody>13 <tr>14 <td>TBODY 中的文本</td> 15 </tr>16 </tbody>17 </table></pre><div class="contentsignin">Copier après la connexion</div></div> </p> <p> </p> 10个与表单有关的标签：<fieldset>,<legend>,<form>,<input>,<label>,<select>,<option>,<optgroup>,<menu>,<textarea>。 <p class="sycode"> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> 1 <form action="DoFormAction.htm"> 2 <fieldset style="width=800px"> <!--套住注册表格的边框--> 3 <legend>请输入如下的信息然后进行注册</legend> 4 <table cellspacing="0px" cellpadding="6px" border="1px" bordercolor="black" align="center" width="600px"> 5 <tr> 6 <td align="right">用户名:</td> <!--文本框--> 7 <td><input type="text" size="20" style="width:150px" /></td> 8 </tr> 9 <tr> 10 <td align="right">密码:</td> <!--密码框--> 11 <td><input type="password" size="20" style="width:150px" /></td> 12 </tr> 13 <tr> 14 <td align="right">确认密码:</td> 15 <td><input type="password" size="20" style="width:150px" /></td> 16 </tr> 17 <tr> 18 <td align="right">性别:</td> <!--单选框--> 19 <td> 20 <input type="radio" checked="checked" name="sex1" value="男" />男 21 <input type="radio" name="sex1" value="女" />女 22 </td> 23 </tr> 24 <tr> 25 <td align="right">性别(可以点文字选择):</td> 26 <td> 27 <fieldset style="width:150px"> <!--表单外框，也可以通过css设置宽度--> 28 <legend>请选择性别</legend> 29 <input type="radio" checked="checked" name="sex2" value="男" id="man" /> 30 <label for="man">男</label> 31 <input type="radio" name="sex2" value="女" id="woman" /> 32 <label for="woman">女</label> 33 </fieldset> 34 </td> 35 </tr> 36 <tr> 37 <td align="right">城市:</td> <!--下拉框--> 38 <td> 39 <select name="city"> 40 <option value="北京">北京</option> 41 <option value="深圳">深圳</option> 42 <option value="上海">上海</option> 43 <option value="南昌" selected="selected">南昌</option> <!--默认选择南昌--> 44 </select> 45 </td> 46 </tr> 47 <tr> 48 <td align="right">城市所在区域:</td> 49 <td> 50 <select name="area"> 51 <optgroup label="北京"> <!--下拉框分组显示--> 52 <option value="朝阳区">朝阳区</option> 53 <option value="海淀区">海淀区</option> 54 <option value="其他区">其他区</option> 55 </optgroup> 56 <optgroup label="南昌"> 57 <option value="东湖区">东湖区</option> 58 <option value="西湖区">西湖区</option> 59 <option value="青山湖区">青山湖区</option> 60 </optgroup> 61 </select> 62 </td> 63 </tr> 64 <tr> 65 <td align="right">交友目标:</td> 66 <td> 67 <select name="target" size="3" multiple="multiple"> <!--列表框--> 68 <option value="同行" selected="selected">同行</option> 69 <option value="普通朋友">普通朋友</option> 70 <option value="爱人">爱人</option> 71 </select> 72 </td> 73 </tr> 74 <tr> 75 <td align="right">爱好:</td> 76 <td> 77 <!--复选框,注意name属性设置一样，分组--> 78 <input type="checkbox" name="love" value="足球" />足球 79 <input type="checkbox" name="love" value="蓝球" />蓝球 80 <input type="checkbox" name="love" value="乒乓球" />乒乓球 81 </td> 82 </tr> 83 <tr> 84 <td align="right">照片上传:</td> 85 <td> 86 <!--文件选择框--> 87 <input type="file" name="myPic" /> 88 </td> 89 </tr> 90 <tr> 91 <td align="right">自我介绍:</td> 92 <td> 93 <!--多行文本框--> 94 <textarea rows="5" cols="50"> 95 </textarea> 96 </td> 97 </tr> 98 <tr> 99 <td align="center" colspan="2">100 <input type="submit" value="确定" />101 <input type="reset" value="清空" /> 102 <input type="image" src="../images/btnreg.png" onclick="alert('hello')" /> <!--演示图片按钮(会提交数据，类似submit)103 -->104 </td>105 </tr>106 </table>107 </fieldset>108 </form></pre><div class="contentsignin">Copier après la connexion</div></div> </p> View Code </p> <p>这个表单是由表格来布局的，是很早之前流行的方式，现在已经很少使用。就我所看到的而言，都是用定义列表(<dl><dt><dd>)和div标签来布局的，上述代码是从网上找来的，标签应用很全，所以就在此使用。</p> 6个与列表有关的标签：<ol>,<ul>,<li>,<dl>,<dt>,<dd>。 <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> 1 <!--有序列表--> 2 <ol> 3 <li>春</li> 4 <li>夏</li> 5 <li>秋</li> 6 <li>冬</li> 7 </ol> 8 <!--无序列表--> 9 <ul>10 <li>春</li>11 <li>夏</li>12 <li>秋</li>13 <li>冬</li>14 </ul>15 <!--定义列表-->16 <dl>17 <dt>Coffee</dt>18 <dd>Black hot drink</dd>19 <dt>Milk</dt>20 <dd>White cold drink</dd>21 </dl></pre><div class="contentsignin">Copier après la connexion</div></div> </p> <p> </p> 3个与图像有关的标签：<img src="/static/imghw/default1.png" data-src="planets.gif" class="lazy" alt="新手前端笔记之--初识html标签_html/css_WEB-ITnose" >,<map>,<area>。 <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><img src="/static/imghw/default1.png" data-src="planets.gif" class="lazy" alt="Planets" usemap ="#planetmap" /> <map id="planetmap"> <area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" /> <area shape ="circle" coords ="129,161,10" href ="mercur.htm" alt="Mercury" /> <area shape ="circle" coords ="180,139,14" href ="venus.htm" alt="Venus" /> </map></pre><div class="contentsignin">Copier après la connexion</div></div> </p> <p> </p> 5个引入标签：<style>,<script>,<noscript>,<object><param>。<style>--为html文档引入样式表，<script>和<noscript>为html文档引入脚本,<object>和<param>定义引入多媒体对象并为其设置参数。 <p>2个容器标签：<div>,<iframe>。前者将整个页面所要显示的内容分割成多个“区块”，以便css样式表对各部分进行样式设定。后者可以在屏幕上显示多个页面，最常见的应用是在邮箱页面和后台管理页面，好处是在改变屏幕上一个区块内容时，其他部分不改变。 <p> 10.还剩下6个单独标签：<!---->用于注释，<br />用于换行，<hr>分割线，<a>定义超链接，<button>定义按钮，<address>地址标签。 <p> 对“旧”标签的总结就是上面这些了，以后会对一些重要的、常用的标签进行总结。 <p> </style>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">Déclaration de ce site Web</div>
<div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter 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>Article chaud</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/fr/faq/1796785841.html" title="Assassin's Creed Shadows: Solution d'énigmes de coquille" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Solution d'énigmes de coquille</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Il y a quelques semaines</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/fr/faq/1796789525.html" title="Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour" class="phpgenera_Details_mainR4_bottom_title">Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Il y a quelques semaines</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/fr/faq/1796785857.html" title="Où trouver la courte de la grue à atomide atomique" class="phpgenera_Details_mainR4_bottom_title">Où trouver la courte de la grue à atomide atomique</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Il y a quelques semaines</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/fr/faq/1796784440.html" title="<🎜>: Dead Rails - Comment relever chaque défi" class="phpgenera_Details_mainR4_bottom_title"><🎜>: Dead Rails - Comment relever chaque défi</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Il y a quelques semaines</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/fr/faq/1796784000.html" title="Guide de l'atomfall: emplacements des articles, guides de quête et conseils" class="phpgenera_Details_mainR4_bottom_title">Guide de l'atomfall: emplacements des articles, guides de quête et conseils</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/fr/article.html">Afficher plus</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>Outils d'IA chauds</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/fr/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/fr/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>Application basée sur l'IA pour créer des photos de nu réalistes</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/fr/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/fr/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Outil d'IA en ligne pour supprimer les vêtements des photos.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/fr/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/fr/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Images de déshabillage gratuites</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/fr/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/fr/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>Dissolvant de vêtements AI</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/fr/ai/video-swap" title="Video Face Swap" 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/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/fr/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/fr/ai">Afficher plus</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>Article chaud</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/fr/faq/1796785841.html" title="Assassin's Creed Shadows: Solution d'énigmes de coquille" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Solution d'énigmes de coquille</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Il y a quelques semaines</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/fr/faq/1796789525.html" title="Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour" class="phpgenera_Details_mainR4_bottom_title">Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Il y a quelques semaines</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/fr/faq/1796785857.html" title="Où trouver la courte de la grue à atomide atomique" class="phpgenera_Details_mainR4_bottom_title">Où trouver la courte de la grue à atomide atomique</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Il y a quelques semaines</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/fr/faq/1796784440.html" title="<🎜>: Dead Rails - Comment relever chaque défi" class="phpgenera_Details_mainR4_bottom_title"><🎜>: Dead Rails - Comment relever chaque défi</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Il y a quelques semaines</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/fr/faq/1796784000.html" title="Guide de l'atomfall: emplacements des articles, guides de quête et conseils" class="phpgenera_Details_mainR4_bottom_title">Guide de l'atomfall: emplacements des articles, guides de quête et conseils</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/fr/article.html">Afficher plus</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>Outils chauds</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/fr/toolset/development-tools/92" title="Bloc-notes++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="Bloc-notes++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/fr/toolset/development-tools/92" title="Bloc-notes++7.3.1" class="phpmain_tab2_mids_title">
<h3>Bloc-notes++7.3.1</h3>
</a>
<p>Éditeur de code facile à utiliser et gratuit</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" 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 version chinoise" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" class="phpmain_tab2_mids_title">
<h3>SublimeText3 version chinoise</h3>
</a>
<p>Version chinoise, très simple à utiliser</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/fr/toolset/development-tools/121" title="Envoyer Studio 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="Envoyer Studio 13.0.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/fr/toolset/development-tools/121" title="Envoyer Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Envoyer Studio 13.0.1</h3>
</a>
<p>Puissant environnement de développement intégré PHP</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/fr/toolset/development-tools/469" title="Dreamweaver 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="Dreamweaver CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/fr/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Outils de développement Web visuel</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/fr/toolset/development-tools/500" title="SublimeText3 version 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 version Mac" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/fr/toolset/development-tools/500" title="SublimeText3 version Mac" class="phpmain_tab2_mids_title">
<h3>SublimeText3 version Mac</h3>
</a>
<p>Logiciel d'édition de code au niveau de Dieu (SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/fr/ai">Afficher plus</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>Sujets chauds</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/fr/faq/gmailyxdlrkzn" title="Où se trouve l'entrée de connexion pour la messagerie Gmail ?" class="phpgenera_Details_mainR4_bottom_title">Où se trouve l'entrée de connexion pour la messagerie Gmail ?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>7690</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/fr/faq/java-tutorial" title="Tutoriel Java" class="phpgenera_Details_mainR4_bottom_title">Tutoriel Java</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1639</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>14</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/fr/faq/cakephp-tutor" title="Tutoriel CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutoriel CakePHP</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1393</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/fr/faq/laravel-tutori" title="Tutoriel Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutoriel Laravel</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1287</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>25</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/fr/faq/php-tutorial" title="Tutoriel PHP" class="phpgenera_Details_mainR4_bottom_title">Tutoriel PHP</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1229</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/fr/faq/zt">Afficher plus</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/fr/faq/1796791823.html" title="HTML est-il facile à apprendre pour les débutants?" 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/001/253/068/174395586298618.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML est-il facile à apprendre pour les débutants?" />
</a>
<a href="https://www.php.cn/fr/faq/1796791823.html" title="HTML est-il facile à apprendre pour les débutants?" class="phphistorical_Version2_mids_title">HTML est-il facile à apprendre pour les débutants?</a>
<span class="Articlelist_txts_time">Apr 07, 2025 am 12:11 AM</span>
<p class="Articlelist_txts_p">HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/fr/faq/1796792987.html" title="Les rôles de HTML, CSS et JavaScript: responsabilités de base" 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/001/253/068/174411031220217.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Les rôles de HTML, CSS et JavaScript: responsabilités de base" />
</a>
<a href="https://www.php.cn/fr/faq/1796792987.html" title="Les rôles de HTML, CSS et JavaScript: responsabilités de base" class="phphistorical_Version2_mids_title">Les rôles de HTML, CSS et JavaScript: responsabilités de base</a>
<span class="Articlelist_txts_time">Apr 08, 2025 pm 07:05 PM</span>
<p class="Articlelist_txts_p">HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/fr/faq/1796791144.html" title="Quel est un exemple d'une balise de départ dans 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/001/253/068/174386905283883.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Quel est un exemple d'une balise de départ dans HTML?" />
</a>
<a href="https://www.php.cn/fr/faq/1796791144.html" title="Quel est un exemple d'une balise de départ dans HTML?" class="phphistorical_Version2_mids_title">Quel est un exemple d'une balise de départ dans HTML?</a>
<span class="Articlelist_txts_time">Apr 06, 2025 am 12:04 AM</span>
<p class="Articlelist_txts_p">Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/fr/faq/1796794693.html" title="Comprendre HTML, CSS et JavaScript: un guide pour débutant" 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/001/253/068/174438733162787.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Comprendre HTML, CSS et JavaScript: un guide pour débutant" />
</a>
<a href="https://www.php.cn/fr/faq/1796794693.html" title="Comprendre HTML, CSS et JavaScript: un guide pour débutant" class="phphistorical_Version2_mids_title">Comprendre HTML, CSS et JavaScript: un guide pour débutant</a>
<span class="Articlelist_txts_time">Apr 12, 2025 am 12:02 AM</span>
<p class="Articlelist_txts_p">WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/fr/faq/1796790382.html" title="Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web?" 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/001/246/273/174312432456726.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web?" />
</a>
<a href="https://www.php.cn/fr/faq/1796790382.html" title="Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web?" class="phphistorical_Version2_mids_title">Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web?</a>
<span class="Articlelist_txts_time">Apr 04, 2025 pm 11:30 PM</span>
<p class="Articlelist_txts_p">L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/fr/faq/1796790390.html" title="Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?" 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/001/246/273/174312372425268.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?" />
</a>
<a href="https://www.php.cn/fr/faq/1796790390.html" title="Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?" class="phphistorical_Version2_mids_title">Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?</a>
<span class="Articlelist_txts_time">Apr 04, 2025 pm 11:54 PM</span>
<p class="Articlelist_txts_p">GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/fr/faq/1796790622.html" title="Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué?" 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/001/246/273/174312337977178.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué?" />
</a>
<a href="https://www.php.cn/fr/faq/1796790622.html" title="Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué?" class="phphistorical_Version2_mids_title">Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué?</a>
<span class="Articlelist_txts_time">Apr 05, 2025 am 06:15 AM</span>
<p class="Articlelist_txts_p">Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/fr/faq/1796793129.html" title="HTML, CSS et JavaScript: outils essentiels pour les développeurs Web" 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/001/253/068/174412873346901.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML, CSS et JavaScript: outils essentiels pour les développeurs Web" />
</a>
<a href="https://www.php.cn/fr/faq/1796793129.html" title="HTML, CSS et JavaScript: outils essentiels pour les développeurs Web" class="phphistorical_Version2_mids_title">HTML, CSS et JavaScript: outils essentiels pour les développeurs Web</a>
<span class="Articlelist_txts_time">Apr 09, 2025 am 12:12 AM</span>
<p class="Articlelist_txts_p">HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.</p>
</div>
</div>
<a href="https://www.php.cn/fr/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>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/fr/about/us.html">À propos de nous</a>
<a href="https://www.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a>
<a href="https://www.php.cn/fr/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?1745499735"></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>
<script>
document.addEventListener('DOMContentLoaded', function() {
const mainNav = document.querySelector('.Article_Details_main1Lmain');
const header = document.querySelector('header');
if (mainNav) {
window.addEventListener('scroll', function() {
const scrollPosition = window.scrollY;
if (scrollPosition > 84) {
mainNav.classList.add('fixed');
} else {
mainNav.classList.remove('fixed');
}
});
}
});
</script>
</body>
</html> 
