| </td> <td>●</td> <td>Title</td> <td>Define the file title, which will be displayed at the top of the browser</td> <td> </td> </tr> <tr> <td><BODY></td> <td>●</td> <td>This article</td> <td>Design file format and content location</td> <td> </td> </tr> <tr> <td colspan="5">Typesetting mark</td> </tr> <tr> <td><!--Annotation--></td> <td>○</td> <td> The description tag </td> <td> adds a description to the file but is not displayed </td> <td> </td> </tr> <tr> <td><P></td> <td>○</td> <td>Paragraph mark</td> <td>Leave a blank line between words, pictures, tables, etc.</td> <td> </td> </tr> <tr> <td><BR></td> <td>○</td> <td>Line break mark</td> <td>To display words, pictures, tables, etc. on the next line</td> <td> </td> </tr> <tr> <td><HR> </td> <td>○</td> <td>Horizontal line </td> <td>Insert a horizontal line </td> <td> </td> </tr> <tr> <td><CENTER></td> <td>●</td> <td>Center</td> <td>Let words, pictures, tables, etc. be displayed in the middle</td> <td>Object </td> </tr> <tr> <td><PRE></td> <td>●</td> <td>Default format</td> <td>Display the files according to the source code arrangement</td> <td> </td> </tr> <tr> <td><DIV> ;</td> <td>●</td> <td>Separation mark</td> <td>Set the placement of words, pictures, tables, etc.</td> <td> </td> </tr> <tr> <td> <NOBR> </td> <td><WBR></td> <td>●</td> <td>Recommended fold</td> <td>Default fold location</td> </tr> <tr> <td> </td> <td>Font tag</td> <td> </td> <td><STRONG></td> <td>●</td> </tr>Emphasis <tr> <td colspan="5">Produces font bold Bold Effect</td> </tr> <tr> <td> </td> <td><B></td> <td>●</td> <td>Bold mark</td> <td> produces a bold font Effect</td> </tr> <tr> <td> </td> <td><EM></td> <td>●</td> <td>Emphasis mark</td> <td>The font appears with italic effect</td> </tr> <tr> <td> </td> <td><I></td> <td>●</td> <td>Italic mark</td> <td>The font has an italic effect</td> </tr> <tr> <td> </td> <td><TT></td> <td>●</td> <td>Typing font</td> <td>Courier font, same letter width</td> </tr> <tr> <td> </td> <td><U></td> <td>●</td> <td>Add bottom line</td> <td>Add bottom line</td> </tr>Objection<tr> <td> </td> <td><H1></td> <td>●</td> <td>Level 1 title tag</td> <td>Get thicker, bigger and wider, the degree is inversely proportional to the series</td> </tr> <tr> <td> </td> <td><H2></td> <td>●</td> <td>Secondary title tag</td> <td>Make the font bolder and larger Widen </td> </tr> <tr> <td> </td> <td><H3></td> <td>●</td> <td>Third-level title tag</td> <td>Change the font Thick to large and widened</td> </tr> <tr> <td> </td> <td><H4></td> <td>●</td> <td>Level 4 title tag</td> <td> Make the font thicker, larger and wider </td> </tr> <tr> <td> </td> <td><H5></td> <td>●</td> <td>Level 5 title tag</td> <td>Make the font thicker, larger and wider</td> </tr> <tr> <td> </td> <td><H6></td> <td>●</td> <td>Level 6 title tag </td> <td>Make the font thicker, larger and wider</td> </tr> <tr> <td> </td> <td><FONT></td> <td>●</td> <td>glyph Mark </td> <td>Set font, size, color</td> </tr>Object <tr> <td> </td> <td><BASEFONT></td> <td>○</td> <td> Base glyph tags </td> <td> Set all glyphs, sizes, colors </td> </tr> Oppose <tr> <td> </td> <td><BIG></td> <td>●</td> <td>Enlarge the font size</td> <td>Make the font size slightly larger</td> </tr> <tr> <td> </td> <td><SMALL></td> <td>●</td> <td>Shrink the font size</td> <td>Make the font slightly thinner</td> </tr> <tr> <td> </td> <td><STRIKE></td> <td>●</td> <td>Draw strikethrough</td> <td>Add a strikethrough to the font</td> </tr>Oppose<tr> <td> </td> <td><CODE></td> <td>●</td> <td>Program code</td> <td>The font is slightly wider, such as <TT></td> </tr> <tr> <td></td>
</tr>
<tr> <td><KBD></td> <td>●</td> <td>Keyboard words</td> <td>The font is slightly wider, single space</td> <td> </td> </tr> <tr> <td><SAMP></td> <td>●</td> <td>Example</td> <td>The font is slightly wider, such as <TT></td> <td> </td> </tr> <tr> <td><VAR></td> <td>●</td> <td>Variable</td> <td>italic effect</td> <td> </td> </tr> <tr> <td><CITE></td> <td>●</td> <td>Biography Quote</td> <td>italic effect</td> <td> </td> </tr> <tr> <td><BLOCKQUOTE> </td> <td>●</td> <td>Quote text block</td> <td>Indented font</td> <td> </td> </tr> <tr> <td><DFN></td> <td>●</td> <td>Predicate definition</td> <td>Italic effect</td> <td> </td> </tr> <tr> <td><ADDRESS></td> <td> ●</td> <td>Address tag</td> <td>italic effect</td> <td> </td> </tr> <tr> <td><SUB></td> <td>●</td> <td>Subscript</td> <td>Index</td> <td> </td> </tr> <tr> <td><SUP></td> <td>●</td> <td>Subscript </td> <td>Subscript </td> <td> </td> </tr> <tr> <td colspan="5">List tag</td> </tr> <tr> <td><OL></td> <td>●</td> <td>Sequential list</td> <td>The list items will be arranged in numerical and alphabetical order</td> <td> </td> </tr> <tr> <td><UL></td> <td>●</td> <td>Unordered list</td> <td>List items will be arranged in dots</td> <td> </td> </tr> <tr> <td><LI></td> <td>○</td> <td>Checklist items</td> <td>Each tag identifies a checklist item</td> <td> </td> </tr> <tr> <td><MENU></td> <td>●</td> <td>Menu list</td> <td>The list items will be arranged in dots, such as <UL></td> <td>Objection</td> </tr> <tr> <td> <DIR> </td> <td> </td><DL><td> </td>●<td> </td>Definition list<td> </td>The list appears in two levels</tr> <tr> <td> </td> <td> </td><DT><td> </td>○<td> </td>Definition entry<td> </td>Title indicating the definition</tr> <tr> <td> </td> <td> </td><DD><td> </td>○<td> </td>Definition content<td> </td>Mark definition content</tr> <tr> <td> </td> <td> </td>Table mark<td> </td> <td> </td><TABLE><td> </td>●</tr> <tr>Table mark<td colspan="5"> </td>Set the parameters of the table</tr> <tr> <td> </td> <td> </td><CAPTION><td> </td>●<td> </td>Table title<td> </td>Make a dozen columns to fill in Table title </tr> <tr> <td> </td> <td> </td><TR><td> </td>●<td> </td>Table columns<td> </td>Set the table Column</tr> <tr> <td> </td> <td> </td><TD><td> </td>●<td> </td>Table Column<td> </td>Set the columns of the table </tr> <tr> <td> </td> <td> </td><TH><td> </td>●<td> </td>Table header<td> </td>equal to <TD> , but the font inside will become bold</tr> <tr> <td> </td> <td> </td>Form mark<td> </td> <td> </td><FORM><td> </td>●</tr> <tr>Form tags<td colspan="5"> </td>Determine the operation mode of a single form</tr> <tr> <td> </td> <td> </td><TEXTAREA><td> </td> ●<td> </td>Text block<td> </td>Provide text boxes for inputting larger amounts of text</tr> <tr> <td> </td> <td> </td><INPUT><td> </td>○<td> </td>Input mark<td> </td>Determine the input form</tr> <tr> <td> </td> <td> </td><SELECT><td> </td>● <td> </td>Select mark<td> </td>Create pop-up scrolling list</tr> <tr> <td> </td> <td> </td><OPTION><td> </td>○ <td> </td>Options<td> </td>Each mark indicates an option </tr> <tr> <td> </td> <td> </td>Graphic mark<td> </td> <td> </td><IMG><td> </td>○</tr> <tr>Graphic mark<td colspan="5"> </td> is used to insert graphics and set graphic properties</tr> <tr> <td> </td> <td> </td>Link tag<td> </td> <td> </td><A><td> </td>●</tr> <tr>Link tag<td colspan="5"> </td>Add link</tr> <tr> <td> </td> <td> </td><BASE><td> </td>○<td> </td>Benchmark tag<td> </td>Can convert relative URL to absolute and specify the link target</tr> <tr> <td> </td> <td> </td>Frame tag<td> </td> <td> </td><FRAMESET><td> </td>●</tr> <tr>Frame Set<td colspan="5"> </td>Set the frame</tr> <tr> <td> </td> </tr>
<tr> <td><FRAME></td> <td>○</td> <td>框窗设定</td> <td>设定框窗</td> <td> </td> </tr> <tr> <td><IFRAME></td> <td>○</td> <td>页内框架</td> <td>于网页中间插入框架</td> <td>IE</td> </tr> <tr> <td><NOFRAMES></td> <td>●</td> <td>不支援框架</td> <td>设定当浏览器不支援框架时的提示</td> <td> </td> </tr> <tr> <td colspan="5">影像地图</td> </tr> <tr> <td><MAP></td> <td>●</td> <td>影像地图名称</td> <td>设定影像地图名称</td> <td> </td> </tr> <tr> <td><AREA></td> <td>○</td> <td>连结区域</td> <td>设定各连结区域</td> <td> </td> </tr> <tr> <td colspan="5">多媒体</td> </tr> <tr> <td><BGSOUND></td> <td>○</td> <td>背景声音</td> <td>于背景播放声音或音乐</td> <td>IE</td> </tr> <tr> <td><EMBED></td> <td>○</td> <td>多媒体</td> <td>加入声音、音乐或影像</td> <td> </td> </tr> <tr> <td colspan="5">其他标记</td> </tr> <tr> <td><MARQUEE></td> <td>●</td> <td>走动文字</td> <td>令文字左右走动</td> <td>IE</td> </tr> <tr> <td><BLINK></td> <td>●</td> <td>闪烁文字</td> <td>闪烁文字</td> <td>NC</td> </tr> <tr> <td><ISINDEX></td> <td>○</td> <td>页内寻找器</td> <td>可输入关键字寻找于该一页</td> <td>反对</td> </tr> <tr> <td><META></td> <td>○</td> <td>开头定义</td> <td>让浏览器知道这是 HTML 文件</td> <td> </td> </tr> <tr> <td><LINK></td> <td>○</td> <td>关系定义</td> <td>定义该文件与其他 URL 的关系</td> <td> </td> </tr> <tr> <td colspan="5">StyleSheet</td> </tr> <tr> <td><STYLE></td> <td>●</td> <td>样式表</td> <td>控制网页版面</td> <td> </td> </tr> <tr> <td><span></td> <td>●</td> <td>自订标记</td> <td>独立使用或与样式表同用</td> <td> </td> </tr> </table> <p>注： </p> <li>● 表示该标记属围堵标记，即需要关闭标记如 </标记>。 </li> <li>○ 表示该标记属空标记，即不需要关闭标记。 </li> <li>IE 表示该标记只适用于 Internet Explorer。 </li> <li>NC 表示该标记只适用于 Netscape Communicator。 </li> <li>反对 表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支 持，只是 HTML 标准中有其它同功能或更好的选择。 </li> <li>弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特 性，不用担心新浏览器不支援旧标记。 </li> <li>新 表示该标记是 HTML 4.0 中新增的。 </li> <br> <p><strong>5、html的一些特殊符号</strong></p> <p><strong></strong></p> <p>只要你认识了 HTML 标记，你便会知道特殊字符的用处。 </p> <table> <tr> <td>HTML 原始码</td> <td>显示结果</td> <td>描述</td> </tr> <tr> <td><</td> <td><</td> <td>小於号或显示标记</td> </tr> <tr> <td>></td> <td>></td> <td>大於号或显示标记</td> </tr> <tr> <td>&</td> <td>&</td> <td>可用於显示其它特殊字符</td> </tr> <tr> <td>"</td> <td>"</td> <td>引号</td> </tr> <tr> <td>®</td> <td>?</td> <td>己注册</td> </tr> <tr> <td>©</td> <td>?</td> <td>版权</td> </tr> <tr> <td>™</td> <td>?</td> <td>商标</td> </tr> <tr> <td> </td> <td> </td> <td>半方大的空白</td> </tr> <tr> <td> </td> <td> </td> <td>全方大的空白</td> </tr> <tr> <td> </td> <td> </td> <td>不断行的空白</td> </tr> </table>
<p></p> <p><br> </p> <p><strong>6. Introduction to commonly used tags</strong></p> <p></p> <p>1), font tag: </p> <p><FONT> is applied to the content part of the file, that is, the position between <BODY> and </BODY>. It only affects the marked words and sentences, and is a containment mark. </p> <p></p> <p><FONT> Parameter settings: Example: <font face="Arial" size=" 2" color="#008000">Creation of Webpage</font> ; face="Arial" sets the font style of the text. Arial is a commonly used one. Please do not use glyphs other than Window’s built-in glyphs. For Chinese web pages that are not set to Gb2312 Encoding, Netscape Net vigator will not display any Chinese glyphs specified by this tag. size=" 2" sets the size of the text. The value can be absolute or relative. Absolute means that the mark determines the size of the text by itself and is not affected by <BASEFONT>. </p> <p>For example, size="5" means that the size is 5, and html The default value is 3, that is, size="3" is the same as not being set. Relative means to increase or decrease the size series based on the default value of 3. For example, size=" 2" is equivalent to size="5" in absolute representation, but if <BASEFONT size="n" has been set > Then its actual size is n 2 and is no longer 3 2. <BASEFONT>Absolute notation only. color="#008000" sets the color of the text. #008000 means green </p> <p><br> </p> <p>2), img tag </p> <p><img> is mainly used to insert pictures into web pages </p> <p><br> </p> <p>General parameter settings for<IMG>: </p> <p>For example, <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align ="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif"> </p> <li>src="logo.gif" <br> Image source, accepts .gif, .jpg and .png formats , the former two have been popular for a long time, and the latter began to develop in 1996 and will replace the former two in the future. If the image file is in the same directory as the html file, only the file name must be written. Otherwise, the correct path must be added, either relative or absolute. </li> <li>width=100 height=100 <br> Set the image size. The width and height are generally in pixels. Usually only set to the actual size of the picture to avoid distortion. If you want to change the size of the picture, it is best to use an image editing tool in advance. </li> <li>hspace=5 vspace=5 <br> Set the edge of the image to be blank to prevent text or other images from being too close. hspace is to set the space around the image, vspace is to set the space above and below the image, and the height is in pixels. </li> <li>border=2 <br> Image border thickness. </li> <li>align="top" <br> Adjust the position of the text next to the picture. You can control the text to appear at the top, middle, bottom, left and right of the picture, etc. Optional values: top, middle, bottom, left, right, default is bottom. Netscape also supports texttop, baseline, absmiddle, absbottom. <br> texttop means that the picture and text are paired according to the top line. <br> baseline means that the picture is paired to the bottom line of the current text line. <br> absmiddle means that the picture is paired to the current text line. In the center, <br> absbottom indicates the absolute bottom of the image to the current line of text (the absolute bottom means that it takes into account the lower edge of words such as y, g, q, etc.). </li> <li>alt="Logo of PenPal Garden" <br> This is the text used to describe the graphic. If the user uses a text browser, since images are not supported, these texts will be displayed instead of the image. If the browser supports image display, the text will also be displayed when the mouse is moved over the image. </li> <li>lowsrc="pre_logo.gif" <br> Set to display the low-resolution image first. If a large image is added and the download time is very long, the low-resolution image will be displayed first. To avoid losing interest in browsing, it is usually a grayscale version of the original image. </li> <p class="sycode"> <br> </p> <p class="sycode"> 3), table tag </p> <p class="sycode"> <br> </p> <p class="sycode"> <TABLE> is a container tag, which means it is used to Declares that this is a table and that other table tags are only applicable within its scope. There are other container tags. <br> <TR> Used to mark table columns (rows) <br> <TD> Used to mark cells (cells) </p>
<p><TABLE> Parameter settings (commonly used): <br> For example: <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="# FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2"> </p> <p></p> <li>width="400" <br> Table width, accept absolute value (such as 80 ) and relative values (such as 80%). <p></p> </li> <li>border="1" <br> Table border thickness. Different browsers have different default values, so please specify. <p></p>
</li> <li>cellspacing="2" <br> Table grid thickness, please see example 3, that is a grid thickened to 5. <p></p> </li> <li>cellpadding="2" <br> For the distance between the text and the grid, please see Example 4, that is the padding added to 10. <p></p> </li> <li>align="CENTER" <br> The placement position of the table (horizontal), the optional values are: left, right, center, please see example 5 or 6, the table is It is placed in the middle because some browsers do not support it, so the center mark <CENTER> is added. It is just a multi-layered guarantee. Of course, only <CENTER> can also be used. <p></p> </li> <li>valign="TOP". <br> The position (vertical) of the placement of calligraphy and painting in the table. Optional values are: top, middle, bottom. <p></p> </li> <li>background="myweb.gif" <br> Form paper, do not use it with bgcolor. <p></p> </li> <li>bgcolor="#0000FF" <br> Table background color, do not use it with background. Please see Example 6. <p></p> </li> <li>bordercolor="#FF00FF" <br> Table border color, NC and IE have different effects, please see Example 6. <p></p> </li> <li>bordercolorlight="#00FF00" <br> The color of the light facing part of the table border, please see example 2. 『Only applicable to IE』 <p></p> </li> <li>bordercolordark="#00FFFF" <br> The color of the backlight part of the table border, please see example 2. When using bordercolorlight or bordercolordark, bordercolor will be invalid. 『Only applicable to IE』 <p></p> </li> <li>cols="2" <br> The number of table fields just allows the browser to draw the entire table before downloading the table. </li> <p><TR> Parameter settings (commonly used): <br> For example: <tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight= "#808080" bordercolordark="#FF0000"> </p> <li>align="RIGHT" <br> The position (horizontal) of placing calligraphy and painting in this column. Optional values are: left, center, right . <p></p> </li> <li>valign="MIDDLE" <br> The position (vertical) of the placement of calligraphy and painting in this column. Optional values are: top, middle, bottom. <p></p> </li> <li>bgcolor="#0000FF" <br> For the background color of this column, please see Example 5. <p></p> </li> <li>bordercolor="#FF00FF" <br> For the border color of this column, please see Example 3. 『Only applicable to IE』 <p></p> </li> <li>bordercolorlight="#808080" <br> For the color of the light-facing part of the border in this column, please see Example 3. 『Only applicable to IE』 <p></p> </li> <li>bordercolordark="#FF0000" <br> The color of the backlight part of the border of this column, please see example 3. When using bordercolorlight or bordercolordark, bordercolor will be invalid. 『Only applicable to IE』 </li> <p><TD> Parameter settings (commonly used): <br> For example: <td width="48%" height="400" colspan="5" rowspan= "4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif"> </p> <li>width="48%" <br> This cell width accepts absolute values (such as 80) and relative values (such as 80%). <p></p> </li> <li>height="400" <br> The height of the cell. <p></p> </li> <li>colspan="5" <br> The number of columns that this cell opens to the right. Please see Example 6 <p></p> </li> <li>rowspan="4" <br> The number of columns that this cell opens downwards. Please see Example 6 <p></p> </li> <li>align="RIGHT" <br> The position (horizontal) of the placement of calligraphy and painting in this cell. The optional values are: left, center, right . <p></p> </li> <li>valign="BOTTOM" <br> The position (vertical) of the placement of calligraphy and painting in this cell. Optional values are: top, middle, bottom. <p></p> </li> <li>bgcolor="#FF00FF" <br> For the background color of this cell, please see Example 4. <p></p> </li> <li>bordercolor="#808080" <br> For the cell border color, please see Example 3. 『Only applicable to IE』 <p></p> </li> <li>bordercolorlight="#FF0000" <br> The color of the light-facing part of the cell border, please see Example 3. 『Only applicable to IE』 <p></p> </li> <li>bordercolordark="#00FF00" <br> The color of the backlight part of the cell border. Please see Example 3. When using bordercolorlight or bordercolordark, bordercolor will Invalid. 『Only applicable to IE』 <p></p> </li> <li>background="myweb.gif" <br> This grid paper can be used with either bgcolor. </li> <br> <p class="sycode"> 4), hyperlink </p> <p class="sycode"> <br> </p> <p class="sycode"> <A> is called a link tag, consisting of <A> and </A> ; The surrounding text, pictures, etc. can become a link. General parameter settings for </p>
<p><A>: </p> <p>For example <a href="index.html" name="hello" target="_top"> </p>
<li>href="index.html" <br> This parameter cannot be used together with another parameter name. Use this parameter to create a clickable link. </li> <li>
<strong>When used as an external link: </strong> href is set to the file name to which the link is to be linked. If the file is not in the same directory as the html file, please add the appropriate The path can be relative or absolute. </li> <li>
<strong> When used as an internal link: </strong> href is set to the reference point in the same document or the reference point of the specified document to which the link is to be connected, and do not surround any calligraphy and painting and only add Just add the closing tag </a>, such as <a href="#there"></a> , <a href="index.html#there"></a> and < ;a href="http://www.school.net.hk/~chris55/index.html#there"></a> where there is the reference point, and the symbol # is added in front of it. Identification, the reference point is pre-buried in the file by the next parameter name. </li> <p></p> <li>name="hello" <br> This parameter is used to bury the reference point for the file. It will be linked and will not be displayed. So to create an internal link, use the <A> link tag twice. One uses the parameter name to bury a reference point in the file in advance, and the other uses the parameter href to connect to this reference point. <p></p> </li> <li>target="_top" <br> Set the window to be displayed when the link is clicked. Optional values are: _blank, _parent, _self, _top, frame window name. <p></p> </li> <li>target="frame name" <br> This only applies to the frame. If set, the link result will be displayed in the frame window of the "frame name". The frame window name is pre-named by the frame tag. </li> <li>target="_blank" or target="new" <br> Open the linked screen content in a new browsing window. </li> <li>target="_parent" <br> Treat the linked screen content as the previous screen of the document. </li> <li>target="_self" <br> Display the linked screen content in the current window. (Default) </li> <li>target="_top" <br> Display the content of the screen linked in the frame in a window without a frame. (That is, the frame is removed) </li> 5), form tag <p class="sycode"> <br> </p> <p class="sycode"> <FORM> is called a form tag, which is used to declare that this is a form mode and belongs to a container tag , indicating that other form tags need to be surrounded by it to be effective, <INPUT> is one of them, used to set various methods of inputting data. It is an empty tag. </p>
<p><FORM> Parameter settings (commonly used): <br> For example: <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> ; </p> <li>action="http://your.isp.com/cgi-local/example.cgi" <br> The form is usually used with CGI, and the parameter action is used to specify the CGI program position so that the information filled in this form can be correctly transmitted to CGI for processing. If there is no CGI for testing, you can set this parameter to ACTION="mailto:your@email.com" so that the information filled in the form will be sent to this email address (red part). </li> <li>method="POST" <br> The method of transmitting data to CGI. The optional values are POST and GET. You just need to remember that POST allows the transmission of large amounts of data, but GET only accepts data less than 1K, so if you have seen other people's form source code, you will find that the application form uses POST and the search engine uses GET . </li> <p><INPUT> Parameter settings (commonly used): <br> Because its first parameter type has many choices, and different choices represent different input methods, and other parameters also accordingly Different input methods and other parameter settings will be introduced separately below. </p> <li>type="Text" <br> Optional values are Text, Radio, Checkbox, Password, Submit/Reset, Image, File, Hidden, Button. </li> <br> <p class="sycode"> <br> </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/1796780570.html" title="R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796774171.html" title="Hello Kitty Island Adventure: How To Get Giant Seeds" class="phpgenera_Details_mainR4_bottom_title">Hello Kitty Island Adventure: How To Get Giant Seeds</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796775427.html" title="How Long Does It Take To Beat Split Fiction?" class="phpgenera_Details_mainR4_bottom_title">How Long Does It Take To Beat Split Fiction?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796775336.html" title="R.E.P.O. Save File Location: Where Is It & How to Protect It?" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Save File Location: Where Is It & How to Protect It?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796774150.html" title="Two Point Museum: All Exhibits And Where To Find Them" class="phpgenera_Details_mainR4_bottom_title">Two Point Museum: All Exhibits And Where To Find Them</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months 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/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title">
<h3>AI Hentai Generator</h3>
</a>
<p>Generate AI Hentai for free.</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/1796780570.html" title="R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796774171.html" title="Hello Kitty Island Adventure: How To Get Giant Seeds" class="phpgenera_Details_mainR4_bottom_title">Hello Kitty Island Adventure: How To Get Giant Seeds</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796775427.html" title="How Long Does It Take To Beat Split Fiction?" class="phpgenera_Details_mainR4_bottom_title">How Long Does It Take To Beat Split Fiction?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796775336.html" title="R.E.P.O. Save File Location: Where Is It & How to Protect It?" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Save File Location: Where Is It & How to Protect It?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796774150.html" title="Two Point Museum: All Exhibits And Where To Find Them" class="phpgenera_Details_mainR4_bottom_title">Two Point Museum: All Exhibits And Where To Find Them</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months 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/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>7381</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/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>1628</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>1357</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>1267</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>1216</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/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/1796782758.html" title="What is the purpose of the <datalist> element?" 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/202503/21/2025032112332857446.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is the purpose of the <datalist> element?" />
</a>
<a href="https://www.php.cn/faq/1796782758.html" title="What is the purpose of the <datalist> element?" class="phphistorical_Version2_mids_title">What is the purpose of the <datalist> element?</a>
<span class="Articlelist_txts_time">Mar 21, 2025 pm 12:33 PM</span>
<p class="Articlelist_txts_p">The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796780224.html" title="How do I use HTML5 form validation attributes to validate user input?" 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/202503/17/2025031712273147081.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I use HTML5 form validation attributes to validate user input?" />
</a>
<a href="https://www.php.cn/faq/1796780224.html" title="How do I use HTML5 form validation attributes to validate user input?" class="phphistorical_Version2_mids_title">How do I use HTML5 form validation attributes to validate user input?</a>
<span class="Articlelist_txts_time">Mar 17, 2025 pm 12:27 PM</span>
<p class="Articlelist_txts_p">The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796782318.html" title="What is the purpose of the <iframe> tag? What are the security considerations when using it?" 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/202503/20/2025032018054766795.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is the purpose of the <iframe> tag? What are the security considerations when using it?" />
</a>
<a href="https://www.php.cn/faq/1796782318.html" title="What is the purpose of the <iframe> tag? What are the security considerations when using it?" class="phphistorical_Version2_mids_title">What is the purpose of the <iframe> tag? What are the security considerations when using it?</a>
<span class="Articlelist_txts_time">Mar 20, 2025 pm 06:05 PM</span>
<p class="Articlelist_txts_p">The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796782759.html" title="What is the purpose of the <progress> element?" 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/202503/21/2025032112342868456.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is the purpose of the <progress> element?" />
</a>
<a href="https://www.php.cn/faq/1796782759.html" title="What is the purpose of the <progress> element?" class="phphistorical_Version2_mids_title">What is the purpose of the <progress> element?</a>
<span class="Articlelist_txts_time">Mar 21, 2025 pm 12:34 PM</span>
<p class="Articlelist_txts_p">The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796782760.html" title="What is the purpose of the <meter> element?" 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/202503/21/2025032112352661331.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is the purpose of the <meter> element?" />
</a>
<a href="https://www.php.cn/faq/1796782760.html" title="What is the purpose of the <meter> element?" class="phphistorical_Version2_mids_title">What is the purpose of the <meter> element?</a>
<span class="Articlelist_txts_time">Mar 21, 2025 pm 12:35 PM</span>
<p class="Articlelist_txts_p">The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796780220.html" title="What are the best practices for cross-browser compatibility in HTML5?" 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/202503/17/2025031712203454598.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What are the best practices for cross-browser compatibility in HTML5?" />
</a>
<a href="https://www.php.cn/faq/1796780220.html" title="What are the best practices for cross-browser compatibility in HTML5?" class="phphistorical_Version2_mids_title">What are the best practices for cross-browser compatibility in HTML5?</a>
<span class="Articlelist_txts_time">Mar 17, 2025 pm 12:20 PM</span>
<p class="Articlelist_txts_p">Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796782305.html" title="What is the viewport meta tag? Why is it important for responsive 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/202503/20/2025032017560614263.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is the viewport meta tag? Why is it important for responsive design?" />
</a>
<a href="https://www.php.cn/faq/1796782305.html" title="What is the viewport meta tag? Why is it important for responsive design?" class="phphistorical_Version2_mids_title">What is the viewport meta tag? Why is it important for responsive design?</a>
<span class="Articlelist_txts_time">Mar 20, 2025 pm 05:56 PM</span>
<p class="Articlelist_txts_p">The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796778165.html" title="How do I use the HTML5 <time> element to represent dates and times semantically?" 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/202503/12/2025031216051550326.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I use the HTML5 <time> element to represent dates and times semantically?" />
</a>
<a href="https://www.php.cn/faq/1796778165.html" title="How do I use the HTML5 <time> element to represent dates and times semantically?" class="phphistorical_Version2_mids_title">How do I use the HTML5 <time> element to represent dates and times semantically?</a>
<span class="Articlelist_txts_time">Mar 12, 2025 pm 04:05 PM</span>
<p class="Articlelist_txts_p">This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit</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?1743857766"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '9']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<script>
// top
layui.use(function () {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function (type) {
layer.closeAll("tips");
},
},
});
});
document.addEventListener("DOMContentLoaded", (event) => {
// 定义一个函数来处理滚动链接的点击事件
function setupScrollLink(scrollLinkId, targetElementId) {
const scrollLink = document.getElementById(scrollLinkId);
const targetElement = document.getElementById(targetElementId);
if (scrollLink && targetElement) {
scrollLink.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认链接行为
targetElement.scrollIntoView({
behavior: "smooth"
}); // 平滑滚动到目标元素
});
} else {
console.warn(
`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
);
}
}
// 使用该函数设置多个滚动链接
setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
// 可以继续添加更多的滚动链接设置
});
window.addEventListener("scroll", function () {
var fixedElement = document.getElementById("Article_Details_main1Lmain");
var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
var scrollHeight = document.documentElement.scrollHeight; // 页面总高度
// 计算距离底部的距离
var distanceToBottom = scrollHeight - scrollTop - clientHeight;
// 当距离底部小于或等于300px时，取消固定定位
if (distanceToBottom <= 980) {
fixedElement.classList.remove("Article_Details_main1Lmain");
fixedElement.classList.add("Article_Details_main1Lmain_relative");
} else {
// 否则，保持固定定位
fixedElement.classList.remove("Article_Details_main1Lmain_relative");
fixedElement.classList.add("Article_Details_main1Lmain");
}
});
</script>
</body>
</html> |
