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

最新推荐文章于 2024-07-24 21:45:01 发布

陈Nicole

最新推荐文章于 2024-07-24 21:45:01 发布

阅读量831

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/chanciecarney/article/details/115310041

版权

笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

第2章页面的头部标记

2.1 页面的头部标记
2.2 标题标记< title>
2.3 元信息标记

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

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浏览器的默认字符集是ＧB2312。当页面的编码和显示页面内容的编码不一致时，页面中的中文将显示乱码。如页面是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>