HTML和CSS概述及HTML基本语法

Alan

12 年前

HTML(Hypertext Markup Language超文本标记语言)是WEB页面的描述性语言，而CSS(Cascading Style Sheets层叠样式表)用于定义网页的外观和布局（字体、背景、文本、位置、边缘、列表等）,JavaScript用来实现客户端的交互，PHP(Hypertext Preprocessor)是服务器端脚本语言，用于实现动态网页的功能，CSS和JavaScript以及PHP都可以嵌入在HTML中应用。

HTML文件通常有两种后缀名.html和.htm,一个典型的HTML文件由多个成对的开启<**>和闭合标签</**>加上相应内容组成(并非所有的标签都是成对的，如<br />)，CSS文件的后缀名为.css,对外单独存取的css文件可通过类似<link href=”style.css” rel=”stylesheet” type=”text/css”/>的语句来调用，也可写在html的head中，如下所示

<html>
   <head>
     <title>Alan's Blog</title>
     <style type="text/css">
       a:hover{
         color:red;
       }
       img{
         border:5px solid black;       
       }
       p{
         font-size:10px;
       }
       table{
         border:2px solid red;
         width:600px;
       }
     </style>
     <!-- Comment goes here -->
   </head>
   <body>
     <p>Surrounded by paragraph tags.</p>
     <a href="http://alanhou.org">Alan's Blog</a>
     <img src="logo.png" />
     <table>
       <tr>
         <td>Column No.1</td><td>Column No.2</td>
       </tr>
     </table>
   </body>
</html>

<html>

<head>

a:hover{

color:red;

}

img{

border:5px solid black;

}

font-size:10px;

}

table{

border:2px solid red;

width:600px;

}

</style>

</head>

<body>

<p>Surrounded by paragraph tags.</p>

<table>

<tr>

<td>Column No.1</td><td>Column No.2</td>

</tr>

</table>

</body>

</html>

在有些情况下，可以直接将属性嵌入到标签中来实现对样式的定义,属性的值（不管什么类型）可以使用单引号、双引号、不加引号（W3C的标准是使用双引号），属性是对标记功能的扩展或行为的修饰，多个属性中间用空格分开，每个属性几乎都是可选的。

<table border="1" cellpadding="1"></table>

1	<table border="1" cellpadding="1"></table>

不论是HTML的标签还是属性都是不区分大小写的，但是推荐使用小写字母。HTML文档的注释格式为 <!– 注释内容 –>，在注释中不能再包含注释，在注释时要保证成对存在的标签保持完整。

在HTML源代码中，空格和换行将会被忽略。HTML中要显示一部分内容有时需使用字符实体，通常包含三部分:即以&开头，中间用一个实体名或是使用#号和一个编号，后面以分号;结束，如小于号<可以用 <或 <大于号>可以用> 或> 来进行显示。

HTML颜色的设置：设置颜色时可以是一个关键字(如Red, Blue)或RGB的数字格式(如#cccccc),下图为w3c(World Wide Web Consortium)所支持直接使用的16种颜色名以及对应的RGB16进制值，6位16进制的值是这样分配的，前两个代表R即Red,中间两个代表G,即Green,后面两个代表,B即Blue,两位16进制值可以从00到FF,即0到255，也就是这种方法可标识256*256*256=16777216种颜色

**Color names and sRGB values**
	black = “#000000”		green = “#008000”
	silver = “#C0C0C0”		lime = “#00FF00”
	gray = “#808080”		olive = “#808000”
	white = “#FFFFFF”		yellow = “#FFFF00”
	maroon = “#800000”		navy = “#000080”
	red = “#FF0000”		blue = “#0000FF”
	purple = “#800080”		teal = “#008080”
	fuchsia = “#FF00FF”		aqua = “#00FFFF”

HTML的主体标记包括三部分：

网页文件的最外层标签<html>

头部标签<head>，头部信息是不会显示在浏览器的内容中，可包含基本的描述如标题<title>，网页的公共属性如样式<style>等，其中还有<base />,<link />,<meta>，<title></title>用于定义网页标题，显示在浏览器的标题栏中，有助于搜索引擎优化(SEO);<base href=”” />为基底网址标记，用于设定浏览器中文件的默认绝对路径，如果设定，网页中的其它文件只需写入相对地址即可 ; <link rel=”” type=”” href=”” />用于设置所调用外部文件的链接，并确定当前页面与外部资源之间的关系；元标签meta有两种:<meta name=”” content=””>和<meta http-equiv=”” content=””>，前者用于在网页中加一些描述信息，如keywords, description, robots(值包含index, noindex, follow, nofollow, all, none), author, copyright,后者用于在HTML文档中模拟HTTP协议响应的消息头，例如告知浏览器有关缓存模式、字符集等信息,如Content-Type（字符集）, refresh（设置刷新频率）, expires（设置缓存时间）, Windows-Target（分帧显示位置）, Page-Enter,Page-Exit(进入页面和退出页面的物资)。

正文部分<body>标签，包含文本、图片、链接、表单等主体内容,也就是浏览器中显示的所有内容。body体中可指定多种属性，如bgcolor, alink, vlink, margin, padding，但这些通常通过css来进行控制,还有些其它通用属性:id, name, class, style。

除这三个部分，还有一个定义语法规则的DTD(Document Type Definition)即文档类型定义，如下面所示的内容

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

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