------- Windows Phone 7手机开发、.Net培训、期待与您交流! -------
浏览器简介
-
浏览器就是接收浏览者的操作(打开一个网址、点击一个链接、点击一个按钮),然后帮浏览者去 Web 服务器请求网页内容( HTML 格式返回),然后翻译成正常人类能够看得懂的可视化页面软件。
-
浏览器有很多种,最常见的有两种内核, IE 浏览器的内核 Trident 和 Chrome 的内核 WebKit 。其他浏览器大多采用的都是其中的一种或两种内核。 WebKit 引擎比较牛,所以最新的 IE 浏览器也用了起来。
-
所谓的 Trident 引擎就是 IE 的 WebBrowser 控件。
静态页面、动态页面
-
静态页面:有一个 html 页面文件保存在服务器上,浏览器要这个页面的时候服务器就把这个页面文件发给浏览器。
-
动态页面:服务器上没有浏览者要看的页面,而是服务器动态生成的 HTML 页面发给浏览者,动态语言的服务器可以用 C# 、 VB.Net 、 PHP 、 Java 、 C 等编写。
-
编写普通的 HTML 页面是和任何后台语言无关的,可以使用 Dreamweaver 、 Expression Web 等工具写,这些工具是给页面美工用的,开发人员用 VisualStudio 写 html 就够了。
HTML页结构说明
-
所有内容都在 <html></html> 标签之内; <head></head> 内放的是头部信息,是对页面的描述,不会直接显示在页面中, <head> 内的 <title> 中的设置的是页面的标题, <title> 只能放在 <head> 中; <body> 是页面的主体,大部分显示内容都定义在这里。
-
所有页面都应该至少包含这些部分,由于浏览器的容错性强,所以即使不包含也能正常显示,但是最好还是写完全了。
-
HTML 不把“ ”当成空格,因为 HTML 中经常有缩进,如果把缩进的空格在浏览器中以空格的形式展现的话,排版会很麻烦。
HTML的基本标签
-
(页面内容的)标题(Heading):<h1/>-<h6/> <h1>表示的标题字最大</h1>
-
段落(Paragraph):<p/> <p align="center">居中对齐</p>
-
换行符(break):<br> <br/>换行
-
预先格式化(pre edition):<pre>该元素中的文本保留空格、换行符,文本为等宽字体。显示 预先定义格式 的文本(如HTML文档中所示)
-
字符格式化:<b>粗体(bold)</b> <i>斜体(italic)</i> <u>加下划线(underline)</u> <sub>下标(subscript)</sub> <sup>上标(superscript)</sup>
-
列表(list): 无序列表(unordered list)-<ul><li></li></ul> 有序列表(ordered list)-<ol></ol>
-
水平线(Horizontal Rule):<hr> 属性:align width size noshade
<hr noshade size="5" align="center" width="50%" />
-
字体(font):<font></font> 属性:size(1-7)数字越大字体越大,color(也可用16进制表示),face(可以指定一系列字体) <font size = “5” color = “blue” face = “Arial”></font>
-
图像(image):<img/> 属性:src图形路径 align对齐方式
<img src="a.jpg">注意图片是链接的,不是插入的,所以如果Src指向的文件不存在了,就看不了了。Alt属性为图片无法显示时的显示文本。
最好指定图片的width、height,哪怕是原始尺寸大小,因为如果不指定大小,图片会不占位置,图片下载后才调整大小,会造成页面很乱。
如果网页上要显示小图(比如缩略图),不要仅仅是把大图设定一下width、height来缩小,因为仍然会下载大图,会使得加载速度很慢。
-
特殊字符:
空格(no break space):
大于号(>):> >
小于号(<):⁢ <
引号("):" "
®:® ®
©:©©
-
超级链接:<a/> href(hyperlink reference)
<a href="url">Link text</a>
<a href="http://www.xxx.com/">我的主页</a>
{
锚标签<a>还可用于使用户“跳”到文档的某个部分
为达到这种跳转效果,需要在href参数中使用该标记
<a href = “#Lion”>狮子</A>
Html的name属性用于创建锚标记
<a name = “Lion”>狮子</a>
效果如下图所示,点击带下划线的“狮子”可以跳到下文的“狮子”处。
}
也可以跳到其他HTML文档的某个部分:
<A HREF=AnimalDetails.htm#Lion>狮子</A>
<A NAME = Lion>狮子</A>
电子邮件链接:
<a href=“mailto:xxx@yahoo.com”>请将您的疑问发送至David</A>
-
meta标签:位于头部:<head>
许多搜索引擎都使用 meta 标签信息
<meta name="author" content="Graham Browne">
<meta http-equiv-"expires" content="Wed, 14 Sep 2011 GMT">:表示网友过期时间
<meta http-equit="refresh" content="2">:表示每隔2秒,自动刷新网页
-
小结:
HTML 标签一般配对使用,不区分大小写
标签都具有属性。属性提供关于网页上 HTML 元素的附加信息
meta 标签放置在网页的标题处以提供关于页面的信息。搜索引擎常会用到这些标签
标题级标签使用<h1>…<h6>
段落标签使用<p align=“对齐方式”>…</p>
无序列表使用<ul>标签,有序列表使用<ol>标签
字体标签<font color=“颜色” size=“大小” face=“字体”>
超链接标签<a href=“链接地址”>超链接文本</a>
-
创建表格:
border="2"表示边框线尺寸
<caption>表示表格标题
<th>表示行或列标题,粗体显示
colspan="3"表示跨3列
rowspan="3"表示跨3行
align,水平对齐,可选值left,right,center;
valign,垂直对齐,可选值top,middle,bottom。
<tr>表示行
<td>表示列
例子:
<table border="0" align="center" width="200"> <!-整个表格居中-->
<caption align="top">学员档案信息</caption>
<tr bgcolor="#00ffff">
<th>姓名</th> <!-默认左对齐-->
<th align="center">性别</th> <!-居中-->
<th align="right">分数</th> <!-右对齐-->
</tr>
<tr bgcolor="#ffff00">
<td>Robert</td>
<td align="center">M</td>
<td align="right">80</td>
</tr>
<tr bgcolor="#ffff00">
<td>Mary</td>
<td align="center">F</td>
<td align="right">18</td>
</tr>
</table>
-
HTML表单和输入<form>
<input> 定义输入域(单行文本框)
<textarea> 定义文本域(多行文本框)
<select> 定义一个选择列表
<form>
<input name="button1" type="submit" value="提交"/>
<input name="button2" type="reset" value="重置" />
<input name="button3" type="button" value="普通按钮" />
<input type="text" name="PID" value="" size="20" maxlength="18" />
<input type="password" value="" name="pass" size="15" />
<textarea name="textarea" cols="20" rows="5">请填写您的工作经历</textarea>
性别:<input type="radio" name="sex" value="male">男性</input>
<input type="radio" name="sex" value="female">女性</input>
你喜欢以下哪些明星:<br/>
<input type="Checkbox" name="id1" value="Noriko_Sagai">酒井法子</input>
<input type="Checkbox" name="id2" value="Leon">郑秀文</input>
<input type="Checkbox" name="id3" value="BonJovi" checked="checked">BonJovi</input>
<b>谁是2002年世界杯冠军?</b>
<select name="myselect">
<option selected="selected">西班牙</option>
<option>法国</option>
<option>巴西</option>
<option>德国</option>
</select>
</form>
-
fieldset:GroupBox效果
<fieldset>
<legend>区域标题</legend>
<input type="text" />
</fieldset>
Fieldset:将控件划分一个区域,看起来更加整齐。
-
样式表、CSS
CSS(层叠样式表)是用来美化页面用的,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色、背景颜色、边框等。CSS、页面嵌入和外部引用三种方式。
1. 元素内联,直接将样式style属性中,<input type=”text” readonly=“readonly” style=”background-color:#ff00ff”>,适用于样式没有可复用性的场合。
2. 页面嵌入:在head中加入
<style type=”text/css”>
Input{border-color:Yellow;color:Red;}
</style>
表示页面中所有input都是采用指定的样式。适合于样式复用,减小页面体积
3. 外部引用,将css内容写入css后缀的文件
Textarea{background:yellow;}
然后再页面中引用,在head中加入
<link type=”text/css” rel=”Stylesheet” href=”s1.css”/>
适合于多个页面共享css。
-
常见样式(style)
1. CSS计量单位:表示宽度、距离时有多种计量单位:px(像素)、30%(百分比)、em(相对单位)等。
2. Backgroud-color:Red;背景颜色;color:文本颜色
3. Border-style:solid:边框风格,实线,还有dotted(点)等值;border-color:边框颜色;border-width:边框宽度。例子:style=”border-color:red;border-width:1px;border-style:dotted;”
4. Display:元素是否显示,可选值none(不显示)、block(显示为块级元素,此元素前后会带有换行符。)、inline(显示为内联元素,元素前后没有换行符)等。
5. Cursor,鼠标在元素上时显示的光标图标,可选值:cursor(默认光标)、pointer(超链接上的手)、text(输入Bean)、wait(忙沙漏)、help(帮助)等。
<body style=”cursor:url(animal.ani)”></body>
鼠标图案变成图片(animal.ani),也可以是.cur类型的图片。
-
层(Div)、块(Span)
层:<div></div>将内容放到层中,就以将这些内容当成一个整体进行处理,比如整体隐藏、整体移动等。Div非常强大和常用。
Span: div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容定义成一个整体进行操作,但不影响布局、显示。