学习Html实例（二）

王乐散 2011-10-19

展开全文

有序列表/无序列表用（ul）

<html>
<body>
<h4>一个有序列表：</h4>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>

</body>
</html>

不同类型的无序列表 type="square""circle""disc"

<h4>Disc 项目符号列表：</h4>
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>

不同类型的有序列表如：type="A""a""Ⅰ"等

嵌套列表

<html>

<body>

<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
</li>
<li>牛奶</li>
</ul>

</body>
</html>

定义列表

html>

<body>

<h2>一个定义列表：</h2>

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

</body>
</html>

表单：文本域

<html>

<body>

</body>
</html>

密码域

<html>

<body>

<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>
<p>
请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。
</p>
</body>
</html>

单选按钮（Radio Buttons）

<form>
`<input type="radio" name="sex" value="male" />` Male
<br />
`<input type="radio" name="sex" value="female" />` Female
</form>

复选框（Checkboxes）

表单的动作属性（Action）和确认按钮

<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />

<p>假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。</P>

</form>

单选实例

<html>

<body>

<p>当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。</p>

</body>
</html>

简单的下拉列表

<html>

<body>

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

另一个简单的下拉列表

<html>

<body>

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

文本域(Textarea)

<p>
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</p>

<textarea rows="10" cols="30">
The cat was playing in the garden.

Hello World 按钮

Fieldset around data 本例演示如何在数据周围绘制一个带标题的框。

<html>

<body>

<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

</body>
</html>

带有输入框和确认按钮的表单

<form action="/example/html/form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>

<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

</body>
</html>

带有复选框的表单

<html>

<body>

<form name="input" action="/html/html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form>

<p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p>

</body>
</html>

从表单发送电子邮件

<html>

<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
电邮：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">

</form>
</body>
</html>