HTML头部<head>学习

<head> 元素是所有头部元素的容器。<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。

以下标签都可以添加到 head 部分:

1.title:定义文档的标题,是必须有的元素

<title>在这里写上文档标题</title>

2base:为页面上的所有链接规定默认地址或默认目标

/*必须的属性*/
href     规定页面中所有相对链接的基准 URL
<base href="http://yeching.info" />
/*可选属性*/
target    在何处打开页面中所有的链接,该属性会被每个链接中的 target 属性覆盖
/*可能的值:*/
_blank , _parent ,_self,_top
<base target="_blank" />

3.link:定义文档与外部资源之间的关系。一般用于链接外部样式表,

<link rel="stylesheet" type="text/css" href="style.css" />
/*常用的属性*/
rel:必需。定义当前文档与被链接文档之间的关系。
type:规定被链接文档的 MIME 类型
href:规定被链接文档的位置
media:规定被链接文档将被显示在什么设备上,主要用在媒体查询功能中
<link rel="stylesheet"  media="only screen and (min-width: 480px)" href="styles.css" />
/*其他:*/
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon" href="img/touchicon.png"/>

4.meta:元数据(Metadata)是数据的数据信息。META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。元数据不会显示在客户端,会被浏览器解析。元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。搜索引擎优化排名等网络营销方法内容中,通常都要谈论META标签的作用

/*常见用法*/
1.说明主页制作所使用的文字以及语言
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta charset="utf-8" />HTML5中的用法
2.定义文档关键词
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
3.定义web页面描述
<meta name="description" content=" Web about HTML and CSS">
4.定义页面作者
<meta name="author" content="yeching">
5.每30秒刷新页面
<meta http-equiv="refresh" content="30">
6.设定网页的到期时间,一旦过期则必须到服务器上重新调用
<meta http-equiv="expires" content="31 Dec 2016">
7.设定可视区
<meta name="viewport" content="width=device-width"  initial-scale=1.0 />
/*常用属性*/
content:content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。content 属性始终要和 name 属性或 http-equiv 属性一起使用。
http-equiv:为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
name:name 属性提供了名称/值对中的名称。通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。
charset(HTML5):定义文档的字符编码。

**5.script **:定义了客户端的脚本文件

1.插入代码
<script type="text/javascript">
/*在这里写你的代码*/
</script> 
<script>
/*默认就是JavaScript,不写type="text/javascript"也可以*/
/*在这里写你的代码*/
</script> 
2.规定外部脚本的 URL
<script src="myscripts.js"></script> 
/*可用的属性*/
async(HTML5):规定异步执行脚本(仅适用于外部脚本)。

charset:规定在脚本中使用的字符编码(仅适用于外部脚本)。常见的utf-8

defer:规定当页面已完成解析后,执行脚本(仅适用于外部脚本)。

src:规定外部脚本的 URL。

type:规定脚本的 MIME 类型。默认JavaScript

6.style:义 HTML 文档的样式信息

<style type="text/css">
/*在这里写样式*/
h1 {color:red;}
p {color:blue;}
</style> 

总结

<head>
<meta charset="utf-8"/>
<title>head 使用</title>
<base href=" " />
<base target=" " />
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<meta name="author" content=" ">
<meta name="viewport" content="width=device-width" initial-scale=1.0 />
<link rel="stylesheet" href="css/style.css"/>
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon" href="img/touchicon.png"/>
<style type="text/css">/*在这里写样式*/</style>
<script>/*在这里写你的代码*/</script> 
</head>
posted @ 2017-01-03 09:10  叶子陪你玩  阅读(238)  评论(0编辑  收藏  举报