【html学习笔记22】- 头元素

作者: 兔小小 | 来源:发表于2023-09-04 13:18 被阅读0次

「HTML 学习笔记」 Table元素学习
03_HTML 元素
2018-08-29
HTML5学习笔记之表格标签
HTML5学习笔记之表单标签
HTML5学习笔记之基础标签
HTML5学习笔记之音视频标签
HTML头部-10
HTML的入门学习（一）
html

HTML 元素是以下元素的容器：<head>, <title>, <style>, <meta>, <link>, <script>, <base>。

<head>

<head>元素是元数据（关于数据的数据），并放置在标签<html>和标签<body>之间。HTML 元数据是有关 HTML 文档的数据，元数据不显示。

元数据通常定义文档标题、字符集、样式、脚本和其他元信息。

<title>

<title>元素定义文档的标题。标题必须是纯文本的，并且显示在浏览器的标题栏中或页面的选项卡。该元素在 HTML 文档中是必需的！

页面标题的内容对搜索引擎优化（SEO）非常重要！搜索引擎算法使用页面标题来决定在搜索结果中列出页面时的顺序。

<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
</head>
<body>

<p>The content of the body element is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites and in search-engine results.</p>

</body>
</html>

<style>

<style>元素用于定义单个 HTML 页面：

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style>
    body {background-color: powderblue;}
    h1 {color: red;}
    p {color: blue;}
  </style>
</head>  
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
  
<p>The content of the body element is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites and in search-engine results.</p>

</body>
</html>

<link>

该元素<link>定义当前文档与外部资源之间的关系。该标记<link>最常用于链接到外部样式表：

<link rel="stylesheet" href="mystyle.css">

<meta>

通常使用<meta>元素指定字符集、页面描述、关键字、文档作者和视口设置。

元数据不会显示在页面上，但会被浏览器（如何显示内容或重新加载页面）、搜索引擎（关键词）和其他网络服务使用。

定义使用的字符集：

<meta charset="UTF-8">

定义搜索引擎的关键字：

<meta name="keywords" content="HTML, CSS, JavaScript">

定义网页的描述：

<meta name="description" content="Free Web tutorials">

定义页面的作者：

<meta name="author" content="John Doe">

每 30 秒刷新一次文档：

<meta http-equiv="refresh" content="30">

设置视口以使您的网站在所有设备上看起来都不错，视口是用户在网页上的可见区域。它因设备而异 - 它在手机上会比在电脑屏幕上小。这为浏览器提供了有关如何操作的说明，以控制页面的尺寸和缩放比例。该部分设置页面的宽度以遵循设备的屏幕宽度（该宽度因设备而异）：width=device-width。该部件设置浏览器首次加载页面时的初始缩放级别：initial-scale=1.0，

没有视区元标记的网页和带有视区元标记的同一网页的示例：

视口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script>

<script>元素用于定义客户端 JavaScript。下面的 JavaScript 将 “Hello JavaScript！” 写入 id=“demo” 的 HTML 元素中：

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

<base>

<base>元素指定页面中所有相对 URL 的基本 URL 和/或目标。<base>标记必须具有 href 或存在目标属性，或两者兼而有之。

一个文档中只能有一个<base>元素！

<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>