title标签
说明：定义一个文档级别的标题，这个标题会在浏览器输入栏上方显示。
属性：暂无
用法：<title>菜鸟教程 - 学的不仅是技术，更是梦想！</title>
meta标签
说明：定义文档的元信息，不同的属性，标记着不同的元内容。
属性：
1.charset属性定义文档的编码方式，未声明可能会出现乱码。
取值：UTF-8,GBK
2.name属性定义关于SEO的元信息，配合content属性使用。
取值：冒号前为name属性的值,冒号后为content属性的值
1.description:文本值，
2.keywords:文本值，以逗号隔开
3.author:文本值(名字和邮箱，以逗号隔开)
4.robots:待补充
5.viewport:代补充
3.http-equiv属性定义等同于http头部的元信息，配合content属性使用。
取值：冒号前为name属性的值,冒号后为content属性的值
1.content-type:UTF-8,GBK
2.X-UA-Campability:ie-edge,chrome-1
3.refresh:刷新间隔(秒)[,跳转地址(绝对地址或相对地址)]
4.content属性不能单独使用，需和前面两个属性配合使用。
用法一：
<!-- 这是html5的写法，也有html4.0.1的写法，推荐这种写法 -->
<meta charset="UTF-8">
用法二：
<!-- 文档描述，会被搜索引擎显示在搜索页面中。 -->
<meta name="description" content="绝弹一个博客">
<!-- 文档关键字，关键字之间以逗号隔开，搜索引擎根据该关键字分类收录。 -->
<meta name="keywords" content="html,css,javascript,个人博客">
<!-- 文档作者，由名字与邮箱组成，中间以逗号隔开。-->
<meta name="author" content="juetan,952222@163.com">
<!-- 搜索机器人的搜索权限，具体权限看这里: -->
<meta name="robots" content="index,flow">
<!-- 视图端口，主要针对移动端 -->
<meta name="viewport" content="width=device-width,inite-scale=1.0">
用法三：
<!-- 文档编码，这是html4.0.1的写法，推荐上述html5的写法 -->
<meta http-equiv="content-type" content="text/html,charset=UTF-8">
<!-- 浏览器兼容，告诉浏览器选择什么样的版本渲染文档 -->
<meta http-equiv="X-UA-campability" content="IE=edge,chrome=1">
<!-- 文档刷新，由间隔时间(秒)和跳转地址组成，中间以逗号隔开 -->
<meta http-equiv="refresh" content="5,https://www.juetan.cn">
link标签
说明：定义文档所链接的外部资源，按属性值的不同，链接不同的资源。
属性：
1.rel属性定义文档与外部资源的关系。
值：icon,stylesheet,author,alternate,archives,bookmark,external,first
last,help,license,next,nofollow,norefere,pingback,prefetch,prev,search
sidebar,tag,up
2.media属性定义资源在什么设备上加载。
取值：以下组合
1.运算符：and not ,
2.设备：all,screen,handheld,aural,braile,projection,print,tty,tv
3.取值:width,height,device-width,device-height,orientation,aspect-ratio
device-aspect-ratio,color,color-index,monochrome,resolution,scan,grid
3.src属性定义资源的地址，文本值。
<!-- 引入一个文档图标，该图标与文档标题一同显示在浏览器输入栏上方 -->
<link rel="shortcut icon" src="favicon.ico">
<!-- 引入一个外部样式表，可根据media属性在特定设备上引入该样式表 -->
<link rel="stylesheet" media="screen and width>768px" src="/style.css">
style标签
说明：定义一个内联样式表，作用在该文档之内。
属性：暂无
用法：
<style>
h1 {
color:red
}
</style>
script标签
说明：定义脚本，作用在该文档之内。
属性：
1.type属性定义脚本的类型，非以下值会被当做数据块。
值：text/[javascript,ecmascript],application[javascript,ecmascript],module
2.src属性定义脚本的来源地址，文本值。
3.defer属性定义脚本在文档解析后，DOMContentload前触发，布尔值。
4.async属性定义是否异步执行脚本，布尔值。
用法：
<!-- 引入外部脚本 异步加载 -->
<script scr="index.js" async></script>
<!-- 定义内部脚本 延迟解析 -->
<script defer>
alert("hello,world!");
</script>
附录：
<!DOCTYPE html> <!-- 头部标签(4个)，以下标签分类，仅方便个人记忆，并非官方给出，暂时先列出标签，以后再慢慢补上 -->
<html lang="zh-cmn-Hans"> <!-- 中文汉字 -->
<head>
<!-- 字符编码(html5写法) -->
<meta charset="UTF-8">
<!-- 字符编码(html4.0.1写法) -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<!-- 页面标题 -->
<title>Title of this page</title>
<!-- 兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 移动设备 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- 页面描述 -->
<meta name="description" content="绝弹小站 - 正在学习前端的个人博客"/>
<!-- 页面关键词 -->
<meta name="keywords" content="前端,Html学习,Css学习,Js学习,个人博客"/>
<!-- 网页作者 -->
<meta name="author" content="juetan, contact@juetan.cn"/>
<!-- 搜索引擎 -->
<meta name="robots" content="index,follow"/>
<!-- 页面刷新 -->
<meta http-equiv="refresh" content="5;https://www.juetan.cn">
<!-- 网页图标 -->
<link rel="shortcut icon" href="/favicon.ico">
<!-- 外部样式表 -->
<link rel="stylesheet" media="" href="/css/index.css">
<!-- 外部脚本 -->
<script src="/js/index.js"></script>
<!-- 内部样式表 -->
<style>div {background-color:red}</style>
<!-- 内部脚本 -->
<script>document.ready(function(){alert("hello,world");});</script>
</head>
<body>
</body>
</html>
网友评论