美文网首页
【html学习笔记22】- 头元素

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

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

    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>
    

    相关文章

      网友评论

          本文标题:【html学习笔记22】- 头元素

          本文链接:https://www.haomeiwen.com/subject/smxcvdtx.html