整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
标
head标签处于html结构里的第一层。
他的作用是记录和设置了这个HTML文件的很多有用的信息，比如网页标题的设置、网页的字符编码，网页是否启用缓存，选择启用浏览器内核等等，还可以引用脚本方式来减少代码量。
head的位置
Meta标签的属性分成两个：name和http-equiv
主要用于描述网页，比如定义网页的关键词，关键叙述、标注作者、标注版权等。
基本语法：
name属性基本语法
常用的属性：
说明：用于告诉搜索引擎，你网页的关键字。
<meta name="keywords" content="我是前端旺">
说明：用于告诉搜索引擎，你网站的主要内容。
<meta name="description" content="前端旺，免费学习前端的好地方">
说明：robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。
<meta name="robots" content="none">
说明：用于标注网页作者举例
<meta name="author" content="前端旺,296699783@qq.com">
说明：用于标明网页是什么软件做的举例
<meta name="generator" content="Hbuilder">
说明：用于标注版权信息举例：
<meta name="copyright" content="前端旺">
说明：renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。
<meta name="renderer" content="webkit"> //默认webkit内核 <meta name="renderer" content="ie-comp"> //默认IE兼容模式 <meta name="renderer" content="ie-stand"> //默认IE标准模式
主要用于描述网页，比如定义网页的关键词，关键叙述、标注作者、标注版权等。
基本语法：
http-equiv属性基本语法
常用的属性：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐 <meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8
说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式）
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
说明：指导浏览器如何缓存某个响应以及缓存多长时间。
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Set-Cookie" content="name, date"> //格式
head标签的作用
更多前端教程，敬请关注微信公众号：前端旺
通过之前三节的学习，我们基本了解了HTML标记语言的基本语法，也明确了一个基本原则，那就是网页中所有的可视信息都是写在<body></body>标签之间的，在一文中，我们为第一个页面添加了"标题"与"段落"标签，实际上，未来我们要说到的图片、音频、视频、表格以及区块等元素也是放在<body></body>标签之间的。
但是与<body></body>标签并列的<head></head>标签对于整个页面有什么作用呢？
Head就是头的意思，body是身体的意思。如果html页面是个人的话，我们看到的都是他的外表，比如发型、衣服等，这些都是穿在body（身体）上的，而这个人的服饰风格却与他的性格、教育程度、思维方式相关，这些是我们看不到的，是装在这个人的head（头）中的。因为脑袋中的观念不同，因此有人喜欢汉服，有人喜欢唐装。
一言以蔽之，<head>标签的作用是把控HTML页面的显示形式。
在<head>标签中添加<title></title>标签为网页指定显示在浏览器小窗口上的名字。代码示例如下：
<title>第一个网页</title>
图1
不要小看title标签，搜索引擎非常看重title标签中的文字信息，再进行关键字比对时，title中的文字占有较大权重。因此，认真选择title内容对你的页面是否能迅速被搜索引擎找到有着重要意义。关于搜索关键字我们会在下一节练习中再细致分析。
添加<link>标签为HTML页面引入图标、JavaScript脚本、CSS样式文件等。针对JavaScript脚本的引入，还有另外一个<script></script>标签可用。导入CSS样式文件也可以使用<style></style>标签，这个在学完HTML之后才会接触到，现在了解就可以。
通过以上学习我们知道了<head>标签中通常添加<title></title>,<link>以及<script></script>,<style></style>等标签。这些标签控制着html文件的通用图标引入、布局样式引入、交互脚本引入等功能。
如果页面都是给body穿上衣服，而穿什么样的衣服，如何搭配等因素缺是由head里的内容决定。
在<head>标签中还有一个非常重要的<meta>标签（metadata：元数据，名字读不懂没关系，关键是怎么使用），这个标签可以为整个页面指定名称、被搜索时的关键字以及非常重要的文档字符编码功能。
在指定文档编码时，经常使用"utf-8"编码方式。
utf-8编码方式赋予了html页面显示中文（或其他非英文文字）的能力。这对今天的互联网世界来说是非常重要的功能。
utf-8这个重要的编码方式就在<head>标签中的<meta>标签中指定的。写法如下：
<head><meta charset="utf-8"><title>第一个网页</title></head><meta>标签不同于其他成对的标签，它是个单身汉，只有这一个标签，没有带有"/"符号的结尾标签。原因有两点；1.通常<meta>标签中不需要添加内容。2.使用<meta>标签只改变他的属性即可。什么叫"属性"呢？
大家看这行代码：<meta charset="utf-8">
"charset"就叫做<meta>标签中指定字符编码方式的属性。
在"charset"后面加"="号，这叫做指定属性值。
大家注意，指定的这个值叫"utf-8"，切记！utf-8两边要加引号！
下面我们就目前可以看明白的<meta>属性进行一下操作练习。
开始练习之前大家肯定有这样一个问题（没想到也没关系），那就是在之前的案例中，那个简单的网页并没有指定utf-8的字符编码方式，为什么页面的汉字照常显示了？
这其实是浏览器本身在后台为我们补齐了这段代码。我使用的是联想自带的浏览器，使用火狐、Google浏览器的小伙伴们估计也可以正常显示，如果使用低版本的ie浏览器，则无法正常显示。因为低版本的ie浏览器不具备补齐这段代码的功能。
关于meta标签与utf-8的编码方式先介绍到这里，下一节我们会在不同浏览器中测试添加utf-8或不添加utf-8的不同显示效果，并讲解meta标签中keyword（关键字）的使用方法。
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
前言：
在第一篇教程中我们介绍了前端流行的开发工具和前端语言的基本介绍，今天开始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文档
<html><head><title></title></head><body><h1>没有声明文档类型的html</body></html>
那么我们在语法不严谨的时候，比如：<h1>标签后面没有结束标签，浏览器也会解析文档，这样的后果就是不同类型的浏览器，显示会有所不同，严重的话造成文档不能解析，声明文档类型后浏览器会对文档标签(元素)进行了语法检查，不会出现这样的问题，这是一个良好的习惯，一定要在文档第一行声明文档类型！
<!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块主要内容组成:
作用： 告诉浏览器当前文档的标题，访问者可以在浏览器窗口标题看到的内容
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引用，我们这里不再赘述。
*请认真填写需求信息，我们会在24小时内与您取得联系。
