HTML5 文档头部

最新推荐文章于 2021-11-29 09:06:01 发布

原创最新推荐文章于 2021-11-29 09:06:01 发布 · 953 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

HTML5

10 篇文章

订阅专栏

本文介绍了HTML5文档头部的基本内容，包括定义标题栏图标、设置关键字和描述、实现页面跳转以及定义和引入样式。重点讲解了meta标签的用法，如何设置标题栏图标，以及如何优化网页的关键字和描述，以提升搜索引擎可见性。

文档头部浅解

head

文档头部中的内容看不见
标签、图标、元信息、文档样式、定义脚本…
文档头部作用于整篇文档

title

定义浏览器标题栏里显示的文档标题

meta

meta是单标签，它没有结束标签；meta元素可以成为空元素
meta元素为head元素的子元素，且只能放在head标签中使用
meta元素主要用来附加文档的额外信息，除了使用我熟悉的charset="utf-8"声明字符编码外，它还有几个常用的功能
a、通过name与content属性为文件加入作者（author），描述信息（description），关键字（keywords），编码工具（generator）等
b、通过属性http-equiv将指定的信息以HTTP表头信息的方式送到客户端

    <meta charset="UTF-8">
    <meta name="authon" content="JS Boom">
    <meta name="keywords" content="HTML5">
    <meta http-equiv="refresh" content="3, http://www.baidu.com">

标题栏图标

网站根目录下放一个名称：favicon.ico图片文件。浏览器会自动显示在标题栏中
使用ico格式图标作为标题栏图标：< link rel=“icon” type=“image/x-icon” href="./img/favicon.ico">
使用jpg格式的图片作为标题图标：< link rel=“icon” type=“image/jpeg” href="./img/favicon.ico">
使用png格式的图片作为标题图标：< link rel=“icon” type=“image/png” href="./img/favicon.png">
使用gif格式的图片作为标题图标：< link rel=“icon” type=“image/gif” href="./img/favicon.gif">

link：引用外部文件
rel：定义当前文档与被链接文档间的关系
type：定义被链接文档的mime类型
href：定义被链接文档的路径
图片大小建议使用16x16像素

关键字和描述

关键字和描述不是给人看的，是用于供搜索引擎使用的
关键字和描述是网页优化很重要的部分

关键字设置语法
< meta name=“keywords” content=“要设置的网页关键字，可以使用多个，建议不超过5个。多个关键字用英文状态“，”分隔”>

描述设置语法
< meta name=“description” content=“要设置的网页描述内容，建议不超过100字”>

页面跳转

页面自动跳转语法
< meta http-equiv=“refresh” content=“多少秒后执行跳转; url=要跳转的地址”>

页面自动刷新语法
< meta http-equiv=“refresh” content=“多少秒后执行刷新”>

定义样式和引入样式

设置样式语法

 < style type="text/css"> 
 css样式内容 
 < /style>

引入样式文件语法

< link rel=“stylesheet” type=text/css href=“文件路径”>