<html>
<head>
<!-- <base href="http://www.w3school.com.cn/i/" /> -->
<basefont color="red" size="5" />
<base target="_blank" />
<script>
function jump() {
window.location.href = "http://www.baidu.com";
}
function myFunction()
{
var x = document.getElementById("myDetails");
x.open=true;
}
function myFunction1()
{
var x = document.getElementById("myDialog");
x.open = true;
}
function myFunction2()
{
var x = document.getElementById("myDialog");
x.open = false;
}
</script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- <meta http-equiv="Refresh" content="5;url=http://www.baidu.com" /> -->
<style type="text/css">
/*h1 {color: red}*/
p {color: blue}
span.red {
color:red;
}
</style>
</head>
<body background=“me.jpg”>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<h1 align="center" >学习</h1>
<p >我的第一个段落。</p>
<a href="http://www.w3school.com.cn">This is a link</a>
<br><br />
<!-- <img src="me.jpg" width="104" height="142" /> -->
<div id="real-container">
<p>Real DOM</p>
<div>cannot update</div>
<ul>
<li className="item">Item 1</li>
<li className="item">Item 2</li>
<li className="item">Item 3</li>
</ul>
</div>
<p >The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.</p>
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
<footer>
<p>Posted by: W3School</p>
<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>
</address>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>
<audio src="S01E01 Winter Is Coming (1080p x265 Joy).m4v" controls="controls">
Your browser does not support the audio element.
</audio>
<p>这是普通文本 - <b>这是粗体文本</b>。</p>
<!-- <img src="me.jpg" /><br /> -->
<p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>
<br /><br />
<p><a href="http://www.w3school.com.cn" >W3School</a></p>
<p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>
<bdo dir="rtl">
<big>Here </big>is <small>some</small> Hebrew text
</bdo>
<p>Here comes a long quotation:</p>
<blockquote>
This is a long quotation.
This is a long quotation.
This is a long quotation.
This is a long quotation.
This is a long quotation.
</blockquote>
<button type="button" οnclick="jump()">Click Me!</button>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
<h4>这个表格有一个标题，以及粗边框：</h4>
<table border="6" bgcolor="red" cellpadding="10" frame="vsides">
<caption>我的标题</caption>
<tr>
<td bgcolor="blue" aligh="right">1</td>
<td>20000000</td>
<td align="right">30</td>
</tr>
<tr>
<td align="right">400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<center>表格</center>
<cite>大发发发发发发</cite>
<code>aadafafd adaag </code>
<kbd>aadaadfafa</kbd>
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<br />
<br />
<br />
<br />
<br />
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<!-- details js的表示方式 -->
<details id="myDetails">
<summary>Copyright 2011.</summary>
Some additional details...
</details>
<p>点击按钮来显示额外的细节。</p>
<button οnclick="myFunction()">试一下</button>
<h3>演示如何访问 Dialog 元素</h3>
<p>点击按钮来打开对话窗口。</p>
<button οnclick="myFunction1()">打开</button>
<button οnclick="myFunction2()">关闭</button>
<p><b>注释：</b>目前只有 Chrome Canary 和 Safari 6 支持 <dialog> 元素。</p>
<dialog id="myDialog">This is an open dialog window</dialog>
<h1>NEWS WEBSITE</h1>
<p>some text. some text. some text...</p>
<div class="news">
<h2>News headline 1</h2>
<p>some text. some text. some text...</p>
</div>
<div class="news">
<h2>News headline 2</h2>
<p>some text. some text. some text...</p>
</div>
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<figcaption>拍摄者：W3School 项目组，拍摄时间：2010 年 10 月</figcaption>
<br>
<img src="me.jpg" width="40" height="60" />
</figure>
<h1><font face="verdana">A heading</font></h1>
<p><font size="5" face="arial" color="red">A paragraph.</font></p>
<h1>这是标题 1</h1>
<hr />
<h2>这是标题 2</h2>
<i>
<h3>这是标题 3</h3></i>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<form>
我喜欢自行车：
<input type="checkbox" name="Bike">
<br />
我喜欢汽车：
<input type="checkbox" name="Car">
</form>
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</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="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
地址：<br />
<input type="text" name="comment" value="address" size="40">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
<br/>
体重：<input type="text" />
</fieldset>
</form>
<img
src="me.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="rect"
coords="0,0,110,260"
href ="me.jpg"
target ="_blank"
alt="Sun" />
</map>
<p>显示度量值：</p>
<meter value="3" min="0" max="100"></meter><br>
<meter value="0.9"></meter>
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<h4>数字列表：</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>字母列表：</h4>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>罗马字母列表：</h4>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写罗马字母列表：</h4>
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<pre>
for i = 1 to 10
print i
next i
</pre>
下载进度：
<progress value="22" max="100">
</progress>
<samp>ae</samp>
<p><span>some text.</span>some other text.</p>
<p>
This text contains <sub>subscript</sub>
</p>
<p>
This text contains <sup>superscript</sup>
</p>
<textarea rows="3" cols="20">
</textarea>
<p>如果文本不是超链接，就不要<u>对其使用下划线</u>。</p>
<h2>
如果想学习 AJAX，<span class="red">重要的</span>那么您必须熟悉adafafaafadadgagagagafaafafafaafaafafadsddsadagagagaga如果想学习 AJAX，那么您必须熟悉adafafaafadadfaafafafaafaafafadsddsadagagagaga <wbr>XMLHttpRequest<wbr> 对象。
</h2>
<h1>我的<span class="red">重要的</span>标题</h1>
<a href="http://www.baidu.com">
<img border="0" src="me.jpg" />
</a>
</body>
</html>
上面包含了绝大多数html的标签，自己的总结。
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
