<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>淘,我喜欢</title>

        <!--样式表是从上往下读的,所以样式表要写在上边-->

        <!--样式表的引入方式

        1.行内样式 即写在标签当中 标签当中有个style属性  <h3 style="color: #FF0000;">这是一个标题</h3> 特点作用域小,但优先级最高

        2.写在head头部,使用如下格式,对所有相应标签都有效,如果某行有特殊需求,可以使用行内样式,作用域当前页面

        3.外联 <link rel="stylesheet" href="css/demo.css" type="text/css"/> 3个属性写全,要不浏览器有的好使有的不好使

          作用域最大,哪个html网页连接哪个有效,哪个用的多,看网站风格是否是一样的,一样的用外联

          选择器  a.元素选择器(指标签名)

              b.id选择器#(在标签上添加id属性)具有唯一性,整个网页id的属性是唯一的,不唯一的话,此id的样式全变

                              但为了配合js的getElementById(),将只能找到一个(前面的)

              c.class选择器.(在标签上添加class属性) id优先级高于class高于元素

              d.input[type="text"]{background-color:red;} 属性选择器,多用于表单

              e.后代选择器 选择器 空格 后代{} 包括子孙 p font{}

              f.组合选择器 div,p,font{} 如果写成 div p font是找后代

              g.伪元素选择器 作用于超链接 a:link{color:red;} a:visited{color:green;} a:hover{color:yellow} a:active{color:pink;}

                l_v_h_a是有顺序的 否则没有效果

         举例 div{width:200px;height:200px;border} border有四个边 border-left right up bottom

               border:2px red solid;属性值无顺序 但要写全 dotted dashed 虚线 double 双实线

        字体 font-family 字体大小 font-size font-weight:bold;

        背景 background-color 背景图 background-image:url(img/btn.jpg);颜色和图片放一块显示图

            backgroung-repeat:repeat-x;

        浮动设置 float clear:both 清除浮动两边的,他就不会上去了

        盒子模型 外边距margin 内边距 padding-->

        <!--<span></span> 行级元素 写多大占行内多少 span{display:none;} display:block;独占一行 display:inline;修饰div的-->

        <style type="text/css">

            /*注意这样都写换行的话,每一个换行两个字节,所以太多不要换行,手机骗流量用注释,浏览器显示注释*/

            p{

                color:red;

                font-size: 100px;

            }

            .lunbo img{

                width: 100%;

                height: 843px;

            }

        </style>

    </head>

    <body>

        <div id="adId" style="display: none;">

            <img src="img/ad.jpg" />

        </div>

        <div class="lunbo">

                <img id="imgId" src="./img/1.jpg" />

            </div>

        <font color="red">这是一个HBuilder项目网页</font>

        <!--get 请求参数提交在浏览器的地址栏 地址栏是有限的 不适合发送大数据 地址栏内容全部显示 安全性不高 但是超链接就是get,避免不了-->

        <!--属性 readonly disable multiple下拉菜单多选-->

        <form action="#" method="get" onsubmit="return check()">

            <table width="900" border="1" style="margin: 0 auto; line-height: 40px;">

                <tr>

                    <td width="200">帐号:</td>

                    <td width="400"><input type="text" id="zhanghao" name="textname" value="" placeholder="请输入你的帐号"/></td>

                    <td width="300"><span id="kong" style="display: none;color:red">帐号不能为空</span></td>

                </tr>

                <tr>

                    <td>密码:</td>

                    <td><input type="password" name="passwordname" placeholder="请输入你的密码"/></td>

                    <td></td>

                </tr>

                <tr>

                    <td>性别:</td>

                    <td><input type="radio" name="radio" checked="checked">男

                        <input type="radio" name="radio">女</td>

                    <td></td>

                </tr>

                <tr>

                    <td>爱好:</td>

                    <td>抽烟:<input type="checkbox" />

                        喝酒:<input type="checkbox" />

                        烫头:<input type="checkbox" /></td>

                    <td></td>

                </tr>

                <tr>

                    <td>喜欢的音乐</td>

                    <td>

                            <select>

                                <option>like dying in the sun</option>

                                <option>anything but ordinary</option>

                                <option>chocolate ice</option>

                                <option>don't cry</option>

                            </select>

                    </td>

                    <td></td>

                </tr>

                <tr>

                    <td colspan="3" style="text-align: center;">

                        <input type="image" src="./img/regbtn.jpg" style="margin-top: 10px;">

                    </td>

                </tr>

            </table>

        </form>

        <!--div+css是网页布局的主流 灵活性要好,

            table有弊端,必须把/table读完才能全部显示

            div有个特点,独占一行,不能完成复杂内容,要借助样式表

            语法:

            选择器{属性:属性值;属性:属性值;}

            注意选择器严格区分大小写

            最后一个属性可以不写; 也可以写

            注释使用/* */

            font-size: 100 px; 注意值额单位之间不能用空格分开

        -->

        <div>这是一个div的标签1</div>

        <div>这是一个div的标签2</div>

        这里不是div标签

        <p> 这是一个段落 </p>

    <!--    <script type="text/javascript" src="外部JS文件相对路径"></script>注意引入外部事件后内部事件将被屏蔽 所以用1行

        alert(typeof 变量)查看变量数据类型 有number string boolean null object undefined 定义变量用var +字符串表连接 -*/表示运算

        === 为全等表示数据类型也要相同 if()判定时除0外数值都为真 除空外字符串都为真 null false为假 对象都为真

        for循环注意不能再用int for(var i=0;i<2;i++)

        匿名函数较常用 var fu=function(i,j){return i+j;} 使用fu(3,4);

        事件源 事件 绑定事件与源 处理方式

        事件有两种鼠标事件(点击双击移入移出),键盘事件(按下弹起)按住不放

        绑定:事件和事件源绑定在一起,事件发生了如何去处理使用函数

        事件:onload 与body绑定<body onload="fun()"></body>

        事件:onsubmit 与表单绑定<form onsubmit="blu()"></form>

        事件:onchange 与select下拉菜单绑定<select onchange="blu()"></select>

        事件:onclick 与鼠标事件绑定<input type="button" onclick="blu()"></input>

        js BOM 对象   a.window

                        弹框

                        表示浏览器窗口 弹框 alert 弹出一个警告框  window.alert(""); window可以省略 调试程序用

                        var con=confirm("确认删除吗?");有两个按钮 确认返回true与取消返回false

                        var pro=prompt("请输入内容"); 取消返回null

                        定时器

                        setTimeOut(执行任务,毫秒值); function fun(){alert("定时器.")} setTimeOut(fun,2000)

                        setInterval(执行任务,毫秒值);function fun(){alert("定时器.")} var id=setInterval(fun,2000)

                            匿名函数 setInterval(function(){alert("定时器")},2000);

                        clearInterval(id);

                        eval("alert(123)") 把字符串解析成函数

                   b.location

                   function fnhei(){

                           location.href="http://www.itheima.com";

                   }

                   <a href="#" onclick="fn()">点我进入淘宝</a> 或者使用函数名不加双引号

                   c.history

                   history.go(-1);后退一步 history.go(1);前进一步 意义不大

                   d.图片轮播

                       一段时间把img标签的src属性图片名称改变

                   e.验证

                   span.innerHTML("加入内容");

    -->

        <input type="button" onclick="f()" value="点我关闭定时器"/>

        <!--定时器 跳转网页 开始-->

        <script type="text/javascript">

            function fun(){alert("定时器.")}

            var id=setInterval(fun,40000);

            function f(){

                clearInterval(id);

            }

            function fnhei(){

                location.href="https://www.taobao.com/";

            }

            function myblog(){

                window.alert("操作成功\r\n5秒后跳转主页.")

                setTimeout(fnhei,5000);

            }

        </script>

        <!--定时器 结束-->

        <!--轮播和广告 开始-->

        <script type="text/javascript">

        var i=1;

        var lunboId=setInterval(function(){

            var imgId=document.getElementById("imgId");

            imgId.src="img/"+i+".jpg";

            i++;

            if(i>4){

                i=1;

            }

        },5000);

        var adId=document.getElementById("adId");

        setTimeout(function(){adId.style.display="block";},0);

        setTimeout(function(){adId.style.display="none";},5000);

        </script>

        <!--轮播和广告 结束-->

        <script type="text/javascript" src="js/close_lunbo.js"></script>

        <br/><a href="#" onclick="myblog()">点我进入淘宝,实际是5秒后进入我的博客</a> 

        <center><button onclick="closeLunbo()">点我结束轮播</button></center>

        <script type="text/javascript" src="js/checked.js"></script>

    </body>

</html>

js

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div>

            <table>

                <tr>

                    <td>

                        <form method="get" action="#">

                            请输入表格的行数:<input type="text" id="table_r" /><br />

                            请输入表格的列数:<input type="text" id="table_l" /><br />

                            <input type="button" value="生成表格" onclick="createTable()" />

                        </form>

                    </td>

                </tr>

            </table>

        </div>

        <div id="div_t">

        </div>

        <script type="text/javascript">

            /*获得标签方法*/

//            var x=document.getElementsByTagName("div");

//            var y=document.getElementsByClassName("");

//            var z=document.getElementsByName("");

             /*操作标签对象*/

//            var tj=createElement("li");

//            tj.setAttribute("id","tj");

//            tj.setAttribute("value","tj");

//            tj.innerHTML="天津";

//            city.appendChild(tj);

//            innerHTML="";

//            插入标签 insertBefore(xin,jiu);需要知道父和新旧3个标签.

            /*操作标签属性*/

//            getAttribute("属性名");

//            setAttribute("属性名","属性值");

//            removeAttribute(name);

            /*设置标签体的文本 标签内容原样输出*/

//            innerText="<h1>海马</h1>";

//            alert(divElement.innerHTML());

//            alert(divElement.innerText());

            /*判断是否有子节点*/

//            element.hasChildNodes();

//            IE认为空白文本节点是没有子节点,火狐只要有回车都有节点

//            删除时自己不能删除自己,通过父节点删除,所有浏览器支持

//            var fu=document.getElementById("fu");

//            var zi=document.getElementById("zi");

//            fu.remove(zi);

//            zi.parentNode;

            /*替换的时候也使用父节点 replaceChild*/

//            var city=document.getElementById("fu");

//            var bj=document.getElementById("zi");

//            var fk=document.getElementById("ti");

//            city.replaceChild(xin,jiu);

            /*各行变色 奇数行偶数行设置不同背景色*/

//            var trs=getElementsByTagName();得到行

//            window.onload=function(){}

//            for(var i=1;i<trs.length;i++){

//                if(i%2==0){

//                    trs[i].style.backgroundColor="#ffffcc";

//                }else{

//                    trs[i].style.backgroundColor="#ff00cc";

//                }

//            }

//            添加鼠标悬浮事件 trs[i].onmouseover=function(){

//                color=this.style.backgroundColor;

//                this.style.backgroundColor="#329393";

//            }

//            添加鼠标离开事件 trs[i].onmouseout=function(){

//                this.style.backgroundColor=color;

//            }

//            全选全部选的思想 复选框的属性跟随总选框即可

//            onclick=selectAll(this);参数就是那个复选框

//            var checkboxes=document.getElementsByClassName("itemSelect");

//            for(var i=0;i<checkboxes.length;i++){

//                checkboxes[i].checked=checkedObj.checked;

//            }

//            反选框if判断

//            js.substr(kaishi,length) js.substring(kaishi,jieweishao1)

//            var date=new Date();

//            date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";

//            Math.round(3.14);

//            js的Array对象 是唯一容器

//            创建Array对象的语法3种

//            var arr1=new Array();

//            arr1[0]=1;

//            arr1[1]=1.5;

//            arr1[2]="abc";

//            var arr2=new Array(3);

//            arr2[0]=1;

//            arr2[1]=2;

//            arr2[2]=3;

//            arr2[3]=4;

//            arr2[6]=6;

//            js数组变长,可以存储不同的数据类型.

//            var arr3=new Array(1,2,3,4,5);

//            var arr4=new Array("5");

//            正则表达式

//            var reg=/^1[345678][0-9]{9}$/;要写验证开头结尾不写后边再写还会true

//            正则对象.test("字符串");与java不同

//            省市联动

//            二维数组

//            arr=[["海淀","昌平"],["长春","吉林","四平"],["南京"],"苏州"];

//            arr(value);

//            cityId.innerHTML="<option>-请-选-择-市</option>";

//            onchange=selectCity(this.value) 传递的value即索引

            function createTable() {

                //这个要看什么时候执行

                var r = document.getElementById("table_r").value;

                var l = document.getElementById("table_l").value;

                var div_t=document.getElementById("div_t");

                alert(r+" "+l);

                var tab="<table width='300px' height='100px' border='1' bordercolor='red'>";

                for(var i=0;i<r;i++){

                    tab+="<tr>";

                    for(var j=0;j<l;j++){

                        tab+="<td>swift</td>";

                    }

                    tab+="</tr>";

                }

                alert(tab);

                div_t.innerHTML=tab;

            }

        </script>

    </body>

</html>

例子

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <form action="#" method="get" onsubmit="return check()">

            <table id="table" width="455" border="1" style="margin: 0 auto; line-height: 25px;">

                <tr>

                    <td width="95">帐号:</td>

                    <td width="230"><input type="text" id="zhanghao" name="textname" value="" placeholder="请输入你的帐号" /></td>

                    <td width="130"><span id="kong" style="display: none;color:red">帐号不能为空</span></td>

                </tr>

                <tr>

                    <td>密码:</td>

                    <td><input type="password" name="passwordname" placeholder="请输入你的密码" /></td>

                    <td></td>

                </tr>

                <tr>

                    <td>性别:</td>

                    <td><input type="radio" name="radio" checked="checked">男

                        <input type="radio" name="radio">女</td>

                    <td></td>

                </tr>

                <tr>

                    <td>爱好:<input type="checkbox" onclick="selectAll(this)"/></td>

                    <td>

                        抽烟:<input class="itemcheck" type="checkbox" />喝酒:<input class="itemcheck" type="checkbox" />烫头:<input class="itemcheck" type="checkbox" />

                    </td>

                    <td></td>

                </tr>

                <tr>

                    <td>喜欢的音乐</td>

                    <td>

                        <select>

                            <option>like dying in the sun</option>

                            <option>anything but ordinary</option>

                            <option>chocolate ice</option>

                            <option>don't cry</option>

                        </select>

                    </td>

                    <td></td>

                </tr>

                <tr>

                    <td>省市联动</td>

                    <td>

                        <select onchange="selectCity(this.value)">

                            <option>--请-选-择-省--</option>

                            <option value="0">北京</option>

                            <option value="1">辽宁</option>

                            <option value="2">黑龙江</option>

                            <option value="3">海南</option>

                        </select>

                        <select id="cityid">

                            <option>--请-选-择-市--</option>

                        </select>

                    </td>

                    <td></td>

                </tr>

                <tr>

                    <td>照片:</td>

                    <td><input type="file"></td>

                    <td></td>

                </tr>

                <tr>

                    <td>个人简介:</td>

                    <td>

                        <textarea rows="5" cols="30">

                        </textarea>

                    </td>

                    <td></td>

                </tr>

                <tr>

                    <td colspan="3" style="text-align: center;">

                        <input type="image" src="./img/regbtn.jpg" style="margin-top: 10px;">

                    </td>

                </tr>

            </table>

        </form>

        <!--表格各行换色与悬停换色-->

        <script type="text/javascript">

            window.onload=function(){

                var trs=document.getElementsByTagName("tr");

                for (var i=0;i<trs.length;i++) {

                    if(i%2==0){

                        trs[i].style.backgroundColor="#FF4500";

                    }else{

                        trs[i].style.backgroundColor="#ffeeff";

                    }

                    var color;

                    trs[i].onmouseover=function(){

                        color=this.style.backgroundColor;

                        this.style.backgroundColor="#0045ff";

                    }

                    trs[i].onmouseout=function(){

                        this.style.backgroundColor=color;

                    }

                }

            }

        </script>

        <!--复选框的总选框设置-->

        <script type="text/javascript">

            function selectAll(checkObj){

                var checks=document.getElementsByClassName("itemcheck");

                for (var i=0;i<checks.length;i++) {

                    checks[i].checked=checkObj.checked;

                }

            }

        </script>

        <!--省市联动-->

        <script type="text/javascript">

            arr=[["海淀","昌平","大兴","丰台"],["沈阳","大连","葫芦岛","锦州"],["哈尔滨","齐齐哈尔","牡丹江","五常"],["三亚","海口","东方","三沙"]];

            function selectCity(num){

                alert(num);

                var city=document.getElementById("cityid");

                city.innerHTML="<option></option>";

                city.innerHTML="<option>--请-选-择-市--</option>";

                for (var i=0;i<arr[num].length;i++) {

                    city.innerHTML+="<option>"+arr[num][i]+"</option>";

                }

            }

        </script>

    </body>

</html>

html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则的更多相关文章

  1. jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

    jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒 ...

  2. CSS,JavaScript知识点

    1.css重用                <style>            如果整个页面的宽度 > 900px时:            {                . ...

  3. HTML+Css+JavaScript知识点汇总

    HTML 部分 HTML基础知识 1. HTML简介 HTML(Hypertext Markup Language),超文本标记语言,HTML利用各种标记来标识文档的结构以及标识超链接的信息.它是从S ...

  4. jacascript CSS样式的脚本化(js)操作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 引入CSS有3种方式:行间样式,内联样式和外部链接样式. 在实际工作中,我们使用 javascript 操 ...

  5. html/css/javascript知识点集锦；完全小白开搞web编程

    知识点集锦 1.在html模板的代码中会有下面一类: {% block title %} Blog entries {% endblock %}这里的 block 和 endblock 是神马? {% ...

  6. JS应用实例1：表格各行换色

    效果如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. web@前端--html,css,javascript简介、第一个页面(常用标签简介)

    1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...

  8. js操作bom和dom

    Bom 概念 BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用jav ...

  9. javascript教程5:--BOM操作

    1.BOM 简介 所谓的 BOM 即浏览器对象模型(Browser Object Model).BOM 赋予了 JS 操作浏览器的能力,即 window 操作.DOM 则用于创建删除节点,操作 HTM ...

随机推荐

  1. 使用eclipse IDE遇到的问题

    Problems opening an editor Reason project name does not exist 项目右键->configure->convert to mave ...

  2. tcp的半连接与完全连接队列（三）源码分析

    TCP 协议中的 SYN queue 和 accept queue 处理 若要理解本文意图说明的问题,可能需要以下知识背景: listen 系统调用的 backlog 参数含义,以及与 net.cor ...

  3. 性能测试工具LoadRunner17-LR之Controller windows系统资源性能常用计数器

    1.System %Total Processor Time 该计数值用于体现服务器整体的处理器利用率,对多处理器而言,该计数值体现的是所有CPU的平均利用率.如果该值的数值持续超过90%,则可以说明 ...

  4. 对象池1（方法功能）PoolOption

    2.对象池PoolOption(方法功能) //单类型缓冲对象管理(单模池操作管理)功能: 激活.收回.预加载等. namespace kernal { [System.Serializable] p ...

  5. 文件监控只FileSystemWatcher控件

    FileSYstemWatcher控件是用来监控一个文件系统或监控文件变化.该控件会通知文件创建.修改.删除的消息,分别通过Created事件.Changed事件和Deleted事件来处理对应的操作 ...

  6. 【踩坑】报错 non-static method xxx() cannot be referenced from a static context

    今天测试代码时遇到 Error:(6, 55) java: non-static method sayGoodbye() cannot be referenced from a static cont ...

  7. vue2.0 $router和$route的区别

    在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数. 在路由跳转的时候除了用router-link标签以外需要 ...

  8. centos7.4 系统安装指导

    centos7 系统安装指导 安装前规划 下载安装文件 安装过程设置 安装后系统基本设置 安装前规划 CentOS 7.x系列只有64位系统,没有32位. 生产服务器建议安装CentOS-7-x86_ ...

  9. Linux终端(terminal)清屏命令

    windows CMD终端的清屏命令是cls Linux终端中的清屏命令有 1) clear 2) reset

  10. S7-1500 读取V90/S120/S210/G120的常用驱动参数

    S7-1500 读取V90/S120的常用驱动参数 此程序已更新,可以下载例子程序 https://files.cnblogs.com/files/lion-zheng/PLC_async_drive ...