Web前端开发简明教程
首页 > Web前端开发简明教程 > 2.1 HTML头部元素

2.1 HTML头部元素

2020-10-12 17:34:53 35 0

编辑 收藏

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>

TAGS:前端教程

取消回复欢迎 发表评论: