------- 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只是把一段内容定义成一个整体进行操作，但不影响布局、显示。
936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
