前端学习回顾-06

最新推荐文章于 2024-05-24 23:45:01 发布

huaqi_

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量462

点赞数

分类专栏：前端学习回顾文章标签：前端 html chrome

本文链接：https://blog.csdn.net/huaqi_/article/details/122262623

版权

前端学习回顾专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

HTML head 元素
为文档设置主语言

HTML 文档主要结构代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>florescence</title>
  </head>
  <body>
    <img src="images/huaqi-icon.png" alt="Photos of flowering">
  </body>
</html>

HTML head 元素

HTML 文档的 <head> 元素中的内容是页面加载时不在浏览器中显示的部分。它包含的信息包括页面的 <title> 元素、 CSS 链接（如果你选择使用 CSS 来为 HTML 的内容添加样式）、指向自定义 favicons 的链接以及其他元数据(关于 HTML 的数据，比如作者，以及描述文档的重要关键字)。
本文将介绍 <head> 元素中的几个重要元素。

1、title 元素

1.1、<title> 元素可以为文档添加标题，但是不要将其与 <h1> 元素相混淆。<h1> 元素为 <body> 元素添加标题，有时也称作网页标题。
（1）<title> 元素是一项元数据，用于表示整个 HTML 文档的标题。
（2）<h1> 元素在页面加载完毕时显示在页面中，通常只出现一次，用于标记页面内容的标题（故事名称、新闻摘要等）。
1.2、<title> 元素的内容将作为建议的书签名，当你尝试将某个页面添加为书签时。
title 元素示例-书签建议名称

1.3、<title> 元素的内容将出现在搜索结果中。
title 元素示例-搜索结果

2、meta 元素

meta（元数据）是指描述数据的数据。HTML 有一个“官方的”方式来为一个文档添加元数据，即 <meta> 元素。<head> 元素中可以包含有很多不同种类的 <meta> 元素。
2.1、指定文档中的字符编码

<meta charset="utf-8">

该元素指定了文档中的字符编码，即在该文档中被允许使用的字符集。而 utf-8 是一个通用的字符集，包含了任何人类语言中的大部分字符。
上述代码意味该 web 页面可以显示任意的语言，推荐所有页面都使用该设置。
当你未设置字符编码或者设置了错误的字符编码，此时页面中将可能出现乱码。
注：一些浏览器（比如Chrome）会自动修正错误的编码，当你未设置字符编码（或设置了错误的字符编码）时，你可能不会发现乱码。但为了适应多数浏览器，仍然建议你为页面手动设置字符编码为utf-8。
2.2、添加作者和描述
许多元素包含了 name 和 content 特性：
（1）name 指定 meta 元素的类型；说明该元素包含了什么类型的信息。
（2）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.">

指定页面作者，可以方便他人联系该作者。一些内容管理系统可以自动获取页面作者的信息，用于某些用途。
指定页面作者，亦可以让你的页面在搜索引擎的相关搜索中出现更多。（SEO，Searc Engine Optimization）

3、为站点添加自定义图标

为进一步丰富网站设计，可以在元数据中添加对自定义图标的引用，它将在特定的场合中显示，即浏览器已打开页面的标签页以及在书签面板中的书签页面中。

页面添加图标流程：
（1）将页面图标文件保存在与网站索引页面（即，index.html）相同的目录中，以 .ico 格式保存（大多数浏览器支持更通用的格式，如 .gif 或 .png），使用 ICO 格式将将确保它能在古董一样的浏览器中正常显示（如：Internet Explorer 6，IE6）。
（2）将下列代码添加至 HTML <head> 元素中以引用它：

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

注：如果网站使用了内容安全策略（Content Security Policy，CSP）来提升安全性，该策略亦会作用于自定义图标上。如果遇到图标未正常加载的情况，请确认 Content-Security-Policy header 的 img-src directive 没有禁止访问图标。

4、在 HTML 中应用 CSS 和 JavaScript

如今，几乎所有的网站都会使用 CSS 和 JavaScript 以使网页更炫酷以及更具有交互性，它们分别使用元素以及 **

<link rel="stylesheet" href="my-css-file.css">

4.2、

<script src="my-js-file.js" defer></script>

注：

为文档设置主语言

可以在 HTML 元素中添加 lang 属性，为文档设置主语言。
为文档设置主语言有以下好处：
（1）HTML 文档会被搜索引擎更高效地索引（例如，允许它在特定语言的搜索结果中的正确显示）。
（2）有助于使用屏幕阅读器的视障人士（例如，法语和英语中都有”six“这个单词，但是发音却完全不同）。
将文档主语言设置为中文，示例：

<html lang="zh-CN">

（3）还可将部分文档设置为不同的语言。例如，将文档的英语部分语言设置为英语，代码示例：

<p>英语示例：<span lang="en">Hello World.</span>。</p>

本文借鉴于MDN-标签里有什么? Metadata-HTML中的元数据