2.1 HTML头部元素
head元素是所有头部元素的容器。head内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等。可以添加到head中的标签有：<title>、<link>、<meta>、<script>以及<style>。
<title>标签定义文档的标题，title元素能够定义浏览器工具栏中的标题；提供页面被添加到收藏夹时显示的标题；显示在搜索引擎结果中的页面标题。例2-1列举了虎扑体育的标题设置。
例2-1 2-1.html
<! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>虎扑体育——你的体育全世界！</title> </head> <body> 欢迎访问虎扑体育网 </body> </html>
<meta>标签提供关于HTML文档的元数据。元数据不会显示在页面上，meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta>标签始终位于head元素中，<meta>标签的使用格式为：
<meta可选属性名="…" content="…" />
content是<meta>标签的必选属性，其作用是描述页面的内容。<meta>标签的http-equiv和name可选属性与content属性配合使用指定网页元数据信息，如http-equiv属性与content属性组合使用来指定页面的编码方式：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
在HTML 5中设置编码方式的代码为：
<meta charset="utf-8">
以上两行代码是等效的，建议使用时使用短代码。http-equiv属性与content属性组合也可以用于网页的自动刷新：
<meta http-equiv=" Refresh " content="5">
此代码将使当前页面每隔5秒刷新一次，由于每次刷新需要从服务器重新下载网页内容到客户端，现在使用比较少。自动刷新也可以用于网址已经变更的情况下，将用户重定向到另外一个地址，例2-2演示了在5秒后将当前网页重定向到新的直播地址。
例2-2 2-2.html
<! DOCTYPE html> <html> <head> <title>01月31日16:00布里斯班狮吼vs菲律宾环球-直播吧zhibo8.cc </title> <meta http-equiv="Content-Type" content="text/html; charset= utf-8" /> <meta http-equiv="Refresh" content="5; url= http://wenzi.zhibo8.cc/zhibo/zuqiu/2017/013191718.htm" /> </head> <body> <p>对不起。我们已经搬家了。新的直播地址是 <a href="http://www.w3school.com.cn">http://www.w3school. com.cn</a> </p> <p>您将在5秒内被重定向到新的地址。</p> <p>如果超过5秒后您仍然看到本消息，请单击上面的链接。</p> </body> </html>
<meta>标签的name属性与content属性组合可以用来指定页面的作者、关键字和描述等信息，将name属性的值设置为“Keywords”，可以在content属性中设置网页的关键字；将name属性的值设置为“Description”，可以在content属性中设置网页的描述：
<meta name="Keywords" content="体育，运动，虎扑体育，虎扑" /> <meta name="Description" content="体育，虎扑体育是以篮球，足球，网球，F1, NFL， MMA格斗等运动项目为主的专业体育网站，原创的体育新闻与专栏，最全的体育直播和视频，千万铁杆 体育迷尽在虎扑体育．" />
网页的标题、关键字和描述对网页在搜索引擎中的收录和排名有影响，因此在编辑网页时需要适当设置相关内容。例2-3和例2-4分别以“直播吧”和“京东商城”为例介绍相关内容设置。
例2-3 2-3.html
<! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="mobile-agent" content="format=html5; url=http://m. zhibo8.cc/" /> <title>直播吧-NBA直播|NBA直播吧|足球直播|英超直播|CCTV5在线直播|CBA直播 |体育直播</title> <meta name="keywords" content="直播吧，NBA直播，NBA直播吧，足球直播， 英超直播，CCTV5在线直播，CBA直播，NBA在线直播，NBA视频直播，CBA直播吧" /> <meta name="Description" content="直播吧提供NBA直播，NBA直播吧，足球 直播，英超直播，CCTV5在线直播，CBA直播，NBA在线直播，NBA视频直播，等体育赛事直播，我们 努力做最好的直播吧" /> </head> <body> 直播吧 </body> </html>
例2-4 2-4.html
<! DOCTYPE html> <html> <head> <meta charset="gb2312"/> <title>京东（JD.COM）-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="description" content="京东JD.COM-专业的综合网上购物商城，销 售家电、数码通信、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品。便捷、诚 信的服务，为您提供愉悦的网上购物体验！" /> <meta name="Keywords" content="网上购物，网上商城，手机，笔记本，电脑，MP3， CD, VCD, DV，相机，数码，配件，手表，存储卡，京东" /> </head> <body> 京东商城 </body> </html>
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。