HTML学习篇(二) head标签

HTML学习篇(二) head标签
0

<head> 标签

  在 HTML 中,head 标签内包含的元素表示网页文档的元数据,即用来描述网页但又不直接显示的数据。下面描述 head 标签及其常用内容。

<title> 标签

  顾名思义,title 表示网页的标题,另外 title 对于网页在搜索引擎的搜索结果上也有体现。

  <!DOCTYPE html>
  <html>
      <head>
         <meta charset="utf-8">
         <title>测试页</title>
      </head>
      <body>
         测试一下
      </body>
  </html>

  上面的页面名称在Firefox浏览器显示为:
%E5%9B%BE%E7%89%87

<meta>标签

  从上面代码也可以看到,有一个 meta 标签,并且包含有 charset 属性为 utf-8 ,表示网页内容使用的字符集是 UTF8 ,如果把这一行去掉,页面会乱码:
%E5%9B%BE%E7%89%87
  因为页面默认的字符集是 ISO-8859-1 ,它是欧美系字体的字符集,例如英文之类的语言就没问题,它包含了 ASCII 字符集在内。因为UTF8包含了中文编码,为了让页面显示中文,我们需要一句 即可。

  另外 meta 标签代表的是元数据,所以不像 title 或者其他 body 内的元素那样需要包含内容,它是空元素,只需要包含属性即可。除了 charset 属性,还有用 name/content对 来表示各种各样的元数据,name 代表元数据类型,content 代表元数据内容,详细可以参考 HTML <meta>

<link><style><script>标签

  为了在 html 中引入外部的CSS文件和Javascript文件,需要分别使用link和script标签:

  <head>
      <link rel="stylesheet" href="cssFile.css">
      <script type="text/javascript" src="jsFile.js"></script>
  </head>

  上面两个标签分别引用了 html 文件同目录下的 cssFile.css 和 jsFile.js 文件

  另外,如果要在文档内部使用 css 和 js,可以直接使用 style 标签和 script 标签分别嵌入css 和 js 内容:

  <head>
      <style>
          p{ font-size: 50px; }
      </style>
     <script type="text/javascript">
          alert("测试");
      </script>
  </head>

上一篇: HTML学习篇(一)
下一篇: HTML学习篇(三) 标题,段落和列表

2赞