CSS+DIV+HTML杂(一)

jhlovett

浏览: 601228 次
性别:
来自: 卡哇伊

最近访客更多访客>>

vcmasm

成长的菜鸟

zaweze

wwwxxxttt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

DIV+CSS+XHTML+XML

HTML CSS 中国移动浏览器 Apple

一:Web标准
网页设计分三层
1.结构层(Structure)结构化标准语言: xhtml,xml
2.表现层(Presentation)表现标准语言: css
3.行为层(Behavior)标准行为标准包括对象模型(如W3C DOM)、javascript、ECMAScript等.
DOM是Document Object Model文档对象模型的缩写.根据W3C DOM规范,DOM是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件,简单理解,DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突,给予web设计和开发者一个标准的方法,让他们来访问他们的站点中的数据,脚本和表现层对象

二:良好的XHTML编写习惯
1.属性名称必须小写
<div class="blue">网页头部<div>

2.属性值必须使用双引号
<div class="adam1985">Adam1985</div>

3.使用id代替name

4.必须使用结束标签
<div>Adam1985</div>
<br/>
<img src=""/>

5.无意中看到的一些标签,不太用,被我遗忘了,做下笔记啦:

(1)<marquee direction="right" behavior="alternate"><img src="Blue hills.jpg"</marquee> 字幕迁移标签,其中direction属性指定方向(移动方向),behavior属性指定动作(移动方式),scrollamount="1"属性代表指定移动速度,数字越小移动越慢,scrolldelay="500"属性代表指定移动速度 ,数字越大移动越慢,与scrollamount相反

(2)<blockquote>我缩进了</blockquote>该标签按文本缩进效果显示,和普通文本文件中使用Tab键进行缩近效果一样.

(3)<dl></dl>用来创建一个普通列表,dl是definition list(定义列表)的缩写
<dt></dt>用来创建列表中的上层项目,dt是definition trem(定义术语)的简写
<dd></dd>用来创建列表中最下层的项目,dd是definition definition(定义对术语解释定义部分)的简写
注意:<dt></dt>和<dd></dd>都必须放在<dl></dl>标签对之间.
例如:
<dl>
<dt>中国城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>广州</dd>
<dt>美国城市</dt>
<dd>芝加哥</dd>
<dd>华盛顿</dd>
<dd>纽约</dd>
</dl>

(4)<tt></tt>该标签用来显示打字机风格字体的文本如(显示打字机风格的字体)
(5)<cite></cite>该标签用来显示引用方式的字体的文本(斜体,只是显示的字体不同)
(6)<em></em>用来显示需要强调的文本(通常是斜体加粗)
(7)<strong></strong>用来加重文本(通常是黑体加粗)

三:URL:(Uniform Resource Locator)统一资源定位符
1.URL的基本组成:协议,主机名,端口号,资源名.
例如;http://www.it315.org:8080/index.html

2.相对URL(相对路径):相对URL不包括协议和主机地址信息,表示它的路径与当前文档的访问协议和主机名相同,甚至有相同的目录路径.
以"/"开头表示主机上的某种协议根目录(根目录)
以"../"开头表示当前资源所在目录的父目录(上一级目录)
以"../../"开头表示父目录的父目录(父目录的父目录)
直接使用文件名,表示它是当前目录下的文件(如:<a href="aa.html"></a>),与以./aa.html开头效果是一样的

3.URL指定参数
http://jhxk.iteye.com?name=zhangsan&age=18
URL地址和参数之间用(?)分隔,各个参数之间用(&)号分隔

4.带有定位标记的URL
例如:定位标记为名为(锚标记名为)section
URL格式:http://www.jhxk.iteye.com/index.html#section
这样就定位到section锚标记的位置上去了
如:
<a href="Untitled-1.html#tt">定位</a>
<a name="#tt">pp</a>

5.URL编码
浏览器访问www服务器上的网页文件时,需要使用HTTP协议进行通信,在HTTP协议中,浏览器不能向服务器直接传递某些特殊字符,必须是这些字符进行URL编码后再传送.URL编码遵循下列规则:
(1)将空格转换为加号(+).
(2)对0-9,a-z,A-Z之间的字符保持不变.
(3)对于所有其他的字符,用过这个字符的当前字符集编码在内存中的十六进制格式表示.
(4)对于每个字符对应的具体编码值是没法死记硬背的,许多编程语言都提供了相应的URL编码和解码函数
在网上也能找到URL编码和解码函数的C语言源代码,在Java的JDK中的java.net包中,提供了URLEncoder和
URLDecoder这两个类,来实现URL编码和解码.

6.mailto URL
单击网页上的一个超链接,就能够启动用户计算机上的邮件发送程序,mailto URL格式如下:
<a href="mailto:zzx@tt.org?subject=kk&body=fsfsfsf&cc=dadad&bcc=dsadad">发送邮件</a>
mailto代表收件人地址
subject代表邮件主题
body代表主体内容
cc代表抄送
bcc代表秘件抄送

四:图像热点映射(热点地图,也叫图像地图)一般在DW绘制
<img src="Blue hills.jpg" width="300" height="300" border="0" usemap="#Map" />

usemap属性代表该图片使用热点地图,指定热点映射的名称,前面必须加#
<map name="Map" id="Map">
<area shape="rect" coords="0,0,200,200" href="aa.html" target="_top" alt="我是矩形" />

shape属性代表绘制什么形状的热点,coords代表图片坐标
<area shape="circle" coords="217,93,63" href="bb.html" target="_parent" alt="我是圆形" />

shape属性的三个值:rect(矩形),circle(圆形),poly(多边形)
<area shape="poly" coords="240,234,63,159,64,160,93,238" href="cc.htm" target="_self" alt="我是多边形" />
</map>

五:CSS
1.嵌入样式
<style type="text/css"></style>
<style type="text/css">@import url("css/layot.css");</style>老式的浏览器不支持这种嵌入

2.行内样式
<a href="#" style="color:#000;">Home</a>不推荐使用

3.连接样式
<link href="css/print.css" rel="stylesheet" type="text/css"/>

Css语法结构

1.HTML选择符
body{} div{} span{}

2.群组选择符
h1,h2,h3,p,span{}

3.包含选择符
h1 span{}

当一个span标签在h1标签内如:
<h1><span>11</span></h1>
如果h1有样式那么span的样式会继承
自h1标签的样式所以需要使用包含选择符这样span的
样式就可以自己定义了!

4.id选择符
#apple{}

5.class选择符
.apple{}

6.组合选择符
h1 span,#a,.b{}

7.通配选择符
*{} 作用:改变页面上所有元素的样式

<style type="text/css">
/*集体声明*/
h1,h2,h3,h4,h5,p{ /*集体声明使用逗号分隔*/
	color:purple; 
	font-size:14px;
}
h2.special,.special,#one{ /*集体声明*/
	text-decoration:underline;
}
</style>
</head>
<body>
<h1>选择器集体声明h1</h1>
<h2 class="special">选择器集合声明h2</h2>
<h3>选择器集体声明h3</h3>
<h4>选择器集体声明h4</h4>
<h5>集体声明h5</h5>
<p>选择器集体声明p1</p>
<p class="special">选择器集体声明p2</p>
<p id="one">选择器集体声明p3</p>
</body>
</html>

<style type="text/css">
/*选择器的嵌套(又称父子选择器空格隔开)*/
p b{
	color:red;
	text-decoration:underline;
	font-size:30px;
}
</style>
</head>
<body>
<p>选择器的嵌套使用<b>Css标记</b>的方法</p>
选择器标记之外的<b>标记</b>不生效
</body>
</html>

<style type="text/css">
/*子选择器 注意:子选择符是属于CSS2.0的选择符，IE6.0不支持*/
ul.myList > li > a{ /*只对ul.myList下的li的a标记产生效果而它的孙标记不产生效果*/
	text-decoration:none;
	color:black;
}
</style>
</head>
<body>
<ul class="myList">
<li><a href="www.cctv.com">cctv</a>
<ul>
<li>
<a href="#">Css1</a>
</li>
<li>
<a href="#">Css2</a>
</li>
<li>
<a href="#">Css3</a>
</li>
</ul>
</li>
</ul>
</body>
</html>

---------------------------------------------------------------------------------------------

像素(px) 绝对设置,不会应视窗改变而改变
百分比(%) 相对设置,长度会随着视窗宽度而改变

<hr size="10" width="60%" noshade="noshade"></hr>
hr标签的width就用上了相对设置,noshade代表去除阴影.

<body bgcolor="red" text="white" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
bgcolor设置背景色,text设置文本颜色(该页面所有文字颜色),left,right,top,bottom的margin间距为0

特殊字符:
格式:
< <
> >
& &
" "

假设要在网页中输出<Music>这种类型的文本必须使用特殊字符 < Music >

实体字符控制标记:
<b></b> bold 粗体
<i></i> italic 斜体
<s></s> strikethrough 删除线
嵌套的写法:<b><i><s>加粗倾斜下划线</s></i></b>
<tt></tt> 电报字 telegram
<u></u> 下划线 underline
X<sub>2</sub> 下标
O<sup>2</sup> 上标

语义字符控制:
<address>浙江金华</address> 这是地址标签会自动倾斜
<big>大字</big><br />
<small>小字</small><br />
<del>删除线</del><br />
<ins>下划线</ins>
<strong>强壮的</strong> 这是加粗
<em>倾斜</em>

<font size="7" face="Verdana, Geneva, sans-serif" color="#00ffee">Font标签</font>
color属性:设置颜色可以输入#加6位16进制如:#00ffaa(注意0-f为16进制)或者输入颜色的英文如:white
face属性:设置字体

<blockquote> 标签可定义一个块引用。

<blockquote> 与 <blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

HTML 与 XHTML 之间的差异:
应当在 <blockquote> 标签中仅仅包含块级元素，而不仅仅是纯文本。

如需把页面作为 strict XHTML 进行验证，您就必须在 <blockquote> 标签内容添加块级元素，比如这样：

<blockquote cite="http://jhxk.iteye.com">
<p>here is a long quotation here is a long quotation</p>
</blockquote>

cite属性代表所引用内容的网址

查看图片附件

分享到：

sql serverr2005安装个人遇到问题小结 | 使用VS2008开发运行在.net 2.0环境下的 ASP ...

2009-03-23 21:19
浏览 1692
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论