极客教程
基础编程
C语言
C++语言
C++ 多线程
Shell
Perl
LeetCode
C#
前端开发
HTML
Bootstrap
JavaScript 参考手册
WebSocket
Markdown
react
后端开发
数据库管理系统
SQL
MySQL
MongoDB
Redis命令
Python开发
Python
Numpy
Matplotlib
Scrapy
Pandas
PyTorch
tkinter
pygame
PyGTK
Turtle
Java开发
Java
Spring
Spring Boot
JSP
Servlet
Guava
大数据
大数据
HDFS
MapReduce
Yarn
Hive
Spark
HBase
Storm
Spark Streaming
Flink
ZooKeeper
人工智能
机器学习
深度学习
数学基础
线性代数
Tensorflow
Keras
scikit-learn
移动开发
Android
Flutter
Kotlin
图形图像
OpenCV
开发工具
VSCode
Git
Github
当前位置：
极客教程
>
HTML
>
HTML 问答
>
HTML 完整页面
</div> </div> <section class="container"> <div class="content-wrap"> <div class="content" > <header class="article-header"> <h1 class="article-title"><a href="https://geek-docs.com/html/html-ask-answer/196_html_full_page_iframe.html">HTML 完整页面 <iframe></a></h1> <!-- <hr/> <div style="width:60%;margin: auto;"><form method="get" class="site-search-form-2" action="https://zhannei.baidu.com/cse/site" target="_blank"> <input type="hidden" name="cc" value="geek-docs.com"> <input type="hidden" name="ie" value="utf8"> <input class="search-input" name="q" value="" type="text" placeholder="输入关键字" value=""> <button class="search-btn" type="submit"><i class="fa fa-search"></i></button> </form></div> --> </header> <article class="article-content"> <!-- <article class="article-content"> --> <div id="eaa_post_below_title" class="eaa-wrapper eaa_post_below_title eaa_desktop"><div class="eaa-ad " style=""><div class="wwads-cn wwads-horizontal" data-id="297" style="padding:0px !important;"></div></div></div><h1>HTML 完整页面</h1> <p><</p> <p>iframe></p> <p>在本文中，我们将介绍HTML中的一个重要标签——</p><div id="eaa_after_nth_p" class="eaa-wrapper eaa_after_nth_p eaa_desktop"><div class="eaa-ad " style=""><div class="aligncenter" style="max-width:336px;"> <ins class="adsbygoogle adsbygoogle-dis" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8722128765990495" data-ad-slot="6101954166"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div></div> <p><</p> <p>iframe>。iframe是HTML中用于在页面中嵌入其他网页或文档的标签。使用</p> <p><</p> <p>iframe>标签，我们可以在一个页面中显示其他页面的内容，同时保持页面的结构和样式不受影响。</p> <p><strong>阅读更多：<a class="wp-editor-md-post-content-link" href="https://geek-docs.com/html">HTML 教程</a></strong></p> <h2>什么是</h2> <p><</p><div id="eaa_after_nth_p_1" class="eaa-wrapper eaa_after_nth_p_1 eaa_desktop"><div class="eaa-ad " style=""><div class="inarticle2-top" style="height:350px;"> <div class="aligncenter div-process-inarticle2-3" wwadsclass="wwads-cn wwads-vertical" wwadsadid="297" style="display:none !important;max-width:336px;margin:auto;"></div> <div class="aligncenter div-process-inarticle2-2" adsenseclass="adsbygoogle process-inarticle2-2" adsenseslot="6416505003" adsenseslayoutkey="-ej+6y-29-jf+173" style="display:none !important;"></div> <div class="aligncenter" style="max-width:336px;"> <ins class="adsbygoogle process-inarticle2-1" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8722128765990495" data-ad-slot="5308655082"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div></div> <p>iframe>标签？</p> <p><</p> <p>iframe>标签（或称内联框架）是HTML中的一个标签，用于在网页中嵌入其他网页、视频、音频或文档。通过</p> <p><</p> <p>iframe>标签，我们可以将其他网页的内容显示在当前页面的指定位置，创建一个嵌套的页面结构。这种嵌套方式的最大优势是可以在一个页面中显示多个独立的网页，并且可以在子网页中进行独立的操作。</p> <h2>如何使用</h2> <p><</p><div id="eaa_after_nth_p_2" class="eaa-wrapper eaa_after_nth_p_2 eaa_desktop"><div class="eaa-ad " style=""><div class="aligncenter" style="max-width:336px;padding-bottom:10px;"> <ins class="adsbygoogle adsbygoogle-dis" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8722128765990495" data-ad-slot="6726782180"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div></div> <p>iframe>标签？</p> <p>使用</p> <p><</p> <p>iframe>标签非常简单，只需要在HTML文档的合适位置插入如下代码即可：</p> <pre data-language=HTML><code class="language-markup line-numbers"><iframe src="https://www.example.com"></iframe> </code></pre> <p>在这个例子中，我们指定了一个外部网址（https://www.example.com）作为</p> <p><</p> <p>iframe>标签的源。当浏览器加载HTML文档时，会自动加载并显示该网址的内容。除了外部网址，我们还可以指定本地HTML文件或其他在线资源（比如视频、音频等）作为源。</p> <h2> </h2> <p><</p> <p>iframe>标签的属性</p> <p><</p> <p>iframe>标签有许多可用的属性，用于定制嵌入的网页或资源的显示方式和行为。</p> <h3>src属性</h3> <p>通过src属性，我们可以指定</p> <p><</p> <p>iframe>标签要嵌入的网页或资源的源。该属性的值可以是一个URL，指向外部网址或本地文件的路径。例如：</p> <pre data-language=HTML><code class="language-markup line-numbers"><iframe src="https://www.example.com"></iframe> </code></pre> <h3>width和height属性</h3> <p>width属性和height属性可以分别指定</p> <p><</p> <p>iframe>标签显示的宽度和高度，可以使用像素（px）或百分比（%）来设置。</p> <pre data-language=HTML><code class="language-markup line-numbers"><iframe src="https://www.example.com" width="500" height="300"></iframe> </code></pre> <h3>frameborder属性</h3> <p>frameborder属性用于指定</p> <p><</p> <p>iframe>标签是否显示边框。如果值为0，则不显示边框；如果值为1，则显示边框。</p> <pre data-language=HTML><code class="language-markup line-numbers"><iframe src="https://www.example.com" frameborder="0"></iframe> </code></pre> <h3>scrolling属性</h3> <p>scrolling属性用于控制</p> <p><</p> <p>iframe>标签中的内容是否可以滚动。如果值为”auto”，则自动显示滚动条；如果值为”yes”，则始终显示滚动条；如果值为”no”，则禁用滚动条。</p> <pre data-language=HTML><code class="language-markup line-numbers"><iframe src="https://www.example.com" scrolling="auto"></iframe> </code></pre> <h3>allow属性</h3> <p>allow属性用于控制</p> <p><</p> <p>iframe>标签中的内容可以做哪些操作。该属性的值是一个逗号分隔的字符串，包含了多个操作的名称。</p> <pre data-language=HTML><code class="language-markup line-numbers"><iframe src="https://www.example.com" allow="autoplay"></iframe> </code></pre> <h2> </h2> <p><</p> <p>iframe>标签的应用示例</p> <h3>在网页中嵌入Google地图</h3> <p>我们可以使用</p> <p><</p> <p>iframe>标签将Google地图嵌入到我们的网页中，以便在网页上方便地浏览地图。</p> <pre data-language=HTML><code class="language-markup line-numbers"><!DOCTYPE <a href="https://geek-docs.com/html/html-top-tutorials/1000100_html_index.html" data-internallinksmanager029f6b8e52c="9" title="HTML 教程" target="_blank" rel="noopener">html</a>> <<a href="https://geek-docs.com/html/html-top-tutorials/1000100_html_index.html" data-internallinksmanager029f6b8e52c="9" title="HTML 教程" target="_blank" rel="noopener">html</a>> <head> <title>Google Map</title> </head> <body> <h1>My Map</h1> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2914.6983996186515!2d-0.1277583499999998!3d51.5073509!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761cbf87a1feaf%3A0x72f802d51dc3cbdb!2sBig%20Ben!5e0!3m2!1sen!2sus!4v1642732938313!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </body> </html> </code></pre> <h3>嵌入YouTube视频</h3> <p><</p> <p>iframe>标签不仅可以嵌入网页，还可以嵌入在线视频。我们可以使用</p> <p><</p> <p>iframe>标签将YouTube上的视频嵌入到网页中，方便用户在网页上观看视频。</p> <pre data-language=HTML><code class="language-markup line-numbers"><!DOCTYPE html> <html> <head> <title>My Video</title> </head> <body> <h1>My Video</h1> <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </body> </html> </code></pre> <p>在这个例子中，我们将一段YouTube视频嵌入到网页中。通过指定视频的ID（dQw4w9WgXcQ），</p> <p><</p> <p>iframe>标签会加载并显示对应的视频。</p> <h2>总结</h2> <p>在本文中，我们介绍了HTML中的</p> <p><</p> <p>iframe>标签以及如何使用它来嵌入其他网页或资源。通过</p> <p><</p> <p>iframe>标签，我们可以在一个页面中显示其他页面的内容，实现页面的嵌套和互动效果。我们还介绍了一些常用的</p> <p><</p> <p>iframe>标签属性，以及两个具体的应用示例。希望本文对于理解和使用HTML中的</p> <p><</p> <p>iframe>标签有所帮助。</p> </p><div id="eaa_post_after_content" class="eaa-wrapper eaa_post_after_content eaa_desktop"><div class="eaa-ad " style=""><div class="wwads-cn wwads-vertical" data-id="297" style="margin:auto;"></div></div></div> </article> <!-- <hr/> <div style="width:80%;margin: auto;"><form method="get" class="site-search-form-2" action="https://zhannei.baidu.com/cse/site" target="_blank"> <input type="hidden" name="cc" value="geek-docs.com"> <input type="hidden" name="ie" value="utf8"> <input class="search-input" name="q" value="" type="text" placeholder="站内搜索相关内容" value=""> <button class="search-btn" type="submit"><i class="fa fa-search"></i></button> </form></div> <hr/> --> <nav class="article-nav"> <span class="article-nav-prev" style="float:left;text-align:left">上一篇 <a href="https://geek-docs.com/html/html-ask-answer/195_html_how_can_i_strip_html_tags_from_a_string_in_aspnet.html" rel="prev">HTML 如何在ASP.NET中从字符串中去除HTML标签</a></span> <span class="article-nav-next">下一篇 <a href="https://geek-docs.com/html/html-ask-answer/216_html_what_is_the_html_for_attribute_in_label.html" rel="next">HTML “for” 属性在<label>中的作用是什么</a></span> </nav> <div style="width:100%;margin: auto;"> <form method="get" class="site-search-form-2" action="https://zhannei.baidu.com/cse/site" target="_blank"> <input type="hidden" name="cc" value="geek-docs.com"> <input type="hidden" name="ie" value="utf8"> <input class="search-input" name="q" value="" type="text" placeholder="输入关键字" value=""> <button class="search-btn" type="submit"><i class="fa fa-search"></i></button> </form> </div> <fieldset class="gra1"> <h2>Python教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/python/python-top-tutorials/1000100_python_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/python.png" alt="Python 教程" src="https://static.deepinout.com/homeicon/python.png"> <p>Python 教程</p> </div> </a> <a href="https://geek-docs.com/tkinter/tkinter-top-articles/1188100_python_gui_programming.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/tkinter.png" alt="Tkinter 教程" src="https://static.deepinout.com/homeicon/tkinter.png"> <p>Tkinter 教程</p> </div> </a> <a href="https://geek-docs.com/pandas/pandas-top-articles/1000100_python_pandas_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pandas.png" alt="Pandas 教程" src="https://static.deepinout.com/homeicon/pandas.png"> <p>Pandas 教程</p> </div> </a> <a href="https://geek-docs.com/numpy/numpy-top-tutorials/1000100_numpy_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/numpy.png" alt="NumPy 教程" src="https://static.deepinout.com/homeicon/numpy.png"> <p>NumPy 教程</p> </div> </a> <a href="https://geek-docs.com/flask/flask-top-articles/1001100_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/flask.png" alt="Flask 教程" src="https://static.deepinout.com/homeicon/flask.png"> <p>Flask 教程</p> </div> </a> <a href="https://geek-docs.com/django/django-top-articles/1000100_django_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/django.png" alt="Django 教程" src="https://static.deepinout.com/homeicon/django.png"> <p>Django 教程</p> </div> </a> <a href="https://geek-docs.com/pyspark-docs/pyspark-top-tutorials/1000100_pyspark_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pyspark.png" alt="PySpark 教程" src="https://static.deepinout.com/homeicon/pyspark.png"> <p>PySpark 教程</p> </div> </a> <a href="https://geek-docs.com/wxpyhon/wxpython-top-tutorials/1000100_wxpython_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/wxpython.png" alt="wxPython 教程" src="https://static.deepinout.com/homeicon/wxpython.png"> <p>wxPython 教程</p> </div> </a> <a href="https://geek-docs.com/sympy/sympy-top-tutorials/1000100_sympy_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/sympy.png" alt="SymPy 教程" src="https://static.deepinout.com/homeicon/sympy.png"> <p>SymPy 教程</p> </div> </a> <a href="https://geek-docs.com/seaborn/seaborn-top-tutorials/1000100_seaborn_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/seaborn.png" alt="Seaborn 教程" src="https://static.deepinout.com/homeicon/seaborn.png"> <p>Seaborn 教程</p> </div> </a> <a href="https://geek-docs.com/scipy/scipy-top-tutorials/1000100_scipy_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/scipy.png" alt="SciPy 教程" src="https://static.deepinout.com/homeicon/scipy.png"> <p>SciPy 教程</p> </div> </a> <a href="https://geek-docs.com/rxry-new/rxpy-top-tutorials/1000100_rxpy_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/rxpy.png" alt="RxPY 教程" src="https://static.deepinout.com/homeicon/rxpy.png"> <p>RxPY 教程</p> </div> </a> <a href="https://geek-docs.com/pycharm/pycharm-top-tutorials/1000100_pycharm_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pycharm.png" alt="Pycharm 教程" src="https://static.deepinout.com/homeicon/pycharm.png"> <p>Pycharm 教程</p> </div> </a> <a href="https://geek-docs.com/pygame/pygame-top-tutorials/1000100_pygame_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pygame.png" alt="Pygame 教程" src="https://static.deepinout.com/homeicon/pygame.png"> <p>Pygame 教程</p> </div> </a> <a href="https://geek-docs.com/pygtk/pygtk-top-tutorials/1000100_pygtk_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pygtk.png" alt="PyGTK 教程" src="https://static.deepinout.com/homeicon/pygtk.png"> <p>PyGTK 教程</p> </div> </a> <a href="https://geek-docs.com/pyqt/pyqt-top-tutorials/1000100_pyqt_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pyqt.png" alt="PyQt 教程" src="https://static.deepinout.com/homeicon/pyqt.png"> <p>PyQt 教程</p> </div> </a> <a href="https://geek-docs.com/pyqt5/pyqt5-top-tutorials/1000100_pyqt5_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pyqt5.png" alt="PyQt5 教程" src="https://static.deepinout.com/homeicon/pyqt5.png"> <p>PyQt5 教程</p> </div> </a> <a href="https://geek-docs.com/pytorch/pytorch-top-tutorials/1000100_pytorch_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/pytorch.png" alt="PyTorch 教程" src="https://static.deepinout.com/homeicon/pytorch.png"> <p>PyTorch 教程</p> </div> </a> <a href="https://geek-docs.com/matplotlib/matplotlib-top-tutorials/1000100_matplotlib_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/matplotlib.png" alt="Matplotlib 教程" src="https://static.deepinout.com/homeicon/matplotlib.png"> <p>Matplotlib 教程</p> </div> </a> <a href="https://geek-docs.com/web2py/web2py-top-tutorials/1000100_web2py_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/web2py.png" alt="Web2py 教程" src="https://static.deepinout.com/homeicon/web2py.png"> <p>Web2py 教程</p> </div> </a> <a href="https://geek-docs.com/beautifulsoup/beautiful-soup-top-tutorials/1000100_beautiful_soup_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/beautiful_soup.png" alt="BeautifulSoup 教程" src="https://static.deepinout.com/homeicon/beautiful_soup.png"> <p>BeautifulSoup 教程</p> </div> </a> </div> </fieldset> <fieldset class="gra1"> <h2>Java教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/java/java-top-tutorials/1001100_java_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/java.png" alt="Java 教程" src="https://static.deepinout.com/homeicon/java.png"> <p>Java 教程</p> </div> </a> </div> </fieldset> <fieldset class="gra1"> <h2>Web教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/html/html-top-tutorials/1000100_html_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/html.png" alt="HTML 教程" src="https://static.deepinout.com/homeicon/html.png"> <p>HTML 教程</p> </div> </a> <a href="https://geek-docs.com/css/css-top-articles/1000100_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/css.png" alt="CSS 教程" src="https://static.deepinout.com/homeicon/css.png"> <p>CSS 教程</p> </div> </a> <a href="https://geek-docs.com/css3/css3-top-articles/1061100_css3_tutorial.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/css3.jpg" alt="CSS3 教程" src="https://static.deepinout.com/homeicon/css3.jpg"> <p>CSS3 教程</p> </div> </a> <a href="https://geek-docs.com/jquery/jquery-top-tutorials/1001100_jquery-index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/jquery.png" alt="jQuery 教程" src="https://static.deepinout.com/homeicon/jquery.png"> <p>jQuery 教程</p> </div> </a> <a href="https://geek-docs.com/ajax/ajax-top-tutorials/1000100_ajax_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/ajax.png" alt="Ajax 教程" src="https://static.deepinout.com/homeicon/ajax.png"> <p>Ajax 教程</p> </div> </a> <a href="https://geek-docs.com/angularjs/angularjs-top-tutorials/1001100_angularjs_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/angularjs.png" alt="AngularJS 教程" src="https://static.deepinout.com/homeicon/angularjs.png"> <p>AngularJS 教程</p> </div> </a> <a href="https://geek-docs.com/typescript/typescript-top-tutorials/1000100_typescript_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/typescript.png" alt="TypeScript 教程" src="https://static.deepinout.com/homeicon/typescript.png"> <p>TypeScript 教程</p> </div> </a> <a href="https://geek-docs.com/wordpress/wordpress-top-tutorials/1001100_wordpress_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/wordpress.png" alt="WordPress 教程" src="https://static.deepinout.com/homeicon/wordpress.png"> <p>WordPress 教程</p> </div> </a> <a href="https://geek-docs.com/laravel/laravel-top-tutorials/1000100_laravel_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/laravel-home.png" alt="Laravel 教程" src="https://static.deepinout.com/homeicon/laravel-home.png"> <p>Laravel 教程</p> </div> </a> <a href="https://geek-docs.com/next-js/nextjs-top-tutorials/1000100_nextjs_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/nextjs.png" alt="Next.js 教程" src="https://static.deepinout.com/homeicon/nextjs.png"> <p>Next.js 教程</p> </div> </a> <a href="https://geek-docs.com/phantomjs/phantomjs-top-tutorials/1000100_phantomjs_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/phantomjs.png" alt="PhantomJS 教程" src="https://static.deepinout.com/homeicon/phantomjs.png"> <p>PhantomJS 教程</p> </div> </a> <a href="https://geek-docs.com/three-js/three-js-top-tutorials/1000100_threejs_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/threejs.png" alt="Three.js 教程" src="https://static.deepinout.com/homeicon/threejs.png"> <p>Three.js 教程</p> </div> </a> <a href="https://geek-docs.com/underscorejs/underscorejs-top-tutorials/1000100_underscorejs_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/underscorejs.png" alt="Underscore.JS 教程" src="https://static.deepinout.com/homeicon/underscorejs.png"> <p>Underscore.JS 教程</p> </div> </a> <a href="https://geek-docs.com/webgl/webgl-top-tutorials/1000100_webgl_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/webgl.png" alt="WebGL 教程" src="https://static.deepinout.com/homeicon/webgl.png"> <p>WebGL 教程</p> </div> </a> <a href="https://geek-docs.com/webrtc/webrtc-top-tutorials/1000100_webrtc_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/webrtc.png" alt="WebRTC 教程" src="https://static.deepinout.com/homeicon/webrtc.png"> <p>WebRTC 教程</p> </div> </a> <a href="https://geek-docs.com/vuejs/vue-js-top-tutorials/1000100_vuejs_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/vue-js-home.png" alt="VueJS 教程" src="https://static.deepinout.com/homeicon/vue-js-home.png"> <p>VueJS 教程</p> </div> </a> </div> </fieldset> <fieldset class="gra1"> <h2>数据库教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/sql/sql-top-tutorials/1000100_sql_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/sql.png" alt="SQL 教程" src="https://static.deepinout.com/homeicon/sql.png"> <p>SQL 教程</p> </div> </a> <a href="https://geek-docs.com/mysql/mysql-top-articles/1000100_mysql_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/mysql.png" alt="MySQL 教程" src="https://static.deepinout.com/homeicon/mysql.png"> <p>MySQL 教程</p> </div> </a> <a href="https://geek-docs.com/mongodb/mongodb-top-articles/1000100_mongodb_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/mongodb.png" alt="MongoDB 教程" src="https://static.deepinout.com/homeicon/mongodb.png"> <p>MongoDB 教程</p> </div> </a> <a href="https://geek-docs.com/postgresql/postgresql-top-tutorials/1000100_postgresql_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/postgresql.png" alt="PostgreSQL 教程" src="https://static.deepinout.com/homeicon/postgresql.png"> <p>PostgreSQL 教程</p> </div> </a> <a href="https://geek-docs.com/sqlite/sqlite-top-articles/1000100_sqlite_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/sqlite.png" alt="SQLite 教程" src="https://static.deepinout.com/homeicon/sqlite.png"> <p>SQLite 教程</p> </div> </a> <a href="https://geek-docs.com/redis/redis-top-tutorials/1000100_redis_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/redis.png" alt="Redis 教程" src="https://static.deepinout.com/homeicon/redis.png"> <p>Redis 教程</p> </div> </a> <a href="https://geek-docs.com/mariadb/mariadb-top-tutorials/1000100_mariadb_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/mariadb.png" alt="MariaDB 教程" src="https://static.deepinout.com/homeicon/mariadb.png"> <p>MariaDB 教程</p> </div> </a> </div> </fieldset> <fieldset class="gra1"> <h2>图形图像教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/vulkan/vulkan-tutorial/vulkan-tutorial-index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/vulkan.png" alt="Vulkan 教程" src="https://static.deepinout.com/homeicon/vulkan.png"> <p>Vulkan 教程</p> </div> </a> <a href="https://geek-docs.com/opencv/opencv-python-top-tutorials/1000100_opencv_python_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/opencv.png" alt="OpenCV 教程" src="https://static.deepinout.com/homeicon/opencv.png"> <p>OpenCV 教程</p> </div> </a> </div> </fieldset> <fieldset class="gra1"> <h2>大数据教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/r-language/r-top-tutorials/1000100_r_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/r-programming.png" alt="R语言 教程" src="https://static.deepinout.com/homeicon/r-programming.png"> <p>R语言 教程</p> </div> </a> </div> </fieldset> <fieldset class="gra1"> <h2>开发工具教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/git/git-top-articles/1000100_git_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/git.png" alt="Git 教程" src="https://static.deepinout.com/homeicon/git.png"> <p>Git 教程</p> </div> </a> <a href="https://geek-docs.com/vscode/vscode-tutorials/what-is-vscode.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/vscode.png" alt="VSCode 教程" src="https://static.deepinout.com/homeicon/vscode.png"> <p>VSCode 教程</p> </div> </a> <a href="https://geek-docs.com/docker/docker-top-tutorials/1000100_docker_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/docker.png" alt="Docker 教程" src="https://static.deepinout.com/homeicon/docker.png"> <p>Docker 教程</p> </div> </a> <a href="https://geek-docs.com/gerrit/gerrit-top-tutorials/1000100_gerrit_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/gerrit.png" alt="Gerrit 教程" src="https://static.deepinout.com/homeicon/gerrit.png"> <p>Gerrit 教程</p> </div> </a> <a href="https://geek-docs.com/excel/excel-top-tutorials/1001100_excel_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/excel.png" alt="Excel 教程" src="https://static.deepinout.com/homeicon/excel.png"> <p>Excel 教程</p> </div> </a> </div> </fieldset> <fieldset class="gra1"> <h2>计算机教程</h2> <div class="firsthomecontent"> <a href="https://geek-docs.com/go-tutorials/go-top-tutorials/1000100_go_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/go.png" alt="Go语言 教程" src="https://static.deepinout.com/homeicon/go.png"> <p>Go语言 教程</p> </div> </a> <a href="https://geek-docs.com/cpp/cpp-top-tutorials/1000100_cpp_index.html"> <div class="homecontent"> <img data-src="https://static.deepinout.com/homeicon/cpp.png" alt="C++ 教程" src="https://static.deepinout.com/homeicon/cpp.png"> <p>C++ 教程</p> </div> </a> </div> </fieldset> </div> </div> <!--show_category end_time_1 consume time:0.058978080749512--><div class="tblside"><div class="tblside-roll"><h3>HTML 精品教程</h3><ul><li class="active"><a href="https://geek-docs.com/html/html-top-tutorials/1000100_html_index.html">HTML 教程</a></li><li><a href="https://geek-docs.com/html/html-top-tutorials/1001100_html_overview.html">HTML 概述</a></li><li><a href="https://geek-docs.com/html/html-top-tutorials/1002100_html_basic_tags.html">HTML 基本标签</a></li><li><a href="https://geek-docs.com/html/html-top-tutorials/1003100_html_elements.html">HTML 元素</a></li></ul></div><div id="left_wwads_holder"></div> <div class="widget_block"> <div class="div-process-left-4" adsenseclass="adsbygoogle process-left-4" adsenseslot="3857698731" style="display:none !important;margin-top:5px;"></div> <div class="div-process-left-3" adsenseclass="adsbygoogle process-left-3" adsenseslot="2954182773" style="display:none !important;margin-top:5px;"></div> <div class="div-process-left-2" adsenseclass="adsbygoogle process-left-2" adsenseslot="9668802962" style="display:none !important;margin-top:5px;"></div> <ins class="adsbygoogle process-left-1" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8722128765990495" data-ad-slot="4126353785"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div><!--show_category consume time:0.061753034591675--><div class="tbrside"> <nav> <div style="max-width:300px;"> <div> <ins class="adsbygoogle adsbygoogle-dis" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8722128765990495" data-ad-slot="3228358949"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="geekdocs-fixed"> <!-- <div class="_152eyzvinns"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6947627", container: "_152eyzvinns", async: true }); </script> --> <!-- <div style="margin: 0 0 15px 0;background: url(https://www.krseo.com/zb_users/upload/2022/10/20221013123834166563591450322.jpg) no-repeat center center;text-align: center;background-color: #eff0f4;"> --> <div class="div-process-right-5" bdclass="_28z1vj78az8" bdadid="u6947667" style="display:none !important;margin-top:5px;"></div> <div class="div-process-right-4" adsenseclass="adsbygoogle process-right-4" adsenseslot="5392153555" style="display:none !important;margin-top:5px;"></div> <div class="div-process-right-3" adsenseclass="adsbygoogle process-right-3" adsenseslot="7809981339" style="display:none !important;margin-top:5px;"></div> <div class="div-process-right-2" adsenseclass="adsbygoogle process-right-2" adsenseslot="4741305492" style="display:none !important;margin-top:5px;"></div> <ins class="adsbygoogle process-right-1" style="display:block;margin-top:5px;" data-ad-client="ca-pub-8722128765990495" data-ad-slot="7754481643" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <!-- </div> --> </div> </div> </nav> </div> </section> <footer class="footer"> <div class="container"> <p>© 2025 <a href="https://geek-docs.com">极客教程</a> 备案号：<a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/">蜀ICP备11026280号-10</a> <hr/> 友情链接：<a target="_blank" href="https://deepinout.com/" title="极客笔记">极客笔记</a></p> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?1f65400c3a6ea154f17483ea6dc82612"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </footer> <div class="rollbar rollbar-rb"><ul><li class="rollbar-totop"><a href="javascript:(jsui.scrollTo());"><i class="fa fa-angle-up"></i><span>回顶</span></a><h6>回顶部<i></i></h6></li></ul></div> <script> window.jsui={ www: 'https://geek-docs.com', uri: 'https://geek-docs.com/wp-content/themes/dux', ver: '6.2', roll: ["1","2","3"], ajaxpager: '50', url_rp: 'https://geek-docs.com/' }; </script> <!--FOOTER_CODE_START--> <script> var artfold = $(".article-content-fold"); if (artfold.length && artfold.css("max-height")) { var max = artfold.height(); var url = window.location.href; artfold.append('<div class="-fold"><span etap="article-fold">阅读余下全文</span></div>'), $('[etap="article-fold"]') .on("click", (function() { $(this).parent().remove(), artfold.removeClass("article-content-fold").css("max-height", "") })) } </script> <script type="text/javascript" src="https://static.deepinout.com/deepinout/static/adsalternative.min.js?v=1.0.1" async="async" defer="defer"></script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script> <script type="text/javascript" src="https://static.deepinout.com/deepinout/static/geekdocs-pcweb-ads.min.v9.0.0.js" async="async" defer="defer"></script> <!--FOOTER_CODE_END--> <script type='text/javascript' src='https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js?ver=10.2.1' id='jQuery-CDN-js'></script> <script type='text/javascript' src='https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/KaTeX/0.15.2/katex.min.js?ver=10.2.1' id='Katex-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/ClipBoard/clipboard.min.js?ver=2.0.1' id='copy-clipboard-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/Prism.js/components/prism-core.min.js?ver=1.15.0' id='prism-core-js-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/Prism.js/plugins/autoloader/prism-autoloader.min.js?ver=1.15.0' id='prism-plugin-autoloader-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/Prism.js/plugins/toolbar/prism-toolbar.min.js?ver=1.15.0' id='prism-plugin-toolbar-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/Prism.js/plugins/line-numbers/prism-line-numbers.min.js?ver=1.15.0' id='prism-plugin-line-numbers-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/Prism.js/plugins/show-language/prism-show-language.min.js?ver=1.15.0' id='prism-plugin-show-language-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/Prism.js/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js?ver=1.15.0' id='prism-plugin-copy-to-clipboard-js'></script> <script type='text/javascript' id='Front_Style-js-extra'> /* <![CDATA[ */ var FrontStyle = {"openLinkInNewTab":"on"}; /* ]]> */ </script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/wp-editormd/assets/FrontStyle/frontstyle.min.js?ver=10.2.1' id='Front_Style-js'></script> <script type='text/javascript' src='//apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js?ver=6.2' id='bootstrap-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-content/themes/dux/js/loader.js?ver=6.2' id='_loader-js'></script> <script type='text/javascript' id='q2w3_fixed_widget-js-extra'> /* <![CDATA[ */ var q2w3_sidebar_options = [{"sidebar":"q2w3-default-sidebar","use_sticky_position":false,"margin_top":0,"margin_bottom":0,"stop_elements_selectors":".gogogo","screen_max_width":0,"screen_max_height":0,"widgets":[".geekdocs-fixed",".widget_block"]},{"sidebar":"single","use_sticky_position":false,"margin_top":0,"margin_bottom":0,"stop_elements_selectors":".gogogo","screen_max_width":0,"screen_max_height":0,"widgets":["#fixedtoc-2"]}]; /* ]]> */ </script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/q2w3-fixed-widget/js/frontend.min.js?ver=6.1.0' id='q2w3_fixed_widget-js'></script> <script type='text/javascript' src='https://geek-docs.com/wp-includes/js/hoverIntent.min.js?ver=1.10.2' id='hoverIntent-js'></script> <script type='text/javascript' id='megamenu-js-extra'> /* <![CDATA[ */ var megamenu = {"timeout":"300","interval":"100"}; /* ]]> */ </script> <script type='text/javascript' src='https://geek-docs.com/wp-content/plugins/megamenu/js/maxmegamenu.js?ver=2.9.7' id='megamenu-js'></script> <script type="text/javascript"> (function ($) { $(document).ready(function () { $(".katex.math.inline").each(function () { var parent = $(this).parent()[0]; if (parent.localName !== "code") { var texTxt = $(this).text(); var el = $(this).get(0); try { katex.render(texTxt, el); } catch (err) { $(this).html("<span class=\"err\">" + err); } } else { $(this).parent().text($(this).parent().text()); } }); $(".katex.math.multi-line").each(function () { var texTxt = $(this).text(); var el = $(this).get(0); try { katex.render(texTxt, el, {displayMode: true}) } catch (err) { $(this).html("<span class=\"err\">" + err) } }); }) })(jQuery); </script> <script type="text/javascript"> Prism.plugins.autoloader.languages_path = "https://geek-docs.com/wp-content/plugins/wp-editormd/assets/Prism.js/components/"; </script> <script> (function($){ var cc = $(".tbcmdocside .-inner") var cc2 = $(".tbcmdocside .-inner2") var inner2_height = cc2.height() + 10; var inner_height = cc.height() + 50; if( !cc.length ){ return } var ot = $(".content").offset().top var top_cc2 = cc2.offset().top cc2.css("top", ot + inner_height) cc.css("top", ot) cc.animate({ scrollTop: $(".tbcmdocside a.-on").offset().top-300 }, 0) $(window).scroll(function() { ot = $(".content").offset().top var tt = $(document).scrollTop() var yt = 0 if( tt<=top_cc2 ){ yt = top_cc2-tt+ot } var yt2 = 0 if( tt<=ot ){ yt2 = ot-tt } cc2.css("top", yt2 + inner_height) cc.css("top", yt2) }) $(".tbcmdocside dt").on("click", function(){ $(this).parent().toggleClass("-on") }) $(".tbcmdocside .-search input").on("input", function(){ var word = $.trim($(this).val()) if( word ){ $(".tbcmdocside dt, .tbcmdocside dd a").hide() $(".tbcmdocside dd a:contains("+word+")").show() }else{ $(".tbcmdocside dt, .tbcmdocside dd a").show() } }) })(jQuery) </script></body> </html> <!-- Dynamic page generated in 1.068 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2025-06-09 21:39:49 --> <!-- Super Cache dynamic page detected but late init not set. See the readme.txt for further details. --> <!-- Dynamic Super Cache --> <!-- Compression = gzip -->
极客教程