一、
1、静态页面、动态页面
网站分为动态页面和动态页面
静态页面:有一个heml页面保存在服务器上,浏览器要这个页面的时候就把这个页面文件发给浏览器
动态页面:服务器上没有浏览者要看的页面,而是服务器动态生成的HTML页面发给浏览器,动态语言的服务器端可以用c#、VB.Net、PHP、Java、C等编写
编写普通的HTML页面是和任何后台语言无关的,可以使用Dreamweaver、ExpressionWeb等工具写,这些工具是给页面美工的,开发人员用VS写html就够了。不要把精力放到怎么办界面做好看上,正规公司都有专门的页面美工,不正规公司都是偷别人的美工页面,无论是偷别人的页,面,还是使用美工开发出来的页面,对于开发人员要做的“填模板”工作都是一样的
二.
1、颜色体系
Body标签的bgcolor属性可以设定网页的背景颜色,<body bgcolor=”#006699”>
#006699这就是HTML中表示颜色的方式,每两个是一个组,三组分别表示R、G、B的值。是16进制表示。关于RGB见备注
可以使用VS内置的颜色选择对话框生成RGB值,也可以使用取色器(比如DebugBar内置的取色器:打开IE,打开DebugBar工具栏,点击吸管图标);HTML还预定义了一些颜色:red black white等比如bgcolor=”black”。
配色不是一个专业开发人员考虑的,是美工的事,所以对于颜色的取值不用太操心,知道有这么一回事就行了
三、
1、Input表单详解
Submit:点击submit按钮表单就会被提交给服务器,中文IE下默认按钮文本为“提交查询”,可以设置value属性修改按钮的显示文本
Text:size属性为宽度,value为值,maxlength为可可输入的最大长度,readyonly只读。<input type=“text” readonly/>(只写属性名)或者<input type=”text“ readyonly=”readyonly”/>(推荐)
Checkbox:checked属性表示是否被选中,<input type =”checkbox”checked/>或者<inputtype=“checkbox”checked/>(推荐)check readonly 只有一个属性值的等可以只写属性名
Radio:相同name属性的为一组,不同radio设定不同的value值,这样通过取指定name的值就可以知道谁被选中了,不用单独判断。
File:使用file,则form的enctype必须设置为multipart/from-data、method属性为POST
Image:使用src属性指定图片的地址,用来实现美化的“登陆按钮”。
2、<select>标签
用来创建累世与WinFrom中的Commbox或者ListBox
如果size属性大于1就是ListBox,(size的值为显示出来的列表数量),否则就是ComboBox。<select multiple>或者<select multiple=”multiple”>(属性)那么久可以多选的ListBox
Select中的项是<option>,<option>北京</option>还可以设定项的值<option value=”1”>北京</option>
将一个option设置为选中:<optionselected>333</option>或者<optionselected=”slelected”>333</option>(推荐)就可以将这个设定为选择项
如何实现“不选择”,添加一个<optionvalue=”-1”>--不选择--<option>,然后编程判断select选中的值如果是-1就认为不选择
Select分组选项,可以使用optgroup对数据进行分组,分组本身不会被选择,无论对于下拉列表还是列表框都适用。
四、
其他标签
<textarea>多行文本(也是表单元素):<textarea>文本</textarea>,cols、rows属性表示行数和列数。
<label>:在<inputtype=”text”>前可以写普通的文本来修饰,但是是单修饰文本的时候input并不会得到焦点,而用lable则可以,for属性指定要修饰的控件的id,<lable for=”txt1”>assdfad</label>
Fieldset:groupbox效果,将控件划分一个区域,看起来更规整
<fieldset>
<legend>常用</legend>
<input type=”text”/>
</fieldset>
五、
1、 样式表、CSS
Css(层叠样式表)是用来美化页面的,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色、背景颜色、边框等。CSS主要有元素内联,页面嵌入和外部引用三种使用方式.CSS是描述元素的皮肤。
元素内联,直接将样式写入元素的STYLE属性中,<input type=”text”readonly=”readonly” style=”background-color:#FF00FF”/>适用于样式没有可复用性的场合
页面嵌入:在head中加入
<style type=”text/css”>
input{border-color:Yellow,color.Red;}
</style>
表示页面中所有input都是采用指定样式,适合于样式复用,减小页面体积
外部引用,将CSS内容写入css后缀的文件
Textarea{background:yellow}
然后在页面中引用,在head中加入
<link type=”text/css” rel=”Stylesheet” href=”s1.css/>
适合于多个页面共享css
六、
1、 层(Div)、块(span)
层:<div></div>将内容放到层中,就可以将这些内容当成一个整体进行处理,比如整体隐藏,整体移动。Div非常强大和常用
Span:div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容定义成一个整体进行操作,但影响布局、显示常见样式
Css计量单位:css中表示宽度、距离时有多种计量单位:px(像素) 30%(百分比) em(相对单位)等。Width:20px
Background-color:Red:背景颜色;color文本颜色
Border-style:solid边框风格,实线(默认没有边框)。还有dotted(点)等值:border-color:边框颜色;border-width:边框宽度(默认为0)。例子:style=”border-color:Red;border-width:1px;border-style:dotted;”
Display:元素是否显示,可选值none(不显示)、block(显示为块级元素,次元素前后会带有换行符)、inline(显示为内联元素,元素前后没有换行符)等
Cursor,鼠标在元素上时显示的光标图标,可选值:cursor(默认光标)pointer(超链接上的手)、text(输入Bean)、wait(忙沙漏)、help(帮助)等。
LI不显示圆点:LIST-STYLE-TYPE:none:一般没在li或者ul上
应用:图片:不显示边框,
七、样式选择器
对于非元素内联的样式需要定义样式选择器,通俗的说就是这个样式适合哪些元素,三种:标签选择器、class选择器和id选择器
标签选择器 input{border-color:Yollow;color:Red;},对于指定的标签采用统一的样式
Class选择器,以定义一个命名的样式,然后在用到它的时候设定元素的class属性为样式的名称,还可以同时设定多个class,名称之间加空格
样式名称开头加““
.Waring{background:Yellow;}
.Highlight{font-sizexx-large;cursor:help;}
<table><tr><tdclass=”highlight”>aaa</td><td class=”waring”>bb</td><tdclass=highlight waring”>css</td></tr></table>
八、标签+class选择器
Class选择器也可以针对不同的标签,实现同样的样式名对于不同的标签有不同的样式,只要在样式名前加标签名即可
Input.accountno{text-align:right;color:Red;}
Label.accountno{font-style:italic;}
<Inputclass=”accountno” type=”text” value=”1111111”/>
<labelclass=”accountno”>333333333</label>
2、 id选择器
为指定id的元素设定样式,id前加#
#username
{
Font-size:xx-large;
}
<input id=”username” type=”text” value=”aaaaaaaaaa”/>
Style、class可以同时组合使用
<input id=”username” class=”accountno” style=”font-size:xx-large”type=”text” value=”aaaaaaaaaa”/>
3、 更多选择器
关联选择器:
Pstrong{background-color:Yellow}
表示P标签内的strong标签内的内容可以使用的样式
<stronh>fasdsdfsd</strong>
<p><strong>dfsdf</strong></p>
组合选择器,同时为多个标签设定一个样式
H1,H2,input{background-color:Green:}
<h1>nihao</h1>
<input type=”text” value=”test”/>
4、 伪选择器
伪选择器:为标签的不同状态设定不同的样式
A:visited:超链接点击过的样式;A:active:选中超链接时的样式;A:link:超链接未被访问的状态;A:hover:鼠标移到超链接时的状态。
A:visited{TEXT-DECORATION:none}
A:active{TEXT-DECORATION:none}
A:link{TEXT-DECORATION:none}
A:hover{TEXT-DECORATION:underline}
---------------------- Windows Phone 7手机开发、 .Net培训、期待与您交流! ---------------------- 详细请查看: http://edu.csdn.net/heima/