整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML head头部

以为头部区域填加的元素标签有<title><style><meta><link><script><noscript><base>

定义HTML文档的标题

<base>定义了所有链接的URL

<title>元素

定义不同文档的标题

在HTML中,是必须填写

定义了浏览器工具栏的标题,

当网页添加收藏夹时,显示在收藏夹中的标题

显示搜索引擎结果页面的标题

<link>元素

标签定义了文档与外部资源之间的关系

标签通常用于链接到样式表

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<base>

标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有链接标签的默认链接

<head>

<base href="http://www.baidu.com/images/" target="_blank">

</head>

<style>

标签定义了HTML文档样式文件引用地址

也可以直接添加样式渲染HTML文档

<meta>

描述一些基本的元数据

提供了元数据;元数据也不显示在页面上,但会被浏览器解析

META元素通常用于指定网页的描述、关键词、文档的最后修改时间,作者和其它元数据

元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其它web服务;

<meta>一般放置于<head>区域

HTML<script>元素

用于加载脚本文件,如JAVASCRIPT


lt;!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<frameset rows="10%,*">

<frame src="upper/one.php" name="logo">

<frameset cols="20%,*">

<frame src="upperleft/02.html" name="shuming" target="neirong">

<frame src="book/threecountries/01.html" name="neirong">

</frameset>


</frameset>

</html>

以上是html的框架,可以对页面进行分割,分为上下[上部占10%,下半部分分为左右两部分,左边20%,右边80%的宽度],也就是将整个页面分为三个板块,上面是网站信息和登录的信息,下面左半部分是选择菜单栏,右边是显示的部分,手机和电脑通用的.也可以根据自己的需要进行分类.

前言:

在第一篇教程中我们介绍了前端流行的开发工具和前端语言的基本介绍,今天开始html教程

正文:

自从xhtml出现之后,传统的html已经被取代,随便打开一个网页,浏览网页源码,第一行里面一般都是

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">或者<!DOCTYPE HTML>等

标签里面的!DOCTYPE声明了文档类型,告诉了浏览器应该如何显示网页

<!DOCTYPE html>代表文档是html5类型文档

	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

代表文档是XHTML1.0类型的文档

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

代表文档是XHTML4.01文档

文档声明类型的作用是什么?

  1. 告诉了浏览器应该按照什么格式显示文档内容
  2. 对文档类型进行语法检查,比如我们没有声明文档类型,直接使用:
 <html><head><title></title></head><body><h1>没有声明文档类型的html</body></html>

那么我们在语法不严谨的时候,比如:<h1>标签后面没有结束标签,浏览器也会解析文档,这样的后果就是不同类型的浏览器,显示会有所不同,严重的话造成文档不能解析,声明文档类型后浏览器会对文档标签(元素)进行了语法检查,不会出现这样的问题,这是一个良好的习惯,一定要在文档第一行声明文档类型!

Head内容实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>元数据标签</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta name="keywords" content="关键字" />
<meta name="description" content="描述"/>
<link rel=”stylesheet” type=”text/css”href=”./css/style.csss”/>
<script type=”text/javascript” src=”./js/common.js”></script>
</head>
<body>
</body>
</html>

Head标签里面一般有3块主要内容组成:

title标签

作用: 告诉浏览器当前文档的标题,访问者可以在浏览器窗口标题看到的内容

Meta元信息

charset文档页面编码我们最常见的有utf-8国际化编码,中文编码gbk,简体中文gb2312,繁体中文 Big5,日文 EUC-JP,韩文 EUC-KR 等。

我们做网页时,如果指定的 Charset 是 GB2312,那么就不应该在网页中出现繁体字,因为 GB2312 标准只有几千个简体的中文字。如果我们的网页编码是 UTF-8,我们就不要指定字符集是 GB2312,因为虽然 UTF-8 编码对应的 UTF-8 字符集包含了 GB2312 的字符,但同一个字符在两个字符集中的编号不一样。

下面这些编码方式,比如:中文 GBK ,繁体中文 Big5,日文 EUC-JP,韩文 EUC-KR 等,每种语言的编码方式是不同的,所以需要使用charset为网页提供了一种编码方式,否则页面很可能出现乱码

字符编码

UTF-8 是国际字符编码,也就是独立于任何一种语言,任何语言都可以使用。

UTF-8编码则是用以解决国际上字符的一种多字节编码,它对英文使用8位(即一个字节),中文使用24位(三个字节)来编码。对于英文字符较多的论坛则用UTF-8节省空间。GBK包含全部中文字符;UTF-8则包含全世界所有国家需要用到的字符。GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准(好像还不是国家标准)UTF-8编码的文字可以在各国各种支持UTF8字符集的浏览器上显示。比如,如果是UTF8编码,则在外国人的英文IE上也能显示中文,而无需他们下载IE的中文语言支持包。 所以,对于英文比较多的论坛 ,使用GBK则每个字符占用2个字节,而使用UTF-8英文却只占一个字节。UTF8是国际编码,它的通用性比较好,外国人也可以浏览论坛,GBK是国家编码,通用性比UTF8差,不过UTF8占用的数据库比GBK大。

这里有必要简述一下几种中文字体的区别: GB2312,GBK,GB18030。这是市面上GB系列三种中文的编码方式,三者越往后形成越晚,字符越多(后面版本全部兼容之前版本)。GB2312只支持简体,共7445个字符。GBK有21886个汉字字符,支持繁体中文,GB18030就更多,甚至支持一些少数民族文字,是现在非手持跟植入式设备标准。现在仍有很多手持设备是GB2312的标准。这种情况用GB18030解码就会出现错误。

由此可见,我们在做页面的时候指定编码优先选择ut-8。

Viewport是页面可视化宽度,一般我们指定属性值content="width=device-width,initial-scale=1.0",意思是可视化宽度等于设备的宽度,比如显示器,平板,手机,initial-scale=1.0指初始缩放比例是1:1,这点我们以后再设计移动端自适应的时候很有用!

Keywords指的是当前页面关键字,description指当前页面描述,他们在做SEO的时候非常关键

<link rel=”stylesheet” type=”text/css”href=”./css/style.csss”/>

指定了当前页面(和文档一个意思)所引用的样式表地址,这个地址可以是绝对路径,也可以是相对路径,也可以是url 远程路径。

绝对路径是指绝对的不可更改的路径,比如D:\css\style.css,因为缺乏灵活性,我们实战中不要使用

相对路径是指从当前路径出发,找到目的的那个路径,比如:

<link href=“../css/style.css" rel="stylesheet" />

指的是从当前路径出发,进入上级路径(..\),搜索文件夹css,寻找style.css文件

指定相对路径的方法我们会经常使用,优点是:路径灵活,在web项目迁移的时候无需关注css文件夹绝对路径的改变,因为这个文档和样式文件是相对路径的关系;另外一个优点是修改方便,因为style.css在本地,可以随意定制。缺点是浏览器解析文档的时候会下载这个css文件,占用一定的网络流量,因为每个浏览者浏览页面的时候,浏览者的浏览器都会下载解析当前页面的所有文件,你的css文件有多大,就要使用web服务器上面多少流量

Ulr远程路径指文件不在本地,而是在远程路径上面,比如:

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />

代表的就是引用了远程地址的css文件,优点是不需要耗费本地服务器流量,加载速度也快,这种行为我们一般称之为公众cdn资源加速或者公众镜像资源

文件,缺点是样式文件没有在本地,我们无法修改定制,灵活性差一点。一般情况下,我们使用各种前端框架的时候会使用这种方法。当然你可能较真说我有覆盖大法,这牵扯到样式作用优先级问题,我们在css篇章详细再谈!

<script type=”text/javascript” src=”./js/common.js”></script>

指的是当前页面所用的脚本文件,type=”text/javascript”制定了网页所使用的脚本类型是javascript,我们来思考一下,平时我们见到的引用脚本都是type=”text/javascirpt”,根据第一节中我们知道脚本中还有微软的jsscript,我们可否使用type=”text/jsscirpt”那?我在网上找了很久,没有找到答案,jsscript仅指支持IE浏览器,通用性不强,而且语法上和javascript存在较大的差异,现在网络上面js默认指的就是javascript,我们权当jsscirpt是历史中一粒尘土罢了

Src=”./js/common.js”指定了引用脚本的文件所在地址,原理和引用css一样,分为绝对路径,相对路径和远程url引用,我们这里不再赘述。

总结:

  • head标签里面分为3大块内容,title标题,meta元数据,样式或脚本的引用
  • Meta里面的信息是给浏览器和爬虫看的(或者作为其他web信息使用),不属于展示内容
  • 样式和脚本是组成页面的基本构成部分