每一个HTML文件都是有自己固定的结构的，每一个文件的基本结构又都包含有三个标记：HTML文件标记；HEAD文件头部标记；BODY文件主体标记；接下来我们就来具体看一下HTML基本结构的代码。
基本结构代码：
1 <html>
2 <head>...</head>
3 <body>...</body>
4 </html>
Copy after login
代码讲解：
1. 称为根标签，所有的网页标签都在中。
2.
标签用于定义文档的头部，它是所有头部元素的容器。头部元素有
、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。</p>
<p>3. <body></body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。</p>
<p>4.<p></p>是文章的段落标签</p>
<p>5.<hx></hx>表示文章标题（x表示数字，为文章标题等级1-6）</p>
<p>6.<em></em>表示斜体</p>
<p>7.<strong></strong>表示加粗</p>
<p>8.<style></p>
<p> span{</p>
<p> 在这里配置样式，比如文字大小，颜色等</p>
<p> }</p>
<p> </style></p>
<p> <span></span>设置单独样式</p>
<p>9.<q></q>引用，会自动加上双引号</p>
<p>10.<blockquote></blockquote>缩进</p>
<p>11.<br />换行</p>
<p>12. 输入空格</p>
<p>13.<hr/>添加水平横线</p>
<p>14.<address></address>输入地址信息（默认以 斜体表示）</p>
<p>15.<code></code>代码标签</p>
<p>16.<pre class="brush:php;toolbar:false"></pre>大段代码标签</p>
<p>17.无序列表</p>
<p><ul></p>
<p> <li>内容</li></p>
<p> <li>内容</li></p>
<p> <li>内容</li></p>
<p></ul></p>
<p>18.有序列表(列表会自动加上序号)</p>
<p> <ol></p>
<p> <li>内容</li></p>
<p> <li>内容</li></p>
<p> <li>内容</li></p>
<p> </ol></p>
<p>19.<div>…</div>：划分区域（独立逻辑）</p>
<p>20.<div id="版块名称">…</div>：划分板块并给板块命名</p>
<p>21.表格展示（没有框线）</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
</tbody>
</table></pre><div class="contentsignin">Copy after login</div></div><p>22.<table summary = "内容"></table>为表格添加摘要</p><p>23.<caption></caption>为表格添加标题</p><p>24.<a href = "网址" title = "提示">..</a>加入网页链接（在当前页面打开）</p><p>25.<a href="目标网址" target="_blank">..</a>加入网页链接（新建页面）</p><p>26.在网页中链接Email地址</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/3f42f799e2cf172b3f4e7947790376aa-0.png" class="lazy" alt="" style="max-width:90%" style="max-width:90%"/></p><p><img src="/static/imghw/default1.png" data-src="http://www.php.cn/static/ueditor/themes/default/images/spacer.gif" class="lazy"/ alt="How to briefly describe the basic structure of html (with code)" >如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。</p><p>27.<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">：为网页插入图片</p><p>28.表单标签：表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form method="传送方式" action="服务器文件"></pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表单标签</title>
</head>
<body>
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" value="" />
<br/>
<label for="pass">密 码:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
</body>
</html></pre><div class="contentsignin">Copy after login</div></div><p>输出：</p><p style="margin-left: 60px;"> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/3f42f799e2cf172b3f4e7947790376aa-3.png" class="lazy" alt=""/></p><p>29.输入大段内容：（文本域）<textarea cols = "50" rows = "10">..</textarea> </p><p> cols = "行数"</p><p> rows = "列数"</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本域</title>
</head>
<body>
<form action="save.php" method="post" >
<label>个人简介：</label>
<textarea cols = "50" rows = "10">在这里输入内容...</textarea>
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
</body>
</html></pre><div class="contentsignin">Copy after login</div></div><p>输出：</p><p style="margin-left: 60px;"> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/3f42f799e2cf172b3f4e7947790376aa-5.png" class="lazy" alt=""/> </p><p>30.单选/复选框</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><input type="radio/checkbox" value="值" name="名称" checked="checked"/></pre><div class="contentsignin">Copy after login</div></div><p style="max-width:90%">1、type:</p><p style="margin-left: 30px;"> 当 type="radio" 时，控件为单选框</p><p style="margin-left: 30px;"> 当 type="checkbox" 时，控件为复选框</p><p style="margin-left: 30px;">2、value：提交数据到服务器的值（后台程序PHP使用）</p><p style="margin-left: 30px;">3、name：为控件命名，以备后台程序 ASP、PHP 使用</p><p style="margin-left: 30px;">4、checked：当设置 checked="checked" 时，该选项被默认选中</p><p style="margin-left: 30px;"> （同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。）</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>单选框、复选框</title>
</head>
<body>
<form action="save.php" method="post" >
<label>性别:</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" />
</form>
</body>
</html></pre><div class="contentsignin">Copy after login</div></div><p>输出：</p><p style="margin-left: 60px;"> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/07a35cd20dd5ec48da40602e9c95af0b-7.png" class="lazy" alt=""/></p><p>31.下拉框表<select>..</select></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉列表框</title>
</head>
<body>
<form action="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected = "selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
</body>
</html></pre><div class="contentsignin">Copy after login</div></div><p>输出：<br/></p><p style="margin-left: 60px;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/07a35cd20dd5ec48da40602e9c95af0b-8.png" class="lazy" alt=""/></p><p style="max-width:90%"><select>..</select>下拉框列表</p><p style="margin-left: 30px;">selected = "selected"：默认选中</p><p>32.下拉框表支持复选:multiple = "multiple"</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><select multiple = "multiple">..<select></pre><div class="contentsignin">Copy after login</div></div><p>输出：</p><p style="margin-left: 60px;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/07a35cd20dd5ec48da40602e9c95af0b-10.png" class="lazy" alt=""/></p><p>（在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项）</p><p>33.提交按钮</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>提交按钮</title>
</head>
<body>
<form method="post" action="save.php">
<label for="myName">姓名：</label>
<input type="text" value=" " name="myName " />
<input type="submit" value="提交" name="submitBtn" />
</form>
</body>
</html></pre><div class="contentsignin">Copy after login</div></div><p>输出：</p><p style="margin-left: 60px;"> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/07a35cd20dd5ec48da40602e9c95af0b-13.png" class="lazy" alt=""/> </p><p>34.重置按钮</p><p> 在33中把type的值改为reset.</p><p>35.form表单中的label标签</p><p> label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用 户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><label for="控件id名称"></pre><div class="contentsignin">Copy after login</div></div><p> 注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form中的lable标签</title>
</head>
<body>
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<br />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
<br/><br/>
你对什么运动感兴趣：<br />
<label for="jog">慢跑</label>
<input type="checkbox" name="jog" id="jog" /><br />
<label for="climb">登山</label>
<input type="checkbox" name="climb" id="climb" /><br />
<label for="basketball">篮球</label>
<input type="checkbox" name="basketball" id="basketball" />
</form>
</body>
</html></pre><div class="contentsignin">Copy after login</div></div><p>输出：</p>
<p style="margin-left: 60px;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/07a35cd20dd5ec48da40602e9c95af0b-14.png" class="lazy" alt=""></p>
<p> 相关推荐：</p>
<p><a href="http://www.php.cn/div-tutorial-385334.html" target="_self">HTML的基本结构有哪些</a></p>
<p><a href="http://www.php.cn/div-tutorial-358568.html" target="_self">HTML基本结构介绍</a></p><p>The above is the detailed content of How to briefly describe the basic structure of html (with code). For more information, please follow other related articles on the PHP Chinese website!</p>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">Statement of this Website</div>
<div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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>Hot Article</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796797907.html" title="Roblox: Grow A Garden - Complete Mutation Guide" class="phpgenera_Details_mainR4_bottom_title">Roblox: Grow A Garden - Complete Mutation Guide</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796797130.html" title="Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys" class="phpgenera_Details_mainR4_bottom_title">Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796796771.html" title="How to fix KB5055612 fails to install in Windows 10?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055612 fails to install in Windows 10?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796796926.html" title="Nordhold: Fusion System, Explained" class="phpgenera_Details_mainR4_bottom_title">Nordhold: Fusion System, Explained</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796797896.html" title="Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook" class="phpgenera_Details_mainR4_bottom_title">Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/article.html">Show More</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>Hot AI Tools</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/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/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>AI-powered app for creating realistic nude photos</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/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/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online AI tool for removing clothes from photos.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/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/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Undress images for free</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/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/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI clothes remover</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/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/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ai">Show More</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>Hot Article</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796797907.html" title="Roblox: Grow A Garden - Complete Mutation Guide" class="phpgenera_Details_mainR4_bottom_title">Roblox: Grow A Garden - Complete Mutation Guide</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796797130.html" title="Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys" class="phpgenera_Details_mainR4_bottom_title">Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796796771.html" title="How to fix KB5055612 fails to install in Windows 10?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055612 fails to install in Windows 10?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796796926.html" title="Nordhold: Fusion System, Explained" class="phpgenera_Details_mainR4_bottom_title">Nordhold: Fusion System, Explained</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796797896.html" title="Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook" class="phpgenera_Details_mainR4_bottom_title">Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/article.html">Show More</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>Hot Tools</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++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="Notepad++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Easy-to-use and free code editor</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" 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 Chinese version" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Chinese version</h3>
</a>
<p>Chinese version, very easy to use</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/121" title="Zend 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="Zend Studio 13.0.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Zend Studio 13.0.1</h3>
</a>
<p>Powerful PHP integrated development environment</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/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/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visual web development tools</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" 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 version" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac version</h3>
</a>
<p>God-level code editing software (SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ai">Show More</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>Hot Topics</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1666</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/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1425</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/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1327</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/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1273</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/c-tutorial" title="C# Tutorial" class="phpgenera_Details_mainR4_bottom_title">C# Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1252</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>24</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/faq/zt">Show More</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/faq/1796794693.html" title="Understanding HTML, CSS, and JavaScript: A Beginner's Guide" 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="Understanding HTML, CSS, and JavaScript: A Beginner's Guide" />
</a>
<a href="https://www.php.cn/faq/1796794693.html" title="Understanding HTML, CSS, and JavaScript: A Beginner's Guide" class="phphistorical_Version2_mids_title">Understanding HTML, CSS, and JavaScript: A Beginner's Guide</a>
<span class="Articlelist_txts_time">Apr 12, 2025 am 12:02 AM</span>
<p class="Articlelist_txts_p">WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796797816.html" title="HTML: The Structure, CSS: The Style, JavaScript: The Behavior" 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/174490615241003.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML: The Structure, CSS: The Style, JavaScript: The Behavior" />
</a>
<a href="https://www.php.cn/faq/1796797816.html" title="HTML: The Structure, CSS: The Style, JavaScript: The Behavior" class="phphistorical_Version2_mids_title">HTML: The Structure, CSS: The Style, JavaScript: The Behavior</a>
<span class="Articlelist_txts_time">Apr 18, 2025 am 12:09 AM</span>
<p class="Articlelist_txts_p">The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796798320.html" title="The Future of HTML, CSS, and JavaScript: Web Development Trends" 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/174499214213783.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="The Future of HTML, CSS, and JavaScript: Web Development Trends" />
</a>
<a href="https://www.php.cn/faq/1796798320.html" title="The Future of HTML, CSS, and JavaScript: Web Development Trends" class="phphistorical_Version2_mids_title">The Future of HTML, CSS, and JavaScript: Web Development Trends</a>
<span class="Articlelist_txts_time">Apr 19, 2025 am 12:02 AM</span>
<p class="Articlelist_txts_p">The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796797300.html" title="The Future of HTML: Evolution and Trends in Web Design" 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/174481993285664.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="The Future of HTML: Evolution and Trends in Web Design" />
</a>
<a href="https://www.php.cn/faq/1796797300.html" title="The Future of HTML: Evolution and Trends in Web Design" class="phphistorical_Version2_mids_title">The Future of HTML: Evolution and Trends in Web Design</a>
<span class="Articlelist_txts_time">Apr 17, 2025 am 12:12 AM</span>
<p class="Articlelist_txts_p">The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796796827.html" title="HTML vs. CSS vs. JavaScript: A Comparative Overview" 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/174473305338023.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML vs. CSS vs. JavaScript: A Comparative Overview" />
</a>
<a href="https://www.php.cn/faq/1796796827.html" title="HTML vs. CSS vs. JavaScript: A Comparative Overview" class="phphistorical_Version2_mids_title">HTML vs. CSS vs. JavaScript: A Comparative Overview</a>
<span class="Articlelist_txts_time">Apr 16, 2025 am 12:04 AM</span>
<p class="Articlelist_txts_p">The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796795665.html" title="HTML: Building the Structure of Web Pages" 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/174456085285529.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML: Building the Structure of Web Pages" />
</a>
<a href="https://www.php.cn/faq/1796795665.html" title="HTML: Building the Structure of Web Pages" class="phphistorical_Version2_mids_title">HTML: Building the Structure of Web Pages</a>
<span class="Articlelist_txts_time">Apr 14, 2025 am 12:14 AM</span>
<p class="Articlelist_txts_p">HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796800590.html" title="HTML vs. CSS and JavaScript: Comparing Web Technologies" 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/174533794691849.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML vs. CSS and JavaScript: Comparing Web Technologies" />
</a>
<a href="https://www.php.cn/faq/1796800590.html" title="HTML vs. CSS and JavaScript: Comparing Web Technologies" class="phphistorical_Version2_mids_title">HTML vs. CSS and JavaScript: Comparing Web Technologies</a>
<span class="Articlelist_txts_time">Apr 23, 2025 am 12:05 AM</span>
<p class="Articlelist_txts_p">HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796796249.html" title="HTML: Is It a Programming Language or Something Else?" 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/174464723172609.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML: Is It a Programming Language or Something Else?" />
</a>
<a href="https://www.php.cn/faq/1796796249.html" title="HTML: Is It a Programming Language or Something Else?" class="phphistorical_Version2_mids_title">HTML: Is It a Programming Language or Something Else?</a>
<span class="Articlelist_txts_time">Apr 15, 2025 am 12:13 AM</span>
<p class="Articlelist_txts_p">HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.</p>
</div>
</div>
<a href="https://www.php.cn/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>Public welfare online PHP training，Help PHP learners grow quickly！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/about/us.html">About us</a>
<a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a>
<a href="https://www.php.cn/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?1747058514"></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> 
