Web前端技术开发学习笔记(HTML标记语言篇)——第2章 页面的头部标记


文中的代码都是我在书上看到的示例然后照敲一遍的,只是为了学基础知识啦,不必太在意。

2.1 页面的头部标记

页面的头部是指由< head>和< /head>所包含的部分,主要用于设置当前网页的页面标题、字符集、关键字、描述信息等内容。
一般来说,位于头部的内容都不会在网页上直接显示,而主体部分通常会在网页中直接表现出来。
常用的头部标记如下表:

标记描述
< title>设定显示在浏览器标题中的内容
< meta>定义网页的字符集、关键字、描述信息等内容
< style>设置CSS层叠样式表的内容
< link>设置对外部CSS文件的链接
< script>设置页面脚本或链接外部脚本文件

本章将介绍< title>和< meta>两个标记,其余几个标记将分别放到后面相关章节中介绍。

2.2 标题标记< title>

< title>用于设置网页的标题,用以概述文件的内容及信息搜索结果的显示标题。

基本语法

<title>...</title>

< title>标记之间的内容就是页面的标题。

eg.

<html>

 <head>
  <title>HTML文件标题示例</title>
 </head>

 <body>
 </body>

</html>

2.3 元信息标记

meta标记是页面头部区域中的一个辅助性标签,用于提供HTTP标题信息和页面描述信息的设置。

2.3.1< meta>标记属性

在HTML4中,meta只包含3个属性,使用时仅需设置两个属性就可以实现各项功能。
meta标记的各个属性描述如下表:

属性描述
http- equiv以键/值对的形式设置一个HTTP标题信息,“键”指定设置项目,由http- equiv属性设置,“值”由content属性设置
name以键/值对的形式设置页面描述信息,“键”指定设置项目,由name属性设置,“值”由content属性设置
content设置http- equiv或name属性所设置项目对应的值

http- equiv属性类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确地显示网页内容。

name属性用于描述网页,以便搜索引擎机器人查找、分类。目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类,一个设计良好的meta标记可以大大提高网站被搜索到的可能性。

每一个< meta>实现一种功能,可以在html文件的头部区域中包含任意数量的< meta>标记,以实现多种功能。

2.3.2 设定网页关键字

关键字是为搜索引擎提供的。为提高网页在搜索引擎中被搜索到的概率,我们可以设置多个与网页主题相关的关键字。

基本语法

<meta name=“keywords” content=“关键字1,关键字2,关键字3,...”>

语法说明:keywords表示“关键字”设置项目,content中设置具体的关键字,不同的关键字使用逗号分隔。

注意!
虽然设定多个关键字可以提高被搜索到的机率,但目前大多数的搜索引擎在检索时都会限制关键字的数量,有时候关键字过多,网页反而会在检索时被忽略掉,所以关键字的输入不宜过多,要准确而巧妙。

eg.关键字设置

<html>
  <head>
   <title>网页制作三剑客Dreamweaver、Flash、Fireworks综合实例教程<title>
   <meta name=“keywords” content=“网页制作三剑客Dreamweaver、Flash、Fireworks综合实例教程,计算机类”>
  </head>
  <body>
  </body>
 </html>

2.3.3设定网页描述信息

网页的描述信息主要用于概述性地描述页面的主要内容,可以作为搜索结果返回给浏览者。
但是像关键字一样,搜索引擎对于描述信息的字数也有限制,所以内容应尽量简明扼要。

基本语法

<html>
  <head>
   <title>网页制作三剑客Dreamweaver、Flash、Fireworks综合实例教程<title>
   <meta name=“keywords” content=“网页制作三剑客Dreamweaver、Flash、Fireworks综合实例教程,计算机类”>
   <meta name=“discription” content=“本书以Adobe公司的网页制作三剑客Flash......系统地介绍了网站的规划、设计和制作方法,以及上传的全过程。”>
  </head>
  <body>
  </body>
</html>

以上操作完成之后,对应着下图搜索界面中的第三条搜索信息。
在这里插入图片描述

2.3.4 设定网页字符集

设定页面使用的字符集(即编码),用以说明页面制作所使用的文字语言,浏览器会据此来调用相应的字符集显示页面内容。如果页面中没有显式指明字符集,将使用浏览器默认的字符集显示。

中文操作系统下的IE浏览器的默认字符集是GB2312。当页面的编码和显示页面内容的编码不一致时,页面中的中文将显示乱码。如页面是uft-8,如果没有使用meta设置字符集,则浏览器运行后,页面中的中文将显示乱码,通过meta设置字符集可以解决这个问题。

基本语法

<meta http-equiv=“Content-Type” content=“text/html; charset=“某种字符集”>

语法说明:http-equiv传送HTTP通信协议标题头,Content- Type表示“字符集”设置项目,content用于定义文档的MIME类型,以及页面所使用的具体的字符集。当charset的取值为GB2312时,表示页面使用的字符是国标汉字码,目前最新的国标汉字码是GB18030,在实际应用中也经常使用utf-8编码。

eg.

<html>
 <head>
  <meta http-equiv=“Content-Type” content=“text/html; charset=GB18030” />
  <title>网页字符集设置示例</title>
 </head>
 <body>
 中文乱码示例
 </body>
<html>

之前在苹果商店下了个IDE,刚开始使用的时候还没有学到这,中间就出了很多问题,特别是中文乱码,一直搞不清是为啥。记录一下我的亲身经历:

这是在设定字符集之前的情况
在这里插入图片描述

And then
在这里插入图片描述
哈哈哈刚开始还一直以为是那个IDE不好用,看来还是我站的不够高眼界太小了哈哈[doge]

2.3.5 设定网页自动刷新

使用< meta>标记可以实现每隔一定时间刷新页面内容,这一功能常用于需要实时刷新的场合,如Internet现场图文直播、聊天室、论坛消息的自动更新等等。

基本语法

<meta http-equiv=“refresh” content=“刷新间隔时间”>

语法说明:http-equiv传送HTTP通信协议标题头,refresh表示刷新功能,content用于设定刷新间隔的时间,单位是秒。

eg.

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

<html xmlns=”http://www.w3.org/1999/xhtml”>
 <head>
 <meta http-equiv=“refresh” content=“3”>
 <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
  <title>页面的自动刷新设置示例  </title>
 </head>
 
 <body>
 页面每隔三秒刷新一次...
 </body>
</html>

2.3.6 设定网页自动跳转

使用http-equiv属性值refresh,不仅可以完成自身页面的自动刷新,也可以实现页面之间的跳转。

基本语法

<meta http-equiv=“refresh” content=“刷新时间间隔; url=页面地址”>

语法说明:http-equiv传送HTTP通信协议标题头,refresh表示刷新功能,content中设定刷新间隔的秒数,以及跳转到的页面地址。

eg.

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

<html xmlns=“http://www.w3.org/1999/xhtml”>
 <head>
 <meta http-equiv=“refresh” content=“3; url=http//www.sina.com.cn”>
 <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
  <title>页面的自动跳转设置示例  </title>
 </head>
 
 <body>
   <p>本页面3秒钟后自动跳转至新浪网</p>
 </body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值