• Python第五周前端学习之HTML5/ CSS / JS


    <!--
        html/head/body
        文本 - h1-h6 p / br / hr / sub / sup / strong / b / em / del / ins / 
        列表 - ul(li) / ol(li) / dl(dt/dd) / 
        图像 - img / figure / figcaption
        链接 - a(页面链接/锚链接/功能链接)
        表格 - table / tr / td / th / thead / tbody / tfoot
        表单 - form / input (text / password / radio / checkbox / file / submit / reset / email / date  url/ search) / select / textarea
        音视频 - audio / video / (source)
    
    -->
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>HTML5笔记</title>
        </head>
        <body>
            <!--controls 控件 autoplay 自动播放 loop -->
            <audio autoplay loop>
                <source src="resources/xiaochou.mp3">
            </audio>
            <dl id="top">
                <dt>
                    <figure>
                        <figcaption style="text-align: center;">FOR DREAM <br />
                        <img src="img/bg2.jpg">                
                    </figure>            
                </dt>
                <dd style="text-align: center;">火拳 艾斯</dd>
            </dl>
            <table border="" cellspacing="" cellpadding="">
                <caption>海贼王名言</caption>  
                                       <!--
                                           作者:zhangli9479@163.com
                                           时间:2018-04-01
                                           描述:thead tbody tfoot
                                       -->
                <tr>
                    <th>姓名</th>
                    <th>名言</th>
                </tr>
                <tr>
                    <td>白胡子</td>
                    <td>红发</td>
                    <td>路飞</td>
                    <td>艾斯</td>
                    <td>索隆</td>
                    <td>海贼王</td>
                </tr>
                <tr>
                    <td>做我儿子吧!</td>
                    <td>请各位务必给我这个面子</td>
                    <td>我不是天生的王者 但我骨子里流动着不让我低头的血液</td>
                    <td>为什么遇到如此强大的敌人你也不愿逃跑?—— 那是因为身后,有至爱之人。</td>
                    <td>我不管这个世上的人怎么说我,我只想依照我的信念做事,绝不后悔,不管现在将来都一样!</td>
                    <td>这个世界并不是掌握在那些嘲笑者的手中,而恰恰掌握在能够经受得住嘲笑与批评仍不断往前走的人手中。</td>
                </tr>
            </table>
            <form action="" method="post">
                <fieldset id="">
                    <legend>表框名</legend>
                    <input type="text" name="" id="" value="" required=""/>  
                    <input type="password" name="" id="" value="" placeholder="占位华语"/> 
                    <input type="radio" name="1" id="" value="" />单选一
                    <input type="radio" name="1" id="" value="" />单选二
                    <input type="checkbox" name="2" id="" value="" />复选1
                    <input type="checkbox" name="2" id="" value="" />复选2
                    <input type="date" name="" id="" value="" />
                    <input type="email" name="" id="" value="" />
                    <select name="">
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="" selected>666</option>
                    </select>
                    <textarea name="" rows="" cols="">我是文本框</textarea>
                    <input type="file" name="photograph" id="photograph" value="浏览文件" /> 
                    <input type="submit" name="" id="" value="提交" /> 
                    <input type="reset" name="" id="" value="重置" />  
                </fieldset>
            </form>
            <a href="http://www.runoob.com" style="text-decoration: none;color: red;">超链接</a> 
            <a href="#top" style="text-decoration: none;color: red;">锚定</a> 
            <a href="" style="text-decoration: none;color: red;">功能链接</a> 
        </body>
    </html>

    CSS

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>CSS笔记</title>
        </head>
        <body>
            <div class="header">
                <h1 style="text-align: center;">基础</h1>    
                <ul style="list-style: none; line-height: 30px;text-align:center;">
                    <li>标签选择器 id class nthon-child</li>
                    <li>间距 word-spacing  行高 line-height font-size 大小 </li>
                    <li>font-weight 粗细,bold bolder  font-style 样式,italic 斜体 letter-spacing </li>
                    <li>text-align:  center top bottom left right</li>
                    <li>overflow: hidden  scroll;</li>
                    <li>text-decoration: line-through 删除线;</li>
                    <li>块级元素,行级元素,内联元素 用display转换</li>
                    <li>转义字符</li>
                    <li>html是显示,是超文本语言,css是装饰,js是脚本,显示行为</li>
                    <li>样式分为3种,常用的是内部和外联, 内联很少用。样式表冲突时的三大原则</li>
                    <li>就近原则;具体性原则;重要性原则</li>
                </ul>
                <iframe  src="https://www.liaoxuefeng.com/" frameborder="0" width="800" height="400"></iframe>
                <iframe  src="http://www.runoob.com/js/js-examples.html" frameborder="0" width="800" height="400"></iframe>
            </div>
            <div class="nav">
                <ul style="list-style: none;text-align: center;">
                    <li>display 类型转化 - block inline-block</li>
                    <li>position :relative absolute fixed 相对,绝对,固定定位</li>
                    <li>z-index配合定位使用,决定谁在最上面,值越大,在上面,下面被覆盖</li>                
                </ul>
            </div>
            <div class="main"></div>
            <div class="footer"></div>
            <div class="bottom"></div>
        </body>
    </html>

    JS

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>js笔记</title>
        </head>
        <body>
            <div>
                <h2>天赐大酒店</h1>
                <hr />
                <h1 >剩余房间数<input type="text" value="10" id="demo" /></h1>
                <hr />
                <input id="join" type="button" onclick="myfunction1()" value="申请入住">
                <input id="quit" type="button" onclick="myfunction2()" value="申请退房">
            </div>
            <div>
                <h2>九九乘法表</h2>
                <hr />
                <div id="tableNine" style="height: 230px;background-color: yellow;"></div>
            </div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <script type="text/javascript">
                function jiujiu(){
                    var row, col;
                    var string = "<table>";
                    for (row = 1; row < 10; row++){
                        string += "<tr>";
                        for (col = 1; col < row + 1;col++){
                            string += "<td>";
                            string += row + "&times;" + col + "=" +  col * row;
                            string += '</td>'
                        }
                        string += "</tr>";
                    }
                    document.getElementById("tableNine").innerHTML = string + "</table>";
                };
                jiujiu();
            </script>
            <script type="text/javascript">
                function myfunction1(){
                    var number =parseInt(document.getElementById("demo").value);
                    if (number > 0) {
                        document.getElementById("demo").value = number - 1;
                        window.alert("订房成功");
                    } else{
                        window.alert("订房失败")                    
                    }
                }
                function myfunction2(){
                    var number =parseInt(document.getElementById("demo").value);
                    if (number < 15) {
                        document.getElementById("demo").value = number + 1;
                        window.alert("退房成功");
                    } else{
                        window.alert("退房失败")                    
                    }
                }
            </script>
        </body>
    </html>
  • 相关阅读:
    回溯-uva129
    【linux】【安全】服务器安全建议
    【linux】 服务器文件说明
    【linux】程序端口启动权限
    【android】安卓开发apk列表
    【网络基础】【TCP/IP】私有IP地址段
    【网络基础】【TCP/IP】IP的分级
    代数数论初步(全书)
    李代数笔记
    自由群,外代数和泛包络代数
  • 原文地址:https://www.cnblogs.com/zl666/p/8689062.html
Copyright © 2020-2023  润新知