<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5基础代码整合</title>
</head>
<style type="text/css">
</style>
<body>
<p>这是我的我第一个网页</p>
<hr size="20" color="#999999">
<p align="center" style="color:#F06">学习HTML5其实很容易</p>
<strong>字体标签,---strong和b标签都用于粗体显示文字</strong>
<h1>这是h1标签的效果</h1>
<h2>这是h2标签的效果</h2>
<h3>这是h3标签的效果</h3>
<h4>这是h4标签的效果</h4>
<h5>这是h5标签的效果</h5>
<h6>这是h6标签的效果</h6>
<a href="http://www.baidu.com">这是一个连接百度的超链接</a>
<div id=text1 align="center">
<h1>《静夜思》</h1>
<b>唐·李白</b>
<h3>床前明月光,地上鞋两双。</h3>
<h3>举头望明月,低头点蚊香。</h3>
<h2>【诗文解释】</h2>
<h4>暂时:略!</h4>
<br>
详情:<a href="http://www.google.com">http://www.google.com</a>
</div>
<hr>
<div id=text2>
<header align="center">
<h1>Web开发工作室</h1>
</header>
<footer align="center">
<h3>版权所有 © Web开发工作室 Copyright 2016 All Rights Reserved</h3>
</footer>
</div>
<hr>
<br>
<br>
<div id=text3>
<form action="http://www.baidu.com" method="post">请输入您要查找的内容:
<input type="text" name="wd">
<input type="submit" value="提交到百度搜索">
</form>
</div>
<hr>
<br>
<div id=text4 align="center">
<form>
请输入您的姓名:<input type="text" name="username"><br>
请输入您的密码:<input type="password" name="pwd"><br>
<input type="submit" value="提交">
</form>
</div>
<hr>
<br>
<div id=text5>
<form>
<b>请选择你喜欢的水果:</b><br>
<input type="checkbox" name="fruit" value="apple">苹果<br>
<input type="checkbox" name="fruit" value="orange">橘子<br>
<input type="checkbox" name="fruit" value="mango">芒果<br>
<input type="submit" value="提交">
</form>
</div>
<hr>
<br>
<div id=text6>
<form>
<b>请选择你喜欢的水果:</b><br>
<input type="radio" name="fruit" value="apple">苹果<br>
<input type="radio" name="fruit" value="orange">橘子<br>
<input type="radio" name="fruit" value="mango">芒果<br>
<input type="submit" value="提交">
</form>
</div>
<hr>
<br>
<div id=text7>
<form>
<b>请选择你喜欢的水果:</b><br>
<select name="fruit">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="mango">芒果</option>
</select>
<input type="submit" value="提交">
</form>
</div>
<hr>
<br>
<div id=text8>
<form>
<p>请提出您宝贵的意见:</p>
<textarea name="wenbenkuang" cols="50" rows="3"></textarea><br>
<input type="submit" value="提交">
</form>
</div>
<hr>
<br>
<div id=text9>
<form>
<p>Webpage: <input type="url" list="url_list" name="link"></p>
<datalist id="url_list">
<option label="baidu" value="http://www.baidu.com">
<option label="google" value="http://www.google.com">
<option label="yahoo" value="http://www.yahoo.com">
</datalist>
</form>
</div>
<hr>
<br>
<div id=text10>
<form>
请输入查询内容:<input type="text" required>
<input type="submit" value="提交">
</form>
</div>
<hr>
<br>
<div id=text11>
<form>
请输入查询内容:<input type="text" required oninvalid="setCustomValidity('请输入您想查询的内容,此处不能为空!')" οninput="setCustomValidty('')">
<input type="submit" value="提交">
</form>
</div>
<hr>
<br>
<div id=text12>
<form>
URL: <input type="url"><br><br>
Email:<input type="email"><br><br>
<input type="submit">
</form>
</div>
<hr>
<br>
<div id=text13>
<form>
<b>用户:<input type="text" maxlength="5"></b>
<input type="submit">
</form>
</div>
<hr>
<br>
<div id=text14>
<form>
<b>查找:<input type="number" id="count" name="count" min="0" max="100" step="10"></b>
<input type="submit">
</form>
</div>
<hr>
<br>
<div id=text15>
<form>
E_mail:<input type="email" name="unse_email">
<input type="submit" value="无验证提交" formnovalidate>
<input type="submit">
</form>
</div>
<hr>
<br>
<div id=text16>
<ul>
<li>ul称为无序列表标签。</li>
<li>无序列表中的项目符号是几何图形。</li>
</ul>
<ol type='1' start='2'>
<li>ol称为有序列表标签。</li>
<li>li称为李诶奥项目</li>
<li>有序列表中的项目符号是数字或者字母排序</li>
</ol>
</div>
<hr>
<br>
<div id=text17 align="center">
<table border="1">
<caption>东部地区的人均GDP下降</caption>
<tr>
<th scope="col">第一季度</th>
<th scope="col">第二季度</th>
<th scope="col">第三季度</th>
<th scope="col">第四季度</th>
</tr>
<tr>
<td>20.4</td>
<td>27.4</td>
<td>0.58</td>
<td>64</td>
</tr>
</table>
</div>
<hr>
<br>
<div id=text17 align="center">
<table border="1">
<caption>东部地区的人均GDP下降</caption>
<tr>
<th scope="col">第一季度</th>
<th scope="col">第二季度</th>
<th scope="col">第三季度</th>
<th scope="col">第四季度</th>
</tr>
<tr align="center">
<td>20.4</td>
<td>27.4</td>
<td>0.58</td>
<td>64</td>
</tr>
</table>
</div>
<hr>
<br>
<div id=text18>
<table border="1" width="100%">
<caption>副食品清单</caption>
<colgroup span="1" style="background:#0F0"/>
<colgroup span="2" style="background:#C00"/>
<thead>
<tr>
<th>食物</th>
<th>饮料</th>
<th>糖果</th>
</tr>
</thead>
<tfoot>
<tr>
<td>100袋</td>
<td>50箱</td>
<td>130kg</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>面包</td>
<td>可乐</td>
<td>金丝猴</td>
</tr>
<tr>
<td>蛋糕</td>
<td>凉茶</td>
<td>徐福记</td>
</tr>
</tbody>
</table>
</div>
<hr>
<br>
<div id=text19>
<table width="100%" border="3">
<tr>
<th rowspan="3">值班人员</th>
</tr>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<td>李强</td>
<td>张民</td>
<td>王平</td>
</tr>
</table>
</div>
<hr>
<br>
<div id=text20>
<table width="100%" border="5" style="color:#30F">
<tr>
<th colspan="3">值班人员</th>
</tr>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<td>李强</td>
<td>张民</td>
<td>王平</td>
</tr>
</table>
</div>
<hr>
<br>
<div id=text21 align="center">
<p>iframe可以在HTML5页面里面显示另外一个网页</p>
<p>使用iframe显示百度页面</p>
<iframe src="http://www.baidu.com" width="900" height="300" frameborder="1" scrolling="no">
<!--这是一个框架-->
</iframe>
</div>
<hr>
<br>
<div id=text22 align="center">
<p>
<img src="img1.jpg" alt="图片替代文字" title="图片提示文字:):););)" width="300" height="260" />
</p>
<p>
把鼠标移动到图片上悬停一会儿,你就可以看到提示文字!
</p>
</body>
</div>
<hr>
<br>
<div id=text23>
<p>图片组合</p>
<figure>
<input type="image" src="image1.jpg" width="300" height="200">
<input type="image" src="image2.jpg" width="300" height="200">
<input type="image" src="image3.jpg" width="300" height="200">
</figure>
</div>
<hr>
<br>
<div id=text24>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5基础代码整合</title>
</head>
<style type="text/css">
</style>
<body>
<p>这是我的我第一个网页</p>
<hr size="20" color="#999999">
<p align="center" style="color:#F06">学习HTML5其实很容易</p>
<strong>字体标签,---strong和b标签都用于粗体显示文字</strong>
<h1>这是h1标签的效果</h1>
<h2>这是h2标签的效果</h2>
<h3>这是h3标签的效果</h3>
<h4>这是h4标签的效果</h4>
<h5>这是h5标签的效果</h5>
<h6>这是h6标签的效果</h6>
<a href="http://www.baidu.com">这是一个连接百度的超链接</a>
<div id=text1 align="center">
<h1>《静夜思》</h1>
<b>唐·李白</b>
<h3>床前明月光,地上鞋两双。</h3>
<h3>举头望明月,低头点蚊香。</h3>
<h2>【诗文解释】</h2>
<h4>暂时:略!</h4>
<br>
详情:<a href="http://www.google.com">http://www.google.com</a>
</div>
<hr>
<div id=text2>
<header align="center">
<h1>Web开发工作室</h1>
</header>
<footer align="center">
<h3>版权所有 © Web开发工作室 Copyright 2016 All Rights Reserved</h3>
</footer>
</div>
<hr>
<br>
<br>
<div id=text3>
<form action="http://www.baidu.com" method="post">请输入您要查找的内容:
<input type="text" name="wd">
<input type="submit" value="提交到百度搜索">
</form>
</div>
<hr>
<br>
<div id=text4 align="center">
<form>
请输入您的姓名:<input type="text" name="username"><br>
请输入您的密码:<input type="password" name="pwd"><br>
<input type="submit" value="提交">
</form>
</div>
<hr>
<br>
<div id=text5>
<form>
<b>请选择你喜欢的水果:</b><br>
<input type="checkbox" name="fruit" value="apple">苹果<br>
<input type="checkbox" name="fruit" value="orange">橘子<br>
<input type="checkbox" name="fruit" value="mango">芒果<br>
<input type="submit" value="提交">
</form>
</div>
<hr>
<br>
<div id=text6>
<form>
<b>请选择你喜欢的水果:</b><br>
<input type="radio" name="fruit" value="apple">苹果<br>
<input type="radio" name="fruit" value="orange">橘子<br>
<input type="radio" name="fruit" value="mango">芒果<br>
<input type="submit" value="提交">
</form>
</div>
<hr>
<br>
<div id=text7>
<form>
<b>请选择你喜欢的水果:</b><br>
<select name="fruit">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="mango">芒果</option>
</select>
<input type="submit" value="提交">
</form>
</div>
<hr>
<br>
<div id=text8>
<form>
<p>请提出您宝贵的意见:</p>
<textarea name="wenbenkuang" cols="50" rows="3"></textarea><br>
<input type="submit" value="提交">
</form>
</div>
<hr>
<br>
<div id=text9>
<form>
<p>Webpage: <input type="url" list="url_list" name="link"></p>
<datalist id="url_list">
<option label="baidu" value="http://www.baidu.com">
<option label="google" value="http://www.google.com">
<option label="yahoo" value="http://www.yahoo.com">
</datalist>
</form>
</div>
<hr>
<br>
<div id=text10>
<form>
请输入查询内容:<input type="text" required>
<input type="submit" value="提交">
</form>
</div>
<hr>
<br>
<div id=text11>
<form>
请输入查询内容:<input type="text" required oninvalid="setCustomValidity('请输入您想查询的内容,此处不能为空!')" οninput="setCustomValidty('')">
<input type="submit" value="提交">
</form>
</div>
<hr>
<br>
<div id=text12>
<form>
URL: <input type="url"><br><br>
Email:<input type="email"><br><br>
<input type="submit">
</form>
</div>
<hr>
<br>
<div id=text13>
<form>
<b>用户:<input type="text" maxlength="5"></b>
<input type="submit">
</form>
</div>
<hr>
<br>
<div id=text14>
<form>
<b>查找:<input type="number" id="count" name="count" min="0" max="100" step="10"></b>
<input type="submit">
</form>
</div>
<hr>
<br>
<div id=text15>
<form>
E_mail:<input type="email" name="unse_email">
<input type="submit" value="无验证提交" formnovalidate>
<input type="submit">
</form>
</div>
<hr>
<br>
<div id=text16>
<ul>
<li>ul称为无序列表标签。</li>
<li>无序列表中的项目符号是几何图形。</li>
</ul>
<ol type='1' start='2'>
<li>ol称为有序列表标签。</li>
<li>li称为李诶奥项目</li>
<li>有序列表中的项目符号是数字或者字母排序</li>
</ol>
</div>
<hr>
<br>
<div id=text17 align="center">
<table border="1">
<caption>东部地区的人均GDP下降</caption>
<tr>
<th scope="col">第一季度</th>
<th scope="col">第二季度</th>
<th scope="col">第三季度</th>
<th scope="col">第四季度</th>
</tr>
<tr>
<td>20.4</td>
<td>27.4</td>
<td>0.58</td>
<td>64</td>
</tr>
</table>
</div>
<hr>
<br>
<div id=text17 align="center">
<table border="1">
<caption>东部地区的人均GDP下降</caption>
<tr>
<th scope="col">第一季度</th>
<th scope="col">第二季度</th>
<th scope="col">第三季度</th>
<th scope="col">第四季度</th>
</tr>
<tr align="center">
<td>20.4</td>
<td>27.4</td>
<td>0.58</td>
<td>64</td>
</tr>
</table>
</div>
<hr>
<br>
<div id=text18>
<table border="1" width="100%">
<caption>副食品清单</caption>
<colgroup span="1" style="background:#0F0"/>
<colgroup span="2" style="background:#C00"/>
<thead>
<tr>
<th>食物</th>
<th>饮料</th>
<th>糖果</th>
</tr>
</thead>
<tfoot>
<tr>
<td>100袋</td>
<td>50箱</td>
<td>130kg</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>面包</td>
<td>可乐</td>
<td>金丝猴</td>
</tr>
<tr>
<td>蛋糕</td>
<td>凉茶</td>
<td>徐福记</td>
</tr>
</tbody>
</table>
</div>
<hr>
<br>
<div id=text19>
<table width="100%" border="3">
<tr>
<th rowspan="3">值班人员</th>
</tr>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<td>李强</td>
<td>张民</td>
<td>王平</td>
</tr>
</table>
</div>
<hr>
<br>
<div id=text20>
<table width="100%" border="5" style="color:#30F">
<tr>
<th colspan="3">值班人员</th>
</tr>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<td>李强</td>
<td>张民</td>
<td>王平</td>
</tr>
</table>
</div>
<hr>
<br>
<div id=text21 align="center">
<p>iframe可以在HTML5页面里面显示另外一个网页</p>
<p>使用iframe显示百度页面</p>
<iframe src="http://www.baidu.com" width="900" height="300" frameborder="1" scrolling="no">
<!--这是一个框架-->
</iframe>
</div>
<hr>
<br>
<div id=text22 align="center">
<p>
<img src="img1.jpg" alt="图片替代文字" title="图片提示文字:):););)" width="300" height="260" />
</p>
<p>
把鼠标移动到图片上悬停一会儿,你就可以看到提示文字!
</p>
</body>
</div>
<hr>
<br>
<div id=text23>
<p>图片组合</p>
<figure>
<input type="image" src="image1.jpg" width="300" height="200">
<input type="image" src="image2.jpg" width="300" height="200">
<input type="image" src="image3.jpg" width="300" height="200">
</figure>
</div>
<hr>
<br>
<div id=text24>
</div>
</body>
</html>