HtmlBasic
/
demo.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="author" content="derek">
    <meta name="keywords" content="html,css,javascript">
    <meta name="description" content="description">
    <title>index</title>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="styles/site.css">
    <style></style>
    <script src="scripts/modernizr.js"></script>
    <script src="scripts/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script></script>
    <!--[if lt IE 9]>
    <script src="scripts/html5shiv.js"></script>
    <script src="scripts/respond.js"></script>
    <![endif]-->
</head>

<body class="container-fluid">

<header>
    <h1><abbr title="HyperText Markup Language"><a href="#jkxy">HTML</a></abbr>
        <small><a href="javascript:alert('Learning html basic')">基础</a></small>
    </h1>
</header>

<div class="jumbotron">
    <h2>HTML基础串讲</h2>
    <p>极客学院 Web前端</p>
</div>

<div style="min-height: 600px">

    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="label label-primary">基础语法练习</span>
        </div>
        <div class="panel-body">
            <table class="table">
                <tr>
                    <td>
                        <section>
                            <img src="http://rammderek.com/Test/GetImage" alt="moko001" usemap="#mpjkxy">
                            <map name="mpjkxy">
                                <area shape="circle" coords="70,40,20" href="javascript:void(0)" alt="hotarea">
                                <area shape="circle" coords="80,100,20" href="javascript:void(0)" alt="hotarea">
                            </map>
                            <a href="audios/scarborughfair.mp3">Scarborugh Fair</a>
                        </section>
                        <section>
                            <video controls>
                                <source src="videos/movie.mp4" type="video/mp4">
                                <object data="videos/movie.mp4">
                                    <embed src="videos/movie.mp4" type="video/mp4">
                                </object>
                            </video>
                        </section>
                    </td>
                    <td>
                        <section>
                            <ol type="1">
                                <li>入门</li>
                                <li>
                                    基础
                                    <ul>
                                        <li>html</li>
                                        <li>css</li>
                                        <li>javascript</li>
                                    </ul>
                                </li>
                                <li>
                                    实战
                                    <dl>
                                        <dt>html5</dt>
                                        <dd>
                                            画布、拖放、存储、定位、推送
                                        </dd>
                                        <dt>css3</dt>
                                        <dd>
                                            过渡、变形、动画、媒体查询
                                        </dd>
                                        <dt>jquery</dt>
                                        <dd>
                                            选择器、效果、动画、事件、插件\组件
                                        </dd>
                                    </dl>
                                </li>
                                <li>提高</li>
                            </ol>
                        </section>
                    </td>
                    <td>
                        <section>
                            <table class="table table-bordered table-hover table-striped">
                                <caption>book list</caption>
                                <thead>
                                <tr>
                                    <th>id</th>
                                    <th>title</th>
                                    <th>author</th>
                                    <th>price</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>红楼梦</td>
                                    <td>曹雪芹</td>
                                    <td>10</td>
                                    <td rowspan="4">

                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>西游记</td>
                                    <td>吴承恩</td>
                                    <td>10</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>水浒传</td>
                                    <td>施耐庵</td>
                                    <td>30</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>三国演义</td>
                                    <td>罗贯中</td>
                                    <td>40</td>
                                </tr>
                                </tbody>
                                <tfoot>
                                <tr class="text-center">
                                    <td colspan="5">四大名著</td>
                                </tr>
                                </tfoot>
                            </table>
                        </section>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <form target="_blank" action="http://rammderek.com/Test/Mime" method="get">
                            <fieldset>
                                <legend>Test MIME</legend>

                                <div class="form-group">
                                    <label for="mime">please enter mime</label>
                                    <input name="mime" id="mime" type="text" autocomplete autofocus required
                                           class="form-control" placeholder="please enter mime. exp: text/plain">
                                </div>

                                <div class="form-group text-right">
                                    <button class="btn btn-primary" type="submit">submit</button>
                                    <button class="btn btn-danger" type="reset">reset</button>
                                </div>
                            </fieldset>

                        </form>
                    </td>
                </tr>
            </table>
        </div>
    </div>

</div>

<blockquote class="blockquote-reverse">
    <h3>
        <a name="jkxy" href="http://www.jikexueyuan.com">极客学院</a>
    </h3>
    <footer><kbd>编</kbd><kbd>程</kbd><kbd>是</kbd><kbd>一</kbd><kbd>种</kbd>&nbsp;<span class="well well-sm">信仰</span>
    </footer>
</blockquote>

<hr>

<footer class="text-center">
    <span>all <em>images</em> <i>and</i> <strong>contents</strong> &copy; 2016</span> <span><a
        href="mailto:rammderek@163.com">rammderek</a> &trade;</span>
</footer>

<script src="http://mediaplayer.yahoo.com/latest"></script>
</body>
</html>