您的位置:首页 > Web前端 > HTML

1月11日,HTML学习笔记

2016-01-11 22:09 585 查看
<ul>
<li>coffee</li>
<li>tea</li>
<li>mile</li>
</ul>

<ol>
<li>coffee</li>
<li>tea</li>
<li>milk</li>

<ol start="99">
<li>coffee</li>
<li>mile</li>
<li>tea</li>
</ol>

<di>
<dt>coffee</dt>
<dd>black hot drink</dd>
<dt>milk</dt>
<dd>white cold drink</dd>
</dl>

<ul type="disc">
<li>apple</li>
<li>banana</li>
<li>lemon</li>
<li>orange</li>
</ul>

<ul type="circle">
<li>apple</li>
<li>banana</li>
<li>lemon</li>
<li>orange</li>
</ul>

<ul type="square">
<li>apple</li>
<li>banana</li>
<li>lemon</li>
<li>orange</li>
</ul>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container {width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99; height:200px; width:100px; float:left;}
div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}
div#footer {background-color:#99bbbb; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
u1 {margin:0;}
li {list-style:none;}
</style>
</head>

<body>

<div id="container">

<div id="header">
<h1>Main Title of Web Page</h1>
</div>

<div id="menu">
<h2>Menu</h2>
<u1>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>

<div id="content>Content goes here</div>

<div id="footer>Copyright W3School.com.cn</div>

</div>

</body>
</html>

<h4>number list</h4>
<ol>
<li>apple</li>
<i>banana</li>
<li>lemon</li>
<li>orange</li>
</ol>

<ol type="A">
<li>apple</li>
<li>banana</li>
<li>lemon</li>
<li>orange</li>
</ol>

<ol type="a">
<li>apple</li>
<li>banana</li>
<li>lemon</li>
<li>orange</li>
</ol>

<h4>罗马字母列表</h4>
<ol type="I">
<li>apple</li>
<li>banana</li>
<li>lemon</li>
<li>orange</li>
</ol>

<h4>小写罗马字母列表</h4>
<ol type="i">
<li>apple</li>
<li>banana</li>
<li>lemon</li>
<li>orange</li>
</ol>

<ul>
<li>coffee</li>
<li>tea
<ul>
<li>red tea</li>
<li>green tea</li>
</ul>
</li>
<li>milk</li>
</ul>

<ul>
<li>coffee</li>
<li>tea
<ul>
<li>red tea</li>
<li>greeen tea
<ul>
<li>china tea</li>
<li>afcari tea</li>
</ul>
</li>
</ul>
</li>
<li>milk</li>
</ul>

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

<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbb;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#ffffgg; width:100px; text-align:top;">
<b>Menu</b><br/>
HTMl<br/>
CSS<br/>
JavaScript
</td>
<td style="background-color:#EEEEEE; height:200px; width:400px; text-align=top;">
Content goes here
</td>
</tr>

<tr>
<td colspan="2" style="background-color:#99bbb; text-align:center;">
Copyright W3School.con.cn
</td>
</tr>
</table>

</body>
</html>

<form>
first name: <input type="text"><br/>
last name: <input type="text">
</form>

<form>
用户:<input type="text" name="user"><br/>
密码:<input type="password" name="password">
</form>

<form>
I like bikes:<input type="checkbox" name="bike">
I like cars:<input type="checkbox" name="car">
</form>

<form>
man:<input type="radio" name="sex" value="male"/><br/>
woman:<input type="radio" name="sex" calue="female"/>
</form>

<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>

<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>

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

<form>
<input type="button" value="hello world!"/>
</form>

<form>
<fieldset>
<legend>healthy statement</legend>
height:<input type="text"/>
weight<input type="text"/>
</legend>
<fieldset>
</form>

<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>

<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>

<form name="input" action="/html/html_form_action.asp" method="get">
Male:<input type="radio" name="Sex" value="Male" checked="checked"/><br/>
Female:<input type="radio" name="Sex" value="Female"/><br/>
<input type="submit" value="Submit"/>
</form>

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>这个表单会把电子邮件发送到W3School</h3>
姓名:<br/>
<input type="text" name="name" value="yourname" size="20"/>
<br/>
电邮:<br/>
<input type="text" name="mall" 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>

<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>

<html>
<frameset rows="25%,50%,25%">
<frame src="http://wwww.taobao.com/">
<frame src="http://www.baidu.com/">
<frame src="http://www.qq.com/">
</frameset>
</html>

<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html"/>
<frame src="/example/html/frame_b.html"/>
<frame src="/example/html/frame_c/html"/>

<noframes>
<body>您的浏览器无法处理框架!</body>
</noframes>
</frameset>

<html>
<frameset rows="50%,50%"
<frame src="http://www.qq.com/"/>
<frameset cols="25%,75%">
<frame src="http://www.baidu.com/"/>
<frame src="http://www.taobao.com/"/>
</frameset>
</frameset>
</html>

<html>
<frameset cols="50%,*,25%">
<frame src="example/frame_a.html" noresize="noresize"/>
<frame src="example/frame_b.html"/>
<frame src="example/frame_c.html"/>
</frameset>
</html>

<frameset cols="120,*">
<frame src="/example/html/html_contents.html"/>
<frame src="example/html/frame_a.html" name="showframe"/>
</frameset>

<html>
<body>
<iframe src="/i/eg_landscape.jpg"></iframe>
</body>
</html>

<frameset cols="20%,80%">
<frame src="/example/html/frame_a.html"/>
<frame src="/example/html/link.html#c10"/>
</frameset>

<frameset cols="180,*">
<frame src="/example/html/content.html"/>
<frame src="/example/html/link.html" name="showframe"/>
</frameset>

<iframe src="/example/html/demo_iframe.html" width="200" height="280"></iframe>
<iframe src="/example/html/demo_iframe.html" frameborder="0"></iframe>

<iframe src=".example/html/demo_iframe.html" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: