HTML5中常用的标签总结Jun 16, 2017 pm 05:15 PMh5html5ringkaskanLabelpraktikal
1、标签:
作用:声明是文档中的第一成分，位于标签之前。
2、标签:
作用:此元素可告知浏览器其自身是一个HTML文档。
属性:manifest:值(url)为脱机使用定义缓存信息。
3、标签:
作用:标签用于定义文档的头部，它是所有头部元素的容器。
属性:profile:值(URL)一个有空格分隔的URL列表，这些URL包含着有关页面的元数据信息。
4、标签:
<br>作用:元素可定义文档的标题。<br>属性:dir:值(rtl,ltr)规定元素中内容的文本方向。<br>lang:值(language_code)规定元素中内容的语言代码。<br>xml:lang:值(language_code)规定XHTML文档中元素内容的语言代码。</p>
<p>5、标签:<body><br>作用:元素定义文档的主体。<br>属性:alink:值(rgb(x,x,x),#xxxxxx,colorname)不赞成使用，请使用样式取代它。规定文档中活动链接(active link)的颜色。<br>background:值(URL)不赞成使用。请使用样式取代它。规定文档的<a href="http://www.php.cn/code/8294.html" target="_blank">背景图像</a>。<br>bgcolor:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。请使用样式取代它。规定文档中的背景颜色。<br>link:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。请使用样式取代它。规定文档中未访问链接的默认颜色。<br>text:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。请使用样式取代它。规定文档中所以文本的颜色。<br>vlink:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。请使用样式取代它。规定文档中已被访问链接的颜色。</p>
<p>6、标签:<h1>到<h6>标签<br>作用:<h1>-<h6>标签了定义标题。<h1>定义最大的标题，<h6>定义最小的标题。<br>属性:align:值(left,center,right,justify)不推荐使用。请使用样式取代它。规定标题中文本的排列。</p>
<p>7、标签:<p><br>作用:标签定义段落。<br>属性:align:值(left,center,right,justify)不推荐使用。请使用样式取代它。规定标题中文本的排列方式。</p>
<p>8、标签:<br><br>作用:可插入一个简单的换行符。<br>属性:没有可选属性。</p>
<p>9、标签:<hr><br>作用:标签在HTML页面创建一条水平线。<br>属性:align:值(center,left,right)不赞成使用。请使用样式取代它。规定hr元素的对齐方式。<br>noshade:值(noshade)不赞成使用。请使用样式取代它。规定hr元素的颜色呈现为纯色。<br>size:值(pixels)不赞成使用。请使用样式取代它。规定hr元素的高度(厚度)。<br>width:值(pixels %)不赞成使用。请使用样式取代它。规定hr元素的宽度。</p>
<p>10、标签<!-- --><br>作用:注释标签用于在源文档中插入注释。<br>属性:没有可选属性。</p>
<p>11、标签:<ul><br>作用:标签定义无序列表。<br>属性:compact:值(compact)不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。<br>type:值(disc,square,circle)不赞成使用。请使用样式取代它。规定列表的项目符号的类型。</p>
<p>12、标签:<ol><br>作用:标签定义有序列表。<br>属性:compact:值(compact)HTML5 中不支持。HTML4.01 中不赞成使用。规定列表呈现的效果比正常情况更小巧。<br>reversed:值(reversed)规定列表顺序为降序。(9,8,7...)<br>start:值(number)规定有序列表的起始值。<br>type:值(1,A,a,I,i)规定在列表中使用的标记类型。</p>
<p>13、标签:<li><br>作用:标签定义列表项目。<li>标签可使用在有序列表（<ol>）和无序列表（<ul>）中。<br>属性:type:值(A,a,I,i,1,disc,square,circle)不赞成使用。请使用样式代替它。规定使用哪种项目符号。<br>value:值(number)不赞成使用。请使用样式代替它。规定列表项目的数字。</p>
<p>14、标签:<dl><br>作用:标签定义了定义列表。标签用于结合<dt>(定义列表中的项目)和<dd>(描述列表中的项目)。<br>属性:没有可选属性。</p>
<p>15、标签:<dt><br>作用:标签定义了定义列表中的项目。<br>属性:没有可选属性。</p>
<p>16、标签:<dd><br>作用:在定义列表中定义条目的定义部分。<br>属性:没有可选属性。</p>
<p>17、标签:<a><br>作用:标签定义超链接，用于从一张页面链接到另一张页面。<a>元素最重要的属性是href属性，它指示链接的目标。<br>属性:charset:值(char_encoding)HTML5中不支持。规定被链接文档的字符集。<br>coords:值(coordinates)HTML5中不支持。规定链接的坐标。<br>download:值(filename)规定被下载的超链接目标。<br>href:值(URL)规定链接指向的页面的URL。<br>hreflang:值(language_code)规定被链接文档的语言。<br>media:值(media_query)规定被链接文档是为何种媒介/设备优化的。<br>name:值(section_name)HTML5中不支持。规定锚的名称。<br>rel:值(text)规定当前文档与被链接文档之间的关系。<br>rev:值(text)HTML5中不支持。规定链接文档与当前文档之间的关系。<br>shape:值(default,rect,circle,poly)HTML5中不支持。规定链接的形状。<br>target:值(_blank,_parent,_self,_top,framename)规定在何处打开链接文档。<br>type:值(MIME type)规定被链接文档的的MIME类型。</p>
<p>18、标签:<nav><br>作用:标签定义导航链接的部分。<br>属性:没有可选属性。</p>
<p>19、标签:<table><br>作用:标签定义HTML表格。<br>属性:align:值(left,center,right)不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。<br>bgcolor:值(rgb(x,x,x),#xxxxxx,colorname)不赞成使用。请使用样式代替。规定表格的背景颜色。<br>border:值(pixels)规定表格边框的宽度。<br>cellpadding:值(pixels %)规定单元边沿与其内容之间的空白。<br>cellspacing:值(pixels %)规定单元格之间的空白。<br>frame:值(void,above,below,hsides,lhs,rhs,vsides,box,border)规定外侧边框的哪个部分是可见的。<br>rules:值(none,groups,rows,cols,all)规定内侧边框的哪个部分是可见的。<br>summar:值(text)规定表格的摘要。<br>width:值(% pixels)规定表格的宽度。</p>
<p>20、标签:<caption><br>作用:标签定义表格的标题。<caption>标签必须直接放置到<table>标签之后。<br>属性:align:值(left,right,top,bottom)不赞成使用。请使用样式取而代之。规定标题的对齐方式。</p>
<p>21、标签:<th>列<br>作用:定义表格内的表头单元格。<th>元素内部的文本会呈现为居中的粗体文本。<br>属性:abbr:值(text)规定单元格中内容的缩写版本。<br>align:值(left,right,center,justify,char)规定单元格内容的水平对齐方式。<br>axis:值(category_name)对单元格进行分类。<br>bgcolor:值(rgb(x,x,x),#xxxxxx,colorname)不推荐使用。请使用样式代替它。规定表格单元格的背景颜色。<br>char:值(character)规定根据哪个字符来进行内容的对齐。<br>charoff:值(number)规定对齐字符的偏移量。<br>colspan:值(number)设置单元格可横跨的列数。<br>headers:值(idrefs)有空格分隔的表头单元格ID列表，为数据单元格提供表头信息。<br>height:值(pixels %)不推荐使用。请使用样式代替它。规定表格单元格的高度。<br>nowrap:值(nowrap)不推荐使用。请使用样式替代它。规定单元格中的内容是否折行。<br>rowspan:值(number)规定单元格可横跨的行数。<br>scope:值(col,colgroup,row,rowgroup)定义将表头数据与单元数据相关联的方法。<br>valign:值(top,middle,bottom,baseline)规定单元格内容的垂直排列方式。<br>width:值(pixels %)不推荐使用。请使用样式取而代之。规定表格单元格的宽度。</p>
<p>22、标签:<tr>行<br>作用:标签定义HTML表格中的行。<br>属性:align:值(right,left,center,justify,char)定义表格行的内容对齐方式。<br>bgcolor:值(rgb(x,x,x)#xxxxxx,colorname)不赞成使用。请使用样式取而代之。规定表格行的背景颜色。<br>char:值(character)规定根据哪个字符来进行文本对齐。<br>charoff:值(number)规定第一个对齐字符的偏移量。<br>valign:值(top,middle,bottom,baseline)规定表格行内容。</p>
<p>23、标签:<td>普通列<br>作用:标签定义了定义列表中的项目。td元素内的文本通常是左对齐。<br>属性:abbr:值(text)规定单元格中内容的缩写版本。<br>align:值(left,right,center,justify,char)规定单元格内容的水平对齐方式。<br>axis:值(category_name)对单元进行分类。<br>bgcolor:值(rgb(x,x,x),#xxxxxx,colorname)不赞成使用。请使用样式取而代之。规定单元格的背景颜色。<br>char:值(character)规定根据哪个字符来进行内容的对齐。<br>charoff:值(number)规定对齐字符的偏移量。<br>colspan:值(number)规定单元格可横跨的列数。<br>headers:值(header_cells'_id)规定与单元格相关的表头。<br>height:值(pixels %)不赞成使用。请使用样式取而代之。规定表格单元格的高度。<br>nowrap:值(nowrap)不赞成使用。请使用样式取而代之。规定单元格中的内容是否折行。<br>rowspan:值(number)规定单元格可横跨的行数。<br>scope:值(col,colgroup,row,rowgroup)定义将表头数据与单元数据相关联的方法。<br>valign:值(top，middle，bottom，baseline)规定单元格内容的垂直排列方式。<br>width:值(pixels %)不赞成使用。请使用样式取而代之。规定表格单元格的宽度。</p>
<p>24、标签:<img><br>作用:img元素向网页中嵌入一幅图像。<br>属性:必需的属性:src属性:值(URL)规定显示图像的URL和alt属性:值(text)规定图像的代替文本。<br>可选属性:align:值(top,bottom,middle,left,right)不推荐使用。规定如何根据周围的文本来排列图像。<br>border:值(pixels)不推荐使用。定义图像周围的边框。<br>height:值(pixels %)定义图像的高度。<br>hspace:值(pixels)不推荐使用，定义图像左侧和右侧的空白。<br>ismap:值(URL)将图像定义为服务器端图像映射。<br>longdesc:值(URL)指向包含长的图像描述文档的URL。<br>usemap:值(URL)将图像定义为客户器端图像映射。<br>vspace:值(pixels)不推荐使用。定义图像顶部和底部的空白。<br>width:值(pixels %)设置图像的宽度。</p>
<p>25、标签:<audio><br>作用:元素能够播放声音文件或者音频流。<br>属性:autoplay:值(autoplay)如果出现该属性，则音频在就绪后马上播放。<br>controls:值(controls)如果出现该属性，则向用户显示控件，比如播放按钮。<br>loop:值(loop)如果出现该属性，则每当音频结束时重新开始播放。<br>muted:值(muted)规定视频输出应该被静音。<br>preload:值(preload)如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用"autoplay",则忽略该属性。<br>src:值(url)要播放的音频URL。</p>
<p>26、标签<video><br>作用:HTML5规定了一种通过video元素来包含视频的标准方式。<br>属性:autoplay:值(autoplay)如果出现该属性，则视频在就绪后马上播放。<br>controls:值(controls)如果出现该属性，则向用户显示控件，比如播放按钮。<br>height:值(pixels)设置视频播放器的高度。<br>loop:值(loop)如果出现该属性，则当媒介文件完成播放后再次开始播放。<br>preload:值(preload)如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay",则忽略该属性。<br>src:值(url)要播放的视频的url。<br>width:值(pixels)设置视频播放器的宽度。</p>
<p>27、标签<source><br>作用:标签为媒介元素，定义媒介资源。<br>属性:media:值(media query)规定媒体资源的类型。<br>src:值(url)规定媒体文件的URL。<br>type:值(numeric value)规定媒体资源的MIME类型。</p>
<p>28、标签:<form><br>作用:标签用于为用户输入创建HTML表单。<br>属性:accept:值(MIME_type)HTML5中不支持。<br>accept-charset:值(charset_list)规定服务器可处理的表单数据字符集。<br>action:值(URL)规定当提交表单时向何处发送表单数据。<br>autocomplete:值(on,off)规定是否启用表单的<a href="http://www.php.cn/code/6615.html" target="_blank">自动完成</a>功能。<br>method:值(get,post)规定用于发送form-data 的http方法。<br>name:值(form_name)规定表单的名称。<br>target:值(_blank,_self,_parent,_top,foamename)规定在何处打开 action URL。</p>
<p>29、标签:<input><br>作用:标签用于收集用户信息。<br>属性:accept:值(mime_type)规定通过<a href="http://www.php.cn/code/6649.html" target="_blank">文件上传</a>来提交的文件的类型。<br>align:值(left,right,top,middle,bottom)不赞成使用。规定图像输入的对齐方式。<br>alt:值(text)定义图像输入的替代文本。<br>autocomplete:值(on,off)规定是否使用输入字段的自动完成功能。<br>autofocus:值(autofocus)规定输入字段在页面加载时是否获得焦点。<br>checked:值(checked)规定此input元素首次加载时应当被选中。<br>disabled:值(disabled)当input元素加载时禁用此元素。<br>form:值(formname)规定输入字段所属的一个或多个表单。<br>formaction:值(url)覆盖表单的action属性。<br>height:值(pixels %)定义input字段的高度。<br>list:值(datalist-id)引用包含输入字段的预定义选项的datalist。<br>max:值(number,date)规定输入字段的最大值。<br>maxlength:值(number)规定输入字段中的字符的最大长度。<br>min:值(number,date)规定输入字段的最小值。<br>name:值(field_name)定义input元素的名称。<br>readonly:值(readonly)规定输入字段为只读。<br>size:值(number_of_char)定义输入字段的宽度。<br>type:值(button,checkbox,file,hidden,image,password,radio,reset,submit,text)规定input元素的类型。<br>value:值(value)规定input元素的值。<br>width:值(pixels,%)定义input字段的宽度。</p>
<p>30、标签:<textarea><br>作用:标签定义多行的文本输入控件。<br>属性:autofocus:值(autofocus)规定在页面加载后文本区域自动获得焦点。<br>cols:值(number)规定文本区内的可见宽度。<br>disabled:值(disabled)规定禁用该文本区。<br>form:值(form_id)规定文本区域所属的一个或多个表单。<br>maxlength:值(number)规定文本区域的最大字符数。<br>name:值(name_of_textarea)规定文本区的名称。<br>placeholder:值(text)规定描述文本区域预期值的简短提示。<br>readonly:值(readonly)规定文本区为只读。<br>rows:值(number)规定文本区域的可见行数。</p>
<p>31、标签:<button><br>作用:标签定义一个按钮。<br>属性:disabled:值(disabled)规定应该禁用该按钮。<br>form:值(form_name)规定按钮属于一个或多个表单。<br>name:值(button_name)规定按钮的名称。<br>type:值(button,reset,submit)规定按钮的类型。<br>value:值(text)规定按钮的初始值。</p>
<p>32、标签:<select><br>作用:元素可创建单选或多选菜单。<br>属性:data:值(url)供自动<a href="http://www.php.cn/code/5336.html" target="_blank">插入数据</a>。<br>disabled:值(true,false)当该属性为true时，会禁用该菜单。<br>form:值(true,false)定义select字段所属的一个或多个表单。<br>multiple:值(true,false)当该属性为true时，规定可一次选定多个项目。<br>name:值(unique_name)定义<a href="http://www.php.cn/code/7266.html" target="_blank">下拉列表</a>的唯一标识符。<br>size:值(number)定义菜单中可见项目的数目。不支持</p>
<p>33、标签:<optgroup><br>作用:标签定义选项组。<br>属性:label:值(text)为选项组规定描述。<br>disabled:值(disabled)规定禁用该选项组。</p>
<p>34、标签:<option><br>作用:元素定义下拉列表中的一个选项。<br>属性:disabled:值(disabled)规定次选项应在首次加载时被禁用。<br>label:值(text)定义使用<optgroup>时所使用的标注。<br>selected:值(selected)规定选项表现为选中状态。<br>value:值(text)定义送往服务器的选项值。</p>
<p>35、标签:表单域<br>{<br> 单行文本域：<input type="text" /><br> 密码文本域：<input type="password" /><br> <a href="http://www.php.cn/code/5979.html" target="_blank">单选按钮</a>：<input type="radio" /><br> 多选按钮：<input type="checkbox" /><br> 隐藏域：<input type="hidden" /><br> 提交按钮：<input type="submit" /><br> 重置按钮：<input type="reset" /><br> 自定义按钮：<input type="button" /><br> 文件上传：<input type="file"/><br> 多行文本域：<textarea /><br> 下拉列表域：<select /><br>}</p>
<p> </p>
<p>注：可能不是很齐全，但基本上都是一些常用的。</p><p>Atas ialah kandungan terperinci HTML5中常用的标签总结. 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="" title="html5的div一行可以放两个吗" 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/202204/25/2022042516595074532.jpg" alt="html5的div一行可以放两个吗" src="/static/imghw/default1.png" /></a><a href="" title="html5的div一行可以放两个吗" class="phphistorical_Version2_mids_title">html5的div一行可以放两个吗</a><span class="Articlelist_txts_time">Apr 25, 2022 pm 05:32 PM</span><p class="Articlelist_txts_p">html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。</p></div><div class="phphistorical_Version2_mids"><a href="" title="html5中列表和表格的区别是什么" 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/202204/28/2022042813430074461.jpg" alt="html5中列表和表格的区别是什么" src="/static/imghw/default1.png" /></a><a href="" title="html5中列表和表格的区别是什么" class="phphistorical_Version2_mids_title">html5中列表和表格的区别是什么</a><span class="Articlelist_txts_time">Apr 28, 2022 pm 01:58 PM</span><p class="Articlelist_txts_p">html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。</p></div><div class="phphistorical_Version2_mids"><a href="" title="html5怎么让头和尾固定不动" 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/202204/25/2022042514112379312.jpg" alt="html5怎么让头和尾固定不动" src="/static/imghw/default1.png" /></a><a href="" title="html5怎么让头和尾固定不动" class="phphistorical_Version2_mids_title">html5怎么让头和尾固定不动</a><span class="Articlelist_txts_time">Apr 25, 2022 pm 02:30 PM</span><p class="Articlelist_txts_p">固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。</p></div><div class="phphistorical_Version2_mids"><a href="" title="HTML5中画布标签是什么" 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/202205/18/2022051816543362227.jpg" alt="HTML5中画布标签是什么" src="/static/imghw/default1.png" /></a><a href="" title="HTML5中画布标签是什么" class="phphistorical_Version2_mids_title">HTML5中画布标签是什么</a><span class="Articlelist_txts_time">May 18, 2022 pm 04:55 PM</span><p class="Articlelist_txts_p">HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。</p></div><div class="phphistorical_Version2_mids"><a href="" title="html5中不支持的标签有哪些" 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/202203/17/2022031717341784015.jpg" alt="html5中不支持的标签有哪些" src="/static/imghw/default1.png" /></a><a href="" title="html5中不支持的标签有哪些" class="phphistorical_Version2_mids_title">html5中不支持的标签有哪些</a><span class="Articlelist_txts_time">Mar 17, 2022 pm 05:43 PM</span><p class="Articlelist_txts_p">html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。</p></div><div class="phphistorical_Version2_mids"><a href="" title="html5废弃了哪个列表标签" 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/202206/01/2022060118010096424.jpg" alt="html5废弃了哪个列表标签" src="/static/imghw/default1.png" /></a><a href="" title="html5废弃了哪个列表标签" class="phphistorical_Version2_mids_title">html5废弃了哪个列表标签</a><span class="Articlelist_txts_time">Jun 01, 2022 pm 06:32 PM</span><p class="Articlelist_txts_p">html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。</p></div><div class="phphistorical_Version2_mids"><a href="" title="html5是什么意思" 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/202104/26/2021042615010770546.jpg" alt="html5是什么意思" src="/static/imghw/default1.png" /></a><a href="" title="html5是什么意思" class="phphistorical_Version2_mids_title">html5是什么意思</a><span class="Articlelist_txts_time">Apr 26, 2021 pm 03:02 PM</span><p class="Articlelist_txts_p">html5是指超文本标记语言（HTML）的第五次重大修改，即第5代HTML。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。</p></div><div class="phphistorical_Version2_mids"><a href="" title="Html5怎么取消td边框" 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/202205/18/2022051818480615371.jpg" alt="Html5怎么取消td边框" src="/static/imghw/default1.png" /></a><a href="" title="Html5怎么取消td边框" class="phphistorical_Version2_mids_title">Html5怎么取消td边框</a><span class="Articlelist_txts_time">May 18, 2022 pm 06:57 PM</span><p class="Articlelist_txts_p">3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。</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/ai-hentai-generator" title="AI Hentai Generator" 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/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://m.php.cn/ms/ai/ai-hentai-generator" title="AI Hentai Generator"class="phpmain_tab2_mids_title"><h3>AI Hentai Generator</h3></a><p>Menjana ai hentai secara percuma.</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/1796780570.html" title="R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>2 minggu yang lalu</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/1796773439.html" title="Repo: Cara menghidupkan semula rakan sepasukan" class="phpgenera_Details_mainR4_bottom_title">Repo: Cara menghidupkan semula rakan sepasukan</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 minggu yang lalu</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/1796774171.html" title="Hello Kitty Island Adventure: Cara mendapatkan biji gergasi" class="phpgenera_Details_mainR4_bottom_title">Hello Kitty Island Adventure: Cara mendapatkan biji gergasi</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 minggu yang lalu</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ms/faq/1796775427.html" title="Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?" class="phpgenera_Details_mainR4_bottom_title">Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?</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/1796775336.html" title="R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 minggu 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/469" title="Dreamweaver CS6" 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/58d0e0fc74683535.jpg" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"><h3>Dreamweaver CS6</h3></a><p>Alat pembangunan web visual</p></div></div><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/1556" title="MantisBT" 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/004/169206588591843.png" src="/static/imghw/default1.png" alt="MantisBT" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/1556" title="MantisBT" class="phpmain_tab2_mids_title"><h3>MantisBT</h3></a><p>Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ms/toolset/development-tools/1557" title="mPDF" 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/003/169206948656118.png" src="/static/imghw/default1.png" alt="mPDF" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ms/toolset/development-tools/1557" title="mPDF" class="phpmain_tab2_mids_title"><h3>mPDF</h3></a><p>mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),</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><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>7323</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>9</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>1625</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>1350</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>46</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>1262</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>1209</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');});}});
// 通用函数，用于显示或隐藏元素
function toggleElementsDisplay(className, show) {
const elements = document.getElementsByClassName(className);
for (let i = 0; i < elements.length; i++) {
elements[i].style.display = show ? "block" : "none";
}
}
// 绑定事件监听器
function bindEventListeners() {
const toggleDisplay = (className, show, eventId) => {
document.getElementById(eventId).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");
// 控制 m_menu 的显示和隐藏
toggleDisplay("m_menu", true, "lan1sp");
toggleDisplay("m_menu", false, "m_editormain12main_topi_sp");
// 控制 m_menu_lang 的显示和隐藏
toggleDisplay("m_menu_lang", true, "lan1");
toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan");
}
// 在页面加载完成后绑定事件监听器
window.onload = bindEventListeners;
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");
},
},
});
});
// 获取关闭按钮
const closeButton = document.querySelector(".phpgenera_Details_mainR1_close");
// 获取容器元素
const container = document.querySelector(".phpgenera_Details_mainR1");
// 添加点击事件监听器
closeButton.addEventListener("click", (event) => {
event.preventDefault(); // 阻止默认的<a>点击行为
container.style.display = "none"; // 隐藏容器
});
document.addEventListener("DOMContentLoaded", () => {
// 动态获取所有滚动链接及隐藏目标元素
const links = [{
linkId: "fixed_tab_a1",
targetId: "article_main_title1",
hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID
},
{
linkId: "fixed_tab_a2",
targetId: "article_main_title2",
hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID
},
{
linkId: "fixed_tab_a3",
targetId: "article_main_title3",
hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID
},
{
linkId: "fixed_tab_a4",
targetId: "article_main_title4",
hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID
},
];
links.forEach(({
linkId,
targetId,
hideElementId
}) => {
const linkElement = document.getElementById(linkId);
const targetElement = document.getElementById(targetId);
const hideElement = document.getElementById(hideElementId);
if (linkElement && targetElement) {
linkElement.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认行为
// 隐藏指定元素
if (hideElement) {
hideElement.style.display =
"none"; // 也可以用其他方法隐藏，如 `visibility: hidden`
}
// 平滑滚动到目标元素
targetElement.scrollIntoView({
behavior: "smooth"
});
});
} else {
console.warn(
`Link, target, or hide element not found: ${linkId}, ${targetId}, ${hideElementId}`
);
}
});
});
// 初始化菜单交互功能
document.addEventListener('DOMContentLoaded', function () {
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');
// 切换子菜单显示状态
if (subMenuContainer) {
if (this.classList.contains('layui-menu-item-down')) {
subMenuContainer.style.display = 'block';
this.querySelector('.layui-icon').classList.remove(
'layui-icon-down');
this.querySelector('.layui-icon').classList.add('layui-icon-up');
} else {
subMenuContainer.style.display = 'none';
this.querySelector('.layui-icon').classList.remove('layui-icon-up');
this.querySelector('.layui-icon').classList.add('layui-icon-down');
}
}
});
});
});
</script></body></html>
