Home > Web Front-end > HTML Tutorial > HTML 30-minute introductory tutorial

HTML 30-minute introductory tutorial

云罗郡主
Release: 2019-01-25 11:27:13
Original
4315 people have browsed it

30分钟内让你明白HTML是什么,并对它有一些基本的了解。一旦入门后,你可以从网上找到更多更详细的资料来继续学习。

什么是HTML

【推荐教程:HTML教程

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比“文本”更丰富的意义,比如图片,表格,链接等。浏览器(IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。

HTML是什么样的

简单地来说,HTML的语法就是给文本加上表明文本含义的标签(Tag),让用户(人或程序)能对文本得到更好的理解。

下面是一个最简单的HTML文档:

<html>
  <head>
    <title>第一个Html文档</title>
  </head>
  <body>
    欢迎访问<a href="http://deerchao.net">deerchao的个人网页</a>!
  </body>
</html>
Copy after login

所有的HTML文档都应该有一个标签,标签可以包含两个部分:和。

标签用于包含整个文档的一般信息,比如文档的标题(标签用于包含标题),对整个文档的描述,文档的关键字等等。文档的具体内容就要放在<body>标签里了。</p><p><a>标签用于表示链接,在浏览器(如IE,Firefox等)中查看HTML文档时,点击<a>标签括起来的内容时,通常会跳转到另一个页面。这个要跳转到的页面的地址由<a>标签的href属性指定。上面的<a href="http://deerchao.net">中,href属性的值就是http://deerchao.net。</p><p>HTML文档可以包含的内容</p><p>通过不同的标签,HTML文档可以包含不同的内容,比如文本,链接,图片,列表,表格,表单,框架等。</p><p>文本</p><p>HTML对文本的支持是最丰富的,你可以设置不同级别的标题,分段和换行,可以指定文本的语义和外观,可以说明文本是引用自其它的地方,等等等等。</p><p>链接</p><p>链接用来指出内容与另一个页面或当前页面某个地方有关。</p><p>图片</p><p>图片用于使页面更加美观,或提供更多的信息。</p><p>列表</p><p>列表用于说明一系列条目是彼此相关的。</p><p>表格</p><p>表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。</p><p>表单</p><p>表单通常由文本输入框,按钮,多选框,单选框,下拉列表等组成,使HTML页面更有交互性。</p><p>框架</p><p>框架使页面里能包含其它的页面。</p><p>HTML文档格式详细说明</p><p>前面介绍了HTML文档的基本格式,下面再做一个详细说明。</p><p>HTML文档可以用任何文本编辑器(比如记事本,UltraEdit等)创建,编辑,因为它的内容在本质也只是一些文本。</p><p>在HTML文本中,用尖括号括起来的部分称为标签。如果想在正文里使用尖括号(或者大与号小与号,总之是同一个东西),必须使用字符转义,也就是说转换字符的原有意义。<应该使用<代替,>则使用>,至于&符号本身,则应该使用&替代(不得不说的是有很多HTML文档没有遵循这个规则,常用的浏览器也都能够分析出&到底是一个转义的开始,还是一个符号,但是这样做是不推荐的)。</p><p>标签本质上是对它所包含的内容的说明,可能会有属性,来给出更多的信息。比如<img>(图片)标签有src属性(用于指明图片的地址),width和height属性(用于说明图片的宽度和高度)。HTML里能使用哪些标签,这些标签分别可以拥有哪些属性,这些都是有规定的,知道了这里说的基本知识之后,学习HTML其实也就是学习这些标签了。本文后面会对常用的HTML标签做出简短的介绍。</p><p>标签通常有开始部分和结束部分(也被称为开始标签和结束标签),它们一起限定了这个标签所包含的内容。属性只能在开始标签中指定,属性值可以用单引号或双引号括起来。结束标签都以/加上标签名来表示。有时候,有些标签并不包含其它内容(只包括自己的属性,甚至连属性都没有),这种情况下,可以写成类似这样:<img src="logo.gif" />。注意最后的一个空格和一个反斜杠,它说明这个标签已经结束,不需要单独的结束标签了。</p><p>某些标签包含的内容中还可以有新的标签,新的标签名甚至可能还可以与包含它的标签的名称相同(哪些标签可以包含标签,可以包含哪些标签也是有规定的)。比如:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div> <div>分类目录…</div> <div>当前分类内容列表…</div> </div></pre><div class="contentsignin">Copy after login</div></div><p>在这种情况下,最后出现的标签应该最先结束。</p><p>HTML文档里所有的空白符(空格,Tab,换行,回车)会被浏览器忽略,唯一的例外是空格,对空格的处理方式是所有连续的空格被当成一个空格,不管有一个,还是两个,还是100个。之所以有这样的规则是因为忽略空白符能让使用HTML的作者以他觉得最方便的格式来排列内容,比如可以在每个标签开始后增加缩进,标签结束后减少缩进。由于英语文本中空格用得很普遍(用于分隔单词),所以对空格做了这样的特殊处理。如果要显示连续的空格(比如为了缩进),应该用 来代表空格。</p><p>常用标签介绍</p><p>文本</p><p>最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><font size="6">6</font> <font size="4">4</font> <font color="red" size="5">红色的5</font> <font face="黑体">黑体的字</font></pre><div class="contentsignin">Copy after login</div></div><p>加粗,下划线,斜体字也是常用的文字效果,它们分别用<b>,<u>,<i>表示:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><b>Bold</b> <i>italic</i> <u>underline</u></pre><div class="contentsignin">Copy after login</div></div><p>还有一些标签,用来指出包含的文本有特殊的意义,比如<abbr>(表示缩写),<em>(表示强调),<strong>(表示更强地强调),<cite>(表示引用),<address>(表示地址)等等。这些标签不是为了定义显示效果而存在的,所以从浏览器里看它们可能没有任何效果,也可能不同的浏览器对这些标签的显示效果完全不同。</p><p>一篇很长的文章,如果有合适的小标题的话,就可以快速地对它的内容进行大致的了解。在HTML里,用来表示标题的标签有:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,它们分别表示一级标题,二级标题,三级标题...</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><h1>HTML 30分钟教程</h1> <h2>什么是HTML</h2> ... <h2>HTML是什么样的</h2> ...</pre><div class="contentsignin">Copy after login</div></div><p style="color: rgb(0, 0, 0); font-family: Simsun; white-space: normal;">图片</p><p><hr>标签用于在页面上添加横线。可以通过指定width和color属性来控制横线的长度和颜色。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><hr width="90%" color="red" /></pre><div class="contentsignin">Copy after login</div></div><p><img>标签用于在页面上添加图片,src属性指定图片的地址,如果无法打开src指定的图片,浏览器通常会在页面上需要显示图片的地方显示alt属性定义的文本。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><img src="http://www.xx.com/Icons/valid-xhtml10" alt="图片简介" /></pre><div class="contentsignin">Copy after login</div></div><p>链接</p><p>超级链接用<a>标签表示,href属性指定了链接到的地址。<a>标签可以包含文本,也可以包含图片。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><a href="http://deerchao.net">deerchao的个人网站</a> <a href="http://validator.w3.org"><img src="http://www.xx.com/Icons/valid-xhtml10" alt="验证HTML" /></a></pre><div class="contentsignin">Copy after login</div></div><p>分段与换行</p><p>由于HTML文档会忽略空白符,所以要想保证正常的分段换行的话,必须指出哪些文字是属于同一段落的,这就用到了标签<p>。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><p>这是第一段。</p> <p>这是第二段。</p></pre><div class="contentsignin">Copy after login</div></div><p>也有人不用<p>,而用<br>。<br>只表示换行,不表示段落的开始或结束,所以通常没有结束标签。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">这是第一段。<br> 这是第二段。<br /> 这是第三段。</pre><div class="contentsignin">Copy after login</div></div><p>有时,要把文档看作不同的部分组合起来的,比如一个典型的页面可能包括三个部分:页头,主体,页脚。<div>标签专门用于标明不同的部分:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><div>页头内容</div> <div>主体内容</div> <div>页脚内容</div></pre><div class="contentsignin">Copy after login</div></div><p>表格</p><p>HTML文档在浏览器里通常是从左到右,从上到下地显示的,到了窗口右边就自动换行。为了实现分栏的效果,很多人使用表格(<table>)进行页面排版(虽然HTML里提供表格的本意不是为了排版)。</p><p><table>标签里通常会包含几个<tr>标签,<tr>代表表格里的一行。<tr>标签又会包含<td>标签,每个<td>代表一个单元格。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><table> <tr> <td>2000</td><td>悉尼</td> </tr> <tr> <td>2004</td><td>雅典</td> </tr> <tr> <td>2008</td><td>北京</td> </tr> </table></pre><div class="contentsignin">Copy after login</div></div><p><tr>标签还可以被<table>里的<thead>或<tbody>或<tfoot>包含。它们分别代表表头,表正文,表脚。在打印网页的时候,如果表格很大,一页打印不完,<thead>和<tfoot>将在每一页出现。</p><p><th>和<td>非常相似,也用在<tr>里边,不同的是<th>代表这个单元格是它所在的行或列的标题。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><table> <thead> <tr><th>时间</th><th>地点</th></tr> </thead> <tbody> <tr><td>2000</td><td>悉尼</td></tr> <tr><td>2004</td><td>雅典</td></tr> <tr><td>2000</td><td>北京</td></tr> </tbody> </table></pre><div class="contentsignin">Copy after login</div></div><p>列表</p><p>表格用于表示二维数据(行,列),一维数据则用列表表示。列表可以分为无序列表(<ul>),有序列表(<ol>)和定义列表(<dl>)。前两种列表更常见一些,都用<li>标签包含列表项目。</p><p>无序列表表示一系列类似的项目,它们之间没有先后顺序。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><ul> <li>苹果</li> <li>桔子</li> <li>桃</li> </ul></pre><div class="contentsignin">Copy after login</div></div><p>有序列表中各个项目间的顺序是很重要的,浏览器通常会自动给它们产生编号。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><ol> <li>打开冰箱门</li> <li>把大象赶进去</li> <li>关上冰箱门</li> </ol></pre><div class="contentsignin">Copy after login</div></div><p>框架</p> <p>最后谈一下框架,曾经非常流行的技术,框架使一个窗口里能同时显示多个文档。主框架页里面没有<body>标签,取代它的是<frameset>。</p> <p><frameset>The attributes Rows and Cols of the tag are used to specify how many rows (columns) there are in the frameset (frameset), and the height (width) of each row (column). </p> <p>The<frameset> tag can contain the <frame> tag, and each <frame> tag represents a document (the src attribute specifies the address of the document). </p> <p>If you feel that such a page is not complicated enough, you can also include the <frameset> tag in the <frameset> tag. </p> <p><br></p> <p><br></p><p>The above is the detailed content of HTML 30-minute introductory tutorial. For more information, please follow other related articles on the PHP Chinese website!</p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>Related labels:</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="https://www.php.cn/search?word=htmltutorial" target="_blank">html tutorial</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">source:deerchao.net</div> </div> <div class="wzconOtherwz"> <a href="https://www.php.cn/faq/414640.html" title="Click the question mark on the HTML page and a prompt box will appear (source code attached)"> <span>Previous article:Click the question mark on the HTML page and a prompt box will appear (source code attached)</span> </a> <a href="https://www.php.cn/faq/414775.html" title="What is the difference between frontend and backend"> <span>Next article:What is the difference between frontend and backend</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">Statement of this Website</div> <div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzconZzwz"> <div class="wzconZzwztitle">Latest Articles by Author</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/416271.html">How to wrap matlab</a> </div> <div>2019-03-18 13:10:19</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/416190.html">How to restore after undoing ctrl z</a> </div> <div>2020-09-09 15:58:10</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/416132.html">The principle and solution of Chinese garbled characters in sublimetext3</a> </div> <div>2019-03-13 14:47:24</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/416092.html">How much does java training tuition cost?</a> </div> <div>2023-05-18 06:57:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/416081.html">What is the official name of html?</a> </div> <div>2021-02-20 17:16:47</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/416075.html">Which sublime Pycharm is better? How to choose</a> </div> <div>2019-03-12 15:27:13</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/416071.html">How to run html code in sublime? What is the shortcut key for running sublime?</a> </div> <div>2019-03-12 14:15:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/416041.html">What does the attribute of area mean?</a> </div> <div>2019-03-11 16:05:59</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/416040.html">What are the main functions of ae software</a> </div> <div>2019-03-13 13:16:29</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/faq/416036.html">How many pixels is 1280*720?</a> </div> <div>2020-09-08 09:22:42</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Latest Issues</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/wenda/176133.html" target="_blank" title="I'm building three pages using React, each page has its own css file and there is only one css file for each page" class="wdcdcTitle">I'm building three pages using React, each page has its own css file and there is only one css file for each page</a> <a href="https://www.php.cn/wenda/176133.html" class="wdcdcCons">I'm working on these three pages: App.js has two buttons, when you click the first button ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-04 10:07:16</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>394</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/wenda/176108.html" target="_blank" title="Let React render the closing tag of the input?" class="wdcdcTitle">Let React render the closing tag of the input?</a> <a href="https://www.php.cn/wenda/176108.html" class="wdcdcCons">I have an unusual request. My website is built using React and I want people to be able to...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-03 23:01:01</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>320</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/wenda/176095.html" target="_blank" title="Content overflow in window prevents scrolling and hides new content" class="wdcdcTitle">Content overflow in window prevents scrolling and hides new content</a> <a href="https://www.php.cn/wenda/176095.html" class="wdcdcCons">I'm currently building a roulette system program (this is more to stop me from placing bet...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-03 21:24:55</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>285</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/wenda/176078.html" target="_blank" title="Looking for an efficient way to handle a large number of repeated If statement checks" class="wdcdcTitle">Looking for an efficient way to handle a large number of repeated If statement checks</a> <a href="https://www.php.cn/wenda/176078.html" class="wdcdcCons">When I'm trying to create a search tool for a database I created for my undergraduate thes...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-03 19:20:08</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>297</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/wenda/176024.html" target="_blank" title="JQuery - On-the-fly calculations/conversions in dynamic tables" class="wdcdcTitle">JQuery - On-the-fly calculations/conversions in dynamic tables</a> <a href="https://www.php.cn/wenda/176024.html" class="wdcdcCons">I do have a dynamic HTML table (rows can be added) and I "just" want to read the...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-03 12:38:26</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>393</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>Related Topics</div> <a href="https://www.php.cn/faq/zt" target="_blank">More> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/win8dnwjkjmmj"><img src="https://img.php.cn/upload/subject/202407/22/2024072212204620517.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to solve the problem of forgetting the power-on password of Windows 8 computer" /> </a> <a target="_blank" href="https://www.php.cn/faq/win8dnwjkjmmj" class="title-a-spanl" title="How to solve the problem of forgetting the power-on password of Windows 8 computer"><span>How to solve the problem of forgetting the power-on password of Windows 8 computer</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/pythonkzmy"><img src="https://img.php.cn/upload/subject/202407/22/2024072213491224239.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to use python library" /> </a> <a target="_blank" href="https://www.php.cn/faq/pythonkzmy" class="title-a-spanl" title="How to use python library"><span>How to use python library</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/pythonkjdjbjs"><img src="https://img.php.cn/upload/subject/202407/22/2024072212160432730.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Introduction to the levels of Python exams" /> </a> <a target="_blank" href="https://www.php.cn/faq/pythonkjdjbjs" class="title-a-spanl" title="Introduction to the levels of Python exams"><span>Introduction to the levels of Python exams</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/werfaultexe"><img src="https://img.php.cn/upload/subject/202407/22/2024072213371791931.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to solve the WerFault.exe application error" /> </a> <a target="_blank" href="https://www.php.cn/faq/werfaultexe" class="title-a-spanl" title="How to solve the WerFault.exe application error"><span>How to solve the WerFault.exe application error</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/win10lykgbjl"><img src="https://img.php.cn/upload/subject/202407/22/2024072214193452896.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What to do if the Bluetooth switch is missing in Windows 10" /> </a> <a target="_blank" href="https://www.php.cn/faq/win10lykgbjl" class="title-a-spanl" title="What to do if the Bluetooth switch is missing in Windows 10"><span>What to do if the Bluetooth switch is missing in Windows 10</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/insertbefore"><img src="https://img.php.cn/upload/subject/202407/22/2024072213415994267.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The difference between insertbefore and before" /> </a> <a target="_blank" href="https://www.php.cn/faq/insertbefore" class="title-a-spanl" title="The difference between insertbefore and before"><span>The difference between insertbefore and before</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/xp"><img src="https://img.php.cn/upload/subject/202407/22/2024072214423333601.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="chip" /> </a> <a target="_blank" href="https://www.php.cn/faq/xp" class="title-a-spanl" title="chip"><span>chip</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/dedecmsbq"><img src="https://img.php.cn/upload/subject/202407/22/2024072214104577986.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="common tags for dedecms" /> </a> <a target="_blank" href="https://www.php.cn/faq/dedecmsbq" class="title-a-spanl" title="common tags for dedecms"><span>common tags for dedecms</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzrOne"> <div class="wzroTitle">Popular Recommendations</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What does url mean?" href="https://www.php.cn/faq/418772.html">What does url mean?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What does DOM mean?" href="https://www.php.cn/faq/414303.html">What does DOM mean?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to change image size" href="https://www.php.cn/faq/414252.html">How to change image size</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to make font bold in HTML" href="https://www.php.cn/faq/414520.html">How to make font bold in HTML</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to set the size of html images" href="https://www.php.cn/faq/475145.html">How to set the size of html images</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>Popular Tutorials</div> <a target="_blank" href="https://www.php.cn/course.html">More> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Related Tutorials <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Popular Recommendations<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Latest courses<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="https://www.php.cn/course/12.html" title="HTML+CSS basic introductory tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de8ca1761701.png" alt="HTML+CSS basic introductory tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="HTML+CSS basic introductory tutorial" href="https://www.php.cn/course/12.html">HTML+CSS basic introductory tutorial</a> <div class="wzrthreerb"> <div>527551 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="12"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/14.html" title="HTML5 tutorial from entry to proficiency" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/61c2f7c8ad888802.jpg" alt="HTML5 tutorial from entry to proficiency"/> </a> <div class="wzrthree-right"> <a target="_blank" title="HTML5 tutorial from entry to proficiency" href="https://www.php.cn/course/14.html">HTML5 tutorial from entry to proficiency</a> <div class="wzrthreerb"> <div>120800 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="14"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/34.html" title="HTML5 full manual" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/625513fe49d59952.png" alt="HTML5 full manual"/> </a> <div class="wzrthree-right"> <a target="_blank" title="HTML5 full manual" href="https://www.php.cn/course/34.html">HTML5 full manual</a> <div class="wzrthreerb"> <div>141600 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="34"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="https://www.php.cn/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a> <div class="wzrthreerb"> <div >1426530 times of learning</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA Beginner's Video Tutorial" href="https://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div >2565833 times of learning</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="https://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div >509148 times of learning</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/901.html" title="Quick introduction to web front-end development" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Quick introduction to web front-end development"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Quick introduction to web front-end development" href="https://www.php.cn/course/901.html">Quick introduction to web front-end development</a> <div class="wzrthreerb"> <div >216159 times of learning</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/234.html" title="Master PS video tutorials from scratch" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Master PS video tutorials from scratch"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Master PS video tutorials from scratch" href="https://www.php.cn/course/234.html">Master PS video tutorials from scratch</a> <div class="wzrthreerb"> <div >897012 times of learning</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/course/1648.html" title="[Web front-end] Node.js quick start" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Node.js quick start"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web front-end] Node.js quick start" href="https://www.php.cn/course/1648.html">[Web front-end] Node.js quick start</a> <div class="wzrthreerb"> <div >8042 times of learning</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/1647.html" title="Complete collection of foreign web development full-stack courses" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Complete collection of foreign web development full-stack courses"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Complete collection of foreign web development full-stack courses" href="https://www.php.cn/course/1647.html">Complete collection of foreign web development full-stack courses</a> <div class="wzrthreerb"> <div >6383 times of learning</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/1646.html" title="Go language practical GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go language practical GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go language practical GraphQL" href="https://www.php.cn/course/1646.html">Go language practical GraphQL</a> <div class="wzrthreerb"> <div >5289 times of learning</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/1645.html" title="550W fan master learns JavaScript from scratch step by step" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W fan master learns JavaScript from scratch step by step"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W fan master learns JavaScript from scratch step by step" href="https://www.php.cn/course/1645.html">550W fan master learns JavaScript from scratch step by step</a> <div class="wzrthreerb"> <div >729 times of learning</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/course/1644.html" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" href="https://www.php.cn/course/1644.html">Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours</a> <div class="wzrthreerb"> <div >26669 times of learning</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项,自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>Latest Downloads</div> <a href="https://www.php.cn/xiazai">More> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">Web Effects <div></div></div> <div class="swiper-slide" data-id="twof">Website Source Code<div></div></div> <div class="swiper-slide" data-id="threef">Website Materials<div></div></div> <div class="swiper-slide" data-id="fourf">Front End Template<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery enterprise message form contact code" href="https://www.php.cn/toolset/js-special-effects/8071">[form button] jQuery enterprise message form contact code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 music box playback effects" href="https://www.php.cn/toolset/js-special-effects/8070">[Player special effects] HTML5 MP3 music box playback effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 cool particle animation navigation menu special effects" href="https://www.php.cn/toolset/js-special-effects/8069">[Menu navigation] HTML5 cool particle animation navigation menu special effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery visual form drag and drop editing code" href="https://www.php.cn/toolset/js-special-effects/8068">[form button] jQuery visual form drag and drop editing code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS imitation Kugou music player code" href="https://www.php.cn/toolset/js-special-effects/8067">[Player special effects] VUE.JS imitation Kugou music player code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Classic html5 pushing box game" href="https://www.php.cn/toolset/js-special-effects/8066">[html5 special effects] Classic html5 pushing box game</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery scrolling to add or reduce image effects" href="https://www.php.cn/toolset/js-special-effects/8065">[Picture special effects] jQuery scrolling to add or reduce image effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 personal album cover hover zoom effect" href="https://www.php.cn/toolset/js-special-effects/8064">[Photo album effects] CSS3 personal album cover hover zoom effect</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8328" title="Home Decor Cleaning and Repair Service Company Website Template" target="_blank">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8327" title="Fresh color personal resume guide page template" target="_blank">[Front-end template] Fresh color personal resume guide page template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8326" title="Designer Creative Job Resume Web Template" target="_blank">[Front-end template] Designer Creative Job Resume Web Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8325" title="Modern engineering construction company website template" target="_blank">[Front-end template] Modern engineering construction company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8324" title="Responsive HTML5 template for educational service institutions" target="_blank">[Front-end template] Responsive HTML5 template for educational service institutions</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8323" title="Online e-book store mall website template" target="_blank">[Front-end template] Online e-book store mall website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8322" title="IT technology solves Internet company website template" target="_blank">[Front-end template] IT technology solves Internet company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8321" title="Purple style foreign exchange trading service website template" target="_blank">[Front-end template] Purple style foreign exchange trading service website template</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3078" target="_blank" title="Cute summer elements vector material (EPS PNG)">[PNG material] Cute summer elements vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3077" target="_blank" title="Four red 2023 graduation badges vector material (AI EPS PNG)">[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3076" target="_blank" title="Singing bird and cart filled with flowers design spring banner vector material (AI EPS)">[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3075" target="_blank" title="Golden graduation cap vector material (EPS PNG)">[PNG material] Golden graduation cap vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3074" target="_blank" title="Black and white style mountain icon vector material (EPS PNG)">[PNG material] Black and white style mountain icon vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3073" target="_blank" title="Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses">[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3072" target="_blank" title="Flat style Arbor Day banner vector material (AI+EPS)">[banner picture] Flat style Arbor Day banner vector material (AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-materials/3071" target="_blank" title="Nine comic-style exploding chat bubbles vector material (EPS+PNG)">[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8328" target="_blank" title="Home Decor Cleaning and Repair Service Company Website Template">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8327" target="_blank" title="Fresh color personal resume guide page template">[Front-end template] Fresh color personal resume guide page template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8326" target="_blank" title="Designer Creative Job Resume Web Template">[Front-end template] Designer Creative Job Resume Web Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8325" target="_blank" title="Modern engineering construction company website template">[Front-end template] Modern engineering construction company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8324" target="_blank" title="Responsive HTML5 template for educational service institutions">[Front-end template] Responsive HTML5 template for educational service institutions</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8323" target="_blank" title="Online e-book store mall website template">[Front-end template] Online e-book store mall website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8322" target="_blank" title="IT technology solves Internet company website template">[Front-end template] IT technology solves Internet company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/toolset/website-source-code/8321" target="_blank" title="Purple style foreign exchange trading service website template">[Front-end template] Purple style foreign exchange trading service website template</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项,自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Public welfare online PHP training,Help PHP learners grow quickly!</p> </div> <div class="footermid"> <a href="https://www.php.cn/about/us.html">About us</a> <a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a> <a href="https://www.php.cn/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1735937710"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <!-- Matomo --> <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> <!-- End Matomo Code --> </body> </html>