Web Note

简介

  • 简介

HTML

  • 基础
  • HTML 属性
  • HTML 标题
  • HTML 段落
  • HTML 样式
  • HTML 文本格式化
  • HTML 引用
  • HTML 链接
  • HTML 图像
  • HTML 表格
  • HTML 列表
  • 有序列表
  • HTML 块
  • HTML 类
  • HTML布局
  • HTML头部
    • HTML 元素
    • HTML 元素</a></li> <li class="toctree-l2"><a class="reference internal" href="#html-base">HTML <base> 元素</a></li> <li class="toctree-l2"><a class="reference internal" href="#html-link">HTML <link> 元素</a></li> <li class="toctree-l2"><a class="reference internal" href="#html-style">HTML <style> 元素</a></li> <li class="toctree-l2"><a class="reference internal" href="#html-meta">HTML <meta> 元素</a></li> <li class="toctree-l2"><a class="reference internal" href="#html-script">HTML <script> 元素</a></li> </ul> </li> </ul> <p class="caption"><span class="caption-text">CSS</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../CSS.html">CSS</a></li> </ul> <p class="caption"><span class="caption-text">JavaScript</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../JavaScript.html">JavaScript</a></li> <li class="toctree-l1"><a class="reference internal" href="../JavaScript/variables.html">变量</a></li> <li class="toctree-l1"><a class="reference internal" href="../JavaScript/Operators.html">运算符</a></li> <li class="toctree-l1"><a class="reference internal" href="../JavaScript/Number.html">数值方法</a></li> <li class="toctree-l1"><a class="reference internal" href="../JavaScript/Math.html">Math 对象</a></li> <li class="toctree-l1"><a class="reference internal" href="../JavaScript/Array.html">Array数组</a></li> <li class="toctree-l1"><a class="reference internal" href="../JavaScript/Switch.html">Switch 语句</a></li> <li class="toctree-l1"><a class="reference internal" href="../JavaScript/Loops.html">循环</a></li> <li class="toctree-l1"><a class="reference internal" href="../JavaScript/Functions.html">函数</a></li> <li class="toctree-l1"><a class="reference internal" href="../JavaScript/Errors.html">异常</a></li> <li class="toctree-l1"><a class="reference internal" href="../JavaScript/Object.html">对象</a></li> <li class="toctree-l1"><a class="reference internal" href="../JavaScript/Examples.html">实例</a></li> </ul> <p class="caption"><span class="caption-text">jQuery</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../jQuery.html">jQuery</a></li> </ul> </div> </div> </nav> <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"> <nav class="wy-nav-top" aria-label="top navigation"> <i data-toggle="wy-nav-top" class="fa fa-bars"></i> <a href="../index.html">Web Note</a> </nav> <div class="wy-nav-content"> <div class="rst-content"> <div role="navigation" aria-label="breadcrumbs navigation"> <ul class="wy-breadcrumbs"> <li><a href="../index.html">Docs</a> »</li> <li>HTML头部</li> <li class="wy-breadcrumbs-aside"> <a href="../_sources/HTML/HTMLtoubu.md.txt" rel="nofollow"> View page source</a> </li> </ul> <hr/> </div> <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article"> <div itemprop="articleBody"> <!-- HTMLtoubu.md --- ;; ;; Description: ;; Author: Hongyi Wu(吴鸿毅) ;; Email: wuhongyi@qq.com ;; Created: 日 6月 30 16:05:18 2019 (+0800) ;; Last-Updated: 日 6月 30 16:10:31 2019 (+0800) ;; By: Hongyi Wu(吴鸿毅) ;; Update #: 1 ;; URL: http://wuhongyi.cn --><div class="section" id="html"> <h1>HTML头部<a class="headerlink" href="#html" title="永久链接至标题">¶</a></h1> <div class="section" id="html-head"> <h2>HTML <head> 元素<a class="headerlink" href="#html-head" title="永久链接至标题">¶</a></h2> <p>/<head/> 元素是所有头部元素的容器。/<head/> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。</p> <p>以下标签都可以添加到 head 部分:</p> <div class="highlight-default notranslate"><div class="highlight"><pre><span></span><title>、<base>、<link>、<meta>、<script> 以及 <style>。 </pre></div> </div> </div> <div class="section" id="html-title"> <h2>HTML <title> 元素<a class="headerlink" href="#html-title" title="永久链接至标题">¶</a></h2> <p>/<title/> 标签定义文档的标题。</p> <p>title 元素在所有 HTML/XHTML 文档中都是必需的。</p> <p>title 元素能够:</p> <ul class="simple"> <li><p>定义浏览器工具栏中的标题</p></li> <li><p>提供页面被添加到收藏夹时显示的标题</p></li> <li><p>显示在搜索引擎结果中的页面标题</p></li> </ul> <p>一个简化的 HTML 文档:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="cp"><!DOCTYPE html></span> <span class="p"><</span><span class="nt">html</span><span class="p">></span> <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Title of the document<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></span> The content of the document...... <span class="p"></</span><span class="nt">body</span><span class="p">></span> <span class="p"></</span><span class="nt">html</span><span class="p">></span> </pre></div> </div> </div> <div class="section" id="html-base"> <h2>HTML <base> 元素<a class="headerlink" href="#html-base" title="永久链接至标题">¶</a></h2> <p>/<base/> 标签为页面上的所有链接规定默认地址或默认目标(target):</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">base</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://www.w3school.com.cn/images/"</span> <span class="p">/></span> <span class="p"><</span><span class="nt">base</span> <span class="na">target</span><span class="o">=</span><span class="s">"_blank"</span> <span class="p">/></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> </pre></div> </div> </div> <div class="section" id="html-link"> <h2>HTML <link> 元素<a class="headerlink" href="#html-link" title="永久链接至标题">¶</a></h2> <p>/<link/> 标签定义文档与外部资源之间的关系。</p> <p>/<link/> 标签最常用于连接样式表:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="na">href</span><span class="o">=</span><span class="s">"mystyle.css"</span> <span class="p">/></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> </pre></div> </div> </div> <div class="section" id="html-style"> <h2>HTML <style> 元素<a class="headerlink" href="#html-style" title="永久链接至标题">¶</a></h2> <p>/<style/> 标签用于为 HTML 文档定义样式信息。</p> <p>您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span><span class="p">></span> <span class="nt">body</span> <span class="p">{</span><span class="k">background-color</span><span class="p">:</span><span class="kc">yellow</span><span class="p">}</span> <span class="nt">p</span> <span class="p">{</span><span class="k">color</span><span class="p">:</span><span class="kc">blue</span><span class="p">}</span> <span class="p"></</span><span class="nt">style</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> </pre></div> </div> </div> <div class="section" id="html-meta"> <h2>HTML <meta> 元素<a class="headerlink" href="#html-meta" title="永久链接至标题">¶</a></h2> <p>元数据(metadata)是关于数据的信息。</p> <p>/<meta/> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。</p> <p>典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。</p> <p>/<meta/> 标签始终位于 head 元素中。</p> <p>元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。</p> <p>针对搜索引擎的关键词</p> <p>一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。</p> <p>下面的 meta 元素定义页面的描述:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Free Web tutorials on HTML, CSS, XML"</span> <span class="p">/></span> </pre></div> </div> <p>下面的 meta 元素定义页面的关键词:</p> <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"keywords"</span> <span class="na">content</span><span class="o">=</span><span class="s">"HTML, CSS, XML"</span> <span class="p">/></span> </pre></div> </div> <p>name 和 content 属性的作用是描述页面的内容。</p> </div> <div class="section" id="html-script"> <h2>HTML <script> 元素<a class="headerlink" href="#html-script" title="永久链接至标题">¶</a></h2> <p>/<script/> 标签用于定义客户端脚本,比如 JavaScript。</p> <hr class="docutils" /> <p>HTML 头部元素</p> <div class="highlight-default notranslate"><div class="highlight"><pre><span></span><head> 定义关于文档的信息。 <title> 定义文档标题。 <base> 定义页面上所有链接的默认地址或默认目标。 <link> 定义文档与外部资源之间的关系。 <meta> 定义关于 HTML 文档的元数据。 <script> 定义客户端脚本。 <style> 定义文档的样式信息。 </pre></div> </div> <!-- HTMLtoubu.md ends here --></div> </div> </div> </div> <footer> <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation"> <a href="../CSS.html" class="btn btn-neutral float-right" title="CSS" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right"></span></a> <a href="HTMLbuju.html" class="btn btn-neutral float-left" title="HTML布局" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left"></span> Previous</a> </div> <hr/> <div role="contentinfo"> <p> © Copyright 2019, Hongyi Wu(吴鸿毅) </p> </div> Built with <a href="http://sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/rtfd/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>. </footer> </div> </div> </section> </div> <script type="text/javascript"> jQuery(function () { SphinxRtdTheme.Navigation.enable(true); }); </script> </body> </html>