web标准教程,帮你走进web标准设计的世界 第一讲

所属分类: 网页制作 / CSS 阅读数: 411
收藏 0 赞 0 分享

一个网页的架构:声明,头部,主体,结束

复制代码
代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
/**
*http-equiv="Content-Type" 表示描述文档类型
*content="text/HTML; 文档类型mime类型,这里为html,如果JS就是*text/javascript,
*charset=utf-8 页面字符集,编码,eg:gb2312,iso-8859-1,utf-8
*建议统一采用utf-8
*/
<title>无标题文档</title>
//一个网页的标题
</head>
<body>
</body>
</html>

我要主要讲解的是主体部分,在这过程成中会对其他部分有一定的讲解和延伸。
在讲body之前,我先讲一下html标签的大体分类。主要是为接下来讲解网页的基本结构做铺垫。
html标签大体分为:块级元素和内联元素,那么何为块级元素何为内联元素呢?
块级元素:直白的说就是一块区域,独立占用一行空间的元素,如:div,p。
内联元素:与块级元素不同,就是不能占据一行空间的元素,如a,span。
我说的可能不是很专业,目的只是初学者便于理解。

举个例子,大家就懂啦(这里我只写了body中的内容,其他的内容大家自己补充):

复制代码
代码如下:

<body>
<div>我是块级元素,我独占一块空间</div>
<div>我是块级元素,我独占一块空间</div>
<span>我是内联元素元素,我不独占一块空间</span>*****
<span>我是内联元素元素,我不独占一块空间</span>
</body>

运行结果:

<body>
 2 <div id="page">
 3 //我是最外层!包裹这整个网页的皮,也有人给我起名字为wrapper
 4 
 5     <div id="header">
 6         //我是头部!
 7 
 8     </div>
 9     
10     <div id="content">
11         //我是内容!
12 
13     </div>
14     
15     <div id="footer">
16         //我是尾部!
17 
18     </div>
19 
20 </div>
21 </body>

详解:

 

1 <body>
2 <div id="page">
3 //我是最外层!包裹这整个网页的皮,也有人给我起名字为wrapper

1 <div id="header">
2         //我是头部!

 

1  </div>
2     
3     <div id="content">
4         //我是内容!

1 </div>
2     
3     <div id="footer">
4         //我是尾部!

 

1 </div>
3 </div>

万事没有绝对,我说的是个主流

事儿二

下面针对每一块我将细细为大家讲解,通过这种方式来讲解html主流标签的应用。OkbeginRight now

首先:header部分

 

我们可以把他分为3个部分:

banner

logologo就是一个网站或公司的标识)

nav(导航条):

声明:这里我首先只讲html,至于样式(css)我将会在以后的教程中详细讲解;好吧,html开始写了,还等什么?

1 <div id="banner">
2     <span>你还没有登录,请登录</span><a target="_blank" href="#" title=”注册只需要5分钟!”>登陆</a><a href="#">注册</a>
3 </div>

So easy !

讲解标签之前,我先讲一下他们的几个常用的共有属性:

1.       id就是一个标签的名字,在一张页面中id不允许重复,体现了唯一性,特有性,如果一张页面就是一个家族,当然我指的是传统的中国家族,不要较真哦,那么每一个标签就是一个家庭成员,id就是该成员的名字,当然一个家族的成员名字还是不要重复的好,是吧?

2.       class当然一个大家族有若干个家庭组成,如果只用id区分那么时就有些繁琐了,比如说某某家的人应该怎么样时,那么这一类人我们怎么来划分呢?class就是为这个而生的,哈哈。class指一个标签所属的类别,就像是说这个人是哪家的一样,当然一张页面我们可以无限的重复使用了(这里就不考虑计划生育啦)。

3.       title这个含义很简单,就是当鼠标放在该标签身上的时候所给的提示。不信你把鼠标放在注册两个子上面试试。。。

标签1div

使用指数:*****

功能:主要用来布局,估计通过事一大家应该有所了解了

类型:块级元素

常用属性:idclass title

标签2span

使用指数:***

功能:主要用来提取一小段文本来设置特别的样式

类型:内联元素

常用属性:idclasstitle

标签3a

使用指数:****

功能:主要用来表示一个链接

类型:内联元素

常用属性:idclasstitle

特别属性:1.href:指的是该链接指向的url(链接地址)

例如下面的代码,点击学生在线四个字就会链接到学生在线首页了,试试看哦!

1 <a href=" http://online.cumt.edu.cn/">学生在线</a>

       2.target: 常用值:_blank,_self(默认值)


注意:书写html标签的时候一定要有规范:

1.       有开始就有结束:<div>XXX</div>,除了个别没有结束标志的:<img  />…

2.       块级元素不能被内联元素包裹:<span><div>这是可笑的写法!</div></span>

更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多