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>