HTML 元素
元素是所有头部元素的容器。 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息等等。以下标签都可以添加到 head 中:
<meta> <base> <link> <script> <style>。</p>
<p><a name="4e000039"></a></p>
<h3 id="4gx7uc"><a name="4gx7uc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML <title>元素</h3><p><title>元素设置页面的标题,出现在浏览器标签上,当你标记/收藏页面时它可用来描述页面。例如:</p>
<pre><code class="lang-html"><head>
<title>My test page</title>
</head>
</code></pre>
<p><a name="1cdf93d7"></a></p>
<h3 id="8rttka"><a name="8rttka" class="reference-link"></a><span class="header-link octicon octicon-link"></span>元数据:<meta>元素</h3><ul>
<li>元数据就是描述数据的数据,<meta>元素为 HTML 文档添加元数据。元数据不会显示在页面上,但是对于机器是可读的。</li><li>元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。</li><li>典型的情况是,<meta> 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。meta 元素始终位于 head 元素中。</li></ul>
<ol>
<li>指定 HTML 文档中字符的编码</li></ol>
<pre><code class="lang-html"><head>
<meta charset="utf-8">
</head>
</code></pre>
<ol>
<li>添加作者和描述,使用 name 和 content 属性<ul>
<li>name 属性定义了名称/值对中的名称。</li><li>content 定义了与 name 属性相关的元信息。</li></ul>
</li></ol>
<pre><code class="lang-html"><head>
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. It also has some developer-oriented documentation for Mozilla products, such as Firefox Developer Tools.">
</head>
</code></pre>
<p>在上述实例中,description 定义的信息可在搜索引擎的搜索结果中找到。</p>
<p><img src="https://cdn.nlark.com/yuque/0/2020/png/1331917/1587829629323-c60e3064-0ebc-4077-a17f-79db42d8f51d.png#align=left&display=inline&height=81&margin=%5Bobject%20Object%5D&name=image-20200425233005337.png&originHeight=192&originWidth=1278&size=108353&status=done&style=none&width=542" alt="image-20200425233005337.png"></p>
<ol>
<li><meta>元素还有http-equiv 等属性,还有一些专门为某些网站创作的属性。</li></ol>
<p><a name="7b82aae7"></a></p>
<h3 id="aicvpu"><a name="aicvpu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>在HTML中应用CSS和JavaScript</h3><p>使用 CSS 能让你的网页更加炫酷,使用JavaScript 能让你的网页有交互功能,它们分别使用 <link>元素以及 <script> 元素。</p>
<ol>
<li><link> 元素经常位于文档的头部。这个link元素有2个属性,rel=“stylesheet” 表明这是文档的样式表,而 href 属性包含了样式表文件的路径:</li></ol>
<pre><code class="lang-html"><link rel="stylesheet" href="my-css-file.css">
</code></pre>
<ol>
<li><script> 部分没必要非要放在文档头部;实际上,把它放在文档的尾部(在 标签之前)是一个更好的选择,这样可以确保在加载脚本之前浏览器已经解析了HTML内容(如果脚本加载某个不存在的元素,浏览器会报错)。</li></ol>
<pre><code class="lang-html"><script src="my-js-file.js"></script>
</code></pre>
<p>您还可以选择将脚本放入<script>元素中,而不是指向外部脚本文件。</p>
<ol>
<li>一个例子:</li></ol>
<pre><code class="lang-html"><!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Meta examples</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Meta examples</h1>
<p>Japanese example: ご飯が熱い。</p>
<script src="script.js"></script>
</body>
</html>
</code></pre>
<p>注意,<link>元素和 <script> 元素放置的位置。</p>