“头”里有什么——HTML 元信息

2025/3/28

向全栈工程师迈进!

一、看基本HTML

html 复制代码
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我的测试页面</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

整体主要包含head元素,body元素。在head元素中,其里面的内容是不会在浏览器中显示,他的作用就是保存页面的一些元数据

1.1"头里"可添加title 元素

title 中的内容会被显示在网页的上方,如上面的看基本HTML代码中,其就会显示为"我的测试页面"

1.2 "头里"可添加Meta 元素

元数据是描述数据的数据 ,而 HTML 有一个"官方的"方式来为一个文档添加元数据------<meta> 元素。

html 复制代码
<meta charset="utf-8" />

指定数据使用 utf-8 通用的字符集。

当然meta元素也可以这样使用

html 复制代码
<meta name="author" content="cg5017"/>
<meta
  name="description"
  content="这个网页告诉我们要好好学习,天天向上"/>

1.3 "头里"可在你的网站增加自定义图标

为了进一步丰富网站设计,可以在元数据中添加对自定义图标的引用 ,它们会在某些场景下显示。最常见的用例为 favicon(为"favorites icon"的缩写,在浏览器的"收藏夹"及"书签"列表中显示)。

html 复制代码
<link rel="icon" href="<%= BASE_URL %>favicon.ico">

<%= BASE_URL %>是一个模板语法占位符,在前端项目构建时会被实际的基础 URL 所替换。

几乎现在所使用的所有网站都会使用CSS来让网页更加炫酷,并使用JavaScript来让网页有交互功能,比如视频播放器、地图、游戏以及更多功能。这些应用在网页中很常见,它们分别使用<link>元素以及<Script>元素。

1.4 "头里"可在HTML中应用CSS和JavaScript

html 复制代码
<link rel="stylesheet" href="my-css-file.css" />

href是包含了样式表文件路径 rel = "stylesheet" 表明这是文档的样式表。

1.4.2 script 元素引入JavaScript

html 复制代码
<script src="my-js-file.js" defer></script>

包含 src 属性来指向需要加载的 JavaScript 文件路径,同时最好加上**defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。**这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容。这样就不会因为 JavaScript 试图访问页面上不存在的 HTML 元素而产生错误。

1.5 为文档设置主语言 lang 属性

html 复制代码
<html lang="zh-CN">
  ...
</html>

在html文件中设置 lang="zh-CN" 表明整个网页的主要语言为中文,设置相应的lang属性是非常重要的,对于那些使用屏幕阅读器的视障人士也很有用(例如,法语和英语中都有"six"这个单词,但是发音却完全不同)。所以在书写某些内容的是,可以在标签内部加上lang属性。

山高路远,慢慢走

别慌,别慌,别慌.........

相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
AA-代码批发V哥5 小时前
HTML之语义化标签与多媒体标签
html
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem5 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止6 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall6 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴6 小时前
简单入门Python装饰器
前端·python