最近正在帮朋友做一个基于WEB2.0的网页。以前做网页时网页中的定位一般采用Table表格的方式来完成,熟门熟路去完成一个站点没啥问题;现在流行的2.0标准,不但在语言上有提升(要么是.Net,要么是PHP5.x),而且在网页的组织样式(DIV标签),层叠样式表(CSS),Ajax技术等,都是全新的概念,好在自己在年前已经关注这方面的技术,通过近半年的学习,体会颇深,全新的网页架构方式确实具有无穷的魅力,与格调单一的table来比较,它的优势真的很大:表现层、结构层、数据层分离,方便分工合作;灵活的风格调用,使得同一个结构,可以有若干个网页风格样式(现在的博客一般采用这种方式);实时的数据更新(Ajax技术)让网页更加的亲民,更具魅力……
现在发一些我在学习,使用过程中所收集的这方面相关资料:
一、XHTML常用标签介绍
一段时间以来,发现有很多人XHTML 都不会用,不光是普通的初学者,有的程序员都不是很清楚该怎么写这个XHTML ,我这里呢算是把一些常见的应 用问题做一个总结,也算能使得大家能在沟通,合作上能形成默契。
XHTML 里有很多的标签,但是经常用到的也就是那么几个,也只要掌握这几个也就可以了。下面我们一一列 举:div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em
div 在我的脑子里我一直把他想作是一个瓶子或是箱子,我的感觉它挺硬的。这个div 没有什么特性的意义,可以使用在很多地方,也就是说他可以装不同的东西。他的正确的写法是<div></div> 必需要有封口。大家都用来做布局之用,也有用来作为存放文章形成段落,实际上,这个做法并不是很好,因为作为文章的分段自然有一个特定的标签来用。那就是下面要讲的<p></p> 标签,不过用DIV 来再整体的包住所有 的段落。这是非常实用的。
p 这是一个有特定语义的标签,表示段落,是用来区分段落的。在大部分的浏览器中对P 基本上都有一个上下的边距。但是没有行首缩进,因为行首缩进只是表示段落的方式但是不是一定或是必需的。所以在用P 标签的时候如果需要可以针对P 设定一下行首缩进,我是推荐在文章以外的地方不要使用P ,因为P 是有一定语义的, 如果用在别的地方恐不合适。正确的写法是<p></p>
span 这也是一个非常常用的标签,这个标签可以说与div 很像,没有什么特定的意义,只是他是一个级联元素,不是块级元素 。我一直把它看作是一个袋子 ,他不像箱子那样可以有自己的宽高,他的宽高只能随着内容的多少而定,所以很像是袋子。这个标签与div 正好互补。
ul,li 这是一个列表 ,在列表中,除了UL 还OL ,不过我觉得OL 有点像是鸡肋。因为UL 通过CSS 定义一样可以有OL 的数字排序效果。所以一般我不推荐使用 OL ,有UL 就可以了。UL 是块级的,他的子级li 也是块级标签。正确的写法是<ul><li></li>< /ul> LI 标签是被UL 标签包裹的,在UL 标签里可以有无数个LI 标签,LI 标签不能独立使用。并且LI 标签一定要封口,这不光是美观问题,对于后期的维护也很有好处。很多程序员都不喜欢把这个LI 封口。UL 列表的用处主要是列举出一维的,同一类型的数据。具体的比如使用在菜单上,文章中列数的一些条例等等。在列表中有一种特别的形式与UL 是不一样的。那就是下面的DL
dl,dt,dd 这是一个很特别的三个标签的组合。这里的DT 是指标题,DD 是指内容。DL 是包课他们的容器。正确的写法 是<dl><dt></dt><dd></dd></dl> 在DL 里可以有很 多组的DT ,DD ,当出现很多组的时候尽量是一个DT 配一个DD ,如果DD 中内容很多,可以在DD 里加P 标签配合使用。DL 列表是一个非常好的列表形式,可以多加利用。
a 这表示链接,是一个特定属性的,也是网页中最为神奇的标签。因为它才让无数的网页都连在了一起。正确的写法是:<a href="" title=""></a> 其中的href 是表示目标地址,TITLE 是鼠标悬停提x 示文字,这是可有可无的。但是有必是利大于无。
img 这是图片标签,也是个特定属性的标签。正常写法是:<img src="" alt="" title=""/> 这里的src 是目标地址,ALT 与TITLE 是替换文字,ALT 是 IE 特定的,TITLE 是其它浏览器的通用的。不过记得后面的反斜线那是一定要有的。
H 这是一个系列的标签,从H1 到H6 ,一共六个,有人说太少了,有人说正好用,有人说用不了这么多。反正我是觉得差不多。正确写法是:<h></h> 主要是用来存放标题,也有一些朋友用来作它用拿来作其它用处,个人觉得这个标签还是让他安生一点,就让他做标题的作用。这六个标签之间最好不要出现什么相互包含的事。
strong 这个意思是着重,这是有语义的,作用也很简单。至于样工,是加粗着重,还是用色彩表明着重,那都是自行选择。正确的写法 是<strong></strong>
em 这个与strong 很像,是表示强调。一般浏览器的默认值是斜体。使用方式与strong 一样。写法是:<em></em>
这里没有说表单,因为表单基本上没有什么变化,也没什么可特别说的。
二、DIV属性
一、 div 属性
div 属性
color : #999999 文字颜色
font-family : 宋体 文字字型
font-size : 10pt 文字大小
font-style:itelic 文字斜体育
font-variant:small-caps 小字体
letter-spacing : 1pt 文字间距
line-height : 200% 设定行高
font-weight:bold 文字粗体
vertical-align:sub 下标字
vertical-align:super 上标字
text-decoration:line-through 加?h 除线
text-decoration:overline 加顶线
text-decoration:underline 加底线
text-decoration:none ?h 除连接底线
text-transform : capitalize 首字大写
text-transform : uppercase 英文大写
text-transform : lowercase 英文写
text-align:right 文字* 右对齐
text-align:left 文字* 左对齐
text-align:center 文字置中对齐
这些是一些简单的文字效果,可以应用到css 的页面中。
背景
background-color:black 背景颜色
background-image : url(image/bg.gif) 背景图片
background-attachment : fixed 固定背景
background-repeat : repeat 重复排列- 网页预设
background-repeat : no-repeat 不重复排列
background-repeat : repeat-x 在x 轴重复排列
background-repeat : repeat-y 在y 轴重复排列
background-position : 90% 90% 背景图片x 与y 轴的位置
链接
A 所有超连接
A:link 超连接文字格式
A:visited 浏览过的连接文字格式
A:active 按下连接的格式
A:hover 鼠标移至连接
边框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四边框
虚线
<TEXTAREA STYLE="border:1px dashed pink">
实线
<TEXTAREA STYLE="border:1px solid pink">
设置div 的高度与文字的行高一样就可以了, 即 line-height 和 height 的数值是一样的就可以了, 最后给div 一个 over-flow: hidden , 让超出的部分隐藏.
三、DIV+CSS标签命名标准规范
DIV+CSS 标签命名标准规范
1.CSSID 的命名
外套 :wrap
主导航 :mainNav
子导航 :subnav
页脚 :footer
整个页面 :content
页眉 :header
页脚 :footer
商标 :label
标题 :title
主导航 :mainNav(globalNav)
顶导航 :topnav
边导航 :sidebar
左导 航 :leftsideBar
右导航 :rightsideBar
旗志 :logo
标语 :banner
菜单内 容 1:menu1Content
菜单容量 :menuContainer
子菜单 :submenu
边导航图 标 :sidebarIcon
注释 :note
面包屑 :breadCrumb( 即页面所处位置导航提示 )
容 器 :container
内容 :content
搜索 :search
登陆 :login
功能区 :shop( 如 购物车,收银台 )
当前的 current
2. 样式文件命名
主要的 :master.css
布局版 面 :layout.css
专栏 :columns.css
文字 :font.css
打印样式 :print.css
主题 :themes.css
页头 :header
登录 条 :loginBar
标志 :logo
侧栏 :sideBar
广告 :banner
导航 :nav
子导航 :subNav
菜单 :menu
子菜单 :subMenu
搜索 :search
滚动 :scroll
页面主体 :main
内容 :content
标签页 :tab
文章列表 :list
提示信息 :msg
小技巧 :tips
栏目标题 :title
友情链接 :friendLink
页脚 :footer
加 入 :joinus
指南 :guild
服务 :service
热点 :hot
新闻 :news
下 载 :download
注册 :regsiter
状态 :status
按钮 :btn
投票 :vote
合作伙伴 :partner
版权 :copyRight