（1）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id='1'>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
<p>段落</p>
<a href="http://www.w3school.com.cn">link</a>
<img src="img/img1.jpg" width="200"height="100" alt="">
</body>
</html>
（2）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body bgcolor="pink">
<p class="pa">段落</p>
<p id="唯一id">段落二</p>
<br />
<a href="http://www.baidu.com">百度</a>
<P name="par">这也是一个段落</P>
<h1 align="center">居中</h1>
<table border="1">html 表格</table>
</body>
</html>
（3）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body bgcolor="pink">
<p class="pa">段落</p>
<p id="唯一id">段落二</p>
<br />
<a href="http://www.baidu.com">百度</a>
<P name="par">这也是一个段落</P>
<h1 align="center">居中</h1>
<table border="1">html 表格</table>
</body>
</html>
（4）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>粗体字</b>
<big>大号字</big>
<em>着重文字</em>
<i>斜体字</i>
<small>小号字</small>
<strong>加重语气</strong>
<sub>下标字</sub>
<sup>上标字</sup>
<ins>插入字</ins>
<del>删除字</del>
<u>hhh</u>
<s>hhh</s>
<strike>hhh</strike>
<code>代码</code>
<kbd>kbd???</kbd>
<samp>代码样本？？？</samp>
<tt>打字？？？</tt>
<var>what？？</var>
<pre>这是神魔</pre>
<abbr title="缩写">what</abbr>
<acronym title="首字母？？？">what</acronym>
<address>地址？？</address>
<bdo dir="left">方向？</bdo>
<cite>引用？？</cite>
</body>
</html>
（5）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<q>这是引用？</q>
<blockquote>这是引用？ 会缩进</blockquote>
<abbr title="html">这是？？</abbr>
<dfn>wto</dfn>
<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>
<p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>
<address>
Written by Bone.<br>
Visit us at:www.baidu.com<br>
Example.com<br>
hhh<br>
China
</address>
<p><cite>The Giant</cite>偶偶</p>
<bdo dir="rtl">方向的哦</bdo>
</body>
</html>
（6）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body{
background-color:honeydew ;
}
p{
margin-left:40px;
color:red;
}
</style>
<link rel="stylesheet" href="这是资源引用">
</head>
<body>
<p>这是一个段落</p>
<div>
<p>
段落1
</p>
<p>
段落2
</p>
</div>
<span>小块区域</span>
</body>
</html>
（7）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com">link click</a>
<a href="https://www.baidu.com"target="_blank">点击之后将在新窗口打开</a>
<a href="#tips">有用的提示</a>
<a name="tips">基本的注意事项</a>
<a href="/1.html"target="_top">请点击这里！</a>
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</body>
</html>
（8）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body background="/img/bg1.jpg">
<img src="/img/img1.jpg" width="128"height="64"alt="美景">
<p>段落</p>
<img src="/img/gif1.gif" width="128"height="64"alt="小黄人">
<br/>
<p>段落2</p>
<hr/>
<p><img src="/img/gif1.gif" align="bottom" align="right"> 你好</p>
<p><img src="/img/gif1.gif" align="middle">你好</p>
<p><img src="/img/gif1.gif"align="top">你好</p>
<a href="/7.html">
<img border="0"src="/img/img1.jpg" alt="">
</a>
<map name=""></map>
</body>
</html>
（9）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>表格</p>
<table border="10">
<tr>
<td>100</td>
<td>200</td>
</tr>
</table>
<h2>标题</h2>
<table border="5">
<tr>
<td>
就这？
</td>
<td>
hhh
</td>
</tr>
<tr>
<td>
就这？
</td>
<td>
hhh
</td>
</tr>
</table>
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
<table>
<tr>
<th>
heading
</th>
<td>
内容
</td>
<td>
内容
</td>
</tr>
<tr>
第二列
</tr>
</table>
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>5</td>
<td><6/td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<table border="4">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<caption >作者信息</caption>
<table border="2" cellpadding="10">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年级</th>
</tr>
<tr>
<td>Bone</td>
<td>男</td>
<td>大二</td>
</tr>
<tr>
<th rowspan="2"colspan="2">强势学科</th>
<td rowspan="10"></td>
<td>计算机</td>
</tr>
</table>
<table border="1">
<table border="3">
<th>111</th>
<th>222</th>
<tr>
<td>3444</td>
<td>1314</td>
</tr>
</table>
<table border="3">
<th>333</th>
<tr>
<td>444</td>
<td>999</td>
</tr>
<th>444</th>
</table>
</table>
</body>
</html>
（10）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li align="middle">这是无序列表</li>
<li>22222</li>
</ul>
<hr>
<ol start="2">
<li>这是一个有序列表</li>
<li>33333</li>
</ol>
<hr>
<ol>
<li>这是一个从1开始的列表</li>
<li></li>
</ol>
<dl>
<dt>Cffe</dt>
<dd>cd</dd>
<dt>mike</dt>
<dd>DF</dd>
</dl>
<ul type="square">
<li>panda</li>
<li>linux</li>
</ul>
<ol type='A'>
<li>橘子</li>
<li>橙子</li>
</ol>
<ol type="I">
<li>香蕉</li>
<li>apple</li>
</ol>
<ol>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<ul>
<li>44</li>
<li>55</li>
</ul>
</ol>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中 </ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
<td>iii</td>
<b>dddd</b>
<div>
<p>你好u啊</p>
</div>
<div>
<p>再见</p>
</div>
<span>内连</span>
<span>内敛</span>国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
<td>iii</td>
<b>dddd</b>
<div>
<p>你好u啊</p>
</div>
<div>
<p>再见</p>
</div>
<span>内连</span>
<span>内敛</span>
</body>
</html>
（11）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cities {
background-color:grey;
color:black;
margin:20px;
padding:20px;
}
.red{
color: red;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
</div>
<div class="cities">
<h2>beijing</h2>
<p>beijin is the capital of China.</caption></p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div >
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>
（12）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 10px;
margin: auto;
text-align: center;
}
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
<a href="#C4">跳转到第四章</a>
<a href="1.html#1">Jump to </a>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 id="C4">第四章</h2>
<button onclick="displayResult()">改变文本</button>
<script>
function displayResult() {
document.getElementById("C4").innerHTML = "Have a nice day!";
}
</script>
<iframe src="https://www.w3school.com.cn" width="1000" height="500"frameborder="1">隔离</iframe>
</body>
</html>
（13）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是标题</title>
<base href="默认地址">
<base target="默认target">
<link rel="stylesheet"type="text/css" href="mystyle.css"/>
</head>
<body>
<p id="demo">你好</p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
document.getElementById("demo").style.fontSize="30px";
document.getElementById("demo").style.color="red";
</script>
</body>
</html>
（14）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:left;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright W3School.com.cn
</div>
<table class="lamp">
<tr>
<th>
<img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body>
</html>
（15）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.city {
float: left;
margin: 5px;
padding:40px;
width: 300px;
height: 300px;
border: 20px solid seagreen;
}
</style>
</head>
<body>
<h1>W3School Demo</h1>
<h2>Resize this responsive page!</h2>
<br>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
（16）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/Js/1.js"></script>
</head>
<body>
</body>
</html>
扫一扫
2084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
