标准化设计解决方案 - 标记语言和样式手册
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 从标记语法谈起
Chapter2 标题
总览:
不但所有网页都需要有标题,而且如果标记正确的话,他们能为网页设计和易用性增色不少.
从外观来说,网页的标题通常是使用较大的字号,或许会用和主体文字不同的颜色或者字体.标题的作用是"简要的描述往后章节所讨论的主题",W3C这样描述 — 显示网页内各个段落的概要.
怎样来创建一个页面标题来使得我们要展现的信息得到最有效的利用?在这个章节中,我们将研究几种常用的处理标题的方法,试着从中找出其中一种对我们最有帮助的方式,然后,我们将使用一些css的技巧和窍门来为最棒的方法装饰一番.
创建文档标题的最好方法是什么?
在回答这个问题之前,让我们假设现在正要把标题放置在文档的页首,我们来看看能够达成类似效果的三种方式.
方法A:有意义吗?
Super Cool Page Title
虽然标签在某些场合会是个方便的标签,但是对于页面标题来说,它的意义并不大,使用这个方法的唯一好处是我们可以为 heading 类指定一个css样式,以便让文字看起来像是个标题.
.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
现在,所有标记了heading类的标题都会变大,变粗,变蓝,很棒对吧?但是,如果有人使用一个不支持css的浏览器访问这个页面会怎么样呢?
举例来说,如果我们把css样式放在旧浏览器不支持的外部样式表文件里 — 或者屏幕阅读器为有障碍的用户朗读页面时会怎么样呢?通过这些途径访问这个页面的使用者将看不到(听不到)标题和正文文字的差异.
class="heading"这样的标注方法稍~~微的描述了标签内容的意义,但是只是个一般用途的容器,只是让大部分浏览器改变默认显示样式而已.
搜索引擎在抓取到这个页面时,会跳过标签就像它不曾在那边一样,不会为里面可能包含的关键字提升权重,稍后在本章节内会提到更多搜索引擎和页面标题的关系.
最后,由于标签是一个行内元素,我们大多需要把方法A的内容在放置到另一个块级容器中,比方说或者
,以便让它独占一行.这样会生成许多不必要的代码,就算你加上需要的容器,不支持css的浏览器仍然会以他本来的方式显示文字,让用户看不出标题和正文的任何区别.
#p#
方法B: P和B的组合
Super Cool Page Title
方法B使用了段落标签,这会让我们得到我们想要的块级元素的显示效果,而标签会让文字呈现粗体的样式(在大多数浏览器上) — 但是我们以这样的方式标记重要的标题时,仍然要面对同样缺少语义性的结果.
不像方法A,标签的存在就算缺少css样式的定义,在大多数浏览器中还是会将文字以粗体的样式呈现.但是和标签一样,搜索引擎不会为段落内的粗体文字提升关键字权重.
难以加上样式
使用单纯的p和b的标签组合,让我们无法为这个标题加上和其它段落有所区别的样式,或许我们想以独特的方式强调标题,为页面内容加上定义和结构 — 但是使用了这个方法让它呈现粗体后,我们就没有办法去做这些事情了.
方法C:样式与实质
Super Cool Page Title
哈哈,我们的好朋友标题标签来了,标题标签从一开始就是存在的,但是许多网页设计师还是无法以一致的方式使用它们.如果使用得当,标题标签能够提供页面内容的锚点,提供灵活的,可索引的,可更改样式的结构.
从标签本身的观点来看,你一定会爱上它的简洁,它们不需要额外的容器标签,你甚至能说这个方法能比前两个方法节省了一些字节,可能可以忽略,但是每小一个字节就是改变.
到分别代表了6层标题,从最重要的到最不重要的,他们本身就是块级元素不需要一个额外的容器就能自成一行,简单而又有效率 — 是完成这项工作的最佳工具.
容易定义样式
因为标签拥有独特的意义,不像或者
标签那样会在文内用到多次,因此我们能用css为它加上各式各样的样式(我们会在本章的"更多技巧"中深入讨论).
更重要的是,就算不加上任何的样式定义,标题标签看起来就很明显是个标题!浏览器会用大字体,粗体字呈现
的内容,就算去掉页面所有的样式定义,仍然可以看到文档的结构,因为正确的标题标签描述的是内容意义,而不是表现方式. (图 2-1)
图 2 - 1: 脱离样式后使用标题标签的页面内容
屏幕阅读器,PDA,移动电话和其他一些视觉的非视觉的浏览器也能识别并正确处理标题标签的内容,把它的重要性突出于页面其他内容之上.使用标签,不支持(或无法支持)css的浏览器就不会认为它有什么特别之处.
讨厌的默认样式
在网页设计史上,设计师们都会避免使用标题标签,完全是因为不加上样式的时候,标题标签看起来就和怪物没什么两样,二者择其一,其中一部分人会因为默认字体大小太大而避免使用或而去使用字体大小较小的标号较高的标题标签.
然而,有个重点值得强调,我们可以根据自己的喜好通过定义css轻易的改变这些标题标签的样式 — 举例来说,未必一定是占据了半块屏幕的庞然大物,稍后,我会示范如何简单的用css样式来定义标题标签,以此来帮助你克服对的恐惧.
对搜索引擎的友好
这是最大的优点.搜索引擎十分喜欢标题标签,标签或者段落中的粗体对搜索引擎来说并没有多大意义,使用正确的~标记标题花不了多少时间,但是却能帮助搜索引擎为你的页面建立索引,让用户更容易找到你的网页.
搜索引擎的机器人非常重视标题标签中的内容,或许,你会想要在里面堆上几个关键字,在他们处理完和<meta>标签之后,紧接着就会处理页面内容中的标题标签,如果你的页面上没有使用标题标签的话,那这些在你的标题中的关键字不会引起他们的重视,被他们忽略.<br>所以,只需要花少少的时间,就能让其他人更容易通过内容找到你的网页,听起来不错,对吧?<br><strong>附带一提的标签顺序</strong><br>在上面的示例中,在页面中最重要的就是标题,因为他是整个文档的标题,因此,我们将使用最重要的标题标签<h1>,根据W3C,有些人认为跳过标题层并不是什么好习惯,举例说明,假设我们有下面这么一份网页:<br><span class="code"><h1>Super Cool Page Title</h1></span><br>那么下一个标题(如果不是另一个<h1>的话),就应该是<h2>,在接下去则使用<h3>等等,你也许不会跳过某级标题,比如说在<h1>之后直接使用<h3>.我比较赞同,并且认为结构和纲要相同,应该按照顺序使用每个级层,这能让你为已经存在的页面方便的添加标题,样式.同时这样也比较不会出现用完所有标题级层的情况.<br>如同先前所述,设计者可能会使用<h4>代表页面里最重要的标题,只因为它的预设字体大小不如<h1>那样大的恐怖.但是要记住,先写结构,再调整样式,我们可以在任何时候根据我们自己的喜好通过css改变标题标签的字体大小.<br>
#p#<br><strong>概要</strong><br>让我们大致上回顾一下,为什么使用标题标签(<h1>到<h6>)来标记页面内的标题会比较好.<br><strong>方法A:</strong><br>可视化浏览器会在禁用或不支持css功能时,以一般文字相同的样式显示标题,非视觉浏览器则完全不知道标题和内文文字之间的差别. <br>搜索引擎不会特别重视以<span>标记的标题 <br>我们能制定独特的样式,但是我们在新增标题时,却会被heading类困死.
<br><strong>方法B:</strong><br>可视化浏览器只会用粗体显示内容,继续使用预设的字体大小. <br>我们无法为标题加上和内文不同的独特样式 <br>搜索引擎同样不会特别重视以<p><b>创建的标题的内容.
<br><strong>方法C:</strong><br>传达了标题标签中的文字确切的含义. <br>不管是可视化还是非可视化浏览器不管读到什么样式都会正确的处理标题内容 <br>搜索引擎会重视标题标签中的关键字.<br><strong>技巧延伸</strong><br>这里我们将采用方法C,并用它来实验一些简单的css样式.我们将完全发挥标题标签独特性的优势.我们可以非常安心的使用标题标签,因为不管在什么浏览器和设备上,都能正确的处理标题内容.接下来我们来给他装扮装扮,然后带它上街(如果你能够带着一个html标签上街的话....)<br><strong>简单的样式</strong><br>使用css,最简单最容易实现的效果就是为标题设置不同的字型.我们可以编写一个css规则,然后套用到页面中所有的<h1>标签上(如果你用到了外部样式表,那就可以把样式套用到整个网站上).如果在稍后的时间里想要改变整个网站里每个<h1>的颜色,大小或者字体,那么只需要修改几条css规则就行了,而且修改之后的效果能够马上看到!这听起来很诱人,对吧?<br>让我们超级酷的标题来告诉我们自己吧:<br><span class="code"><h1>Super Cool Page Title</h1></span><br>让我们用css来改变它的颜色,字体和大小吧:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> }</span><br>就像我们刚才所说的,非常简单,整个页面的所有<h1>都被设置成24像素大小,蓝色的Arial(或者默认的sans-serif)字体,如图 2-2:<br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/d403782309c7ce2ffc51499ef1aa3159-1.gif" class="lazy" style="max-width:90%" alt="" style="max-width:90%"><br>图 2-2: 标题样式示例<br>接下来我们继续在标题文字下面加上1像素宽的灰色边框(如图 2-3):<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> padding-bottom: 4px;<br> border-bottom: 1px solid #999;<br> }</span><br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-2.gif" class="lazy" style="max-width:90%" alt="" style="max-width:90%"><br>图 2-3:加上灰色底边的标题样式示例<br>我们在文字底部多留了些内补丁,使得下面的边线不至于呼吸困难.因为标题标签是块级元素,因此边框会不止填满文字底部,还会继续向右边延伸,直到填满整个页面宽度.<br>另外值得一提的是,我们使用了边框的简写法 — 就是在一条声明中同时定义了宽度,样式,颜色.你可以试试看其他的设定值,看看有什么别的效果.<br>
#p#<br><strong>加上背景</strong><br>背景能给标题加上精巧的效果.只要加上背景色与一些留白,不需要用到图片我们就可以创造出清新的标题风格.举例来说:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #fff;<br> padding: 4px;<br> background-color: #696;<br> }</span><br>我们把标题中的文字变成白色,周围留出4像素的内补丁空间,同时把背景改成绿色.如图2-4那样,会有一条宽大的,颜色如同撞球桌的绿带贯穿整个页面,分割两个段落.<br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-3.gif" class="lazy" style="max-width:90%" alt="" style="max-width:90%"><br>图2-4:设定了内补丁和背景色的标题示例<br><strong>背景和边框</strong><br>只要在标题下面加上一条细边框,再配上浅色背景,你就能不用一张图片的情况下做出三维的效果.<br>这份css与上面的十分类似,只改了几个颜色,在底部加上了2像素的边框<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #666;<br> padding: 4px;<br> background-color: #ddd;<br> border-bottom: 2px solid #ccc;<br> }</span><br>借着使用不同亮度的相同颜色,就能做出如图2-5般逼真的三维效果:<br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-4.gif" class="lazy" style="max-width:90%" alt="" style="max-width:90%"><br>图2-5:设定背景和底边的标题<br><strong>平铺背景</strong><br>用上图片的话,就能发挥更多的创意了.就让我们用photoshop创建一个10X10的小图片,最上面是黑色的边框,然后下面是从上到下的灰色梯度(如图2-6):<br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-5.jpg" class="lazy" style="max-width:90%" alt="" style="max-width:90%"><br>图2-6 用Photoshop创建的小图片<br>我们可以用css把这个小图片放到我们的<h1>底部去:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> padding-bottom: 14px;<br> background: url(10x10.gif) repeat-x bottom;<br> }</span><br>设定 repeat-x 使浏览器在平铺背景图的时候只在水平方向上排列(相对的repeat-y就是在垂直方向上排列),同时我们设定了将图片放置在标题的底部,并加上一些下部内补丁,以便调整图片和标图文字之间的距离(如图2-7)<br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-6.jpg" class="lazy" style="max-width:90%" alt="" style="max-width:90%"><br>图2-7:设定平铺背景的标题示例<br><strong>方便替换的图标</strong><br>我们也可以使用cssdebackground属性来设定放在文字左边的小图标以此来代替写死图片标签的方法,为标题加上装饰用的小图标.这个方法能使在未来的日子里改变网站显示效果的工作变得十分轻松—只需要替换那么一个css规则,就能同时改变整个网站的显示效果.<br>代码和上面的平铺背景大致相同:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> padding-left: 30px;<br> background: url(icon.gif) no-repeat 0 50%;<br> }</span><br>我们在文字的左边多留出一块空间以便防止我们想要的图标,然后设定no-repeat指定背景图片不进行平铺(如图2-8),同时我们希望图标的位置在据左边0像素,并且对起垂直中线.<br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-7.jpg" class="lazy" style="max-width:90%" alt="" style="max-width:90%"><br>图2-8:设定了图标的标题示例<br>
#p#<br><strong>容易更新</strong><br>让我们设想这样一个场景:在一个包含了100个页面的网站里,我们没有使用上面的方法,而使用<img>标签写死每个标题旁边的图标,图标和网站风格是相融合的,几个星期后,网站的主人打算换掉网站风格,而新的图标大小和旧的并不一样,哎呦!这下我们就得回去修改整整100份页面里面的<img>标签以更新新图标的路径,真讨厌!想想这些事件会对项目预算造成怎样的影响,对完工期限带来多大的压力?时间就是金钱啊!<br>如果把这些并不十分重要的,装饰性的图标整合到一个css文件中,只要花上几分钟就能够一次性换掉整站的所有图标,带来崭新的外观!由此你应该可以渐渐明白到结构标记和显示效果分离的好处了吧.<br><strong>变色龙效果</strong><br>下来的技巧和我刚才所说的有一些矛盾,但是我认为这个技巧在某些情况下是十分有用的.这是我在2003年4月为Fast Company杂志的网站(www.fastcompany.com)做标准重构时大量使用的技巧.<br>那时我们在网站里的<h3>标签旁边用了许多13X13的小图标,就像这样:<br><span class="code"><h3><img src="http://images.fastcompany.com/icon/first_imp.gif" width="13" height="13" alt="*" /> FIRST IMPRESSION</h3></span><br>有两个让我们决定要这样把图标写死在网页里面.首先,根据标题种类的不同,我们会使用到不同的图标(图书俱乐部是一本书,每日引言则是引号等等),第二个理由则是我们每个月会更换一次整个网站的配色,以配合当期杂志的封面主题.当然,这种替换工作因为使用了css而变得十分简单.<br>为了让图标跟着其他页面元素一起变色(这样才不必一直为了新色彩而重新制作图标),我们只用两种颜色做了一组图标:白色和透明(会显示除每次更改的背景颜色).图2-9就是放在首页引言之前的图标:<br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-8.jpg" class="lazy" style="max-width:90%" alt="" style="max-width:90%"><br>图2-9: 13X13的透明图标(放大后)<br>为了在透明部分填进颜色,我们使用了简单的css的background属性设定颜色,我们希望只希望这个颜色出现在图表的后面而不出现在标题文字后面,我们用到了css选择器只对<h3>标签内的图片使用这条规则,以便达到我们想要的效果:<br><span class="code">h3 img {<br> background: #696;<br> }</span><br>这段css代码表示<h3>标签内的所有<img>标签都把背景设为绿色,背景色会透过透明像素显示出来,但是白色部分仍然还是白色,如此一来,每个月只需要修改这条css规则,换上不同的颜色,就能瞬间改变网站上每个图标的色彩了,就像变魔术一样.<br><strong>对齐<img>标签</strong><br>为了使图标和文字正确的对齐(我们希望垂直居中),因此我们加上了这条css规则:<br><span class="code">h3 img {<br> background: #696;<br> vertical-align: middle;<br> }</span><br>这条规则会使图标和<h3>文字内容垂直居中,图2-20就是设定玩的标题:<br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-9.gif" class="lazy" style="max-width:90%" alt="" style="max-width:90%"><br>图2-10:以css为图标加上背景色的示例<br>这个例子还能说明另一个重要的概念—以css指定背景色彩会出现在任何页面内指定的图标或是css图标后面.<br>举例来说,我们回头看看"方便更新的图标"这个示例,为它加上背景色看看:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #fff;<br> padding-left: 30px;<br> background: #696 url(transparent_icon.gif) no-repeat 0 50%;<br> }</span><br>如此以来 transparent_icon.gif 会显示在相同规则中稍早定义的背景色之上(如图2-11) —在这个例子中,背景色是#696,也就是撞球桌的绿色.<br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-10.jpg" class="lazy" style="max-width:90%" alt="" style="max-width:90%"><br>图2-11 设定了背景图,背景色的标题示例<br>当你为了考虑色彩为主的页面上加小圆角,装饰图标时,这个小技巧就十分好用了.这些不重的图片可以完全放进css文件里面,未来打算更新的时候也就可以轻松替换.现在多用点心思.就能节省未来许多的工作.<br><strong>总结</strong><br>我希望通过比较集中常用的方法后,你能发觉正确使用标题标签的好处.不管是视觉,非视觉浏览器或者其他设备,都能正确的历届标题的含义,并且以适当的方法展现它们,搜索引擎也会为他们建立索引,你也可以轻松的以css应用和修改需要显示的效果.
</p></div><div class="wzconShengming_sp"><div class="bzsmdiv_sp">声明</div><div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系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">相关文章<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/zh/faq/1796795191.html" title="从文本到网站：HTML的力量" 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/174447404295304.jpg?x-oss-process=image/resize,p_40" alt="从文本到网站：HTML的力量" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796795191.html" title="从文本到网站：HTML的力量" class="phphistorical_Version2_mids_title">从文本到网站：HTML的力量</a><span class="Articlelist_txts_time">Apr 13, 2025 am 12:07 AM</span><p class="Articlelist_txts_p">HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796794693.html" title="了解HTML，CSS和JavaScript：初学者指南" 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/174438733162787.jpg?x-oss-process=image/resize,p_40" alt="了解HTML，CSS和JavaScript：初学者指南" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796794693.html" title="了解HTML，CSS和JavaScript：初学者指南" class="phphistorical_Version2_mids_title">了解HTML，CSS和JavaScript：初学者指南</a><span class="Articlelist_txts_time">Apr 12, 2025 am 12:02 AM</span><p class="Articlelist_txts_p">WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796794180.html" title="HTML的角色：构建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/174430155217186.jpg?x-oss-process=image/resize,p_40" alt="HTML的角色：构建Web内容" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796794180.html" title="HTML的角色：构建Web内容" class="phphistorical_Version2_mids_title">HTML的角色：构建Web内容</a><span class="Articlelist_txts_time">Apr 11, 2025 am 12:12 AM</span><p class="Articlelist_txts_p">HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796793634.html" title="HTML和代码：仔细观察术语" 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/174424853215422.jpg?x-oss-process=image/resize,p_40" alt="HTML和代码：仔细观察术语" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796793634.html" title="HTML和代码：仔细观察术语" class="phphistorical_Version2_mids_title">HTML和代码：仔细观察术语</a><span class="Articlelist_txts_time">Apr 10, 2025 am 09:28 AM</span><p class="Articlelist_txts_p">htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796793129.html" title="HTML，CSS和JavaScript：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/174412873346901.jpg?x-oss-process=image/resize,p_40" alt="HTML，CSS和JavaScript：Web开发人员的基本工具" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796793129.html" title="HTML，CSS和JavaScript：Web开发人员的基本工具" class="phphistorical_Version2_mids_title">HTML，CSS和JavaScript：Web开发人员的基本工具</a><span class="Articlelist_txts_time">Apr 09, 2025 am 12:12 AM</span><p class="Articlelist_txts_p">HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796792987.html" title="HTML，CSS和JavaScript的角色：核心职责" 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/174411031220217.jpg?x-oss-process=image/resize,p_40" alt="HTML，CSS和JavaScript的角色：核心职责" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796792987.html" title="HTML，CSS和JavaScript的角色：核心职责" class="phphistorical_Version2_mids_title">HTML，CSS和JavaScript的角色：核心职责</a><span class="Articlelist_txts_time">Apr 08, 2025 pm 07:05 PM</span><p class="Articlelist_txts_p">HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796791823.html" title="HTML容易为初学者学习吗？" 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/174395586298618.jpg?x-oss-process=image/resize,p_40" alt="HTML容易为初学者学习吗？" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796791823.html" title="HTML容易为初学者学习吗？" class="phphistorical_Version2_mids_title">HTML容易为初学者学习吗？</a><span class="Articlelist_txts_time">Apr 07, 2025 am 12:11 AM</span><p class="Articlelist_txts_p">HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/zh/faq/1796791144.html" title="HTML中起始标签的示例是什么？" 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/174386905283883.jpg?x-oss-process=image/resize,p_40" alt="HTML中起始标签的示例是什么？" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/zh/faq/1796791144.html" title="HTML中起始标签的示例是什么？" class="phphistorical_Version2_mids_title">HTML中起始标签的示例是什么？</a><span class="Articlelist_txts_time">Apr 06, 2025 am 12:04 AM</span><p class="Articlelist_txts_p">AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。</p></div></div><a href="https://m.php.cn/zh/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>热AI工具</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/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/zh/ai/undresserai-undress" title="Undresser.AI Undress"class="phpmain_tab2_mids_title"><h3>Undresser.AI Undress</h3></a><p>人工智能驱动的应用程序，用于创建逼真的裸体照片</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/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/zh/ai/ai-clothes-remover" title="AI Clothes Remover"class="phpmain_tab2_mids_title"><h3>AI Clothes Remover</h3></a><p>用于从照片中去除衣服的在线人工智能工具。</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/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/zh/ai/undress-ai-tool" title="Undress AI Tool"class="phpmain_tab2_mids_title"><h3>Undress AI Tool</h3></a><p>免费脱衣服图片</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/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/zh/ai/clothoffio" title="Clothoff.io"class="phpmain_tab2_mids_title"><h3>Clothoff.io</h3></a><p>AI脱衣机</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/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/zh/ai/ai-hentai-generator" title="AI Hentai Generator"class="phpmain_tab2_mids_title"><h3>AI Hentai Generator</h3></a><p>免费生成ai无尽的。</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/ai">显示更多</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>热门文章</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796780570.html" title="R.E.P.O.能量晶体解释及其做什么（黄色晶体）" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.能量晶体解释及其做什么（黄色晶体）</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 周前</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796780641.html" title="R.E.P.O.最佳图形设置" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.最佳图形设置</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 周前</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796785841.html" title="刺客信条阴影：贝壳谜语解决方案" class="phpgenera_Details_mainR4_bottom_title">刺客信条阴影：贝壳谜语解决方案</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>2 周前</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796780520.html" title="R.E.P.O.如果您听不到任何人，如何修复音频" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.如果您听不到任何人，如何修复音频</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 周前</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796779766.html" title="WWE 2K25：如何解锁Myrise中的所有内容" class="phpgenera_Details_mainR4_bottom_title">WWE 2K25：如何解锁Myrise中的所有内容</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 周前</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/article.html">显示更多</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>热工具</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/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/zh/toolset/development-tools/1575" title="DVWA" class="phpmain_tab2_mids_title"><h3>DVWA</h3></a><p>Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/1527" title="VSCode Windows 64位 下载" 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/5e2151b57e8e3927.png" src="/static/imghw/default1.png" alt="VSCode Windows 64位 下载" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/1527" title="VSCode Windows 64位 下载" class="phpmain_tab2_mids_title"><h3>VSCode Windows 64位 下载</h3></a><p>微软推出的免费、功能强大的一款IDE编辑器</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/1544" title="MinGW - 适用于 Windows 的极简 GNU" 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="" src="/static/imghw/default1.png" alt="MinGW - 适用于 Windows 的极简 GNU" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/1544" title="MinGW - 适用于 Windows 的极简 GNU" class="phpmain_tab2_mids_title"><h3>MinGW - 适用于 Windows 的极简 GNU</h3></a><p>这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/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/zh/toolset/development-tools/502" title="ZendStudio 13.5.1 Mac" class="phpmain_tab2_mids_title"><h3>ZendStudio 13.5.1 Mac</h3></a><p>功能强大的PHP集成开发环境</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/506" title="WebStorm 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/58d36e6254963493.png" src="/static/imghw/default1.png" alt="WebStorm Mac版" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/506" title="WebStorm Mac版" class="phpmain_tab2_mids_title"><h3>WebStorm Mac版</h3></a><p>好用的JavaScript开发工具</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/ai">显示更多</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>热门话题</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/gmailyxdlrkzn" title="gmail邮箱登陆入口在哪里" class="phpgenera_Details_mainR4_bottom_title">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>7488</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/zh/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">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>1377</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/faq/steamdzhmcssmgs" title="steam的账户名称是什么格式" class="phpgenera_Details_mainR4_bottom_title">steam的账户名称是什么格式</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>77</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>11</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/winactivationkeyper" title="win11激活密钥永久" class="phpgenera_Details_mainR4_bottom_title">win11激活密钥永久</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>52</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>19</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/newyorktimesdailybrief" title="NYT连接提示和答案" class="phpgenera_Details_mainR4_bottom_title">NYT连接提示和答案</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>19</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>40</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/faq/zt">显示更多</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>公益在线PHP培训，帮助PHP学习者快速成长！</p></div><div class="footermid"><a href="https://m.php.cn/zh/about/us.html">关于我们</a><a href="https://m.php.cn/zh/about/disclaimer.html">免责声明</a><a href="https://m.php.cn/zh/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>
