Skip to content
«
»
 

HTML和CSS的基本语法

作者 leez 在 10 七月 2009, 5:39 下午

HTML基本语法
HTML标签
HTML标签是HTML语言中最基本的单位,HTML标签是HTML语言最重要的组成部分.
通常要用两个角括号括起来:<和>。
都是闭合的(闭合就是标签的最后要有一个/,来标示结束.),但不一定是成对出现的,比如<body >和</body>一对标签.(<body >是开始标签，</body>是结束标签,在开始和结束标签中可以有内容),比如<br />就是单独的.(注意要在最后加上/,以标示其是独立的)
标签是大小写无关的，<table>跟<TABLE>表示的意思是一样的.标准推荐使用小写。
HTML标签有两种形式。1成对、2不成对

<标签名>内容</标签名>
<标签名 />

成对的例如：

<table> </table>

表格的标签符<table>，前面的是<table>后面的是</table>，是相互对应的。

不成对的例如：

<br />

换行标签<br>。

常用的HTML标签

CSS基本语法

HTML属性
标签可以有属性，它包含了额外的信息.属性的值一定要在双引号中。
标签可以拥有多个属性。
属性由属性名和值成对出现。
例如：

<标签名 属性名1=”属性值” 属性名2=”属性值” … 属性名N=”属性值”></标签名>

<a href=”http://www.leez.org/”>这是我的个人主页</a>

<a>……</a>是链接标签。使用href属性,可以定义链接的位置(URI)代码。

<table border=”0″>

使用border属性，属性值0可以定义出一个没有边框的表格。

HTML元素
HTML元素是构建网页的一种单位，是由HTML标签和HTML属性组成的，HTML元素也是网页中的一种基本单位。
例如这是一个HTML链接元素:

  1. <a href=”http://www.leez.org”>
  2. 这是我的个人主页
  3. </a>

例如这是一个HTML段落元素,它包含了一个HTML链接元素：

  1. <p>这是我的第个人网页:
  2. <a href=”http://www.leez.org”>
  3. 点击这里
  4. </a>进入
  5. </p>

HTML文档

就是HTML页面，也就是网页,是由HTML元素组成的。
互联网的所有内容都是由一个个HTML文档体现的。

HTML注释

HTML注释,我们经常要在一些代码旁做一些HTML注释,这样做的好处很多,比如:方便查找,方便比对,方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码的理解与修改等等.

HTML注释的开始使用<!–,结束使用–>
例如：

  1. <!–欢迎到leez’s blog–>
  2. <a href=”http://www.leez.org/blog/”>
  3. 我的博客
  4. </a>
  5. <!–链接结束–>

在<!– …… –>注释符中间的内容是不显示在网页上的，只是作者用来标注的。

CSS语法
CSS语法非常简单，组成CSS语法的元素只有CSS选择符与CSS属性。
每个CSS选择符由1个或多个CSS属性组成。
CSS是大小写不敏感的，在CSS语法中推荐使用小写。

外部引用CSS — 使用 link 标签引用CSS
外部引用相对于内部引用和内联引用来说是高效的是节省宽带的。
外部引用是W3C推荐使用的。
外部引用CSS是最好的引入CSS的方式(可以使代码量最小，表现最统一，也是标准网页设计推荐的).内联引用(直接在HTML标签中使用)虽然是一种快捷的方式(除了层叠的情况，高级教程中我会介绍层叠)，但是不利于以后的统一修改和表现的一致性,所以不提倡使用。

例如：

  1. <head>
  2. <link rel=”stylesheet” type=”text/css” href=”http://www.leez.org/style.css” />
  3. </head>

其中href=”http://www.leez.org/style.css” 可以是一个相对路径或绝对路径。这里的style.css就是被引用的CSS文件。

使用 @import 引用CSS

例如：

  1. <head>
  2. <style type=”text/css”>@import url(http://www.leez.org/style.css);</style>
  3. </head>

一些老式的浏览器不支持@import方法。网上流传着一种叫双表法的技术，就是利用了一些老式的浏览器不支持@import这个特性。

内部引用CSS — Internal

可以使用style标签直接把CSS文件中的内容加载到HTML文档内部。
style标签应该在head标签内部
例如：

  1. <style type=”text/css”><![CDATA[
  2. /* ----------文字样式开始---------- */
  4. /* 小李12号文字 */
  5. .leez12px
  6. {
  7. color:white;
  8. font-size:12px;
  9. }
  10. /* 小李16号文字 */
  11. .leez16px
  12. {
  13. color:black;
  14. font-size:16px;
  15. }
  17. /* ----------文字样式结束---------- */
  18. ]]></style>

内联引用CSS — Inline

内联引用可以把CSS样式直接作用在HTML标签中
例如：

  1. <p style=”font-size: 10px; color: #FFFFFF;”>
  2. 使用CSS内联引用表现段落.
  3. </p>

CSS 选择符 — CSS的名字

CSS选择符就是CSS样式的名字，当在HTML文档中表现一个CSS样式的时候，就要用到一个CSS。怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此HTML标签使用此CSS样式。

例如：

选择符名字
{
声明;
}

例如:

  1. p
  2. {
  3. font-size:12px;
  4. }
  6. .leezblue
  7. {
  8. color:blue;
  9. }
  11. .leez18px
  12. {
  13. font-size:18px;
  14. }
  16. #leezred
  17. {
  18. color:red;
  19. }

leezblue和leezred都是CSS的选择符,也就是CSS的名字

选择符取名规则
CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号.
英文字母大写与小写 A-Z a-z
数字 0-9
连字号 -
下划线 _
冒号 :
句号 .
CSS选择符只能以字母开头

CSS 声明

CSS声明是由”属性”,”冒号(:)”,”属性值”和”分号(;)”组成的.
例如：下面这个就是一个声明

font-size:12px;

font-size是一个属性，代表字体大小。
12px是属性值，代表字体大小的值为12px。

选择符的名字一样,声明是可以组合的
例如:

选择符名字
{
声明1;
}

选择符名字
{
声明2;
}

选择符名字
{
声明3;
}

可以组合为:

选择符名字
{
声明1;
声明2;
声明3;
}

比如：

  1. div
  2. {
  3. color:black;
  4. }
  1. div
  2. {
  3. font-size:12px;
  4. }

与下面的是等价的

  1. div
  2. {
  3. color:black;
  4. font-size:12px;
  5. }

声明全部一样,选择符的名字也可以组合

选择符名字1
{
声明1;
声明2;
}

选择符名字2
{
声明1;
声明2;
}

选择符名字3
{
声明1;
声明2;
}

可以组合为:

选择符名字1,选择符名字2,选择符名字3
{
声明1;
声明2;
}

比如：

  1. .leezdivwhite12px
  2. {
  3. color:white;
  4. font-size:12px;
  5. }
  1. h1
  2. {
  3. color:white;
  4. font-size:12px;
  5. }
  1. div
  2. {
  3. color:white;
  4. font-size:12px;
  5. }

与下面的是等价的

  1. .leezdivwhite12px,h1,div
  2. {
  3. color:white;
  4. font-size:12px;
  5. }

CSS的语法是比较简单的，声明也比较直接，难点是选择符的名字，有很多种变化。

例如：

  1. h1
  2. {
  3. color:red;
  4. }
  6. p
  7. {
  8. color:black;
  9. font-size:12px;
  10. }
  12. div
  13. {
  14. color:lightblue;
  15. font-size:16px;
  16. }
  18. h1, p, div
  19. {
  20. border:1px solid black;
  21. }

通过上面的示例大家可以看出选择符组合的好处,border: 1px solid black;这段代码只写了一次，就定义了三种HTML标签，这样使代码更统一,便于以后的修改，减少了代码量。

CSS注释
就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用，可以帮助我们记起CSS的含义，加载在HTML文档的位置等。

CSS注释的开始使用/*,结束使用*/

CSS注释语法

/* 注释内容 */

例如：

  1. /* ———-文字样式开始———- */
  2. /* 12象素文字 */
  3. .leezf12px
  4. {
  5. color:white;
  6. font-size:12px;
  7. }
  9. /* 16象素文字 */
  10. .leezf16px
  11. {
  12. color:black;
  13. font-size:16px;
  14. }
  15. /* ———-文字样式结束———- */

注释用来标注某段代码的作用，方便作者修改代码。

参考于www.dreamdu.com。记录下来便于查阅。

分类: 学习手札︱CSS 标签: 
评论 (RSS)  |  引用  |  Permalink

留下评论

«
»