cari
Rumahhujung hadapan webhtml tutorialhtml常用标签及属性

html常用标签及属性

Oct 22, 2019 pm 03:23 PM
htmlharta bendaLabel

html常用标签及属性

HTML中的标签及属性

HTML页面结构

标签 描述
定义文档类型。
定义 HTML 文档。
</td> <td style="border-color: rgb(221, 221, 221);" width="438">定义文档的标题。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="372"><body></td> <td style="border-color: rgb(221, 221, 221);" width="438">定义文档的主体。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="372"><h1> to <h6></td> <td style="border-color: rgb(221, 221, 221);" width="438">定义 HTML 标题。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="372"><p></td> <td style="border-color: rgb(221, 221, 221);" width="438">定义段落。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="372"><br></td> <td style="border-color: rgb(221, 221, 221);" width="438">定义简单的折行。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="372"><hr></td> <td style="border-color: rgb(221, 221, 221);" width="438">定义水平线。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="372"><!--...--></td> <td style="border-color: rgb(221, 221, 221);" width="438">定义注释。</td> </tr> </tbody> </table> <p><strong>表单</strong><br></p> <table width="811"> <thead><tr class="firstRow"> <th style="border-color: rgb(221, 221, 221);" width="254">标签</th> <th style="border-color: rgb(221, 221, 221);" width="556">描述</th> </tr></thead> <tbody> <tr> <td style="border-color: rgb(221, 221, 221);" width="254"><form></td> <td style="border-color: rgb(221, 221, 221);" width="556">定义供用户输入的 HTML 表单。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="254"><input></td> <td style="border-color: rgb(221, 221, 221);" width="556">定义输入控件。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="254"><textarea></td> <td style="border-color: rgb(221, 221, 221);" width="556">定义多行的文本输入控件。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="254"><button></td> <td style="border-color: rgb(221, 221, 221);" width="556">定义按钮。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="254"><select></td> <td style="border-color: rgb(221, 221, 221);" width="556">定义选择列表(下拉列表)。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="254"><optgroup></td> <td style="border-color: rgb(221, 221, 221);" width="556">定义选择列表中相关选项的组合。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="254"><option></td> <td style="border-color: rgb(221, 221, 221);" width="556">定义选择列表中的选项。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="254"><label></td> <td style="border-color: rgb(221, 221, 221);" width="556">定义 input 元素的标注。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="254"><fieldset></td> <td style="border-color: rgb(221, 221, 221);" width="556">定义围绕表单中元素的边框。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="254"><legend></td> <td style="border-color: rgb(221, 221, 221);" width="556">定义 fieldset 元素的标题。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="254"><datalist></td> <td style="border-color: rgb(221, 221, 221);" width="556">定义下拉列表。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="254"><keygen></td> <td style="border-color: rgb(221, 221, 221);" width="556">定义生成密钥。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="254"><output></td> <td style="border-color: rgb(221, 221, 221);" width="556">定义输出的一些类型。</td> </tr> </tbody> </table> <p><strong>框架</strong></p> <table width="811"> <thead><tr class="firstRow"> <th style="border-color: rgb(221, 221, 221);" width="225">标签</th> <th style="border-color: rgb(221, 221, 221);" width="585">描述</th> </tr></thead> <tbody> <tr> <td style="border-color: rgb(221, 221, 221);" width="225"><frame></td> <td style="border-color: rgb(221, 221, 221);" width="585">定义框架集的窗口或框架。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="225"><frameset></td> <td style="border-color: rgb(221, 221, 221);" width="585">定义框架集。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="225"><noframes></td> <td style="border-color: rgb(221, 221, 221);" width="585">定义针对不支持框架的用户的替代内容。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="225"><iframe></td> <td style="border-color: rgb(221, 221, 221);" width="585">定义内联框架。</td> </tr> </tbody> </table> <p><strong>图像</strong></p> <table width="811"> <thead><tr class="firstRow"> <th style="border-color: rgb(221, 221, 221);" width="232">标签</th> <th style="border-color: rgb(221, 221, 221);" width="578">描述</th> </tr></thead> <tbody> <tr> <td style="border-color: rgb(221, 221, 221);" width="232"><img></td> <td style="border-color: rgb(221, 221, 221);" width="578">定义图像。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="232"><map></td> <td style="border-color: rgb(221, 221, 221);" width="578">定义图像映射。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="232"><area></td> <td style="border-color: rgb(221, 221, 221);" width="578">定义图像地图内部的区域。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="232"><canvas></td> <td style="border-color: rgb(221, 221, 221);" width="578">定义图形。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="232"><figcaption></td> <td style="border-color: rgb(221, 221, 221);" width="578">定义 figure 元素的标题。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="232"><figure></td> <td style="border-color: rgb(221, 221, 221);" width="578">定义媒介内容的分组,以及它们的标题。</td> </tr> </tbody> </table> <p><strong>链接</strong></p> <table width="811"> <thead><tr class="firstRow"> <th style="border-color: rgb(221, 221, 221);" width="198">标签</th> <th style="border-color: rgb(221, 221, 221);" width="612">描述</th> </tr></thead> <tbody> <tr> <td style="border-color: rgb(221, 221, 221);" width="198"><a></td> <td style="border-color: rgb(221, 221, 221);" width="612">定义锚。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="198"><link></td> <td style="border-color: rgb(221, 221, 221);" width="612">定义文档与外部资源的关系。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="198"><nav></td> <td style="border-color: rgb(221, 221, 221);" width="612">定义导航链接。</td> </tr> </tbody> </table> <p><strong>列表</strong><br></p> <table width="811"> <thead><tr class="firstRow"> <th style="border-color: rgb(221, 221, 221);" width="208">标签</th> <th style="border-color: rgb(221, 221, 221);" width="602">描述</th> </tr></thead> <tbody> <tr> <td style="border-color: rgb(221, 221, 221);" width="208"><ul></td> <td style="border-color: rgb(221, 221, 221);" width="602">定义无序列表。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="208"><ol></td> <td style="border-color: rgb(221, 221, 221);" width="602">定义有序列表。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="208"><li></td> <td style="border-color: rgb(221, 221, 221);" width="602">定义列表的项目。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="208"><dir></td> <td style="border-color: rgb(221, 221, 221);" width="602">不赞成使用。定义目录列表。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="208"><dl></td> <td style="border-color: rgb(221, 221, 221);" width="602">定义定义列表。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="208"><dt></td> <td style="border-color: rgb(221, 221, 221);" width="602">定义定义列表中的项目。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="208"><dd></td> <td style="border-color: rgb(221, 221, 221);" width="602">定义定义列表中项目的描述。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="208"><menu></td> <td style="border-color: rgb(221, 221, 221);" width="602">定义命令的菜单/列表。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="208"><menuitem></td> <td style="border-color: rgb(221, 221, 221);" width="602">定义用户可以从弹出菜单调用的命令/菜单项目。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="208"><command></td> <td style="border-color: rgb(221, 221, 221);" width="602">定义命令按钮。</td> </tr> </tbody> </table> <p><strong>表格</strong></p> <table width="811"> <thead><tr class="firstRow"> <th style="border-color: rgb(221, 221, 221);" width="239">标签</th> <th style="border-color: rgb(221, 221, 221);" width="571">描述</th> </tr></thead> <tbody> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><table></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义表格</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><caption></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义表格标题。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><th></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义表格中的表头单元格。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><tr></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义表格中的行。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><td></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义表格中的单元。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><thead></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义表格中的表头内容。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><tbody></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义表格中的主体内容。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><tfoot></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义表格中的表注内容(脚注)。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><col></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义表格中一个或多个列的属性值。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><colgroup></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义表格中供格式化的列组。</td> </tr> </tbody> </table> <p><strong>样式/节</strong></p> <table width="811"> <thead><tr class="firstRow"> <th style="border-color: rgb(221, 221, 221);" width="239">标签</th> <th style="border-color: rgb(221, 221, 221);" width="571">描述</th> </tr></thead> <tbody> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><style></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义文档的样式信息。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><div></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义文档中的节。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><span></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义文档中的节。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><header></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义 section 或 page 的页眉。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><footer></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义 section 或 page 的页脚。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><section></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义 section。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><article></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义文章。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><aside></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义页面内容之外的内容。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><details></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义元素的细节。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><dialog></td> <td style="border-color: rgb(221, 221, 221);" width="571">定义对话框或窗口。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="239"><summary></td> <td style="border-color: rgb(221, 221, 221);" width="571">为 <details> 元素定义可见的标题。</td> </tr> </tbody> </table> <p><strong>员信息</strong></p> <table width="811"> <thead><tr class="firstRow"> <th style="border-color: rgb(221, 221, 221);" width="173">标签</th> <th style="border-color: rgb(221, 221, 221);" width="637">描述</th> </tr></thead> <tbody> <tr> <td style="border-color: rgb(221, 221, 221);" width="173"><head></td> <td style="border-color: rgb(221, 221, 221);" width="637">定义关于文档的信息。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="173"><meta></td> <td style="border-color: rgb(221, 221, 221);" width="637">定义关于 HTML 文档的元信息。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="173"><base></td> <td style="border-color: rgb(221, 221, 221);" width="637">定义页面中所有链接的默认地址或默认目标。</td> </tr> <tr> <td style="border-color: rgb(221, 221, 221);" width="173"><basefont></td> <td style="border-color: rgb(221, 221, 221);" width="637">不赞成使用。定义页面中文本的默认字体、颜色或尺寸。</td> </tr> </tbody> </table> <div><div id="cnblogs_post_body"> <strong>属性</strong><table width="778" style="width: 811px;"> <thead><tr class="header firstRow"> <th style="border-color: rgb(221, 221, 221);" width="105">属性名</th> <th style="border-color: rgb(221, 221, 221);" width="107">英文</th> <th style="border-color: rgb(221, 221, 221);" width="218">英文含义</th> <th style="border-color: rgb(221, 221, 221);" width="193">取值</th> <th style="border-color: rgb(221, 221, 221);" width="169">应用场景</th> </tr></thead> <tbody> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">src</td> <td style="border-color: rgb(221, 221, 221);" width="107">SouRCe</td> <td style="border-color: rgb(221, 221, 221);" width="218">资源位置</td> <td style="border-color: rgb(221, 221, 221);" width="193">资源的路径</td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">border</td> <td style="border-color: rgb(221, 221, 221);" width="107">border</td> <td style="border-color: rgb(221, 221, 221);" width="218">边框</td> <td style="border-color: rgb(221, 221, 221);" width="193">数字(像素)</td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">size</td> <td style="border-color: rgb(221, 221, 221);" width="107">size</td> <td style="border-color: rgb(221, 221, 221);" width="218">尺寸</td> <td style="border-color: rgb(221, 221, 221);" width="193">数字(像素)</td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">width</td> <td style="border-color: rgb(221, 221, 221);" width="107">width</td> <td style="border-color: rgb(221, 221, 221);" width="218">宽度</td> <td style="border-color: rgb(221, 221, 221);" width="193">数字(像素)</td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">height</td> <td style="border-color: rgb(221, 221, 221);" width="107">height</td> <td style="border-color: rgb(221, 221, 221);" width="218">高度</td> <td style="border-color: rgb(221, 221, 221);" width="193">数字(像素)</td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">bgcolor</td> <td style="border-color: rgb(221, 221, 221);" width="107">BackGround COLOR</td> <td style="border-color: rgb(221, 221, 221);" width="218">背景颜色</td> <td style="border-color: rgb(221, 221, 221);" width="193">颜色值:rea或#ffffff</td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">background</td> <td style="border-color: rgb(221, 221, 221);" width="107">background</td> <td style="border-color: rgb(221, 221, 221);" width="218">背景图片</td> <td style="border-color: rgb(221, 221, 221);" width="193">图片路径</td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">list-style</td> <td style="border-color: rgb(221, 221, 221);" width="107">list-style</td> <td style="border-color: rgb(221, 221, 221);" width="218">设置列表的所有属性</td> <td style="border-color: rgb(221, 221, 221);" width="193"><br></td> <td style="border-color: rgb(221, 221, 221);" width="169">列表</td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">list-style-image</td> <td style="border-color: rgb(221, 221, 221);" width="107">list-style-image</td> <td style="border-color: rgb(221, 221, 221);" width="218">将图像设置为列表项标记</td> <td style="border-color: rgb(221, 221, 221);" width="193">None<br>url</td> <td style="border-color: rgb(221, 221, 221);" width="169">列表</td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">list-style-type</td> <td style="border-color: rgb(221, 221, 221);" width="107">list-style-type</td> <td style="border-color: rgb(221, 221, 221);" width="218">设置列表项标记的类型</td> <td style="border-color: rgb(221, 221, 221);" width="193">Disc(实心圆)<br>Cirle(空心圆)<br>Square(实心方块)</td> <td style="border-color: rgb(221, 221, 221);" width="169">列表</td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">line-height</td> <td style="border-color: rgb(221, 221, 221);" width="107">line-height</td> <td style="border-color: rgb(221, 221, 221);" width="218">行高(行间距)</td> <td style="border-color: rgb(221, 221, 221);" width="193">数字(像素)</td> <td style="border-color: rgb(221, 221, 221);" width="169">布局多行文本</td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">text-align</td> <td style="border-color: rgb(221, 221, 221);" width="107">text-align</td> <td style="border-color: rgb(221, 221, 221);" width="218">对齐方式</td> <td style="border-color: rgb(221, 221, 221);" width="193">Left、right、center</td> <td style="border-color: rgb(221, 221, 221);" width="169">各种元素对齐</td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">letter-spacing</td> <td style="border-color: rgb(221, 221, 221);" width="107">letter-spacing</td> <td style="border-color: rgb(221, 221, 221);" width="218">字符间距</td> <td style="border-color: rgb(221, 221, 221);" width="193">数字(像素)</td> <td style="border-color: rgb(221, 221, 221);" width="169">加大字符间间隔</td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">text-decoration</td> <td style="border-color: rgb(221, 221, 221);" width="107">text-decoration</td> <td style="border-color: rgb(221, 221, 221);" width="218">文本修饰</td> <td style="border-color: rgb(221, 221, 221);" width="193">Underline、none</td> <td style="border-color: rgb(221, 221, 221);" width="169">加下划线、中划线等</td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">margin-top<br>(right、bottom、left)</td> <td style="border-color: rgb(221, 221, 221);" width="107"><br></td> <td style="border-color: rgb(221, 221, 221);" width="218">外边距</td> <td style="border-color: rgb(221, 221, 221);" width="193">数字(像素)</td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">padding-top<br>(right、bottom、left)</td> <td style="border-color: rgb(221, 221, 221);" width="107"><br></td> <td style="border-color: rgb(221, 221, 221);" width="218">内边距</td> <td style="border-color: rgb(221, 221, 221);" width="193">数字(像素)</td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">display</td> <td style="border-color: rgb(221, 221, 221);" width="107">display</td> <td style="border-color: rgb(221, 221, 221);" width="218">改变块级元素与行内元素的默认显示方式</td> <td style="border-color: rgb(221, 221, 221);" width="193">block(行变块)<br>inline(块变行)<br>none(该元素不显示在网页中)</td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">position</td> <td style="border-color: rgb(221, 221, 221);" width="107">position</td> <td style="border-color: rgb(221, 221, 221);" width="218">定位</td> <td style="border-color: rgb(221, 221, 221);" width="193">static(静态定位)<br>relative(相对定位)<br>absolute(绝对定位)<br>fixed(固定定位)</td> <td style="border-color: rgb(221, 221, 221);" width="169">用于定位</td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">float</td> <td style="border-color: rgb(221, 221, 221);" width="107">float</td> <td style="border-color: rgb(221, 221, 221);" width="218">浮动</td> <td style="border-color: rgb(221, 221, 221);" width="193">None、left、right</td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">clear</td> <td style="border-color: rgb(221, 221, 221);" width="107">clear</td> <td style="border-color: rgb(221, 221, 221);" width="218">处理浮动塌陷</td> <td style="border-color: rgb(221, 221, 221);" width="193">left(清除左边浮动)<br>right(清除右边浮动)<br>both(清除两边浮动)<br>none(不清除浮动)</td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">type</td> <td style="border-color: rgb(221, 221, 221);" width="107">type</td> <td style="border-color: rgb(221, 221, 221);" width="218">列表类型</td> <td style="border-color: rgb(221, 221, 221);" width="193">Disc(实心圆)<br>Cirle(空心圆)<br>Square(实心方块)</td> <td style="border-color: rgb(221, 221, 221);" width="169">用于列表</td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">align</td> <td style="border-color: rgb(221, 221, 221);" width="107">align</td> <td style="border-color: rgb(221, 221, 221);" width="218">对齐</td> <td style="border-color: rgb(221, 221, 221);" width="193">Left、right、center<br>top、middle、bottom</td> <td style="border-color: rgb(221, 221, 221);" width="169">段落内容水平对齐文字与图片垂直对齐</td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">type</td> <td style="border-color: rgb(221, 221, 221);" width="107">type</td> <td style="border-color: rgb(221, 221, 221);" width="218">表单元素类型</td> <td style="border-color: rgb(221, 221, 221);" width="193">text(文本)<br>checkbox(复选)<br>radio(单选)<br>password(密码)<br>file(文件)<br>submit(提交)<br>reset(重置)<br>button(按钮)<br>image(图片按钮)<br>hidden(隐藏)<br> </td> <td style="border-color: rgb(221, 221, 221);" width="169">表单元素</td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">method</td> <td style="border-color: rgb(221, 221, 221);" width="107">method</td> <td style="border-color: rgb(221, 221, 221);" width="218">表单数据的提交方式</td> <td style="border-color: rgb(221, 221, 221);" width="193">get<br>post</td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">alt</td> <td style="border-color: rgb(221, 221, 221);" width="107">alter</td> <td style="border-color: rgb(221, 221, 221);" width="218">改变、替换(图片不显示时提示信息)</td> <td style="border-color: rgb(221, 221, 221);" width="193"><br></td> <td style="border-color: rgb(221, 221, 221);" width="169">图片</td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">cellpadding</td> <td style="border-color: rgb(221, 221, 221);" width="107">cell padding</td> <td style="border-color: rgb(221, 221, 221);" width="218">单元格内边距</td> <td style="border-color: rgb(221, 221, 221);" width="193">数字</td> <td style="border-color: rgb(221, 221, 221);" width="169">表格</td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">cellspacing</td> <td style="border-color: rgb(221, 221, 221);" width="107">cell spacing</td> <td style="border-color: rgb(221, 221, 221);" width="218">单元格之间距离</td> <td style="border-color: rgb(221, 221, 221);" width="193">数字</td> <td style="border-color: rgb(221, 221, 221);" width="169">表格</td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">href</td> <td style="border-color: rgb(221, 221, 221);" width="107">Hypertext REFerence</td> <td style="border-color: rgb(221, 221, 221);" width="218">超文本引用(跳转到文件位置)</td> <td style="border-color: rgb(221, 221, 221);" width="193"><br></td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">rel</td> <td style="border-color: rgb(221, 221, 221);" width="107">RELationship</td> <td style="border-color: rgb(221, 221, 221);" width="218">关系(用于定义链接的文件和HTML文档之间的关系)</td> <td style="border-color: rgb(221, 221, 221);" width="193">StyleSheet样式表</td> <td style="border-color: rgb(221, 221, 221);" width="169">link链接一个文件时</td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">target</td> <td style="border-color: rgb(221, 221, 221);" width="107">target</td> <td style="border-color: rgb(221, 221, 221);" width="218">目标(网页打开的位置)</td> <td style="border-color: rgb(221, 221, 221);" width="193">_blank(新窗口打开)<br>_self(自身窗口打开)<br>_top(以整个浏览器作业作为窗口显示新页面)<br>_parent(在父窗口中打开新的页面)</td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">colspan</td> <td style="border-color: rgb(221, 221, 221);" width="107">COLumn span</td> <td style="border-color: rgb(221, 221, 221);" width="218">单元格跨列</td> <td style="border-color: rgb(221, 221, 221);" width="193">数字(跨的列数)</td> <td style="border-color: rgb(221, 221, 221);" width="169">表格</td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">rowspan</td> <td style="border-color: rgb(221, 221, 221);" width="107">row span</td> <td style="border-color: rgb(221, 221, 221);" width="218">单元格跨行</td> <td style="border-color: rgb(221, 221, 221);" width="193">数字(跨的行数)</td> <td style="border-color: rgb(221, 221, 221);" width="169">表格</td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">readonly</td> <td style="border-color: rgb(221, 221, 221);" width="107">read only</td> <td style="border-color: rgb(221, 221, 221);" width="218">只读</td> <td style="border-color: rgb(221, 221, 221);" width="193"><br></td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">value</td> <td style="border-color: rgb(221, 221, 221);" width="107">value</td> <td style="border-color: rgb(221, 221, 221);" width="218">输入框的初始值</td> <td style="border-color: rgb(221, 221, 221);" width="193"><br></td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">maxlength</td> <td style="border-color: rgb(221, 221, 221);" width="107">max length</td> <td style="border-color: rgb(221, 221, 221);" width="218">最大长度</td> <td style="border-color: rgb(221, 221, 221);" width="193"><br></td> <td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr> <tr class="even"> <td style="border-color: rgb(221, 221, 221);" width="105">scrolldelay</td> <td style="border-color: rgb(221, 221, 221);" width="107">scroll delay</td> <td style="border-color: rgb(221, 221, 221);" width="218">滚动延时</td> <td style="border-color: rgb(221, 221, 221);" width="193"><br></td> <td style="border-color: rgb(221, 221, 221);" width="169">< m arquee></td> </tr> <tr class="odd"> <td style="border-color: rgb(221, 221, 221);" width="105">direction</td> <td style="border-color: rgb(221, 221, 221);" width="107">direction</td> <td style="border-color: rgb(221, 221, 221);" width="218">方向(滚动方向)</td> <td style="border-color: rgb(221, 221, 221);" width="193"><br></td> <td style="border-color: rgb(221, 221, 221);" width="169">< m arquee</td> </tr> </tbody> </table> <h2 id="选择器"> <br><br> </h2> </div></div><p>Atas ialah kandungan terperinci html常用标签及属性. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="wzconShengming_sp"><div class="bzsmdiv_sp">Kenyataan</div><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="phpgenera_Details_mainL4"><div class="phpmain1_2_top"><a href="javascript:void(0);" class="phpmain1_2_top_title">Artikel Berkaitan<img class="lazy" data-src="/static/imghwm/index2_title2.png" src="/static/imghw/default1.png" alt="" /></a></div><div class="phpgenera_Details_mainL4_info"><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796801293.html" title="Apakah atribut Boolean dalam HTML? Beri beberapa contoh." class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174551046248816.jpg?x-oss-process=image/resize,p_40" alt="Apakah atribut Boolean dalam HTML? Beri beberapa contoh." src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796801293.html" title="Apakah atribut Boolean dalam HTML? Beri beberapa contoh." class="phphistorical_Version2_mids_title">Apakah atribut Boolean dalam HTML? Beri beberapa contoh.</a><span class="Articlelist_txts_time">Apr 25, 2025 am 12:01 AM</span><p class="Articlelist_txts_p">Atribut Boolean adalah atribut khas dalam HTML yang diaktifkan tanpa nilai. 1. Atribut Boolean mengawal tingkah laku elemen dengan sama ada ia wujud atau tidak, seperti dilumpuhkan melumpuhkan kotak input. 2. Prinsip kerja mereka adalah untuk mengubah tingkah laku elemen mengikut kewujudan atribut apabila penyemak imbas. 3. Penggunaan asas adalah untuk menambah atribut secara langsung, dan penggunaan lanjutan dapat dikawal secara dinamik melalui JavaScript. 4. Kesalahan umum adalah tersilap berfikir bahawa nilai -nilai perlu ditetapkan, dan kaedah penulisan yang betul harus ringkas. 5. Amalan terbaik adalah untuk memastikan kod ringkas dan menggunakan sifat Boolean dengan munasabah untuk mengoptimumkan prestasi laman web dan pengalaman pengguna.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796800895.html" title="Bagaimana anda boleh mengesahkan kod HTML anda?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174542425237814.jpg?x-oss-process=image/resize,p_40" alt="Bagaimana anda boleh mengesahkan kod HTML anda?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796800895.html" title="Bagaimana anda boleh mengesahkan kod HTML anda?" class="phphistorical_Version2_mids_title">Bagaimana anda boleh mengesahkan kod HTML anda?</a><span class="Articlelist_txts_time">Apr 24, 2025 am 12:04 AM</span><p class="Articlelist_txts_p">Kod HTML boleh menjadi bersih dengan pengesahan dalam talian, alat bersepadu dan proses automatik. 1) Gunakan W3CMarkupValidationService untuk mengesahkan kod HTML dalam talian. 2) Pasang dan konfigurasikan sambungan HTMLHINT dalam visualStudiocode untuk pengesahan masa nyata. 3) Gunakan HTMLTidy untuk mengesahkan dan membersihkan fail HTML secara automatik dalam proses pembinaan.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796800590.html" title="HTML vs CSS dan JavaScript: Membandingkan Teknologi Web" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174533794691849.jpg?x-oss-process=image/resize,p_40" alt="HTML vs CSS dan JavaScript: Membandingkan Teknologi Web" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796800590.html" title="HTML vs CSS dan JavaScript: Membandingkan Teknologi Web" class="phphistorical_Version2_mids_title">HTML vs CSS dan JavaScript: Membandingkan Teknologi Web</a><span class="Articlelist_txts_time">Apr 23, 2025 am 12:05 AM</span><p class="Articlelist_txts_p">HTML, CSS dan JavaScript adalah teknologi teras untuk membina laman web moden: 1. HTML mentakrifkan struktur laman web, 2. CSS bertanggungjawab untuk kemunculan laman web, 3.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796800099.html" title="Html sebagai bahasa markup: fungsinya dan tujuannya" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174525137146935.jpg?x-oss-process=image/resize,p_40" alt="Html sebagai bahasa markup: fungsinya dan tujuannya" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796800099.html" title="Html sebagai bahasa markup: fungsinya dan tujuannya" class="phphistorical_Version2_mids_title">Html sebagai bahasa markup: fungsinya dan tujuannya</a><span class="Articlelist_txts_time">Apr 22, 2025 am 12:02 AM</span><p class="Articlelist_txts_p">Fungsi HTML adalah untuk menentukan struktur dan kandungan laman web, dan tujuannya adalah untuk menyediakan cara yang standard untuk memaparkan maklumat. 1) HTML menganjurkan pelbagai bahagian laman web melalui tag dan atribut, seperti tajuk dan perenggan. 2) Ia menyokong pemisahan kandungan dan prestasi dan meningkatkan kecekapan penyelenggaraan. 3) HTML adalah diperpanjang, membolehkan tag tersuai untuk meningkatkan SEO.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796798320.html" title="Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan Web" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174499214213783.jpg?x-oss-process=image/resize,p_40" alt="Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan Web" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796798320.html" title="Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan Web" class="phphistorical_Version2_mids_title">Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan Web</a><span class="Articlelist_txts_time">Apr 19, 2025 am 12:02 AM</span><p class="Articlelist_txts_p">Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796797816.html" title="HTML: Struktur, CSS: Gaya, JavaScript: Tingkah Laku" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174490615241003.jpg?x-oss-process=image/resize,p_40" alt="HTML: Struktur, CSS: Gaya, JavaScript: Tingkah Laku" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796797816.html" title="HTML: Struktur, CSS: Gaya, JavaScript: Tingkah Laku" class="phphistorical_Version2_mids_title">HTML: Struktur, CSS: Gaya, JavaScript: Tingkah Laku</a><span class="Articlelist_txts_time">Apr 18, 2025 am 12:09 AM</span><p class="Articlelist_txts_p">Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796797300.html" title="Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk Web" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174481993285664.jpg?x-oss-process=image/resize,p_40" alt="Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk Web" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796797300.html" title="Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk Web" class="phphistorical_Version2_mids_title">Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk Web</a><span class="Articlelist_txts_time">Apr 17, 2025 am 12:12 AM</span><p class="Articlelist_txts_p">Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ms/faq/1796796827.html" title="HTML vs CSS vs JavaScript: Gambaran Keseluruhan Perbandingan" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174473305338023.jpg?x-oss-process=image/resize,p_40" alt="HTML vs CSS vs JavaScript: Gambaran Keseluruhan Perbandingan" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ms/faq/1796796827.html" title="HTML vs CSS vs JavaScript: Gambaran Keseluruhan Perbandingan" class="phphistorical_Version2_mids_title">HTML vs CSS vs JavaScript: Gambaran Keseluruhan Perbandingan</a><span class="Articlelist_txts_time">Apr 16, 2025 am 12:04 AM</span><p class="Articlelist_txts_p">Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.</p></div></div><a href="https://m.php.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton"><span>See all articles</span><img class="lazy" data-src="/static/imghwm/down_right.png" src="/static/imghw/default1.png" alt="" /></a></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>Alat AI Hot</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress"class="phpmain_tab2_mids_title"><h3>Undresser.AI Undress</h3></a><p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover"class="phpmain_tab2_mids_title"><h3>AI Clothes Remover</h3></a><p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ms/ai/undress-ai-tool" title="Undress AI Tool"class="phpmain_tab2_mids_title"><h3>Undress AI Tool</h3></a><p>Gambar buka pakaian secara percuma</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ms/ai/clothoffio" title="Clothoff.io"class="phpmain_tab2_mids_title"><h3>Clothoff.io</h3></a><p>Penyingkiran pakaian AI</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ms/ai/video-swap" title="Video Face Swap"class="phpmain_tab2_mids_title"><h3>Video Face Swap</h3></a><p>Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ms/ai">Tunjukkan Lagi</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/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>Artikel Panas</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/1796785841.html" title="Assassin's Creed Shadows: Penyelesaian Riddle Seashell" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Penyelesaian Riddle Seashell</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 minggu yang lalu</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/1796789525.html" title="Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini" class="phpgenera_Details_mainR4_bottom_title">Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 minggu yang lalu</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/1796785857.html" title="Di mana untuk mencari kad kunci kawalan kren di atomfall" class="phpgenera_Details_mainR4_bottom_title">Di mana untuk mencari kad kunci kawalan kren di atomfall</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 minggu yang lalu</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/1796784440.html" title="<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran" class="phpgenera_Details_mainR4_bottom_title"><🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 minggu yang lalu</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/1796784000.html" title="Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua" class="phpgenera_Details_mainR4_bottom_title">Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>1 bulan yang lalu</span><span>ByDDD</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ms/article.html">Tunjukkan Lagi</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/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>Alat panas</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/1579" title="SecLists" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/008/169442209227215.jpg" src="/static/imghw/default1.png" alt="SecLists" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/1579" title="SecLists" class="phpmain_tab2_mids_title"><h3>SecLists</h3></a><p>SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/1471" title="SublimeText3 Linux versi baharu" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/5aab420a5fb42187.jpg" src="/static/imghw/default1.png" alt="SublimeText3 Linux versi baharu" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/1471" title="SublimeText3 Linux versi baharu" class="phpmain_tab2_mids_title"><h3>SublimeText3 Linux versi baharu</h3></a><p>SublimeText3 Linux versi terkini</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/1575" title="DVWA" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/005/169233952150073.png" src="/static/imghw/default1.png" alt="DVWA" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/1575" title="DVWA" class="phpmain_tab2_mids_title"><h3>DVWA</h3></a><p>Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/502" title="ZendStudio 13.5.1 Mac" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d3631514435840.png" src="/static/imghw/default1.png" alt="ZendStudio 13.5.1 Mac" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/502" title="ZendStudio 13.5.1 Mac" class="phpmain_tab2_mids_title"><h3>ZendStudio 13.5.1 Mac</h3></a><p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/1574" title="Pelayar Peperiksaan Selamat" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/017/169233952169011.png" src="/static/imghw/default1.png" alt="Pelayar Peperiksaan Selamat" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/1574" title="Pelayar Peperiksaan Selamat" class="phpmain_tab2_mids_title"><h3>Pelayar Peperiksaan Selamat</h3></a><p>Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ms/ai">Tunjukkan Lagi</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/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>Topik panas</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>7694</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>15</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/java-tutorial" title="Tutorial Java" class="phpgenera_Details_mainR4_bottom_title">Tutorial Java</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1640</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>14</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1393</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>52</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/laravel-tutori" title="Tutorial Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutorial Laravel</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1287</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>25</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/php-tutorial" title="Tutorial PHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial PHP</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1229</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>29</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ms/faq/zt">Tunjukkan Lagi</a></div></div></div></div></main><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></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' 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> 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> jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script><script>// 通用函数,用于显示或隐藏元素 function toggleElementsDisplay(className, show) { const elements = document.getElementsByClassName(className); for (let i = 0; i < elements.length; i++) { elements[i].style.display = show ? "block" : "none"; } } // 页面加载完成后执行的主函数 document.addEventListener("DOMContentLoaded", () => { // 1. 绑定菜单按钮事件 const bindMenuEvents = () => { const toggleDisplay = (className, show, eventId) => { const element = document.getElementById(eventId); if (element) { element.addEventListener("click", (event) => { event.preventDefault(); toggleElementsDisplay(className, show); }); } }; toggleDisplay("m_editormain12main", true, "fixed_tab_img"); toggleDisplay("m_editormain12main", false, "fixed_tab_topi"); toggleDisplay("m_editormain12main", false, "fixed_tab_close"); toggleDisplay("m_menu", true, "lan1sp"); toggleDisplay("m_menu", false, "m_editormain12main_topi_sp"); toggleDisplay("m_menu_lang", true, "lan1"); toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan"); }; // 2. 绑定滚动链接事件 const bindScrollLinks = () => { const titleList = document.getElementById("fixed_tab_titlelist"); const menuMain = document.getElementsByClassName("m_editormain12main")[0]; const links = document.querySelectorAll('.fixed_tab_a'); links.forEach(linkElement => { if (linkElement) { linkElement.addEventListener("click", async (e) => { e.preventDefault(); e.stopPropagation(); // 先隐藏菜单 if (menuMain) menuMain.style.display = "none"; if (titleList) titleList.style.display = "none"; // 获取目标元素的 ID const targetId = linkElement.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); // 等待 DOM 更新 await new Promise(resolve => requestAnimationFrame(resolve)); // 滚动到目标位置 if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth", block: "start" }); } }); } }); }; // 3. 绑定关闭按钮事件 const bindCloseButton = () => { const closeButton = document.querySelector(".phpgenera_Details_mainR1_close"); const container = document.querySelector(".phpgenera_Details_mainR1"); if (closeButton && container) { closeButton.addEventListener("click", (event) => { event.preventDefault(); container.style.display = "none"; }); } }; // 4. 初始化菜单交互功能 const initMenuInteraction = () => { const menuGroupElements = document.querySelectorAll('.layui-menu-item-group'); menuGroupElements.forEach(menuItem => { menuItem.addEventListener('click', function(event) { if (event.target.closest('.m_menusnames')) { return; } this.classList.toggle('layui-menu-item-down'); this.classList.toggle('layui-menu-item-up'); const subMenuContainer = this.querySelector('.m_menusnames'); const icon = this.querySelector('.layui-icon'); if (subMenuContainer && icon) { if (this.classList.contains('layui-menu-item-down')) { subMenuContainer.style.display = 'block'; icon.classList.remove('layui-icon-down'); icon.classList.add('layui-icon-up'); } else { subMenuContainer.style.display = 'none'; icon.classList.remove('layui-icon-up'); icon.classList.add('layui-icon-down'); } } }); }); }; // 5. 初始化 layui 功能 const initLayui = () => { if (typeof layui !== 'undefined') { layui.use(function () { var util = layui.util; if (util && util.fixbar) { util.fixbar({ on: { mouseenter: function (type) { if (layer && layer.tips) { layer.tips(type, this, { tips: 4, fixed: true, }); } }, mouseleave: function (type) { if (layer && layer.closeAll) { layer.closeAll("tips"); } }, }, }); } }); } }; // 执行所有初始化函数 bindMenuEvents(); bindScrollLinks(); bindCloseButton(); initMenuInteraction(); initLayui(); }); </script></body></html>