It has been more than a month since I came into contact with the front-end (what a great name). I have watched a lot of videos and blogs, and I have a certain perceptual understanding. However, I still need to summarize the knowledge I have learned in order to systematize it. Let’s start with Let’s start with the html tag. Regarding tags, the most talked about is conciseness and semantics. Simplicity means that the HTML tag is only responsible for correctly labeling the content on the page, while CSS is responsible for all the presentation of the content. Semanticization should not be a problem, because just like communication between people requires meaningful language, html documents are naturally meaningful as a language for people to communicate with browsers, but this does not make everyone follow (Similar to the emergence of Mandarin, local dialects are still popular in various places, because sometimes they can achieve the same purpose, so people always do it in the way they are most accustomed to). The succinct issues are summarized in CSS. Now let’s talk about semantic issues.
There are a total of 117 tags in w3school, of which 16 are not supported by html5, 29 new tags, and 72 tags inherited from the past.
Today, let’s roughly classify (according to my understanding of their semantics) these 72 “old” tags. On this basis, we will conduct semantic analysis step by step:
4 frame tags: < !DOCTYPE>,,,
1 <!DOCTYPE>2 <html>3 <head>4 <title>标题</title>5 </head>6 <body>7 内容。。。8 </body>9 </html>
Copy after login
The
tag must appear within the <head> tag. But it doesn't belong to the first part of what I said. </p> 4 tags that can only (but are not required) or must appear within the <head></head> tag: <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">Copy after login</div></div> </p> 22 text-related tags: <abbr>,<b>,<bdo>,<blockquote>,<cite>,<code>,< dfn>,<del>,<em>,<h1>-<h6>,<i>,<ins>,<p>,<pre class="brush:php;toolbar:false">,<q>,< small>,<smap><sub>,<sup>,<span>,<strong>,<var>, so many tags related to text also convey a message, that is, the text content is The most important part of a web page. 10 table-related tags: <caption>,<col>,<colgroup>,<table>,<th>,<tr>,<td>,<thead>,< tbody>,<tfoot>. <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><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">Copy after login</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">Copy after login</div></div> </p> <p> </p> 10 form-related tags: <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">Copy after login</div></div> </p> View Code </p> <p>This form is laid out by tables, which was a popular method a long time ago and is rarely used now. As far as I can see, they are all laid out using definition lists (<dl><dt><dd>) and div tags. The above code is found from the Internet, and the tag application is very complete, so Use it here. </p> 6 list-related tags: <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">Copy after login</div></div> </p> <p> </p> 3 image-related tags: <img>, <map>, <area>. <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><img src="planets.gif" 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">Copy after login</div></div> </p> <p> </p> 5 introduction tags: <style>,<script>,<noscript>,<object><param>. <style>--Introduce a style sheet to the html document, <script> and <noscript> introduce scripts to the html document, <object> and <param> define the introduction of multimedia objects and set parameters for them. <p>2 container tags: <div>, <iframe>. The former divides the content to be displayed on the entire page into multiple "blocks" so that the CSS style sheet can style each part. The latter can display multiple pages on the screen. The most common applications are in the mailbox page and the background management page. The advantage is that when the content of a block on the screen is changed, other parts do not change. </p> <p> 10. There are 6 separate tags left: <!----> for comments, <br /> for line breaks, <hr> dividing line, <a> Define hyperlinks, <button> define buttons, <address> address labels. </p> <p> The summary of the "old" tags is the above. In the future, some important and commonly used tags will be summarized. </p> <p> </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?1747057177"></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> 
Web Front-end
