[02]HTML基础之头部标签

1. <title>标签

文档级标题，描述当前页面内容，主要显示在浏览器地址栏上方，以及搜索引擎的查询页面中。

//https://www.juetan.cn/index.html页面标题
<title>绝弹博客 - 决定路途的起点，却未决定路途的终点</title>

2. <meta>标签

文档元数据，描述当前页面编码格式，搜索引擎爬取信息，设备兼容，请求信息等辅助内容

//字符编码,常见的编码格式有UTF-8，GBK等
<meta charset="UTF-8">

//优化搜索引擎爬取信息
<meta name="desctiption" content="绝弹博客，记录前端学习的个人博客">
<meta name="keywords" content="绝弹,前端,博客,Html,Css,Javascript,Nodejs">
<meta name="author" content="绝弹, contact@juetan.cn">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width,init-scale=1">

//请求报头
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="window-target" content="_top">
<meta http-equiv="refresh" content="5,http://www.juetan.cn">

3. <link>标签

加载外部资源，同时声明本文档与外部资源之间的关系。

//加载文档图标，一般在收藏夹或浏览器地址栏上方显示
<link rel="icon" href="./favicon.ico">

//加载外部样式，可指定在某种设备上显示(如电脑端，手机端,打印设备)
<link rel="stylesheet" href="./style.css" media="screen">

4. <style>标签

书写内部样式的地方，同样可以制定在某种设备上显示

//内部样式
<style media="handheld">
    body { color="#FF6600" }
    h1 { color="black" }
</style>

5. <script>标签

加载外部Javascript脚本，或书写内部Javascript脚本，两者没有区别。

//加载外部脚本，可设置同步加载还是异步加载
<script src="./index.js" defer async> </script>

//书写内部脚本，可指定内容的类型
<script type="text/javascript">
    console.log('hello,world');
</script>

英语单词：

title: 标题
meta: 元数据(这里指metadata，关于数据的数据)
charset: 编码
name: 名字
content：内容
description：描述
keyword：关键字
author：作者
robot：机器人
follow：允许
index：索引(这里表示首页)
viewport：视口
width: 宽度
divice：设备
init-scale：初始比例(这里指放大比例)
compatible：兼容
IE：网络浏览器(internet exploer的缩写)，这里指微软的IE浏览器
chrome: 铬合金，这里指谷歌浏览器
window：窗口
target：目标
top：顶部，这里指页面不能嵌套在iframe标签里
refresh：刷新
link：链接
icon：图标
href：超文本引用(Hypertext Reference的缩写)
rel: 关系(relationship的缩写)
stylesheet：样式表
media：媒体
screen：屏幕，这里指电脑设备
handheld：手持，这里一般指手机设备
script：脚本
src：资源(source的缩写)