SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>学习</title>
    <style type="text/css">
    body {background-color:whirt;}
    p {color:blue;}
    </style>
    <!-- 存在头标签里的是设置整个页面的样式，存在单个标签里的是设置单个元素的样式 -->
    </head>
    <body>
        <h1 style="font-family:verdana;color:red;text-align:center;">学习笔记</h1>
        <h2 style="text-align:center;"><a id="begin">测试</a></h2>
        <!-- text-align指定文本水平与垂直的对齐方式 -->
        <hr/>
        <a href="#end">点击去结尾</a>
        <p>这是第一行</p>
        <!-- 这是注释 -->
        <a href="http://www.baidu.com" target="_blank">这是百度地址</a>
        <!-- 把target设置为_blank就是在新的窗口打开这个链接 -->
        <br/>
        <img src=" http://www.runoob.com/images/pulpit.jpg" alt="just a joker!"" width="100" height="80" />
        <!-- src是输入图片的url地址，而alt则是图片加载不出来时显示的替代文本 -->
        <table border="1" cellpadding="10" cellspacing="10">
            <!-- border是表格的框，cellpadding是单元格的边距，cellspacing是单元格的间距，
            th是表头，tr是一行,td是一行的一个格子 -->
            <caption>表格</caption>
            <tr>
                <th>month</th>
                <th>date</th>
                <th colspan="2">time</th>
                <!-- 跨两列 -->
            </tr>
            <tr>
                <td rowspan="2">
                    <ul>
                        <!-- 这是一个无序列表，有序列表是ol -->
                        <li>apple</li>
                        <li>banana
                            <ol type="A">
                                <li>ban</li>
                                <li>nana</li>
                            </ol>
                        </li>
                        <li>cat</li>
                    </ul>
                </td>
                <!-- 跨两行 -->
                <td>2</td>
                <td>06</td>
                <td>56</td>
            </tr>
            <tr>
                <td>20</td>
                <td>08</td>
                <td>42</td>
            </tr>
        </table>
        <h2 style="text-align:center;">列表</h2>
        <hr/>
        <dl>
            <!-- 自定义列表，每个自定义列表项以dt开始，自定义列表项的定义以dd开始 -->
            <dt>apple</dt>
            <dd>-app</dd>
            <dt>banana</dt>
            <dd>-ban</dd>
        </dl>
        <h2 style="text-align:center">布局和表单</h2>
        <hr/>
        <div id="container" style="width:500px">
 
            <div id="header" style="background-color:#FFA500;">
            <h1 style="margin-bottom:0;text-align:center;">主要的网页标题</h1></div>
 
            <div id="menu" style="background-color:#FFD700;height:320px;width:100px;float:left;">
            <b>菜单</b><br>
            HTML<br>
            CSS<br>
            JavaScript
            <form>
                <select>
                    <!-- 下拉列表，其中selected是默认选择 -->
                    <option value="python">python</option>
                    <option value="c#">c#</option>
                    <option value="java" selected>java</option>
                    <option value="php">php</option>
                </select>
                <input type="button" value="hello!">
            </form>
            </div>
            <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
                <h4 style="text-align:center;">登录</h4><br/>
                <form>
                    <fieldset>
                    <!-- fieldset是表单的外边框，legend是表单的标题 -->
                    <legend>信息输入</legend>
                    ACCOUNT: <br/>
                    <input type="text" name="account"><br/>
                    PASSWORD:<br/>
                    <input type="password" name="pwd"><br/>
                    <input type="radio" name="sex" value="man">MAN<br/>
                    <input type="radio" name="sex" value="women">WOMEN<br/>
                    <input type="checkbox" name="vehicle" value="bike">BIKE<br/>
                    <input type="checkbox" name="vehicle" value="car"> CAR<br/>
                    <input type="submit">
                    <input type="reset">
                    </fieldset>
                </form>
            </div>
 
            <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
            盗版必究</div>
 
        </div>

        <h2 style="text-align:center;">框架</h2>
        <hr/>
        <iframe src="" name="a_iframe"></iframe>
        <p><a href="http://www.baidu.com" target="a_iframe" rel="noopener">百度</a></p>
        <!-- 因为a的target是a_iframe，而a_iframe是iframe的name，所以a的链接会在iframe打开链接窗口 -->
        <p id="test">这个会变哟！</p>
        <script>
            function myfunc()
            {
                document.getElementById("test").innerHTML="hello HTML!";
            }
        </script>
        <noscript>抱歉，你的浏览器不支持javascript!</noscript>
        <!-- script为脚本，而noscript是当script不能运行时出现的 -->
        <button type="button" onclick="myfunc()">点我</button>
        <p style="font-size:20px;text-align:center;"><a id="end">结尾语</a></p>
        <a href="#begin">再看一遍！</a>



    </body>
</html>