html标签介绍(一)

一、事例代码

代码其实网络上到处都是,随便打开一个网站,右击查看源代码O了,一份完整的html源代码。但是别人的网站,总是很多乱七八糟的,在这里,给大家一份简单点的代码来做为例子吧。我们今天就就讲head部分

<!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>
    <title>趴在树上的猪</title>
    <base href="http://news.baidu.com/resource/img/">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="/index.css" />
    <script type="text/javascript">
      document.write("Hello World!")
    </script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style type="text/css">
      body{color:red;}
    </style>
  </head>
  <body class="html">
    <div>
    base的实例
    <img src="logo_news_137_46.png">
    </div>

    <div id="wrapper">
    </div>
  </body>
</html>

二、<!doctype>标签

此标签可告知浏览器文档使用哪种规范。如上面的例子,doctype标签出现在文档的最开始的时候,处于 <html> 标签之前。另外该标签没有结束标签。这里我们主要使用的是,

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

现在我们来解释下:该文档可包含 W3C 所期望移入样式表的呈现属性和元素。如果你的用户用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 HTML 的呈现特性时,那就用这个吧。

接下来另外几个就介绍下就可以了,不需要很深入的了解

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

如果您需要干净的标记,免于表现层的混乱,请使用此类型。请与层叠样式表(CSS)配合使用。

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

当您希望使用框架时,请使用此 DTD

以上都是xhtml的写法,对应的还有三种html写法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">

其实实际使用中不写这么清楚也是可以的,比如百度和google的主页,就写了个<!doctype html>

 三、<head>标签

html标签包含head和body两个标签,第一个标签就是head标签。head标签一般都是用来通知浏览器一些信息,比如到哪里找css,到哪里找javascript等等。下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, 以及 <title>。其中<title>是必须的。

四、<title>标签

<title> 元素用来定义文档的标题。在页面被加入收藏夹时,标题将被默认使用。

五、<base> 标签

该标签为页面上的所有链接(这其中包括 <a>、<img>、<link>、<form> 标签中的 URL)规定默认地址或默认目标。

属性 描述 DTD(doctype)
href URL 规定页面中所有相对链接的基准 URL。 STF(S=Strict, T=Transitional, F=Frameset)

六、<link>标签

<link> 标签最常见的用途是链接样式表。从本例中可以看出用法也很简单。

可选属性

属性 描述 DTD
charset charset 定义被链接文档的字符编码方式。 STF
href URL 定义被链接文档的位置。 STF
hreflang language_code 定义被链接文档中文本的语言。 STF
media
  • screen
  • tty
  • tv
  • projection
  • handheld
  • print
  • braille
  • aural
  • all
规定被链接文档将显示在什么设备上。 STF
rel
  • alternate
  • appendix
  • bookmark
  • chapter
  • contents
  • copyright
  • glossary
  • help
  • home
  • index
  • next
  • prev
  • section
  • start
  • stylesheet
  • subsection
定义当前文档与被链接文档之间的关系。 STF
rev
  • alternate
  • appendix
  • bookmark
  • chapter
  • contents
  • copyright
  • glossary
  • help
  • home
  • index
  • next
  • prev
  • section
  • start
  • stylesheet
  • subsection
定义被链接文档与当前文档之间的关系。 STF
target
  • _blank
  • _parent
  • _self
  • _top
  • framename
定义在何处加载被链接文档。 TF
type MIME_type 规定被链接文档的 MIME 类型。 STF

标准属性:id, class, title, style, dir, lang, xml:lang

标准事件:onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

七、<meta>标签

必要属性:

属性 描述 DTD
content some_text 定义与 http-equiv 或 name 属性相关的元信息 STF

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

可选属性

属性 描述 DTD
http-equiv
  • content-type
  • expires
  • refresh
  • set-cookie
  • charset
把 content 属性关联到 HTTP 头部。 STF
name
  • author
  • description
  • keywords
  • generator
  • revised
  • others
把 content 属性关联到一个名称。 STF
scheme some_text 定义用于翻译 content 属性值的格式。 STF

其中description和keywords是对SEO友好最重要的标签。

标准属性:dir, lang, xml:lang

八、<script>标签

<script> 标签用于定义客户端脚本,比如 JavaScript。script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。

必选属性:

属性 描述 DTD
type MIME-type 指示脚本的 MIME 类型。 STF

可选属性:

属性 描述 DTD
charset charset 规定在外部脚本文件中使用的字符编码。 STF
defer defer 规定是否对脚本执行进行延迟,直到页面加载为止。 STF
language script 不赞成使用。规定脚本语言。请使用 type 属性代替它。 TF
src URL 规定外部脚本文件的 URL。 STF
xml:space preserve 规定是否保留代码中的空白。

九、<style>标签

<style> 标签用于为 HTML 文档定义样式信息。

必需的属性:

属性 描述 DTD
type text/css 规定样式表的 MIME 类型。 STF

可选属性:

属性 描述 DTD
media
  • screen
  • tty
  • tv
  • projection
  • handheld
  • print
  • braille
  • aural
  • all
为样式表规定不同的媒介类型。 STF

标准属性:title, dir, lang, xml:space

 

本文固定链接: http://www.qaforcode.net/archives/282 | 猪哥每日一贴

该日志由 趴在树上的猪 于2012年11月17日发表在 html 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: html标签介绍(一) | 猪哥每日一贴
关键字:
【上一篇】
【下一篇】

html标签介绍(一):等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter

浙公网安备 33010602001905号