《HTML与CSS网站设计实践之旅》读书笔记

HTML与CSS网站设计实践之旅

BuildYour Own Web Site the Right Way Using HTML & CSS

——[英] Ian Lloyd

【Example】

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title> Listsp - an introduction</title>

<metahttp-equiv="Content-Type"

content="text/html;charset=utf-8"/>

</head>

<body>

<h1><em>Lists</em> -an introduction </h1>

<p>Here's a paragraph.Alovely,concise little paragraph.</p>

<p>Here comes anotherone,followed by a subheading.</p>

<h2>A subheading here</h2>

<p>And now for a list ortwo:</p>

<li>This is a bulletedlist</li>

<li>No orderapplied</li>

<li>Just a bunch ofpoints we want to make</li>

</ul>

<p>And here's an orderedlist:</p>

<li>This is the firstitem</li>

<li>Followed by thisone</li>

<li>And one more forluck</li>

</ol>

<h1>特殊符号相应的实体表示法</h1>

</body>

</html>

【index.html】

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Bubble Under -The diving club for the south-west UK</title>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/> <!-- meta成为自关闭元素，也叫

空内容元素，它没有内容，因而结束标签可以合并到起始标签里-->

<styletype="text/css">

p {

font-weight:bold;

color:green;

}

</style>

<linkhref="style1.css" rel="stylesheet"type="text/css" />

</head>

<body>

<divid="header">

<divid="sitebranding">

<h1>BubbleUnder.com</h1>

</div>

<divid="tagline">

<pstyle="color:blue;font-weight:bold"><spanstyle="color:red;font-weight:normal">Diving club</span> forthe south-west UK - let's make a splash!</p>

</div>

</div>

<divid="navigation">

<ul>

<li><ahref="about.html">About Us</a></li>

<li><ahref="events.html">Club Events</a></li>

<li><ahref="contact.html">Contact Us</a></li>

<li><ahref="gallery.html">Image Gallery</a></li>

</ul>

</div>

<divid="bodycontent">

<h2>Welcome toour super-dooper Scuba site</h2>

<p><imgsrc="../img/divers-circle.jpg" class="feature"width="200" height="162"

alt="Acircleof divers practice their skils" /></p>

<p>Glad youcould drop in and share some air with us!<br />

You've passed yourunderwater navigation skills and successfully found your way to the start pointor in this case,our home page.</p>

<p><strong><em>MaoZedong</em></strong> said: "<cite>Service forpeople</cite>"</p>

</div>

</body>

</html>

【contact.html】

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">

<HTMLxmlns="http://www.w3.org/1999/xhtml">

<HEAD>

<TITLE>Contact Us atBubble Under</TITLE>

<METAhttp-equiv="Content-Type" content="text/html;charset=utf-8"/>

<linkhref="style1.css" rel="stylesheet"type="text/css" />

</HEAD>

<BODY>

<divid="header">

<divid="sitebranding">

<h1>BubbleUnder.com</h1>

</div>

<divid="tagline">

<p>Divingclub for the south-west UK - let's make a splash!</p>

</div>

</div>

<divid="navigation">

<ul>

<li><ahref="about.html">About Us</a></li>

<li><ahref="events.html">Club Events</a></li>

<li><ahref="contact.html">Contact Us</a></li>

<li><ahref="gallery.html">Image Gallery</a></li>

</ul>

</div>

<divid="bodycontent">

<h2>ContactUs</h2>

<p>To let usknow about a forthcoming dive event, please use the form below.</p>

<formaction="" method="post" class="contact">

<legend>Tellus About a Dive Event</legend>

<div>

<labelfor="contactname" class="fixedwidth">ContactName</label>

<inputtype="text" name="contactname" id="contactname"/>

</div>

<div>

<labelfor="telephone" class="fixedwidth">TelephoneNumber</label>

<inputtype="text" name="telephone" id="telephone" />

</div>

<div>

<labelfor="email" class="fixedwidth">EmailAddress</label>

<inputtype="text" name="email" id="email" />

</div>

<div>

<labelfor="eventname" class="fixedwidth">What's the eventcalled?</label>

<inputtype="text" name="eventname" id="eventname" />

</div>

<div>

<labelfor="eventdate" class="fixedwidth">When's the eventhappening?</label>

<inputtype="text" name="eventdate" id="eventdate" />

</div>

<div>

<labelfor="region" class="fixedwidth">What region is the eventin?</label>

<selectname="region" id="region">

<option>Southwest</option>

<option>Southeast</option>

<option>Midlands</option>

<optionselected="selected">Central</option>

<option>Loudon</option>

<option>North</option>

<option>Scotland</option>

<option>NorthernIreland</option>

<option>Overseas(see details below)</option>

</select>

</div>

<div>

<p>Pleaseprovide any other details you think will be useful to us in the text area below(it may save us calling or emailing you, and help avoid delays).</p>

<labelfor="details" class="fixedwidth">More details (as muchas you think we'll need!</label>

<textareaid="details" cols="30"rows="7"></textarea>

</div>

<div>

<p>Ifwe need to call you back for any more info,what would be the best time to callyou on the number supplied?</p>

<inputtype="radio" name="timetocall" id="morning"value="Morning" />

<labelfor="morning">In the morning</label>

<br/>

<inputtype="radio" name="timetocall" id="afternoon"value="Afternoon" />

<labelfor="afternoon">In the afternoon</label>

<br/>

<inputtype="radio" name="timetocall" id="evening"value="Evening" />

<labelfor="evening">In the evening</label>

<br/>

<inputtype="radio" name="timetocall" id="never"value="Never" checked="checked" />

<labelfor="never">No calls please</label>

</div>

<div>

<p>BubbleUnder may share information you give us here with other like-minded people orweb sites to promote the event.Please confirm if you are happy for us to dothis.</p>

<inputtype="checkbox" name="publicize" id="publicize"checked="checked" />

<labelfor="publicize">I am happy for this event to be publicized outsideof and beyond BubbleUnder.com, where possible</label>

</div>

<divclass="buttonarea">

</div>

</fieldset>

</form>

<p>If you needto get in touch urgently, please call Bob Dobalina on 01793 641207.For anythingelse, please<a href="mailto:bob@bubbleunder.com"> drop us aline by email</a>.</p>

</div>

</BODY>

</HTML>

【about.html】

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>AboutBubbleUnder.com:who we are;what this site is for</title>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>

<linkhref="style1.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<divid="header">

<divid="sitebranding">

<h1>BubbleUnder.com</h1>

</div>

<divid="tagline">

<p>Divingclub for the south-west UK - let's make a splash!</p>

</div>

</div>

<divid="navigation">

<ul>

<li><ahref="about.html">About Us</a></li>

<li><ahref="events.html">Club Events</a></li>

<li><ahref="contact.html">Contact Us</a></li>

<li><ahref="gallery.html">Image Gallery</a></li>

</ul>

</div>

<divid="bodycontent">

<h2>AboutUs</h2>

<p>BubbleUnder is a group of diving enthusiasts based in the south-west UK who meet upfor diving trips in the summer months when the weather is good and the baconrolls are flowing.We arrange weekends away as small groups to cut the costs ofaccommodation and travel and to ensure that everyone gets a trustworthy divebuddy.</p>

<p>Althoughwe're based in the south-west,we don't stay on our own turf:past diving weekendsaway have included trips up to Scapa Flow in Scotland and to Malta's numerouswreck sites.</p>

<p>When we'renot diving, we often meet up in a local pub to talk about our recent adventures( any excuse, eh? ). </p>

<p>Or as ourman Bob Dobalina would put it:</p>

<blockquoteclass="fun">

<p>"Happinessis a dip in the ocean followed by a pint or two of Old Speckled Hen.You canquote me on that!"</p>

<p>"Joinus for a weekend away at some of our favorit dive spots and you'll soon bemaking new friends.</p>

<p>"Anyway,abouttime I got on with some <em>proper</em> work!"</p>

</blockquote>

</div>

</body>

</html>

【events.html】

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Forthcoming clubdiving events and trips with Bubble Under.</title>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>

<styletype="text/css">

p {

font-weight:bold;

color:green;

}

</style>

<linkhref="style1.css" rel="stylesheet"type="text/css" />

</head>

<body>

<divid="sitebranding">

<h1>BubbleUnder.com</h1>

</div>

<divid="tagline">

<pstyle="color:blue;font-weight:bold">Diving club for the south-westUK - let's make a splash!</p>

</div>

<divid="search">

<formmethod="get" action="http://www.google.com/search">

<labelfor="q">Search:</label>

<inputid="q" name="q" size="20"maxlength="255" value="" type="text" />

<inputname="domains" value="http://www.bubbleunder.com/"type="hidden" />

<inputname="sitesearch" value="http://www.bubbleunder.com/"checked="checked" id="mysite" type="radio" />

<labelfor="mysite">Just this site</label>

<inputname="sitesearch" value="" id="www"type="radio" />

<labelfor="www">WWW</label>

<inputname="btnG" value="Go" type="submit" />

</form>

</div>

</div>

<divid="navigation">

<ul>

<li><ahref="about.html">About Us</a></li>

<li><ahref="events.html">Club Events</a></li>

<li><ahref="contact.html">Contact Us</a></li>

<li><ahref="gallery.html">Image Gallery</a></li>

</ul>

</div>

<divid="bodycontent">

<h2>ForthcomingClub Events.</h2>

<p>BubbleUnder members love meeting up for dive trips around the country.

Below areall the dive trips that we currently have planned.For more information aboutany of them,please get in contact with that event's organizer.</p>

<tableclass="events" summary="Details of upcoming club events and divetrips">

<caption>Clubevents/dive trips for the next six months</caption>

<tr>

<th>EventDescription</th>

<th>ApproximateCost</th>

<th>Contact</th>

</tr>

<tr>

<td>Committeemeeting, deciding on next year's trips</td>

<td>BobDobalina</td>

</tr>

<tr>

<td>7-daytrip to Hurghada (package deal) - limited spaces</td>

<td>£260pp (all inclusive), departing Luton</td>

<td>BobDobalina</td>

</tr>

<tr>

<td>5August</td>

<td>Ocean& Sports Diver Theory Course</td>

<td>Callfor details</td>

<td>JeffEdgely</td>

</tr>

<tr>

<td>12August</td>

<td>MurderMystery Weekend, Cotswolds (no diving!)</td>

<td>£65pp (accommodation included)</td>

<td>JillSmith</td>

</tr>

</table>

</div>

</body>

</html>

【gallery.html】

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">

<HTMLxmlns="http://www.w3.org/1999/xhtml">

<HEAD>

<TITLE>Image Gallery -Underwater Photography from Bubble Under's members.</TITLE>

<METAhttp-equiv="Content-Type" content="text/html;charset=utf-8"/>

<linkhref="style1.css" rel="stylesheet"type="text/css" />

<styletype="text/css">

img {

border:15px solid white;

}

</style>

</HEAD>

<BODY>

<divid="header">

<divid="sitebranding">

<h1>BubbleUnder.com</h1>

</div>

<divid="tagline">

<p>Divingclub for the south-west UK - let's make a splash!</p>

</div>

</div>

<divid="navigation">

<ul>

<li><ahref="about.html">About Us</a></li>

<li><ahref="events.html">Club Events</a></li>

<li><ahref="contact.html">Contact Us</a></li>

<li><ahref="gallery.html">Image Gallery</a></li>

</ul>

</div>

<divid="bodycontent">

<h2>ImageGallery</h2>

<p>Bellow aresome of the great views that club members have captured on film (or digitalmemory!) on various dive trips.</p>

<p>Please dodrop me (that's Bob) a line if you would like to <ahref="mailto:bob@bubbleunder.com">submit an image</a> tothis gallery.</p>

<divclass="galleryphoto">

<imgsrc="gallery/turtle-bite.jpg" width="350"height="232"

alt="Aturtleswims comfortably among the coral, despite its old injury - a large shark biteon one side" />

<p>Thisturtle was spotted swimming around the Great Barrier Reef (Queensland,Australia) quite gracefully, despite having had a large chunk taken out of itsright side, presumably in a shark attack. <spanclass="photocredit">[Photographer: IanLloyd]</span></p>

</div>

<divclass="galleryphoto">

<imgsrc="gallery/jellyfish.jpg" width="350"height="233"

alt="Ajellyfish flanked by smaller fish" />

<p>Jillwas just snorkelling when she took this picture - the jellyfish was only acouple of feet under the surface, hence the light is excellent. Jill assures usthat the jellyfish had no "nasty, stingy, dangly bits"! <spanclass="photocredit">[Photographer: JillSmith]</span></p>

</div>

<divclass="galleryphoto">

<imgsrc="gallery/what-a-star.jpg" width="350"height="233"

alt="Blackand white patterned starfish" />

<p>You'rea star - and don't let anyone tell you any different! <spanclass="photocredit">[Photographer: HelenCranfield]</span></p>

</div>

</div>

</BODY>

</HTML>

【style1.css】

/* CSS forBubble Under site

CSS文件的注释方式，一定不要在样式规则定义中穿插注释，否则很容易造成混乱

CSS: Cascading Style Sheet层叠样式表

描述性HTML元素：i——斜体；b——粗体 u——下划线建议不要使用这种没有体现出实际意义的（只说明其内容在屏幕上应该如何显示）元素

字体族属性可以依次排序，逗号隔开，排前者优先生效；

字体名称由多个单词组成，则需要用引号包含；

serif:该字体为每个字符添加一些装饰效果。但有时在屏幕显示有些凌乱，尤其是小字体时。所以很多网站对小字体将使用sans-serif字体。

sans-serif：法语意为“没有serif”。

/*background-color:

颜色表示法：可识别的颜色名称如http://www.w3schools.com/html/html_colornames.asp

通过color scheme工具转换得到颜色的16进制编码：如http://www.clagnut.com/blog/260

line-height: 125%; 文本的行间距

padding元素：指定元素外边界与内容的间隔大小（像素），本例应用于body，因而指可视窗口的外边界与内容间要留多少空间

font-size 字体大小表示方法：关键字(xx-small~xx-large)、百分比、像素

关键字：xx-small、x-small、small、medium、large、x-large、xx-large

font-weight 字体粗细 noamal bold

font-style 字体风格 normal italic

text-decoration 文本修饰：无none下划线underlinne 上划线overline删除线line-through

上下文选择器：

#tagline p（上下文选择器），选中id属性为tagline的段落

h1 strong（上下文选择器），选中所有级别1的标题行中的strong元素设定样式，页面中的其他strong元素的属性值不会被改变

#表示拥有特定id属性值（即div id=tagline）的元素，只针对这个id元素来设定规则

对多个元素设定样式：

可以同时选择多个元素（用逗号隔开）进行规则设定

虽然前面也对h2设置了color样式，但是只有最后一个才能生效

链接样式：

可以通过一些听起来很复杂但实际上很直观的东西来修改各种链接状态的样式，即pseudo-classes（伪类），如下所示：

CSS规则一般对顺序要求不大，但对于链接规则（参考如下）的顺序一定要严格遵守：

1.一个（未访问过的）链接

2.已访问过的链接

3.将鼠标放在链接之上时

4.激活状态，就是已点击但由于某些原因尚未打开（现在网速快，基本看不到）

类选择器：

可以为名为“fun”的类创建一个样式规则，实际上它是一个在类名称前面加一个小数点来表示类选择器的；

要使用这个样式，只需在元素中添加一个class="fun"属性；

letter-spacing属性：定义字母间隔。0.05em表示的高度 =任何字体下字母M的高度的5%

类与id

1.类选择器（包括句点）、id选择器（包括#）

2.一个特定的id只能应用于一个XHTML元素；而一个

只限于特定元素的类：

样式定义格式：元素.类{样式声明}

效果：把样式声明仅应用于特定的元素和类的组合

specificity概念：

仅仅意味着这样的规则：“最有效”的才会被应用，“最有效”的意思实际是“文档结构树中最深层的”，与出现的前后顺序无关

块元素与内联元素：

1.块元素：可包含其他元素（块元素和内联元素）的任何元素；如：h1~h6,p,div,blockquote,ul,ol,form.

作用：a.为一块文本信息指定固定的宽度或高度；

b.实现边界填充效果；

c.将一块信息移到Web页面中的任意位置。

2.内联元素：内联元素不可以包含块元素，但内联元素间可以嵌套；如：span,em,strong,cite,a.

嵌套：<p><span class="fun"><ahref="http://www.bubbleunder.com"/>BubbleUnder</a></span>is a group……</p>

作用：a.修改颜色（文字和背景）；

b.修改字体属性（大小、字体集、诸如下划线之类的修饰格式）.

如下一、二、三、四点合起来，就是一个盒子模型。

一、设置内容块的大小：

1.设置宽度：可以指定像素或百分比。块元素默认会占用100%可用的宽度（与其父元素的大小无关）和所需的高度，可以修改这些默认值。

2.设置高度：指定像素

可以通过在css中设定一个类选择器，再应用到具体元素中；或者特别为某个id属性的元素设定样式。

二、为块元素添加边框（可以将如下3项都细分为上下左右，变成12项，方法是在第一个单词后添加 -top、-bottom、-left、-right）：

1.粗细 border-width 可以通过像素（px）、点（pt）或ems来指定，也可用thin、medium、thick。

2.样式 border-style （实心线、点划线等）

solid(默认值)、double、dotted、dashed、groove、ridge、inset、outset

3.颜色 border-color 用16进制代码或颜色关键字

缩写例子（在声明中，将本来3项逐一指明的，变成依次列出，空格隔开，属性名也改成border即可）：

.container{

border:5px solidblack;

}

三、填充 padding操作的是文本信息和边框之间的“缓冲空间

1.方法一：像素大小固定

2.方法二：em 适用于设计随着字体大小的改变而改变

3.方法三：百分比值适用于设计随着浏览器窗口改变

四、边距 margin（-top、-bottom、-left、-right）：用来指定元素边框之外预留多少空间

嵌入式样式表绝对定位的步骤：

1.在head标签中直接对某指定id的元素定位 <style type="text/css">

#id1值 { position：absolute;top:200px; left:200px; }

#id2值 { position：absolute;top:20px; left:20px; }

假若id2是在id1里面的，则位于里面的元素是相对于外

部元素进行定位的 </style>

外部样式表绝对定位的步骤：

1.在样式表中添加一个临时规则，为每个元素添加一个协助定位的边框（完成后再删除该临时规则即可）；

2.在body的样式声明中，添加padding和margin属性，值均赋0；

3.确定其他元素中，是否需要添加去掉边距（margin:0）的样式声明；

4.确定需要绝对定位的元素id，在样式表中添加 #id1,#id2,#id3{ position: absolute; }

5.上述几个id对应的元素都以左上角定位到页面左上角了（叠加在一起了），因而需针对需要的id指定top/left距离，

如：#id2,#id3 { top:107px; } #id3 { left:200px; }

6.去掉某些元素的不必要的空间；

7.删除起定位作用的临时规则，完成。

相对定位：所使用的值可以是相对于原有项目的位置，只要这个项目是在该规则应用之前定义的。

例如: p{background-color:yellow;}

.nudged{ position: relative; top: 10px; left: 10px; }

nudged类可以应用于任何段落（或者其他块元素）。

浮动定位：使一个内容区域浮动显示，也就是将其放在一边，而其他内容可以环绕在它的周围；

例如： #nav { float: right; width:300px; background-color: yellow; }

这将把一个id为nav的块元素移到Web页面的右边，将其宽度设置为300像素，而它下面的文字信息将填充这个浮动元素留下的空间；

避免环绕成“L”效果的方式是：在文字内容区域应用padding属性，即在主内容区域右边添加一个310像素的填充即可，

在样式表中添加 .contentconstrained { padding-right: 310px; }，并将contentconstrained类应用在不要“L”环绕效果的地方。

设置列表的样式：

1.设置列表符号：在li的样式声明中添加：list-style-type:circle;属性值可取：disc circle squarenone；

2.使链接看起来像个按钮（使用CSS中的border和padding属性）；

3.为链接创建一个更大的可点击区域（不仅限于文本本身）；

4.使列表项水平排列。

5.1内嵌图像

图像元素img：这是一个空元素

src属性、alt属性、height和width属性

5.2

GIF：适用于示意图、标识图，只能展现256色，能够实现两种透明效果（打开、关闭）

JPEG：适用照片，属“有损压缩”，不可实现透明效果，能实现颜色远大于GIF

PNG：前两者所擅长领域中，它也擅长；但IE7以前版本对其支持不佳，能处理多个级别的透明度

5.8 CSS中的背景图像

在外部样式表（或者内嵌样式表）中添加：

#verticalfade {

border: 1px solidblack;

background-color:#e3e3e3; //若图像无法生效时，仍能有此背景色可用

background-image:url(vert-fade.gif); //背景图片链接

//需要重复模式时，才需要下面两句声明

background-repeat:repeat-x; //重复方式：水平重复repeat-x，垂直重复repeat-y，非重复图像no-repeat

background-position:top right; //仅非重复图像需要该声明，该属性需要两个值：垂直(top,center,bottom)，水平(left,center,right)

//以上两句可合并成：background: white url(vert-fade.gif) no-repeat top right;需要几项就写几项

width: 650px; //也可以固定图像的宽度和高度

height: 125px;

padding-left: 50px;

padding-top: 400px;

}

合并单元格：

在插入列（td，或者叫单元格）时，可以同时指定属性rowspan或者colspan，用来声明本单元格占几行或者几列。

scope属性：使表格中的数据与相应的表头（th）对应起来。

col 插入表头（th）时，同时指明scope="col"，意在说明在此之下的单元格都与其相关；

row 插入表头（th）时，同时指明scope="row"，意在说明在此之右的单元格都与其相关；

表格中常用CSS设置举例：见【style1.css中， page】

/* form元素：表单——和用户交互

元素：fieldset legend input textarea select 只能出现在form元素中

7.3.1 form元素的属性

method 用来告诉浏览器当用户单击提交按钮时如何发送表单中的数据，可选值：get和post

get:表单的数据将会显示在表单提交的目的页面的地址栏内；

post:使用户无法对表单的结果设置书签，表单的信息不会暴露；

如果要发送的是大量数据，post是首选的方法。

action 该属性告诉浏览器这些数据发送到什么地方去；

7.3.2 fieldset和legend元素（这两个元素可以嵌套使用）

fieldset元素能够将表单中的相关元素设置成组（在它们周围用线圈起来），

而legend元素（应包含在fieldset内）则是用来为这样的元素组设置标题；

7.3.3 input元素

input元素的外观和行为能够通过type属性动态改变，

type常用值包括：text password checkbox radio hidden submit，这些值将动态在页面中显现不同的控件

1.文本输入框

<p> <label for="yourname">Enteryour name:</label>

<inputtype="text" name="yourname" id="yourname/></p>

label元素：label元素用来为控件设置一个标签，以便让用户知道该输入什么样的数据。

label元素使用for属性与input元素直接关联。for属性的值和相应input元素的id属性的值是相同的；

type属性：将type属性设置为text，就能够将input元素设置为一个简单的文本输入框控件；

name属性：用来标识数据是从哪个控件中获取的，其值有可能会显示在地址栏；

id属性：用来区分页面中的每个控件；

size属性：告诉浏览器在这个文本输入框中需要显示多少个字符；

maxlength：设置用户在这个文本框中最多能输入多少个字符；

value属性：为文本输入框设置一个初值；

2.密码输入框

和文本输入框的区别：暗文显示，type属性值为"password"

3.隐藏的输入框

<inputtype="hidden" name="peekaboo" value="hereiam"/>

4.复选输入框

<p><inputtype="checkbox" name="terms" id="terms"checked="checked" /> //checked属性：预选中复选输入框

<label for="terms">I haveread the terms and conditions.</label></p>

<label for="offers">I agreethat you can contact me regarding special offers in thefuture.</label></p>

5.单选按钮（与复选的区别：每个选项的name属性值是一样的）

<label for="morning">In themorning</label><br />

<label for="afternoon">Inthe afternoon</label><br />

<input type="radio"name="timeslot" id="evening" value="evening"checked="checked" /> //checked属性：预选取单选按钮

<label for="evening">In theevening</label></p>

7.3.4 select元素（包含一组option元素，每个option元素都是下拉列表中的一个选项）

<p><labelfor="role">Which best describes you?</label>

<option selected="selected">Secretary</option> //预选取该选项

<option>Web Designer</option>

<option>Manager</option></select></p>

7.3.5 textarea元素：获取大量文本信息

<p><labelfor="hobbies">Pliase tell us about yourhobies:</label></p>

7.3.6 提交按钮（是另一种类型的input元素）

<p><inputtype="submit" value="提交"/></p> //value属性指明按钮上显示的信息，不指明则用默认值

7.4.1

form.contact label.fixedwidth {

display:block; // 这个声明将把一个内联元素（如label）转换成块元素。当将其转成块元素之后，就可以对其做进一步设置（如设置宽度等）

width:240px; //通过设置宽度，就能够为标签文本预留特定的空间。没有任何元素能够占用这里预留的空间

float:left;} // 把label元素放在左边，这样后续内容就会跟在右边。如没有该声明，则文本输入框将显示在标签文本的下面

body {

font-family:Verdana,Helvetica,Arial,"TimesNew Roman",sans-serif;

background-color: #e2edff;

line-height: 125%;

padding: 0;

margin:0;

}

h1,h2,h3{

font-family:"TrebuchetMS",Helvetica,Arial,sans-serif;

}

h1 {

font-size: x-large;

background-color:navy;

color:white;

padding-top:2em;

padding-bottom:.2em;

padding-left:.4em;

margin:0;

background: #0099FFurl(backgrounds/header-bg.jpg) repeat-y right;

}

li {

font-size:small;

font-weight:normal;

list-style-type: square;

}

h2 {

color:navy;

font-size:130%;

font-weight:normal;

padding-top:15px;

}

#taglinep {

font-style:italic;

font-family:Georgia,Times,serif;

background-color:#bed8f3;

border-top:3px solid #7DA5d8;

border-bottom:3px solid #7DA5D8;

padding-top:.2em;

padding-bottom:.2em;

padding-left:.8em;

margin:0;

background: #bed8f3 url(backgrounds/tagline-fade.jpg)repeat-y right bottom;

}

em {

text-transform:uppercase;

}

a {

font-weight:bold;

}

a:link {

color:black;

}

a:visited{

color:navy;

}

a:hover{

text-decoration:none;

color:white;

background-color:navy;

}

a:active{

color:aqua;

background-color:navy;

}

.fun {

color:#339999;

font-family:Georgia,Times,serif;

letter-spacing: 0.05em;

}

blockquote.fun{

font-style:italic;

}

#navigation{

width:180px;

height: 484px;

/*border: 1px solid navy;

background-color:#7da5d8;*/

background: #7da5d8url(backgrounds/nav-bg.jpg) no-repeat;

}

#navigation,#bodycontent,#header{

position:absolute;

}

#navigation,#bodycontent{

top:107px;

}

#bodycontent{

left:200px;

}

#header{

width:100%;

border-top:3px solid #7da5d8;

}

.feature{

float: right;

margin: 10px;

}

.galleryphoto{

padding-bottom: 20px;

border-bottom: 1px solid navy;

margin-bottom: 10px;

}

.galleryphotop {

font-size: 65%;

font-weight: bold;

margin-top: 0;

width: 400px;

line-height: 1.4em;

}

.photocredit{

font-weight: normal;

color: gray;

}

table.events {

border-collapse: collapse;

}

table.events th,table.eventstd {

padding: 4px;

border: 1px solid #000066;

}

table.events th {

font-size: x-small;

text-align: left;

background: #241374url(backgrounds/header-bg.jpg);

color:#ffffff;

padding-top:0;

padding-bottom:0;

padding-left:2px;

padding-right:2px;

}

table.events td {

font-size: small;

background:#e2edffurl(backgrounds/td.jpg) repeat-x top;

}

table.events caption {

color:#000066;

font-size:small;

text-align:left;

padding-bottom:5px;

font-weight:

}

/*为form表单添加一个class属性，需要的表单再添加这个属性即可。使用contact类来设置表单中元素的样式，避免整个网站的表单样式都受此设置的影响*/

form.contact{

padding: 0;

margin:0;

margin-top:-15px;

}

form.contactfieldset {

border: 2px solid navy;

padding: 10px;

}

form.contactlegend {

font-weight: bold;

font-size: small;

color: navy;

padding:5px;

}

form.contactlabel {

font-weight:bold;

font-size:small;

color:blue;

line-height:150%;

}

/*为所有需要设置样式的label元素添加一个class属性，需要这个属性的label再添加这个属性即可*/

form.contactlabel.fixedwidth {

display:block;

width:240px;

float:left;

}

form.contact.buttonarea {

text-align: center;

padding: 4px;

background-color: #0066ff;

}

/*将对那些class属性值为buttonarea的div元素中的input元素产生影响*/

form.contact.buttonarea input {

background: navy;

color: white;

font-weight: bold;

padding: 5px;

border:1px solid white;

}

#search{

position: absolute;

top:77px;

right:10px;

font-size:x-small;

font-weight:bold;

}

【补充】

托管网站：寻找服务器空间：免费版搜索 free hosting "no ads"，当然付费版功能更强大。通过FTP上传自己的网站。

Web转向：将一个已获得的域名指向到Web页面实际存储的位置上，即可跳转过去

不足：地址栏显示的网址固定为设定的那页；Title不会显示你的HTML网页设置的Title；

向搜索引擎提交自己的网站信息，推广自己的网站

方法一：在一个搜索引擎知道的网站上添加对自己网站的链接；

方法二：填写搜索引擎提供的表单将自己网站的索引信息告诉它；

Google http://www.google.com/addurl/

MSN http://search.msn.com/docs/submit.aspx

Yahoo! http://search.yahoo.com/info/submit.html

获取网站访问者的内幕信息

方法一：在网站托管的服务器上安装和配置一项统计服务；

方法二：注册一个第三方解决方案（在自己的网页上添加一个超链接、一个图片链接、或一段脚本文件），由它来搜集和存储有用的数据；

常用的统计工具有：StatCounter(http://www.statcounter.com/)、Extreme Tracking、AddFreeStats

添加网站内搜索工具

参考events.html网页中的"SiteSearchGoogle"部分

为网站添加blogroll（还有其它工具可以实现blogroll的功能）

blogroll(http://en.wikipeda.org/wiki/Blogroll)是网站（或博客）中所有链接的列表，借助它就能够简单地在一个地方完成所有更新。

登陆blogroll网站注册并创建添加各种链接，然后获取实现该功能的源代码，并将其添加到网站的脚本函数里。

论坛

方法一：论坛软件（如果使用免费的，大多有限制：如需主机支持PHP、MySQL等）；

方法二：使用Yahoo!群组功能。最好是在自己的网站上提供一个链接，指向你创建的群组，这样用户就不会离开网站，而且不会完全受控于Yahoo！

XHTML进阶

W3C官方XHTML 1.0文档：http://www.w3.org/TR/xhtml1/

W3C官网：http://www.w3schools.com/

HTMLDog网站的HTML高级部分：http://www.htmldog.com/guides/html/advanced/

CSS进阶

W3C维护的CSS 2.1详细文档：http://www.w3.org/TR/CSS21/

W3Schools的CSS Dimension页面：http://www.w3schools.com/css/css_dimension.asp

HTML Dog中CSS中级教程：http://www.htmldog.com/guides/css/intermediate/

JavaScript

初学者：http://www.w3schools.com/js/js_intro.asp

服务器端编程语言

PHP、JSP、ASP/ASP.NET、ColdFusion、Perl、Python、Ruby/Ruby on Rails

一个值得推荐的论坛：SitePoint论坛

学习 HTML, CSS, JavaScript, PHP, Ruby的好地方。

Web开发工具： Dreamweaver

下载：http:/www.macromedia.com/software/dreamweaver/

《ASP.NET2.0动态网站开发教程（第2版）》

超链接

1. 超链接的形式，按照目标端点的不同可以分为：文本超链接、锚点超链接、E-mail超链接、图像超链接。

< a href=”” target=”” title=””>文本</a>

2. 创建锚点链接时，要在页面的某处设置一个位置标记（即所谓的锚点）并给该位置指定一个名称以便引用。

创建锚点：<p><a name=”锚点名称”></a></p>

本页面指向锚点：<p><a href=”#锚点名称”>文本</a></p>

跨页面指向锚点：<p><a href=”指向页面文件名和后缀#锚点名称”>文本</a></p>

3. 创建邮件链接：<ahref=mailto:hegels@sina.com?subject=将显示在邮件主题中的内容>超链接提示文本</a>

第一部分：电子邮件协议名称；第二部分：邮件地址；第三部分（可选）：邮件主题。注意分隔符不同。

4. 用于下载的超链接：< ahref=”URL” ……>提示文本</a> URL指向被下载的.rar .exe .dll等类型的文件。

5. 创建图像超链接：将超链接标记放在图片两端即可。

例如在图片添加指向一个网页的超链接：<a href=”default.htm><img src=”dysb.jpg” /></a>

6. 路径：从站点根文件夹或当前文件夹到目标文件所经过的路线。

在路径表示中，常用“/”分隔文件夹，用“~”代表站点根文件夹。

7. 路径的类型：

绝对路径：也称绝对URL，给出目标文件的完整URL地址，包括传输协议；

相对路径：也称相对URL，以当前文档所在位置为起点，到目标文档所经过的路径；

根相对路径：从站点根目录到被链接文件的路径。

创建移动的文本 marquee

<marquee>要滚动显示的文本信息</marquee>

<marquee>的属性：

align : 指定字母与周围文本的对齐方式，值有 top middle bottom

behavior : 指定文本动画的类型，值有 scroll slide alternate

bgcolor : 指定字幕的背景颜色

direction : 指定文本移动方向，值有 down left right up

height : 指定字幕的高度，以像素或百分比为单位

hspace : 整数，指定字幕的外部边缘与浏览器窗口之间的左右边距（像素）

loop : 指定字幕的滚动次数

scrollamount : 整数，指定字幕文本每次移动的距离，以像素为单位

scrolldelay : 整数，指定与前段字幕文本延迟多少ms后重新开始移动文本

vspace : 整数，指定字幕的外边缘与浏览器窗口之间的上下边距（像素）。

HTML与XML的比较

1. HTML用来定义显示，而XML是对语义的描述；

2. HTML的标记由系统定义，而XML的标记自行定义；

3. HTML的语法比较松散，而XML的语法比较严格；

4. 为了显示XML文本，常需要与其它文件结合起来使用。

HTML用来定义浏览器的显示，XML用来在不同平台之间传输和交换数据。ASP.NET 2.0中使用XHTML语言（它将HTML纳入XML语言的规则中）。