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的缩写)