网页总结

网页代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #bg_body {
                margin: 0 auto;
                width: 1200px;
                background-image:url(img/images/bj001.jpg);
            }
            .head,.foot,.nav {
                clear: both;
                color: white;
            }
            .head {
                margin: 5px auto;
                text-align: center;
            }
            .nav {
                height: 500px;
            }
            .nav1 ul li {
                margin: 0 150px;
                width: 70px;
                display: inline-block;
                text-align: center;
            }
            #nav21 {
                float: left;
            }
            #nav22 {
                height: 350px;
            }
            #nav221 {
                text-align: center;
            }
        </style>
        <script>
            window.onload = function() {
                var index = 0;
                window.setInterval( function() {
                    h = document.getElementById("bg_body")
                    images = ["img/images/bj001.jpg","img/images/bj002.jpg","img/images/bj003.jpg","img/images/bj004.jpg","img/images/bj005.jpg","img/images/bj006.jpg"];
                    index += 1;
                    index %= images.length
                    h.style.backgroundImage = "url(" + images[index] + ")" 
                    
                },10000)
            }
        </script>
    </head>
    <body id="bg_body">
        <div class="head">
            <h1>HTML5</h1>
        </div>
        <div class="nav">
            <div class="nav1">
            <ul>
                <li><p onclick="aoo()">HTML</p></li>
                <li><p onclick="foo()">CSS</p></li>
                <li><p onclick="goo()">JavaScipt</p></li>
            </ul></div>
            <div id="nav2">
                <div id="nav21">
                    <img id="nav211" src="" /></div>
                <div id="nav22">
                    <p id="nav221">恭喜你降临web的边缘的地带，这里的资源贫瘠，在这里你将获得不到足够的灵力，你的
                    修真生涯既是开始，也是结束。即便如此，这里依然遍布着各个修真门派，现实而又残酷</p></div>
            </div>
        </div>
        <div class="foot">
            <p>世纪天成|上海邮通科技有限公司　版权所有|上海市徐汇区钦州北路1066号74号楼3楼|
            不良信息举报电话：021-34144567自律公约</p>
            <p>copyright &copy; 2018 Shanghai Post &amp; Telelcommunications Technology Co,.ltd
                </p>
        </div>
        <script>
            function foo () {
                h1 = document.getElementById("nav22");
                h1.innerHTML = "CSS:层叠样式表：Cascading Style Sheets"
                +"<br>"+ "CSS内容主要分为：边框，圆角，背景，渐变，文本效果，字体，图片，按钮，框大小等"
                + "<br>" + "主要使用：magin,border,width,height,text,padding,backgrpound"
                + ",box,overflow,font等来实现样式表的书写";
                h2 = document.getElementById("nav211");
                h2.src = "img/a3.jpg"
            }
            function aoo() {
                h1 = document.getElementById("nav22");
                h1.innerHTML = "H5：超文本标记语言-HyperText MarkupLa"+
                "nguage是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。"
                +"<br>"+ "H5主要有以下标签:" + "<br>" + "标题:h1-h6。随着数字的变大，标题的大小逐渐变小，hr用于分隔内容"
                + "<br>" + "段落:p" +"<br>" + "头部:head,title,base,linl,meta,script,style" +"<br>"+ "CSS:style,link"
                +"<br>" + "图像:map,img,area" + "<br>"+"表格:table,thread,tbody,tfoot,tr,td,th" +"<br>"+ "列表:ur,ul,ol,dl,dt,dd,"
                +"<br>"+"区块:div,span" +"<br>" + "布局:div,span" +"<br>" +"表单:form,input,label,fieldset,legend,select,option,button,textarea" 
                + "<br>" +"框架：iframe" 
                h2 = document.getElementById("nav211");
                h2.src = "img/a1.jpg"
            }
            function goo(){
                h1 = document.getElementById("nav22");
                h1.innerHTML = "JavaScript 是 Web 的编程语言" + "<br>"
                                + "如需在 HTML 页面中插入 JavaScript，请使用 &lt;script&gt;标签。"
                                + "&lt;script&gt;和 &lt;/script&gt;会告诉 JavaScript 在何处开始和结束。&lt;script&gt;和 &lt;/script&gt;之间的代码行包含了 JavaScript"
                                +"<br>" +"JS大部分与Python相同，比如字符串，变量，函数，循环等，也有一些地方是不同的，比如变量的命名方式var；函数的命名方式function;JS中没有输出语句，是直接显示在浏览器中"
                                + "循环的写法；JS中的数字是单一类型的；JS中可以自动转换类型"
                h2 = document.getElementById("nav211");
                h2.src = "img/a5.jpg"
            }
        </script>
    </body>
</html>