大佬教程收集整理的这篇文章主要介绍了html5练习，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
下面是示例效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Festival of Ornament</title> <style type="text/css"> @font-face { font-family: BorderWeb; src:url(fonts/Aldo_Open.otf); } @font-face { font-family: Runic; src:url(fonts/3Dumb.ttf); } @font-face { font-family: Kingston; src:url(fonts/Aldo_Open.otf); } *{BACkground:#FFF} .king { FONT-SIZE: 45pt; FONT-FAMILY: "Kingston" } .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } .border2 { FONT-SIZE: 35px; COLOR:black; FONT-FAMILY: "BorderWeb" } .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" } .locale { FONT-SIZE: 40px; COLOR: black; FONT-FAMILY: "Runic" } .bullet { FONT-SIZE: 50px; COLOR: black; FONT-FAMILY: "BorderWeb" } .corner { FONT-SIZE: 70px; COLOR: black; FONT-FAMILY: "BorderWeb" } a { FONT-SIZE: 10px; COLOR: black; FONT-FAMILY: Verdana; TEXT-DECORATION: none } </style> </head> <body> <table cellspacing="0" celLPADding="0" border="0"> <tbody> <tr> <td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">6</span></td> <td valign="bottom" align="middle" bgcolor="black" height="35"><span class="border2">87</span></td> <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td> <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td> <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td> <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td> <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td> <td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">5</span></td> </tr> <tr> <td valign="bottom" align="middle" bgcolor="khaki" height="35"><span class="border">78</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td> </tr> <tr> <td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td> <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">A</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">a</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">B</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">b</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">C</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">c</span></td> <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td> <td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td> </tr> <tr> <td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td> <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">d</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">D</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">e</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">E</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">f</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">F</span></td> <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td> <td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td> </tr> <tr> <td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td> <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">G</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">g</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">H</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">h</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">I</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">i</span></td> <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td> <td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td> </tr> <tr> <td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td> <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">j</span></td> <td align="middle" bgcolor="khaki"><span class="king">J</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">k</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">K</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">l</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">L</span></td> <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td> <td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td> </tr> <tr> <td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td> <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">M</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">m</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">N</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">n</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">O</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">o</span></td> <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td> <td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td> </tr> <tr> <td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td> <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">p</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">P</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">q</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">Q</span></td> <td valign="bottom" align="middle" bgcolor="olive"><span class="king">r</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">R</span></td> <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td> <td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td> </tr> <tr> <td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">5</span></td> <td valign="bottom" align="middle" bgcolor="khaki" height="35"><span class="border">78</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td> <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td> <td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">6</span></td> </tr> <tr> <td valign="bottom" align="middle" bgcolor="black" height="35"><span class="border2">87</span></td> <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td> <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td> <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td> <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td> <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td> </tr> <tr> <td height="15"></td> </tr> <tr> <td valign="top" colspan="10"> <div class="event" align="center">FESTIVAL OF ORNAMENT</div> <div class="locale" align="center">UNIVERSITY OF CARDIFF <span class="bullet">4</span> JUNE 16 – 28</div> </td> </tr> </tbody> </table> </body> </html>
以上是大佬教程为你收集整理的html5练习全部内容，希望文章能够帮你解决html5练习所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。