HTML

超链接访问顺序

a:link-->a:visited-->a:hover-->a:active.（有顺序）

	link:表示从未访问过的链接的样式

	visited：表示已经访问过的链接样式

	hover：表示当鼠标放在上面的链接样式

	active：表示点击链接时的样式

HTML选择器

1.标记选择器：形如：

<style type="text/css">

    h1{

        color: red;

        font-size: 15px;

    }

</style>

2.类别选择器，形如：

<style type="text/css">

    .red{

        color: red;

    }

</style>

    <p class="red">用了类别选择器</p>

3.ID选择器,形如：

<style type="text/css">

    #red{

        color: red;

    }

</style>

    <p id="red">用了ID选择器</p>

总结：#：ID，‘.’：class

复合选择器

1

<style>

    p.special{

        color:red

    }

</style>

<p class="special">只有p标签中 class 是special时，该标签起作用</p>

2.并集选择器

<style>

    h1,h2,h3{

        color:red

    }

    *{

        color:red

    }

</style>

<h1>代表了h1, h2, h3都有公共的样式，红色, *带表的是这个页面整体字体颜色是红色</h1>

3.后代选择器

<style>

    p span{

        color:red

    }

</style>

<p>

    <span>p的后带只要有span，则字体都显示红色</span>

</p>

<p>

    <a href="http://www.baidu.com"><span>这里的字体也是红色的</span></a>

</p>

4.子选择器：

<style>

    p>span{

        color:red

    }

</style>

<p>

    <span>这有这中类型才显示样式</span>

</p>

<p>

    <a href="http://www.baidu.com"><span>这里的样式不显示</span></a>

</p>

盒子模型

margin属性 |

margin 解释
margin:20px (外边距) 上、下、左、右各20px
margin: 20px 40px (外边距)上、下20px；左、右40px
margin: 20px 40px 60px 上20px；左、右40px；下60px
margin: 20px 40px 60px 80px 上20px；右40px；下60px；左80px

overflow属性

当盒子里面的内容超过盒子范围，可以使用overflow来设置。

属性值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

垂直方向盒子叠加问题

标准文档流中，两个盒子，分别有上下外边距，竖直方向的margin不叠加，只取较大的值作为margin(水平方向的margin是可以叠加的)。

例：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>margin叠加</title>

	<style>

		*{

			padding: 0;

			margin: 0;

		}

		.a{

			width: 100px;

			height: 100px;

			border:1px solid;

			background-color: teal;

			margin-bottom: 10px;

		}

		.b{

			width: 100px;

			height: 100px;

			border:1px solid;

			background-color: red;

			margin-top: 20px;

		}

	</style>

</head>

<body>

	<div class="a"></div>

	<div class="b"></div>

</body>

</html>

上下两个盒子的距离不是30px；而是20px

div独占一行

盒子居中

margin:0px auto;第一个参数任意，第二个参数浏览器会自动解析，并让盒子水平居中显示，即margin-left和margin-right的数值一样。

文档流定位

block

独占一行，元素的`height`，`width`，`margin`,`padding`都可以设置

常见的有：<div>,<ol>,<ul>,<p>,<h1>...<h6>,<table>,<form>

可以将元素显示为block的样式：

display:block;

inline

  • 不独占一行.
  • width,height,不可设置,

    但是margin的左右修改可以生效，上下修改无效

    padding的左右修改可以生效（范围变大了，对周围元素没有影响），上下修改无效
  • width就是它包含的文字或者图片宽度，不可改变
  • 常见的inline元素：<span>,<a>
  • 可以将元素显示为inline的样式：display:inline;

inline-block

  • 不独占一行
  • 元素的height，width，margin,padding都可设置
  • 常见的有<img>
  • 可以将元素显示为inline-block的样式：
display:inline-block;

总结：元素可以进行类型转换:使用display属性

inline元素间隙问题：给父级设置：font-size:0即可

CSS

CSS书写顺序

位置属性(position, top, right, z-index, display, float等)

大小(width, height, padding, margin)

文字系列(font, line-height, letter-spacing, color- text-align等)

背景(background, border等)

其他(animation, transition等)

JS

== 和 === 的区别

等于： == 等于是简单的做字面值的比较

全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型

如

<script type="text/javascript">

        var a = "2";

        var b = 2;

        alert(a == b); //true

        alert(a === b); //false

    </script>

JS的特殊值: undifined,NAN...

① undefined：js中变量未赋值则显示undefined

② null：空值

③ NAN:(not a number)非数字类型

④ Javascript中所有变量都可以当作boolean类型处理

其中0,null,undefined,NaN,""(空串)当作false处理

如

    <script type="text/javascript">

        var a = null;

        if (a)

            alert("null是true")

        else

            alert("null是false") //结果输出这句

       var b = NaN;

        if (b)

            alert("NaN是true")

        else

            alert("NaN是false") //结果输出这句

    </script>

&&和||的特殊情况

  • &&且运算有两种特殊情况

    第一种：当表达式全为真的时候。返回最后一个表达式的值。

    第二种：当表达式中，有一个为假的时候，返回第一个为假的表达式的值
  • ||或运算有两种特殊情况

    第一种：当表达式全为假时，返回最后一个表达式的值

    第二种：只要有一个表达式为真。就会返回第一个为真的表达式的值

    如
    <script type="text/javascript">

        var a = "abc"; //所有类型变量都可当作boolean处理

        var b = true;

        var c = false;

        var d = null;

        alert(a && b);//true

        alert(b && a);//abc

        alert(a && c && d);//false

        alert(c || d);//null

        alert(d || c);//false

        alert(a || b || d);//abc

    </script>

数组

    <script type="text/javascript">

        var a = [];//空数组

        alert(a.length)//0

        a[0] = 3; //java中数组长度为0 则a[0]会报下标异常，js中不会

        a[2] = "abc";

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

            alert(a[i]);//结果a[0]=3;a[1]=undefined;a[2]=abc

        }

    </script>

函数

        <script type="text/javascript">

        /*

           方式一

        */

        //无参函数

        function hello(){

            alert("你好");

        }

        hello(); //调用

        //有参函数,且带返回值

        function sum(a,b){

            return a + b;

        }

        alert(sum(3,5));

        /*

          方式二

         */

        var fun = function (a,b){

            return a + b;

        }

        alert("方式二："+fun(3,8));

    </script>

隐藏参数

    <script type="text/javascript">

        function fun(){

            alert(arguments.length); //结果是2,就是传入的a,b

        }

        <!--调用-->

        fun('a','b');

    </script>

自定义对象

    <script type="text/javascript">

        var obj = { //定义一个对象

          name: 'marry', //属性值

          age: 18,

          fun1: function (){ //定义一个方法

              alert("我是方法1");

          },

            fun2: function (){

              alert("我是方法2");

            }

        };

        //调用

        obj.fun2();

    </script>

js常用事件onload,onclick,onblur...

  • onload的静态注册
    <script type="text/javascript">

        function onloadFun() {

            alert("静态注册");

        }

    </script>

<body onload="onloadFun();">

</body>
  • onload的动态注册
<script type="text/javascript">

        window.onload = function (){

            alert("动态注册");

        }

</script>

<body>

</body>
  • onclick的静态动态操作
<script type="text/javascript">

        //静态注册

        btn1 = function(){

            alert("点击了按钮1");

        };

        //动态注册

        window.onload = function (){

            //1.获取标签对象

            let btn2 = document.getElementById("btn2");

            // alert(btn2); //结果：[object HTMLButtonElement]

            //2.通过标签对象.事件名 = function(){};

            btn2.onclick = function (){

                alert("点击了按钮2");

            }

        };

    </script>

<body>

<button onclick="btn1();">按钮1</button>

<button id="btn2">按钮2</button>

</body>
  • onblur函数
    <script type="text/javascript">

        //静态注册

        let blurFun = function (){

            alert("用户名框失去焦点")

        }

        //动态注册

        window.onload = function (){

            //1.获取标签对象

            let pwd = document.getElementById("pwd");

            //2.标签对象.函数名 = function(){};

            pwd.onblur = function (){

                alert("密码框失去焦点")

            }

        }

    </script>

<body>

用户名：<input type="text" onblur="blurFun()"><br>

密码：<input id="pwd" type="password">

</body>

DOM

如：

  • getElementsByName的使用
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript">

        //全选

        function checkAll(){

            //1.根据name获取dom对象，getElementsByName返回的是一个集合

            let hobby = document.getElementsByName("hobby");

            // alert(hobby[0]); //集合中每个元素都是一个对象 【[object HTMLInputElement]】

            //2.让其全选

            for (let i=0;i<hobby.length;i++)

                //checked:可读可写，既可以读取，也可以赋值

                hobby[i].checked = true;

        }

        //全不选

        function checkNo(){

            let hobby = document.getElementsByName("hobby");

            for (let i=0;i<hobby.length;i++)

                hobby[i].checked = false;

        }

        //反选

        function checkReverse(){

            let hobby = document.getElementsByName("hobby");

            for (let i=0;i<hobby.length;i++){

                hobby[i].checked = !hobby[i].checked;

            }

        }

    </script>

</head>

<body>

爱好：

<input type="checkbox" name="hobby" value="aa">aa

<input type="checkbox" name="hobby" value="bb">bb

<input type="checkbox" name="hobby" value="cc">cc

<br>

<button onclick="checkAll();">全选</button>

<button onclick="checkNo();">全不选</button>

<button onclick="checkReverse();">反选</button>

</body>

</html>

jQuery

  • 可以通过cdn引入jQuery

    如：
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

    </script>

    <script type="text/javascript">

        alert($); //测试用

    </script>
  • 也可以下载jquery（略），自行引入

    如
<script src="根据下载的jquery引入">

jquery-html(),val(),text()用法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>

        我是div。<span>我是div中的span</span>

    </div>

    <input id="input">

    <button id="btn">点我</button><br>

    单选

    <input type="radio" name="sex" value="1">男

    <input type="radio" name="sex" value="2">女<br>

    多选

    <input type="checkbox" name="intrest" value="1">a

    <input type="checkbox" name="intrest" value="2">b

    <input type="checkbox" name="intrest" value="3">c<br>

    下拉框

    <select id="select">

        <option value="1">a</option>

        <option value="2">b</option>

    </select>

<!--引入jQuery-->

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">

    // html(): 获取和设置起始标签和结束标签之间的内容，带HTML

    // text(): 获取和设置起始标签和结束标签之间的纯文本，不带HTML样式

    // val(): 获取和设置表单项中value属性值之间的纯文本，不带HTML样式

        //val可以设置单选，复选，下拉框选中值

    // 以上三个方法 不传参值是获取值，传参是赋值操作

    $(function (){ //页面初试化

        alert($('div').html());  //结果：我是div。<span>我是div中的span</span>

        alert($('div').text());  //结果：我是div。我是div中的span

        //设置选中值

        $(':radio').val(['1'])； //让value=1的选中

        $(':checkbox').val(['1','2'])   //让value=1，2的选中

        $('#select').val(['2'])    //让value=2的选中

    });

    $('#btn').click(function (){

        alert($('#input').val()); //在框里输入abc。结果弹出abc

    });

</script>

</body>

</html>

最新文章

  1. 20145205 java语言实现数据结构实验一
  2. html5 audio的暂停与播放
  3. echo &#39;&lt;script&gt;alert(&quot;插入成功&quot;)&lt;/script&gt;&#39;;
  4. ArcEngine批量添加XY数据
  5. 使用 ContentProviderOperation 来提升性能
  6. Device eth0 does not seem to be present,delaying initialization解决方法
  7. shell script的连接符是逗号，不是英文的句号
  8. CF196 D2 D
  9. HDU 3699 A hard Aoshu Problem （暴力搜索）
  10. 一致性hash和虚拟节点
  11. TensorFlow框架(2)之TensorBoard详解
  12. Visual studio code快捷键
  13. Effective Java 之 --- 用私有构造器或者枚举类型强化Singleton属性
  14. Python_异常处理结构与调试
  15. 我实在不懂Python的Asyncio
  16. 我的第一篇博客。(JavaScript的声明和数据类型的一些笔记)
  17. 20175325 MyCP （课下作业，必做）
  18. Nginx配置跨域请求 CORS
  19. UVA 10100 Longest Match
  20. bindpose定义

热门文章

  1. 羽夏壳世界—— PE 结构（上）
  2. 从0开始基于Webpack5 搭建HTML+Less 前端工程
  3. liunx对磁盘进行配额限制
  4. XCTF练习题---CRYPTO---wtc_rsa_bbq
  5. Citus 11(分布式 PostgreSQL) 文档贡献与本地运行
  6. 试驾 Citus 11.0 beta
  7. 1.Spring开发环境搭建——intellj
  8. linux篇-centos7.3配置
  9. 131_Power Query之获取钉钉日志自动刷新Power BI报告
  10. Zookeeper安装学习（二）