HTML——＜head＞标签

最新推荐文章于 2024-01-28 06:52:58 发布
最新推荐文章于 2024-01-28 06:52:58 发布
阅读量402 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyzhang0214/article/details/115029056
版权

目录

head标签里有什么? Metadata-HTML中的元数据

什么是HTML头部元素？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>学习内容参考MDN</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

<head></head>标签中的内容不会显示在页面上，它保存了页面的一些元数据。

head中重要的常用元素

  1. <title>为文档添加标题，是一项元数据，不会显示在页面中。与文档内容<body>中的<h1>不同。
  2. 元数据：<meta>元素。元数据是描述数据的数据。如下面代码示例中的charset。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>&lt;title&gt; 元素</title>
  </head>
  <body>
    <h1>&lt;h1&gt; 元素</h1>
  </body>
</html>
  • 常用的元数据特性
    • charset 指定了字符集，utf-8是一个通用字符集
    • name 指定了meta 元素的类型； 说明该元素包含了什么类型的信息。
    • content 指定了实际的元数据内容
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

在站点增加自定义图标

为了进一步丰富你的网站设计，你可以在元数据中添加对自定义图标的引用，这些将在特定的场合中显示。

这个不起眼的图标已经存在很多很多年了，16 x 16 像素是这种图标的第一种类型。你可以看见这些图标出现在浏览器每一个打开的页面中的标签页中中以及在书签面板中的书签页面中。

页面添加图标的方式有：

  1. 将其保存在与网站的索引页面相同的目录中，以.ico格式保存（大多数浏览器将支持更通用的格式，如.gif或.png，但使用ICO格式将确保它能在如Internet Explorer 6一样久远的浏览器显示）
  2. 将以下行添加到HTML <head>中以引用它：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

rel是关联的意思，表示你的文档和链接的文档之间的关系。

在HTML中应用CSS和JavaScript

网站中会加入CSS进行页面样式的设计，以及JavaScript脚本进行交互。
分别会用<link>和<script>引入。

  • <link> 元素经常位于文档的头部。这个link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径：
<link rel="stylesheet" href="my-css-file.css">
  • <script> 部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在 </body>标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。
<script src="my-js-file.js"></script>

也可以在<script>中书写JavaScript脚本，而不指向外部js文件

MDN给出的例子：
css-js.html

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8">
    <title>元数据示例</title>
    
    <meta name="author" content="Chris Mills">
    <meta name="description" content="本示例页面展示网页元数据的用法。">

    <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
    <meta property="og:description" content="本示例页面展示网页元数据的用法。">
    <meta property="og:title" content="MDN页面 - HTML &lt;head&gt; 元素中的元数据">

    <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">

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

    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>元数据示例</h1>

    <p>藏语示例：བཀྲ་ཤིས་བདེ་ལེགས།</p>
  </body>
</html>

script.js

const list = document.createElement('ul');
const info = document.createElement('p');
const html = document.querySelector('html');

info.textContent = '以下是一个动态列表。点击列表外任意位置可添加新的列表项。点击已有的列表项可修改内容。';

document.body.appendChild(info);
document.body.appendChild(list);

html.onclick = function() {
  const listItem = document.createElement('li');
  const listContent = prompt('希望列表中显示什么内容？');
  listItem.textContent = listContent;
  list.appendChild(listItem);

  listItem.onclick = function(e) {
    e.stopPropagation();
    const listContent = prompt('为列表项输入新的内容');
    this.textContent = listContent;
  };
};

style.css

html {
  background-color: darkgreen;
  color: azure;
  font-size: 20px;
}

ul {
  background: darkred;
  padding: 10px;
  border: 1px solid black;
}

li {
  margin-left: 20px;
}

将以上三个文件保存在同一目录中，使用浏览器打开html文档。

浏览器页面效果

为文档设定主语言

<html lang="zh-Hans">

<html lang="zh-CN">

<!--还可以为文档的分段落 设定不同语言-->
<p>日语实例: <span lang="jp">ご飯が熱い。</span>.</p>
wyzhang0214
关注
前端入门知识——HTML head标签
qianduanshuo的博客
05-27 1487
一.包含的元素: 标签内主要包含以下几种类型的元素: （1）.:规定网页的标题。 （2）.:主要给浏览器解析或者搜索引擎提供相关信息。 （3）.:从外部引入CSS文件。 （4）.（5）.（6）.:为当前文档的所有链接设置基准链接。 二.标签: 此标签用于定义网页的标题，主要目的是告诉用户此网页是做什么用的，或者主要主题是什么。 它对于搜索引擎优化有着举足轻重的作用，当然SEO不是本教程的内容，这里...
＜picture＞ 标签——自适应显示不同图片
喵喵的博客
09-23 1106
功能 picture元素通过包含一个或多个元素和一个元素再结合media（媒体查询）来使用， 根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素： 案例 菜鸟案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body&gt
HTML中head头结构
yueyuanchang的专栏
01-04 390
HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的head中各个标签、元素的意义以及使用场景。
HTML 头部
冷月醉雪的博客
05-02 195
HTML &lt;head&gt; 元素    &lt;head&gt; 元素包含了所有的头部标签元素。在&lt;head&gt;元素你可以插入脚本(scripts)、样式文件(CSS)、及各种meta信息。    可以添加在头部区域的元素标签为：&lt;title&gt;、&lt;style&gt;、&lt;meta&gt;、&lt;link&gt;、&lt;script&g
html头部
m0_52273234的博客
10-18 519
基本标签 使用 HTML5 doctype，不区分大小写。 <!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 --> 声明文档使用的字符编码 <meta charset='utf-8'> <!-- 声明文档使用的字符编码 --> 更加标准的 lang 属性写法 http://zhi.hu/XyIa 简体中文 <html lang="zh-cmn-Hans"> 繁体中文 <html l
<html> <head> <title>Title</title> </head> <body> <% String str="2"; out.write(str); %> </body> </html>
07-23
在您的代码中，您使用了`<% %>`标签包裹的JSP脚本，该脚本中定义了一个字符串变量`str`并将其值设为"2"，然后使用`out.write()`方法将这个值输出到页面上。 如果您在浏览器中访问该页面，是否能够看到输出的内容为...
吃豆人游戏-HTML游戏-代码
05-24
在这个吃豆人游戏中，HTML文件包含了一系列的元素，如`<div>`用于创建游戏区域，`<canvas>`作为图形绘制的画布，以及可能的`<script>`标签来引入JavaScript代码。HTML代码还会定义游戏界面的布局，如按钮、得分显示...
html基础
qq_50452445的博客
07-06 3211
HTML 的全称为超文本标记语言, 是一种标记语言。主要用来为文本添加语义。 注释 基本标签 h p img src: “图片的 URL”alt: “图像显示出错的替代文本”width: “图像宽度”height: “图像高度”注意点:​ 1.默认显示图像正常宽高​ 2.图像只设置宽度,高度自适应​ 3.图像只设置高度,宽度自适应​ 4.图像同时设置宽和高, 可能会导致图像变形 a href: “链接指向的页面 URL”target: “新页面打开方式” base target: “所有页面打开方
HTML网页头部代码实例详解
09-28
HTML中我们一般把部分称为网页的头部。头部部分的内容虽然不会在页面中显示，但它能影响到搜索引擎对网页的收录和排序，以及网页的各种全局设置，可以说是至关重要
HTML头部
m0_71916406的博客
06-25 130
HTML 头部HTML 图像 HTML 样式- CSS CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。 Look! Styles and colors Manipulate Text Colors, Boxes and more... 尝试一下 »  尝试一下 - 实例 HTML使用样式 本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。 本例演示如何使用样式属性做...
HTML学习——HTML头部
Insect_17的博客
11-08 772
1、HTML<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。 显示时，要将<link>标签放入<head>里。 举例： <!doctype HTML> <html> <head> <link rel="shortcut icon" href="图片url"> <title>这是一个带图片的标签</title> </head> <body> …… ……
html头部写法,HTML 头部
weixin_33542015的博客
06-04 336
HTML 元素以下标签都可以添加到 head 部分：、、、、 以及 。HTML 元素 标签定义文档的标题。title 元素在所有 HTML/XHTML 文档中都是必需的。title 元素能够：定义浏览器工具栏中的标题提供页面被添加到收藏夹时显示的标题显示在搜索引擎结果中的页面标题一个简化的 HTML 文档：TitleofthedocumentThecontentofthedocu...
HTML总结之头部
洪晓鸿
01-15 388
 1、head元素   head元素是所有头部元素的容器，内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等，可用在Head部分 2、HTML元素 元素定义文档的标题 作用： （1）、定义浏览器工具栏标题 （2）、定义页面被添加到收藏夹显示的标题 （3）、显示在搜索引擎结果中的页面标题 3、HTML元素 为页面上所有连接规定默认地址或默认目标
HTML - 头部元素
最新发布
weixin_72262657的博客
01-28 1096
如果你的 HTML 文档的语言设置好了，那么你的 HTML 文档就会被搜索引擎更有效地索引（例如，允许它在特定于语言的结果中正确显示），对于那些使用屏幕阅读器的视障人士也很有用（例如，法语和英语中都有“six”这个单词，但是发音却完全不同）。已经到了我们快速学习 HTML 头部的尾声——你还能学到更多的相关的，但是现阶段详尽的讲的太多会令人无聊且困惑，我们只希望你现在在这学到最基本的概念！我们在这里的目的不是向你展示如何使用所有可能放在头部的东西，而是教你如何熟悉使用你想要包括在头部的主要元素。
【HTML+CSS+JavaScript】网页实战开发笔记之一——HTML的头部信息里你不知道的事...
yzd
03-16 378
HTML中我们一般把head部分称为网页的头部。头部部分的内容虽然不会在页面中显示，但它能影响到搜索引擎对网页的收录和排序，以及网页的各种全局设置，可以说是至关重要。 ▲知识点一——头部信息里设置网页的基底网址 基底网址的实质是统一设置超级链接的属性，基底网址标签是&lt;/base&gt;，它有两个属性，href和_target。href用于设置基底网址的路径，_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值