开始学习HTML 2 | 青训营笔记

64 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第6天

<head>标签里有什么?

HTML<head>元素与<body>元素不同,它的内容不会在浏览器中显示,它的作用是保存页面中的一些元数据

一、添加标题

<title>元素可以为文档添加标题。注意,<h1>元素是为body添加标题的,两者并不相同。

  • <h1>元素在页面加载完毕时显示在页面中,通常只出现一次,用来标记页面内容的标题(故事名称、新闻摘要等等)。
  • <title>元素是一项元数据,用于表示整个HTML文档的标题(而不是文档内容)。

二、<meta>元素

元数据就是描述数据的数据。HTML有一个官方的方式来为一个文档添加元数据——<meta>元素。当然,一些其他的东西也可以被当作元数据。

  1. <meta charset="utf-8"> 指定文档使用的字符集
  2. 添加作者和描述

许多<meta>元素包含了namecontent属性:

  • name指定了<meta>元素的类型;说明该元素包含了什么类型的信息。
  • content指定了实际的元数据内容。

指定包含关于页面内容的关键字的页面内容的描述是很有用的,因为它可能让你的页面在搜索引擎的相关的搜索出现得更多(这些行为在术语上被称为:搜索引擎优化,或 SEO。)

网站上许多其他类型的元数据多为专有创作,旨在向某些网站提供可使用的特定信息。

三、在HTML中应用CSS和JavaScript

对CSS和JavaScript的应用分别使用<link>元素以及<script>元素。

  • <link>元素经常位于文档的头部。该元素有两个属性,rel="stylesheet"表示这是文档的样式表,而href包含了样式表文件的路径:
   <link rel="stylesheet" href="my-css-file.css">
  • <script>元素不一定放在<head>中,并包含src属性来指向需要加载的JavaScript文件路径,同时最好加上defer以告诉浏览器在解析完成HTML后再来加载JavaScript,这样可以确保在加载脚本之前浏览器已经解析了所有的HTML内容
   <script src="my-js-file.js" defer></script>

四、为文档设定主语言

可以为站点设定语言,这个可以通过添加lang属性到HTML开始的标签中来实现:

<html lang="zh-CN">

如果你的 HTML 文档的语言设置好了,那么你的 HTML 文档就会被搜索引擎更有效地索引(例如,允许它在特定于语言的结果中正确显示),对于那些使用屏幕阅读器的视障人士也很有用。

你还可以将文档的分段设置为不同的语言。例如,我们可以把日语部分设置为日语,如下所示:

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

这些代码是根据 ISO 639-1 标准定义的

五、参考资料

<head>标签里有什么