---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------
Web开发相关概念
手写HTML实现一般难度的Web页面的能力。
webBrowser控件,浏览器控件
Trident引擎就是IE的WebBrowser控件,现在很多非IE核心的浏览器用的就是WebKit引擎。
浏览器兼容性问题,不同浏览器品牌对HTML的支持是有差异的。
<ul>无序列表
网站分为静态页面和动态页面两种:
静态页面:有一个html页面文件保存在服务器上,浏览器要这个页面的时候服务器就把这个页面文件发给浏览器。
动态页面:服务器上没有浏览者要看的页面,而是服务器生产的HTML页面发给浏览器,动态语言的服务器可以用C#、VB.NET、PHP、Java、c编写。
VS中开发HTML页面
第一个网页:新建Web项目(新建-》ASP.NETWeb应用),新建html页面(添加-》新建项-》web-》HTML页)
可以点右键设为起始页
HTML页结构说明
所有内容都在<html></html>标签之内;<head></head>内方的是头部信息,是对页面描述,不会直接显示在页面中,<head>内的<title>中设置的是页面的标题,<title>只能放在<head>中;<body>是页面的主题,大部分显示内容都定义在这里。
body标签的bgcolor属性可以设定网页背景的颜色。#006699每两个一组分别表示R、G、B。(不属于标准属性,没有提示)在VS中有内置工具拾色器,可以选择颜色。
HTML和XML的联系、区别
属性值:HTML中属性值即可以用单引号括起来、也可以用双引号括起来、甚至不用引号都可以、单双要配对。
注释:HTML使用和XML一样的<!--注释内容-->来做注释。
特殊字符:HTML中<、>是有特殊含义的、空格是不会被显示,所以需要特殊符号,相当于C#中的'\n'转义符。<(小于号,less than);>(大于号,greater than); (空格,no-break space)<>标签定义
格式标签:<p></p>创建段落;<br/>回车,也可以写成<br>,在html中一些标签可以不关闭,<br>就是一个,这也是和XML不同的地方,但最好严格关闭。
在html中不识别“ ”空格否则排版很麻烦
基础
<br>回车 <p>分段 区别:<br>就是两行,<p>两端内容之间有空白
<center>居中显示
h表情,HTML定义了<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体。
<b></b>粗体
<font></font>字体标签
URL:URL表示资源在网络中的地址。
超级链接:<a href=" 网址"></a>
<a>中还可以嵌套图片,这样就是点击图片打开连接
<a href="http://www.rupeng.com"><image src=""/></a>
相对URL:
相对URL表示相对于当前文档的资源,“/”表示网站的根目录,“../”表示父目录,“../../”表示父目录的父目录,“./”或者不写任何斜线表示相对于当前路径的目录。站内引用最好用相对URL,这样域名改变了、目录改变了都不受影响。<a href="a.htm"><img src="a.jpg"/></a>
将<a>的target属性设定为"_blank"就可以在新窗口中打开超链接。按住ctrl点击链接
用name属性为<a>起名字:<a name="last">这里是最后</a>。这样可以通过<a href="#Last">转到平台</a>来跳转超连接部分。
图片是链接的,不是插入的,alt属性为图片无法显示时的显示文本。图片一定要指定width和height,哪怕图片未加载完成也会先占位置。
显示小图,用width和height,加入超链接可以实现图片的缩放。但是一般不要这么做,因为还是要下载完整图片,使得速度比较慢。
最好方法:显示的小图就是小图,可以超链接是大图<a href="/image/csharp1.jpg"><img src="/image/csharp1_small.jpg"/></a>
列表、表格
列表:<ul><li></li></ul>无序列表 unordered list
<ol></ol>有序列表,用的很少.ordered list
表格:<table></table>为表格,在内部通过<tr>创建行,<tr>内部<td>创建单元格。可以将table的border 属性设为0来隐藏表格线。
<tr>的属性:align,水平对齐,可选值left,right,center;valign垂直对齐,可选值top、middle、bottom。
<td>也有align和valign。vertical 垂直,子标签默认继承父标签的属性,如果自己单独指定了属性,会覆盖父标签的属性
还可以使用rowspan、colspan进行单元格合并,用VS可视化的功能来做就行。
colspan 属性规定单元格可横跨的列数
scope 属性标识某个单元是否是列、行、列组或行组的表头。
表头的td可以用th代替,这样就会表头粗体、居中显示。
建议将表头用<thead>代替<tr>
表单
网站表单与填表
<form>标签为表单标签。如果要把数据提交到服务器,则需要将<input>、<textarea>、<select>等表单元素放到form中。
<input>是主要的表单元素,type的可选值:submit(提交按钮)、button(普通按钮)、checkbox(复选框)、file(文件选择框)、hidden(隐藏字段)、image(图片按钮)、password(密码框)、radio(单选按钮)、reset(重置按钮)、text(文本框)
例:<input type="text" />
action把页面提交给谁
input表单详解
submit:点击submit按钮表单就会被提交给服务器,中文IE下默认按钮文本为“提交查询”,可以设置value属性修改按钮的显示文本。
text:size属性为宽度,value为值,maxlength为可以输入的最大长度,readonly只读。<input type="text" readonly/>(只写属性名,不写属性值)或者<input type="text" readonly="readonly/">(推荐)
checkbox:checked属性表示是否被选中,<input type="checkbox" checked />或者
<input type="checkbox" checked="checked" />(推荐)
checked、readonly这种只有一个可选值的属性都可以省略属性值
radio:相同name属性的为一组,组间不互相影响。不同radio设定不同的value值,这样通过取指定的name的值就可以知道谁被选择了,不用单独的判断。
file:使用file,则form的enctype必须设置为,multip art/form-data、method属性为POST。
image:使用src属性指定图片的地址,用来实现美化的“登录按钮”,alt是图片不显示的时候显示的字,title是鼠标放到图片上时显示的文字
<SELECT>标签
用来创建类似于WinForm中的ComboBox或者ListBox
如果Size属性大于1就是ListBox,就是列出来了。(size的值为显示出来的列表数量)否则就 是ComboBox。<select multiple>或者<select multiple="multiple">(推荐),那么这样就是可以多选的ListBox。
select中的项是<option>,<option>北京</option>还可以设定项的值<option value="1">北京</option>
将一个option设置为选中:<option selected>333</option>或者<option selected="selected">333</option>(推荐)就可以将这个设定为选项。
如何实现不选择,添加一个<option value="-1">--不选择--</option>,然后编程判断select 选中的值如果是-1就认为是不选择。
select 分组选项,可以使用optgroup对数据进行分组,分组本身不会被选择,无论对于下拉列表还是列表框都适用。备注
其他标签
<textarea>多行文本(也是表单元素):<textarea>文本</textarea>,cols、rows属性表示行数和列数。赋初值就是在标签里写
<label>:在<input type="text">前可以写普通的文本来修饰,但是单击修饰文本的时候input并不会得到焦点,而且用label则可以,for属性指定修饰的控件id,<label for="txt1">asdfad</label><input type="text" id="txt1" />
fieldset:GroupBox效果,将一些控件框起来,看起来规整一些
<fieldset>
<legend>常用</legend>
<input typr="text">
</fieldset>
<hr/>横线
层(Div)、块(Span)
<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。
层:<div></div>将内容放到层中,就以将这些内容当成一个整体进行处理,比如整体隐藏、整体移动等。Div非常强大和常用。类似于WinForm的Panel。
span:div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容定义成一个整体来进行操作,但不影响布局、显示。
样式表、CSS
CSS(层叠样式表)使用来美化页面用的。可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色、背景颜色、边框等。CSS主要有元素内联、页面嵌入和外部引用(推荐)三种使用方式。
元素内联,直接将样式写入元素的style属性中,<input type="text" readonly="readonly" style="background-color:#FF00FF"/>,适用于样式没有可复用性的场合。
页面嵌入:在head中加入
<style type="text/css">
input{background-color:Red;border-color:Green}
</style>
表示页面中国有input都是采用指定的样式。适合于样式复用,减小页面体积。
外部引用,将css内容写入css后缀文件
textarea{background:yellow}
然后在页面中引用,在head中加入
<link type="text/css" rel="Styleheet" href="s1.css"/>
美工人员编写css
适用于多个页面共享
将CSS写入一个单独的页面中
添加-新建项-web-样式表
常见样式:
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(输入Been)、wait(忙沙漏)、help(帮助)等。变成图片就是选择url。
LI不显示圆点:LIST-STYLE-TYPE:none;一般设定值li或者ul上
<u>下划线
样式选择器
对于非元素内联的样式需要定义样式选择器,通俗点说就是这个样式适合哪些元素,三种:标签选择器、class选择器和id选择器
标签选择器 input{background-color:Red;border-color:Green},对于指定的标签采用统一的样式。
class选择器,以定义一个命名的样式,然后在用到它的时候设定class属性为样式的名称,还可以同时设定多个class,名称之间加空格,可以同时具备多种样式。
样式名称开头加“.”表示class选择器
.warning{background:Yellow;}
.highlight{font-size:xx-large;cursor:help;}
样式优先级
自己写的style优先级比较高。class和style可以同时用,如果冲突就是style覆盖class
标签+class选择器
Class选择器也可以针对不同的标签,实现同样的样式名对于不同的标签有不同的样式,只要在样式名前加标签名即可。
input.accountno{text-align:right;color:Red;}
label.accountno{font-style:italic;(斜体)}
<input class="accountno" type="text" value="111111111111111"/>
<label class="accountno">33333333333333</label> accountno账户数字
id选择器
为指定id的元素设定样式,id前加#
#username
{
font-size:xx-large;
}
<input id="username" type="text" value="11111111">不需要在控件上描述
关联选择器:表示某个控件内的样式
P strong{background-color:Yellow}
表示P标签内的strong标签内的内容使用样式,strong的意思是加粗
<strong>fashjgerigh</strong>
<p><strong>fashjg</strong></p>
组合选择器,同时为多个标签设定同一个样式
H1,H2,input{background-color:Green}
<h1>nihao</h1>
伪选择器
为标签的不同状态设定不同的样式
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://net.itheima.com/