HTML学习笔记——主体头部

最新推荐文章于 2022-07-13 17:52:19 发布

ScriptFlying

最新推荐文章于 2022-07-13 17:52:19 发布

阅读量395

点赞数

分类专栏：前端H5

本文链接：https://blog.csdn.net/weixin_42312310/article/details/109569928

版权

前端H5 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

HTML头部

头部元素 <head> 包含了所有头部的标签元素，还可以插入脚本(scripts)、样式文件(CSS)，以及各种 meta 信息，这些元素努斯标签包括 <title>、<style>、<meta>、<link>、<script>、<noscript> 和 <base>，其中 <meta> 元素用来描述 HTML 文档的描述、关键词、作者、字符集等；<base> 元素用于定义页面中所有链接默认的链接目标地址。实例代码及结果如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>百度首页</title>
        <base href="www.baidu.com/images/" targe="_blank">
        <meta name="description" content="免费在线视频">
        <meta name="keywords" content="HTML,CSS,XML,JavaScript">
        <meta name="author" content="baidu">
    </head>
    <body>
        <img src="logo.jpg">-注意这里我们设置了图片的相对地址,能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
        <br><br>
		<a href="//www.baidu.com">百度首页</a>-注意这个链接会在新窗口打开，即便它没有target="_blank"属性。这是因为base标签里已经设置了target属性的值为"_blank"。
		<br>
		<p>所有 meta标签显示在 head部分。。。</p>
    </body>
</html>

HTML<title> 元素：该标签定义了不同文档的标题，包括浏览器工具栏的标题；在网页添加到收藏夹时，显示在收藏夹中的标题；显示在搜索引擎结果页面的标题。一个简单文档实例代码如下：

<!DOCTYPE html>
<html>
    <head>
	    <meta charset="utf-8">
		<title >文档标题</title>
	</head>
	<body>
	  文档的内容。。。
	</body>
</html>

HTML <link>元素：该标签定义了文档与外部资源之间的关系，它通常用于链接到样式表，代码实例如下：

<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <style>元素：该标签定义了HTML文档的样式文件引用地址，在该元素中可以直接添加样式来渲染HTML文档，代码示例如下：

<head>
   <style type="text/css">
   body{background-color:yellow}
   p{color:blue}
   </style>
</head>

HTML <meta>元素：

该标签描述了一些基本的元数据，元数据也不显示在页面上，但会被浏览器解析。它通常用于指定网页的描述、关键词、文件的最后修改时间，作者和其它元数据，一般置于head标签中。元数据可以用于浏览器(如何显示内容或重新加载页面)，搜索引擎(关键词)，或其他Web服务。使用实例代码如下：

<!--为索搜引擎定义关键词-->
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">

<!--为网页定义描述内容-->
<meta name="description" content="免费 Web & 编程 教程">

<!--定义网页作者-->
<meta name="author" content="Runoob">

<!--每30秒刷新当前页面-->
<meta http-equiv="refresh" content="30">

HTML <script>元素：该标签用于加载脚本文件，如JavaScript。

说明：HTML <title>元素不仅可以显示文本，也可以在左侧显示 logo 等图片，显示时要将 <link> 标签放入 <head>里面，代码示例如下：

<!DOCTYPE HTML>
<html>
   <head>
      <link rel="shortcut icon" href="图片url">
      <title>这是一个带图片的标签</title>
   </head>
   <body>
    ……  ……  ……
   </body>
</html>

head 与header 两标签的区别：

head 标签用于定义文档头部，是所有头部元素的容器，它中的元素可以引用脚本、只是浏览器在哪里找到样式表、提供元信息等。header 标签用于定义文档的页眉(介绍信息)，不用混淆了。代码实例如下：

<!--head标签-->
<html>
  <head>
     <title>文档标题</title>
  </head>
</html>

<!--header标签-->
<html>
  <body>
    <header>
        <p>段落</p>
        <h1>一级标题</h1>
    </header>
  </body>
</html>

ScriptFlying

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记——主体头部

HTML头部头部元素 <head> 包含了所有头部的标签元素，还可以插入脚本(scripts)、样式文件(CSS)，以及各种 meta 信息，这些元素努斯标签包括 <title>、<style>、<meta>、<link>、<script>、<noscript> 和 <base>，其中 <meta> 元素用来描述 HTML 文档的描述、关键词、作者、字符集等；<base> 元素用于定.
复制链接

扫一扫