------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----
1、什么是浏览器
浏览器就是接收浏览者的操作(打开一个网址、点击一个链接、点击一个按钮),然后帮浏览者去Web服务器请求网页内容(HTML)格式返回),然后展现成人眼能够看得懂的可视化页面的软件。IE==浏览器?IE是浏览器的一种,还有FireFox、Opera、Chrome等,注意遨游、世界之窗、搜狗浏览器、360浏览器等并不是一种独立于IE的浏览器,其内核还是IE的内核,只不过换了一个外壳而已。所谓的Tident引擎就是IE的WebBrowser控件。现在很多非IE核心的浏览器用的是Webkit引擎,比如遨游3或搜狗的双核、Chrome、Safari2、HTMLHTML就是描述网页长什么样子、有什么内容的一个文本。查看网页的描述内容(HTML)的方式:使用IE浏览器的话,在网页上点击右键,选择查看源文件网站页面分为静态页面和动态页面俩种这个静态页面:有一个html页面文件保存在服务器上,浏览器要这个页面的时候 就把页面的文件发给浏览器;动态页面:服务器上没有浏览者要看的页面,而是服务器动态生成的HTML页面发给浏览器,动态语言的服务器端可以用C#、VB.Net、PHP、Java、C等的编写。编写普通的HTML页面是和任何后台语言无关的,可以使用Dreamweaver、Expression Web(FrontPage的改头换面版)等工具写,这些工具是给页面美工用的,开发人员用VS写html就够了。3、第一个网页新建Web项目(新建ASP.NetWeb应用程序),新建html页面(添加 新建项 Web HTML页)查看页面的方式: 切换到“设计”视图,可以在这里查看初步的预览效果,不是很准; 可以在“设计”视图从工具箱中拖放控件可视化的设计,设计复杂页面 的时候很少直接可视化设计。 在编译器上点右键,选择“在浏览器中查看”。无法进行测试。 将要查看的页面设为起始页(在文件上点击右键“设为起始页”),然后点击“启动调试”。可以调试。 4、HTML页结构说明所有内容 都在<html></html>标签之内;<head></head>内放的是头部信息,是对页面的描述,不会直接显示在页面中,<head>内的<title>只能放在<head>中;<body>是页面的主体,大部分显示内容都定义在这里。例子:<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body bgcolor="#418338"> <img src="1.gif"/>aa<font color="red">aaa</font> <br/> <img src="2.gif"usemap="#aaa"> </body> </html> 5、颜色体系body标签的bgcolor属性可以设定网页的背景颜色,<body bgcolor="#00699">#00699这就是HTML中表示颜色的方式,每俩个是一组,三组分别表示R、G、B的值,是16进制表示。关于RGB见备注可以使用VS内置的颜色选择对话框生成RGB值,也可以用取色器:打开IE,打开DebugBar工具栏,点击吸管图标);HTML还预定义了一些颜色:red、black、white等,比如bgcolor="black".6、注释:HTML使用和XML一样的<!--注释内容-->来做注释。 特殊字符:HTML中<、>是有特殊含义的、空格是不会被显示的,所以需要特殊符号,相当于C#中的转义字符。<;(小于号,less than);>:(大于号,greater than); :(空格,no-break space).使用工具,免除记忆。格式 标签:<p></p>创建段落;<br/>回车,也可以写成<br>.例::<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body bgcolor="#418338"> <img src="1.gif"/>aa<font color="red">aaa</font> <br/> <img src="2.gif"usemap="#aaa"> <p> afasdfasdf </p> 北京 你好吗! </body> </html> HTML不把”“当成空格,因为HTML中经常有缩进,如果把缩进的空格在浏览器中以空格形式展现的话会很麻烦。” "表示空格。7、文字格式<br/>只是回车,<p>是分段。<p>前后会有比较大的空白,而<br/>则没有。<center>传智播客</center>居中显示h标签,HTML定义了<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体。<b>a</b>粗体; <font></font>字体标签,<font color="red">红色</font> <font size="30" color="red">红色</font>8、超链接深入相对URL:相对URL表示相对于当前文档的资源,"/"表示网站根目录,"../"表示父目录,"http://www.cnblogs.com/"表示父目录的父目录,"./"或者不写任何斜线表示相对于当前路径的目录。站内引用最好用相对URL,这样域名 改变了、目录改变了都不受影响。<a href="a.htm"><img src="a.jpg"/></a> <img src="../images/csharp 1.jpg"/> <img src="http://images.cnblogs.com/csharp 1.jpg"/>将<a>的target属性设定为"_blank"就可以在新窗口中打开超链接用name属性为<a>起名字:<a name="Last">这里是最后</a>.这样可以通过<a href="#Last">转到平台</a>来跳转到超链接的部分。9、图片
<img src="a.jpg"/>注意图片时链接的,不是插入的,所以如果src指向的文件不存在了,就看不了了。alt属性为图片无法显示时的文本,鼠标方式去也会有悬浮提示“点击查看大图”;border属性指定边框,border=“0”不显示边框:width、height属性指定图片显示的大小,如果不指定则是图片的原始大小。最好指定width、height,哪怕是原始尺寸大小,因为如果不指定大小,图片会不占位置,图片下载后才调整大小,会造成页面很乱。如果页面上要显示小图(比如缩略图), 不要仅仅是把大图设定一下width、height来缩小,因为仍然会下载大图,会使得加载速度很慢。例:<html xmlns=http://www.w3.org/1999/xhtml> <head> <title></title> </head> <body > <a href="/images/csharp1.jpg"><img src="http://images.cnblogs.com/csharp1.jpg" width="50" height="50"/></a> </body> </html>10、列表、表格表格:<table></table>为表格,在内部通过<tr>创建行,<tr>内部通过<td>创建单元格。可以将table的border属性设为0来隐藏表格线。<tr>的属性:align,水平对齐,可选值left、right、center;valign,垂直对齐,可选值top、middle、bottom.<td>也有align和valign.<tr align="right"><td>tom</td><td align="left">20</td><td>男</td></tr>:子标签默认继承父标签的属性,如果自己单独指定了属性还可以使用rowspan、colspan进行单元格合并,用VS可视化的功能来做就行。表头的td可以用th代替,这样就会表头粗体、居中显示。建议将表头用<thead>代替<tr>. 11、表单<form>标签为表单标签。如果要把数据提交到服务器,则需要将<input>、<textarea>、<select>等表单元素放到form中。〈input〉是主要的表单元素,type的可选值:submit(提交按钮)、button(普通按钮、checkbox(复选框)、file(文件选择框)、hidden(隐藏字段)、image(图片按钮)、password(密码框)、radio(单选按钮)、reset(重置按钮)、text(文本框)。<html xmlns=http://www.w3.org/1999/xhtml> <head> <title></title> </head> <body > <form action="Register.aspx"> <input type="text"/> <input type="checkbox"/> <input type="button"/> <input type="submit"/> </form> </body> </html> 练习:编写HTML注册表单,,需要字段:用户名,
密码,
确认密码,
邮件,
确认邮件,
性别(单选),
城市(下拉列表),
兴趣爱好(多选),
提交及重置按钮。
解:<html>
<head> <title></title> <style type="text/css"> #Submit1 { height: 27px; width: 70px; } #Reset1 { height: 26px; width: 71px; } </style></head>
<body> <table border="2"> <tr><td><label for="username">用 户 名:</label></td><td><input id="username" type="text" /></td></tr> <tr><td><label for="password">密 码:</label></td><td><input id="password" type="password" /></td></tr> <tr><td><label for="password1">确认密码:</label></td><td><input id="password1" type="password" /></td></tr> <tr><td><label for="email">邮 件:</label></td><td><input id="email" type="text" /></td></tr> <tr><td><label for="email1">确认邮件:</label></td><td><input id="email1" type="text" /></td></tr> </table> <fieldset> <legend>性别</legend> <input id="sex" type="radio" checked="checked" />男 <input id="sex" type="radio" />女 </fieldset> <label for="city">城 市:</label> <select id="城市" style="width: 167px"> <option>北京</option> <option>上海</option> <option>广州</option> </select> <fieldset> <legend>爱好</legend> <input id="dengshan" type="checkbox" />登山 <input id="swimming" type="checkbox" />游泳 <input id="basketball" type="checkbox"/>篮球 <input id="football" type="checkbox" />足球 <input id="read" type="checkbox" />读书 </fieldset> <input id="Submit1"type="submit" value="提交" οnclick=" checkUser();"/> <input id="Reset1" type="reset" value="重置" /> </body>------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----