HTML头部 — Web Note 0.0 文档

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"> <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> </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>