HTML和CSS的基本语法

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://leez.org/">这是我的个人主页</a>

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

<table border="0">

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

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

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

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

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

HTML文档

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

HTML注释

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

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

  1. <!--欢迎到leez's blog-->
  2. <a href="http://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://leez.org/style.css" />
  3. </head>

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

使用 @import 引用CSS

例如:

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

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

内部引用CSS -- Internal

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

  1. <style type="text/css"><![CDATA[
  2. /* ----------文字样式开始---------- */
  3. /* 小李12号文字 */
  4. .leez12px
  5. {
  6. color:white;
  7. font-size:12px;
  8. }
  9. /* 小李16号文字 */
  10. .leez16px
  11. {
  12. color:black;
  13. font-size:16px;
  14. }
  15. /* ----------文字样式结束---------- */
  16. ]]></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. }
  5. .leezblue
  6. {
  7. color:blue;
  8. }
  9. .leez18px
  10. {
  11. font-size:18px;
  12. }
  13. #leezred
  14. {
  15. color:red;
  16. }

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. }
  5. p
  6. {
  7. color:black;
  8. font-size:12px;
  9. }
  10. div
  11. {
  12. color:lightblue;
  13. font-size:16px;
  14. }
  15. h1, p, div
  16. {
  17. border:1px solid black;
  18. }

通过上面的示例大家可以看出选择符组合的好处,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. }
  8. /* 16象素文字 */
  9. .leezf16px
  10. {
  11. color:black;
  12. font-size:16px;
  13. }
  14. /* ----------文字样式结束---------- */

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

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

您可以选择一种方式赞助本站

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: