<!-- HTML5新增的语义化标签（用于搜索引擎识别）常用的有 -->
<header></header>   <!-- 头部（页眉） -->
<nav></nav>         <!-- 导航 -->
<aside></aside>     <!-- 侧边栏（比如文章分类、友情链接等） -->
<main></main>       <!-- 页面主要内容 -->
<article></article> <!-- 文章，表示一段独立的内容 -->
<section></section> <!-- 其他模块，一个模块是一个section（或者也可以用来给article分段） -->
<footer></footer>   <!-- 底部（页脚） -->

<!-- 自定义属性，要求以"data-"开头，最好不要有英文大写（否则js获取不到）
     JavaScript获取自定义属性：
     var element = document.querySelector("p");
     var name = element.dataset['myName'];     //把横杠改成驼峰法
-->
<p data-my-name="xiaoming">小明</p>

<progress max="100" value="10"></progress> <!-- 进度条 -->
<meter max="100" high="80" low="40" value="50"></meter> <!-- 度量器（类似进度条，不同进度有不同效果） -->

<img alt="无法加载图片" title="鼠标悬浮时的提示信息">

<base target="_blank" /> <!-- 统一设置所有a标签的打开方式 -->
<a href="#id" target="_blank | _self">超链接</a><br />

<dl>
    <dt>标题</dt>
    <dd>数据1</dd>
    <dd>数据2</dd>
</dl>

<br />

<select>
    <option>选项1</option>
    <option selected>选项2</option>
</select>

<br />

<table align="center | left | right" border="2" cellspacing="1" cellpadding="1">
<caption>标题</caption>
<thead>
    <tr>
        <th>类目1</th>
        <th>类目2</th>
        <th>类目3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td rowspan="2">数据3</td>
    </tr>
    <tr>
        <td colspan="2">数据4</td>
    </tr>
</tbody>
</table>

<label>姓名：<input type="text" /></label> <!-- 点击文字跳转输入框 -->

<br />

性别：<input type="radio" name="sex" checked />男
<input type="radio" name="sex"/>女

<br />

<input type="file" multiple /> <!-- 多文件上传 -->

<br />

<!-- 记录上次输入过的数据，alt+s选中输入框 -->
<input type="text" list="data" placeholder="搜索" autofocus required autocomplete accesskey="s"  />
<datalist id="data">
    <option>数据1</option>
    <option selected>数据2</option>
</datalist>

<br />

<fieldset>
    <legend>标题</legend>
</fieldset>

<hr />

<audio src="1.mp3" autoplay controls loop="-1" ></audio><!-- 无限循环用-1 -->

<hr />

<!-- 不同浏览器支持的格式不同，可以配置source兼容多种浏览器，使用浏览器最多支持以下三种格式 -->
<audio autoplay controls loop="-1">
    <source src="1.mp3" />
    <source src="1.wav" />
    <source src="1.ogg" />
</audio>

<hr />

<embed type="application/x-shockwave-flash" src="" quality="high" allowFullScreen="true" width="400" height="400" align="middle" allowScriptAccess="true" />

<hr />

<video autoplay controls loop="0" poster="1.jpg">
    <source src="1.mp4" />
    <source src="1.ogg" />
    <source src="1.webM" />
    您的浏览器不支持视频播放
</video>

<!-- 外部导入 -->
<link href="other.css" type="text/css" rel="stylesheet" />

<!-- html内书写 -->
<style type="text/css"> </style>

<!-- 标签属性设置 -->
<p style="display: inline-block; width: 150px" >xxx</p>

font-style: italic; /* 可以使用normal、italic、oblique（人为地控制字体倾斜，而不是去使用倾斜字体） */
font-weight: 700; /* 100的整数倍(100-900)，也可以使用normal、bold、boler、lighter，700等同于bold */
font-size: 14px;
font-family: 'Microsoft Yahei',simsun,'\5B8B\4F53'; /* 中文最好用unicode编码，含空格、中文、unicode编码都要使用引号，英文可以不用引号 */

/*font: italic bold 16px 'Microsoft Yahei'; 一键设置，font: font-style font-weight font-size font-family*/

line-height: normal; /* 行高，使用数字时可选的单位有 像素px、相对值em，百分比% */
letter-spacing: 1px; /* 字间距 */
word-spacing: 1px; /* 单词间距，仅对英文有效 */
word-wrap: break-word; /* 自动换行，主要处理英文单词，可以使用normal、break-word、keep-all（只在半角空格或连字符处换行，连字符即横杠-） */

word-break: normal; /* 自动换行，主要处理英文单词，可以使用normal、break-all（允许在单词内换行）、keep-all（只在半角空格或连字符处换行） */
white-space: normal; /* 可以使用normal、nowrap（强制在一行中显示所有文本，除非遇到br） */
text-overflow: clip; /* 文本内容超出div大小时，是否使用省略标记...显示，可以使用clip（不显示...，显示完整内容，要让超出的内容隐藏，要配合overflow: hidden使用）、ellipsis（超出部分用...替代） */

text-align: center; /* 文字在水平方向的对齐方式，可以使用left、right、center；想要垂直居中，设置line-height等于div的高度 */
text-indent: 2em; /* 首行缩进两个字的距离 */
text-shadow: 1px 2px 3px rgba(0,0,0,0,4); /* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色 */
text-decoration: none; /* none可以去掉超链接的下划线，可选值有none、underline、overline、line-through */

@font-face{
    font-family: myfont;    /* 创建名字为myfont的字体 */
    font-weight: 400;
    font-style: normal;
    src: url(./myfont.eot) format('embedded-opentype'), url(./myfont.woff) format('woff'), url(./myfont.ttf) format('truetype'), url(./myfont.svg) format('svg');
}

/* 背景颜色 */
color: rgba(0,0,0,0.5); /* 普通颜色可以用rgb，透明颜色用rgba */
background-color: pink;

/* 线性渐变 */
background: linear-gradient(red, blue);
background: -webkit-linear-gradient(red, blue);     /* 带私有前缀，兼容不同的浏览器 */
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);

background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);  /* 可以有多个颜色 */

background: linear-gradient(to right, pink, hotpink, deeppink);     /* 指定方向（不指定时默认从上到下） */
background: linear-gradient(right, pink, hotpink, deeppink);        /* to可以省略 */
background: linear-gradient(bottom right, pink, hotpink, deeppink); /* 对角方向 */
background: linear-gradient(180deg, pink, hotpink, deeppink);       /* 指定角度 */

background: repeating-linear-gradient(pink, hotpink 10%, deeppink 20%); /* 重复线性渐变，同样也有兼容性的写法（略） */

/* 径向渐变（从中心到四周） */
background: radial-gradient(pink, hotpink, deeppink); /* 同样也有兼容性的写法（略） */
background: radial-gradient(pink 5%, hotpink 15%, deeppink 60%);    /* 颜色结点不均匀分布 */
background: radial-gradient(circle, pink, hotpink, deeppink);       /* 设置形状 */

background: repeating-radial-gradient(pink, hotpink 15%, deeppink 20%); /* 重复径向渐变 */


/* 背景图片 */
background-image: url(images/1.jpg);
background-repeat: no-repeat; /* 背景是否平铺，可选值有repeat、no-repeat、repeat-x、repeat-y、round(缩放)、spcae */
background-position: left top; /* 水平、垂直对齐方式，可以使用left top right bottom center或者直接写像素值 */
background-attachment: scroll; /* 背景固定(fixed)还是滚动(scroll) */

/* background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置x 背景位置y / 图片缩放目标宽度 图片缩放目标高度; */
background: transparent url('pic.png') no-repeat fixed 50px 50px / 200px 200px;
/* 语义明确的可以跳过 */
background: url('pic.png') no-repeat 0px -50px / 200px 200px;

/* 图片默认从border开始显示，要让图片从padding或content中显示，可以设置background-origin */
background-origin: content-box; /* 可选值有border-box、padding-box、content-box */

background-size: 100px 200px; /* 或者只写宽度，不写高度（如 background-size: 100px;），可以等比例缩放；又或者直接写百分比 */
background-size: cover; /* cover:宽高按长的缩放，溢出部分隐藏 contain:宽高按短的缩放，保证图片完整显示，空白部分显示background-color */

width: 80%;     /* 宽、高，可以写数值值或百分比 */
height: 100px;

/* 一键设置边框属性：border: border-width border-style border-color */
border: 2px solid gray; /* 边框样式有：none、solid、dashed、dotted、double */
border-radius: 5px; /* 圆角边框，如果设置为宽高的一半或者写百分比50%，则会变成圆，也可以分别指定四个角或两个对角的值 */

/* 盒子阴影效果：box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内/外阴影(outset、inset，默认outset); 前两个属性必须写，后面可以省略 */
box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4) inset;

/*  边框图片
    border-image: source slice width outset repeat;
    border-image: 图片地址 内偏移 边框宽度 外偏移 是否重复（repeat、stretch(拉伸)、round(铺满)） */
border-image: url(border.png) 30 30 20 round;
-webkit-border-image: url(border.png) 30 30 20 round;   /* 为保证兼容性，最好加上私有前缀 */

/* 显示模式，有block、inline、inline-block三种可选值 */
display: block;

* {
    margin: 0px; /* 外边距，margin: 0 auto可以实现div水平居中，但必须指定width才能生效 */

    padding: 0px; /* 内边距 */
    /* padding: 10px 20px 30px 40px; 指定四个时方向为顺时针，即上 右 下 左 */
}

/* 可选值有content-box、border-box */
box-sizing: content-box;

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style type="text/css">
        /* 通配符选择器 */
        * {}

        /* 标签选择器 */
        div {}

        /* 类选择器 */
        .text1 {}

        /* id选择器 */
        #text3 {}

        /* 链接伪类选择器必须按照该顺序设置，否则不会生效（也可以只使用单个） */
        .a1:link {}
        .a1:visited {}
        .a1:hover {}
        .a1:active {}

        /* 结构伪类选择器（nth-child：获取父元素，然后找指定位置的元素，如果该位置的元素和所需类型不一致，则当前选项无效。nth-of-type：获取父元素，然后获取所有指定类型的子元素，选中指定位置） */
        .ul1 li:first-child {}
        .ul1 li:last-child {}
        .ul1 li:nth-child(2n-1) { color: pink; } /* 可以使用数字、odd、even、字母n，或字母n前加数字表示选中几的倍数 */
        .ul1 li:nth-last-child(4) {} /* 从后面数起 */

        .ul1 li:nth-of-type(2n) {}


        /* 目标伪类选择器，点击超链接后锚点的样式 */
        :target { color: green; }

        /* 复合选择器 */
        /* 并集选择器，多个选择器之间用逗号分隔，重复属性只需写一次 */
        div, span, p { font-size: 14px; }

        /* 交集选择器（标签选择器+类选择器，中间没有空格） */
        div.div1 { font-size: 23px;}

        /* 后代选择器，用空格分隔，把所有后代中对应的元素选中 */
        .ul2 li { font-size: 14px; }

        /* 子元素选择器，只选择亲儿子 */
        .ul2 > li {
            list-style: none; /* 取消小点 */
        }
        
        /* 相邻兄弟选择器，选择紧跟着当前元素的指定元素（最多选择一个） */
        .li1 + li {  }
        /* 如果是 li + li 则可以选择除第一个以外的所有li */

        /* 通用兄弟选择器，选择在当前元素后面的所有指定元素（不包括当前元素），不要求严格相邻 */
        .li1 ~ li {  }


        /* 属性选择器，选中带有某个属性的元素 */
        a[title] { color: red; }
        a[class^=link] { font-style: italic; } /* ^=表示选中class以link开头的元素，$=表示以xxx结尾，*=表示含有xxx字符 */

        /* 伪元素选择器（"::"也可以写成":"(可以兼容旧浏览器)，但规范建议伪类使用":"，伪元素使用"::"） */
        p::first-letter { color: red;font-size:23px; }
        p::first-line { color: green; }
        p::selection { color: pink; } /* 鼠标选中时的颜色 */
        /* 伪元素选择器本质上是在指定的标签前/后插入了一个inline元素，该元素可以认为是子元素，里面如果写width:100%是当前元素的宽度，position:absolute;top:0;left:0;是在当前元素的左上角 */
        .text4::before {
            content: "前缀 ";     /* 必须添加content才能生效，如果不需要，可以设置成空字符串"" */
        }
        .text4::after {
            content: " 后缀";
        }

        /* 伪类和伪元素可以混合使用 */
        /* 实现鼠标经过显示border */
        .div2 {
            width: 100px;
            height: 100px;
            position: relative;
            background-color: skyblue;
        }
        .div3:hover::before{
            content: "";
            width: 100%; /* content为空时，100%指标签本身的宽/高 */
            height: 100%;
            border: 5px solid red;
            display: block; /* 伪元素是行内元素，需要更改显示模式 */
            position: absolute; /* 让伪元素不占位置，此时父标签还要设置相对布局 */
            top: -5px;
            left: -5px;
        }
    </style>
</head>
<body>

    <div>
        <!-- class可以有多个，而id只能有一个 -->
        <div class="text1 text2">文本1</div>
        <div id="text3">文本2</div>
    </div>

    <ul class="ul1">
        <li>数据1</li>
        <li>数据2</li>
        <li>数据3</li>
        <div>数据4</div>
        <div>数据5</div>
        <li>数据6</li>
        <li>数据7</li>
    </ul>

    <a href="#title1" class="a1" >超链接</a>
    <h1 id="title1">标题</h1>

    <div class="div1">数据1</div>

    <ul class="ul2">
        <li>一级菜单
            <ul>
                <li class="li1">二级菜单1</li>
                <li>二级菜单2</li>
                <li>二级菜单3</li>
            </ul>
        </li>
    </ul>

    <a href="#" title="我是超链接" class="link1">超链接1</a>
    <a href="#" class="link2">超链接2</a>
    <a href="#" class="other-link">超链接3</a>

    <p style="display: inline-block; width: 150px" >
        我是一段文本我是一段文本我是一段文本我是一段文本
    </p>

    <div class="text4">我是一段文本</div>

    <div class="div2">
        <div class="div3">我是一段文本我是一段文本我是一段文本</div>
    </div>

</body>
</html>

/* !important用法 */
color: orange!important;

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            float: left; /* 可选值有left、right、none，右浮动时元素从右往左排列，会和定义的顺序相反*/
            background-color: purple;
            border: 2px solid gray;
        }
        span:nth-child(1) {
            display: block;
            border: 2px solid red;
            padding-left: 50px;
            background-color: lightblue;
        }
        span:nth-child(2) {
            display: block;
            border: 2px solid red;
            height: 500px;
            width: 500px;
            background-color: blue;
        }
        div:nth-child(1) {
            background-color: pink;
            display: inline-block;
            float: none;
        }
        div:nth-child(2) {
            background-color: hotpink;
        }
        div:nth-child(3) {
            background-color: deeppink;
        }
        div:nth-child(4) {
            background-color: skyblue;
            height: 350px;
            float: none; /* 不浮动的元素按照标准的排列方式继续排列，排列在上一个不浮动的元素后面 */
        }

        /* 文字环绕图片 */
        #containerdiv {
            float: none;
            margin: 100px;
            width: 400px;
            height: 400px;
            background-color: transparent;
            border: 2px solid gray;
            word-wrap: break-word;  /* 英文需要加break-word，否则一行装不下一个连续英文（英文单词以空格分隔，没有空格会认为是一个单词）时，会换行，无法实现包裹 */
        }
        #containerdiv img {
            width:200px;
            height:200px;
            background-color: pink;
            float: left;    /* 文字环绕图片只需让图片浮动即可，就是利用了文本不会被挡住的特性 */
        }
        #containerdiv p {
            /* overflow: hidden; 触发BFC后，文字和图片（或者其他两个任意类型的元素）会分开两列显示，无法达到文字环绕图片的效果，但一般会用这个特性做两列的布局 */
        }
    </style>
</head>
<body>
    <span>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </span>

    <span></span>

    <!-- 文字环绕图片 -->
    <div id="containerdiv">
        <img style="" />
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本</p>
    </div>
</body>
</html>

<!-- 方法三：使用after伪元素选择器，其实就是自动在后面添加额外标签 -->
<style>
    /* 用一个冒号是因为要兼容旧版浏览器 */
    .clearfix:after {
        content: "."; /* content随便写，但不能为空，否则旧版浏览器会有空隙 */
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix { *zoom: 1; } /* 兼容IE6、7 */

    /* 方法四：使用before和after两个伪元素
    .clearfix:before, .clearfix:after {
        display: table; 这里会触发BFC
        content: "";
    }
    .clearfix:after { clear: both; }
    .clearfix { *zoom: 1; }
    */
</style>

<!-- 方法二：父元素添加overflow清除浮动影响（触发BFC），用hidden、scroll、auto都可以 -->
<span style="overflow: hidden;" class="clearfix">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</span>

<!-- 方法一：在使用浮动（包括元素本身不浮动，但其内部元素使用了浮动）的元素后面添加额外标签
<div style="clear: both;"></div> -->

<span></span>

/* 边偏移 */
left: 50%;
top: 0px;
/* right: 0px;
bottom: 0px; */

/* 定位方式，可选值有static（默认值）、relative、absolute、fixed */
position: absolute;

z-index: 1;

display: none; /* 可选值有block、inline-block、inline、flex、list-item、table、inherit、none等等，隐藏后元素不保留位置 */

visibility: hidden; /* 可选值有visible、hidden，隐藏后元素保留原有位置 */


overflow: auto; /* 可选值有visible、auto、hidden、scroll，指内容超出指定大小时如何显示 */
overflow-y: scroll; /* 可以指定方向，scroll无论是否超出，都会一直显示滚动条，所以最好用auto */


/* 要使滚动条隐藏，但仍然可以滚动，有如下方法 */
/* 方法一：当前div使用-webkit-scrollbar（只适用于Chrome和Safari） */
.container::-webkit-scrollbar { display: none; }

/* 方法二：在外面套一层div，使用overflow: hidden（移动端适配不好） */
.container-wrapper { overflow: hidden; }

/* 方法三：使用padding，让滚动条在显示区域外 */
.container {
    overflow-x: scroll;
    overflow-y: hidden;
    /* 解决ios上滑动不流畅 */
    -webkit-overflow-scrolling: touch;
    padding-right: 25px;
}

cursor: pointer; /* 鼠标移动到元素上方的鼠标样式，可选值有：default、pointer、move、text */

outline: 0; /* outline: outline-color outline-style outline-width; 设置为0可以清除轮廓线（比如input的type=text时会有轮廓线） */

resize: none; /* textarea设置后可以禁止拖拽 */

vertical-align: middle; /* 垂直对齐，对块级元素无效；一般用于控制图片和文字的对齐方式（加在img上），由于字体高度不同，可选值有：baseline（默认）、top、middle、bottom */


/* div里面套img等行内块元素时，img的底部默认对齐div的baseline，导致在底部会有小缝隙（在低版本IE下特别明显），解决方法如下 */
/* 方法一：给img添加vertical-align，值可以是任何除baseline以外的属性 */
vertical-align: middle;

/* 方法二：给img添加display: block，只要不是inline-block，就不会和baseline对齐了 */
display: block

/* transition: 要过渡的属性（可以使用all过渡所有属性） 花费时间 速度曲线（默认是ease） 何时开始（默认是0s）; 前两个属性必须写，后面可以省略；时间的单位必须写（可以是s或ms）
   transition: transition-property transition-duration transition-timing-function transition-delay; */
transition: width 0.5s ease-in 0; /* 速度曲线有：linear、ease（逐渐减速）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速再减速） */

transition: all 0.2s steps(4);  /* 分4步完成，中间没有动画效果 */


/* 变形效果要配合过渡效果使用才能实现动画效果
   变形效果必须写单位，即使是0也要写
   如果有多种变形效果，写到一个transform里，用空格隔开 */

/* 2D效果 */
transform: translate(50px, 50px); /* 平移（水平、垂直） */
transform: translate(50px); /* 只写一个参数，则是水平方向平移 */
transform: translateX(50px); /* 2D效果有translateX、translateY */
transform: translate(50%, 0px); /* 相对于自己的宽度平移50% */
/* 水平、垂直居中的写法
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
*/

transform: scale(0, 0.2); /* 缩放（水平、垂直），也有scaleX、scaleY */
transform: scale(0.2); /* 只写一个参数则水平、垂直都缩放 */

transform: rotate(90deg); /* 旋转，正值为顺时针，负值为逆时针，单位为deg，即度 */
transform-origin: left center; /* 旋转默认是围绕中心点的，transform-origin可以更改旋转点，可以设置像素值 */

transform: skew(45deg, 0deg); /* 倾斜（水平、垂直），单位为deg，度 */


/* 3D效果 */
perspective: 1000px; /* 视距，模拟眼睛到屏幕的距离，一般在子元素使用3D效果时，给父元素添加perspective属性 */
perspective-origin: center center; /* 中心点，可以设四个方向或百分比或像素值 */
-webkit-perspective-origin: center center;

transform-style: preserve-3d; /* 是否保留变换后的状态，默认是flat(恢复原状)、preserve-3d(保留3d状态) */

transform: rotateX(180deg); /* 3D旋转效果，有rotateX、rotateY、rotateZ */
transform: rotate3d(1, 1.5, 0, -20deg); /* x、y、z三个方向的矢量，及度数（每个方向的度数 = 矢量 * 度数） */

transform: translateZ(50px);
transform: translate3d(10px, 10px, 20px); /* translate3d(x,y,z)，x、y可以是百分比，z只能是像素值 */

backface-visibility: hidden; /* 当元素正面不可见时（翻转超过90°后背面朝上时）是否显示 */


/* 动画效果
    animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction; 前两个属性必须写，后面可以省略
    animation: 动画名称 一次动画的持续时间 速度曲线（默认是ease） 开始时间 播放次数（无限循环可用infinite） 是否反方向（normal、reverse、alternate(偶数次反方向)、alternate-reverse、inherit）;

    animation-fill-mode: forwards; 动画结束时停留，不恢复原状（默认是none）
    animation-play-state: running; 规定动画是否暂停，running、paused，一般用于鼠标悬浮时暂停动画

    动画需配合@keyframes使用
    @keyframes animation-name {
        from {  }
        to {  }
    }
    或者使用百分比（一次动画时间的百分比）
    @keyframes animation-name {
        0% {  }
        25% {  }
        50% {  }
        100% {  }
    }
*/
div { animation: myanim 5s; }
@keyframes myanim {
    0% { background: red; }
    25% { background: yellow; }
    50% { background: blue; }
    100% { background: green; }
}

<meta charset="UTF-8">
<style>
    .div1 {
        width: 200px;
        height: 100px;
        background-color: pink;
        transition: width 0.5s ease-in 0s, height 0.5s ease-in 0.25s;
    }
    .div1:hover {
        width: 400px;
        height: 200px;
    }

    .div2 {
        width: 200px;
        height: 100px;
        margin-top: 40px;
        background-color: purple;
        transition: all 0.5s;
    }
    .div2:hover {
        transform: rotate(90deg);
    }

    /* 水平方向来回滑动的滑块 */
    .slider1 {
        margin-top: 40px;
        height: 100px;
        position: relative;
        perspective: 1000px;
    }
    .slider1 div {
        width: 200px;
        height: 100px;
        position: absolute;
    }
    .slider1 div:first-child {
        background-color: hotpink;
        animation: sliding1 5s infinite;
        backface-visibility: hidden;
    }
    .slider1 div:last-child {
        background-color: skyblue;
        z-index: -1;
        animation: sliding1 5s infinite;
    }
    @keyframes sliding1 {
        0% {
            transform: translate3d(0, 0, 0);
        }
        40% {
            transform: translate3d(400px, 0, 0);
        }
        50% {
            transform: translate3d(400px, 0, 0) rotateY(180deg); /* 多种变形用空格隔开 */
        }
        90% {
            transform: translate3d(0, 0, 0) rotateY(180deg);
        }
        100% {
            transform: translate3d(0, 0, 0);
        }
    }

    /* 无限滚动广告条，其实就是把广告复制两份，然后滚动 */
    .adv1 {
        width: 300px; /* width设置为一份广告的宽度 */
        height: 100px;
        margin: 40px auto;
        overflow: hidden;
        border: 2px solid red;
    }
    .adv1 ul {
        width: 200%; /* .father2设置了overflow: hidden，需要设置width: 200%，否则float会换行显示 */
        margin: 0;
        padding: 0;
        animation: rolling1 5s linear infinite;
    }
    .adv1 ul:hover { animation-play-state: paused; }
    .adv1 ul li {
        width: 100px;
        height: 100px;
        display: inline-block;
        float: left;
    }
    @keyframes rolling1 {
        from { transform: translateX(0); }
        to { transform: translateX(-300px); }
    }
</style>

<div class="div1"></div>

<div class="div2"></div>

<!-- 水平方向来回滑动的滑块 -->
<div class="slider1">
    <div></div>
    <div></div>
</div>

<!-- 无限滚动广告条，其实就是把广告复制两份，然后滚动 -->
<div class="adv1">
    <ul>
        <li style="background-color: pink;">广告1</li>
        <li style="background-color: hotpink;">广告2</li>
        <li style="background-color: deeppink;">广告3</li>

        
        <li style="background-color: pink;">广告1（复制）</li>
        <li style="background-color: hotpink;">广告2（复制）</li>
        <li style="background-color: deeppink;">广告3（复制）</li>
    </ul>
</div>

<style>
    .div1 {
        width: 80%;
        height: 400px;
        border: 1px solid purple;
        margin: 100px auto;

        display: flex; /* 父元素显示模式设为flex */

        justify-content: flex-start; /* 水平对齐方式。当只设置父元素为flex但子元素全部都没有指定份数而是写width时，相当于float（但元素排列顺序不变），这时div可能会没有占满，这时可以指定对齐方向，可选值有flex-start、flex-end、center、space-between、space-around */
        align-items: stretch; /* 侧轴对齐方式（即垂直方向对齐方式），stretch(默认值，子元素不指定高度时拉伸元素以适应容器，子元素指定高度时上对齐)、center、flex-start、flex-end */
        align-content: flex-start; /* aligin-items只适用于一行的情况，如果有多行，需使用aligin-content，它的可选值和aligin-items一样。只有设置了flex-direction: row和flex-wrap: wrap才会生效 */

        flex-direction: row; /* 主轴方向，可以指定为row、column、row-reverse、column-reverse */
        flex-wrap: wrap;     /* 是否自动换行，nowrap（默认值，不换行，不够则收缩显示）、wrap、wrap-reverse */
        flex-flow: row wrap; /* 一键设置flex-flow: flex-direction flex-wrap; */

        flex-grow: 1;       /* 如果所有子元素都设置了width，那么设置了flex-grow的子元素会按份数瓜分父元素剩余空间 */
        flex-basis: 100px;  /* 默认为auto，作用和width一样，但优先级要比width高，先跟父容器预约一个宽度，然后剩下的归入到剩余空间 */
        flex-shink: 1;      /* 当所有子元素的width之和大于父元素的width，默认会收缩显示，而flex-shink可以设置各子元素之间收缩的比例 */
    }
    .div1 div {
        width:200px;
        height: 200px;

        /* flex: 1; 子元素占几份就写几，如果有子元素写了width，那么剩下的宽度再按份数分 */
        min-width: 80px; /* 最小宽度，小于最小宽度不再缩放；同理有max-width */

        margin-right: 5px;
    }
    .div1 div:last-child {
        order: -1; /* flex布局可以通过order调整元素顺序，默认值是0，数字越小越靠前 */
    }
</style>

<div class="div1">
    <div style="background-color: pink;"></div>
    <div style="background-color: hotpink;"></div>
    <div style="background-color: deeppink;"></div>
    <div style="background-color: skyblue;"></div>
</div>

:root {
    --mycolor: black; /* 全局作用域 */
}
.div1 {
    --mycolor: blue; /* 局部作用域，只能在".div1"选择器及其子元素内使用 */
}
.div2 {
    color: var(--mycolor); /* 使用 */
}
.div2 {
    color: var(--mycolor, black); /* 如果属性不存在，则使用第二个参数（即设置默认值） */
}

<style>
    :root { --color: blue; }
    div { --color: green; }
    #div1 { --color: red; }
    * { color: var(--color); }
</style>

<p>blue</p> <!-- 没有指定，使用全局的 -->
<div>green</div> <!-- 使用自定义的 -->
<div id='div1'>
    green
    <p>green</p> <!-- #div1及其子元素都使用#div1的样式 -->
</div>

:root {
    --size: 20
}
div {
    font-size: calc(var(--size) * 1px); /* 这里直接使用"var(--size)px"的话会变成"20 px"，20和px之间会有一个空格，导致解析失败 */
}

div::after {
    content: '--mycolor: 'var(--mycolor);
}

--mycolor: initial; /* 重置成未设置的状态 */

--mycolor: inherit; /* 保持不变 */

//读
const rootStyles = getComputedStyle(document.documentElement);
const varValue = rootStyles.getPropertyValue('--mycolor').trim();
//写
document.documentElement.style.setProperty('--mycolor', 'black');

//--------------基本类型--------------
var a = "123.456";  //String，可以用单引号或双引号
var b = 123.456;    //Number
var c = true;       //Boolean，其实内部用0和1存储


//显示数据方式
var ret = prompt("请输入xxx");
alert(ret);
console.log(ret);

//打印及查看类型
//==比较值（类型不同会先转换再比较，比如null==undefined为true，值与对象类型比较会先转成prototype类型再比较，对象或函数之间比较还是比较地址），===比较地址（NaN之间是不相等的）
console.log(a == b);    //true
console.log(typeof a);
/* 补充：逻辑或 || 如果左边的值为假，则表达式的值为右边的值，比如
div.onClick = function(e){
    e = e || window.event;  //兼任性写法，由于旧版本的浏览器不会自动添加e参数，所以e可能会是undefined
}
*/

//注意：以下代码可以正常运行但作用可能和想象的不一样
var i1 = 1  //局部
i2=2,       //全局，因为前面没有逗号，按照换行作语句分隔符后，i2没有用var修饰，是全局变量
i3=3;       //全局

//--------------转Number--------------
a = parseInt("123.56");     //向下取整，得到123
a = parseFloat("123.56");   //保留小数
a = Number("123.56");       //保留小数
a = Number(true);           //1

//区别：
a = parseFloat("   123.56abc"); //123.56
a = Number("   123.56abc");     //NaN

//隐式转换
a = +"123.456";         //作数学运算会自动转换成Number，比如添加正号，乘以1等
console.log(typeof a);  //number
a = "123.456abc" * 1;   //NaN


//--------------转String--------------
b = String(123.456);
b = 123.456.toString();
b = String(true);       //"true"

//--------------转Boolean--------------
c = Boolean("false");   //得到true，除了0、""、NaN、undefined、false以外，任何东西转Boolean都是true
c = Boolean(NaN);

var a = { num: 123 }

console.log(a);

setTimeout(function() {
    a.num = 456;
    console.log(a);
}, 2000);

//使用new创建的对象，对象类型是它的构造函数名，而使用{}创建的对象，对象的类型是Object
var a = new Object();
a.id = 1;           //如果属性存在，则是修改，如果不存在，则创建属性并赋值（js动态特性）
a.name = "小明";

console.log(a.name);
console.log(a[name]);   //属性可以用点的方式获取，也可以用中括号获取
console.log(typeof a);

function Person() { this.id = 1; }      //构造函数和普通函数一样
Person.Child = function Child() {  };
var p = new Person();

//typeof只能识别出undefined、object、boolean、number、string、function这6种数据类型，而instanceof可以识别具体对象类型
console.log(p instanceof Object);   //true
console.log(p instanceof Person);   //true

//也可以直接创建对象
var a = {'id': 2, 'name': '小明'};
//或者
var a = {};
a.id = 2;
a.name = '小明';

//或者通过 Object.create(对象) 创建和传入对象有相同方法、属性的新对象
//这种方式会把原对象的属性、方法放到原型（__proto__）中，且__proto__中没有constructor属性
var p = { 'id': 1, 'name': '小明', sayHello: function() { console.log('Hello!!')} }
var p2 = Object.create(p);

var b = new Array();        //相当于var b = []，也是创建数组实例
b[0] = "a";
b[1] = "b";
b[2] = "c";

console.log(b);         //["a", "b", "c"]
delete b[1];
console.log(b.length);  //delete不会改变数组长度
console.log(b);         //["a", 2: "c"]

var str = "Hello World!!"; 
var n = str.search(/world/i);   //6，i是修饰符，表示大小写不敏感，修饰符还有g（查找所有匹配而非在找到第一个匹配后停止）、m（执行多行匹配），修饰符也可以不写
console.log(n);

var patt = /world/i;
patt.test("Hello World!!");

/world/i.exec("Hello World!!");

//或者使用RegExp
new RegExp('world');        // /world/
new RegExp('world', 'i');   // /world/i


/*  ES9（ES2018）带来的正则的增强：
    ?=  表示该字符串后面还跟着另一个字符串
    ?!  表示该字符串后面没有跟着另一个字符串

    ?<= 表示该字符串前面还跟着另一个字符串
    ?<! 表示该字符串前面没有跟着另一个字符串 */
/Roger(?= Waters)/.test('Roger is my dog and Roger Waters is a famous musician');   //true
/Roger(?! Waters)/.test('Roger is my dog');     //true
/(?<=Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician');  //true
/(?<!Roger) Waters/.test('Pink Waters is my dog') //true

function sum(a, b){
    return a+b;
}
console.log(sum(2, 3));

//或者使用Function，可以把字符串当作函数体
new Function('console.log("hello")');               //无参
var sum = new Function('a', 'b', 'return a+b;');     //有参
//如果函数体很长，可以使用+连接字符串，或者使用`xxx`字符串模板
var sum = new Function('a', 'b',
`console.log(a);
console.log(b);` );

//类似的还有eval，可以把字符串当作代码执行
eval('var a = 10;');
//eval('{"id": 1, "name": "小明"}');        //语法错误，eval会把最外层的大括号看作是代码块，而不是Object
eval('( {"id": 1, "name": "小明"} )');      //这时需使用小括号转成表达式（小括号内定义的变量在外部无法直接访问，只能通过返回的形式赋值给变量，然后间接访问）


//函数只定义不被调用就不会执行，但自调用函数可以立即执行自己
//自调用函数：(函数)(参数) ，立即调用自身
var arr = ( new Function( 'return ["a", "b", "c"];' ) )();      //无参
var arr = ( new Function( 'a', 'return [a, "b", "c"];' ) )(1);  //有参


//JavaScript的函数在使用时可以少给或多给参数，不一定要严格和定义的参数个数一致
sum(2);     //NaN，因为2+undefined等于NaN

//多传的参数也可以通过arguments获取，arguments和this类似，时函数的隐含属性
 function sum( /* ... */ ){ //一般如果不写参数会加一个注释告诉使用的人这里其实是有参数的，但参数是通过arguments获取
    var ret = 0;
    for(var k in arguments){
        ret += arguments[k];
    }
    return ret;
}
sum(1,2,3,4,5)；    //15

function Person(name){
    console.log(this);
    this.name = name;
    this.getName = function () {
        console.log(this);
        return this.name;
    };
    this.setName = function (name) {
        console.log(this);
        this.name = name;
    };
}

Person("小明");//打印的this是window


var p = new Person("小明");//打印的this是p

p.getName();//打印的this是p


var obj = {};
p.setName.call(obj, "小明");//打印的this是obj（把setName方法当作obj的临时方法调用）


var func1 = p.setName;
func1();//打印的this是window


function func2() {
    function func3() {
        console.log(this);
    }
    func3();
}
func2();//打印的this是window

<!-- 利用了type类型不对时不会执行的特性（也可以放到div中，但是写的时候没有高亮） -->
<script type="mycode1">
    // 代码
    function sayHello() {
        console.log('hello');
    }
    sayHello();
</script>

<script>
    var scripts = document.querySelector("script[type^=mycode1]").innerText;
    (new Function(scripts))();
</script>

//箭头函数
var f1 = (a, b) => { return a+b; }
var f1 = a => a+10;
var f1 = (a, b) => a+b;
var f1 = () => {}; //空函数
var f1 = () => ({name: "小明", age: 14});

//默认参数
var num = 1;
function getValue(){ return ++num; }
function f2(a, b=getValue(), c=b+10){ return a+b;}
f2(1, 2);    //3
f2(1);       //3
f2(1,undefined); //4
f2(1);       //5


//函数参数使用拓展运算符，用于把剩下的参数装进一个变量中
function f3(a, ...arr) {
    let ret = a;
    for(let v of arr) { ret+=v; }
    return ret;
}
f3(1, 2, 3);
//传参也可以使用拓展运算符，用于把数组展开成函数的每个参数
var arr1 = [1, 2, 3];
f3(...arr1);
//拓展运算符还可以用来实现深拷贝
var arr2 = [...arr1];
arr2 = [...arr1, 4, 5, 6];
//把字符串展开成一个个字符
arr2 = [..."love"]; //['l', 'o', 'v', 'e']


//字符串解构
var [s1, s2, s3, s4] = "love";
//解构可以嵌套（包括数组和对象）
var arr3 = [[1, 2, [3, 4]], 5, 6];
var [[a, b, [c, d]], e, f] = arr3;
//循环和函数参数都可以使用解构
var arr4 = [[11, 12], [21, 22], [31, 32]];
for (let [a, b] of arr4) {
    console.log(a, b);
}
function f4({id, name, age}) {
    console.log(id, name, age);
}
f4({id: 1, age: 14, name: "小明"});
//返回值使用解构
function f5() {
    return {id: 1, name: "小明", age: 14};
}
var {name, id, age} = f5();


//原来的回调代码
setTimeout(function() {
    console.log('I promised to run after 1s');
    setTimeout(function() {
        console.log('I promised to run after 2s');
    }, 1000);
}, 1000)
//使用Promises后
const wait = () => new Promise((resolve, reject) => {
    setTimeout(resolve, 1000)
});
wait()
.then(() => {
    console.log('I promised to run after 1s');
    return wait();
})
.then(() => console.log('I promised to run after 2s'));


//使用yield关键字来实现暂停
function *calculator(input) {
    var doubleThat = 2 * (yield (input / 2));
    var another = yield (doubleThat);
    return (input * doubleThat * another);
}
var calc = calculator(10);

calc.next();        // next函数返回 {value: 5, done: false}
calc.next(7);       // 7被doubleThat接收，next函数返回 {value: 14, done: false}
calc.next(100);     // next函数返回 {value: 14000, done: true}

console.log(a);     // undefined
var a = 'hello';
console.log(a);     // hello

var a;

console.log(a);     // undefined
a = 'hello';
console.log(a);     // hello

var num = 123;
function a() {
    console.log(num);   //undefined
    var num = 456;      //如果没有var，则是修改全局变量，就不存在提升问题，输出就成了123、456
    console.log(num);   //456
}

var num = 123;
function a() {
    var num;

    console.log(num);   //undefined
    num = 456;
    console.log(num);   //456
}

console.log(a);     //function a() { console('Hello world!!'); }
console.log(a());   //undefined

var a = 'hello';
function a() { console.log('Hello world!!'); }

console.log(a);         //hello
//console.log(a());     //a is not a function

var a;
a = function () { console.log('Hello world!!'); }

console.log(a);     //function a() { console('Hello world!!'); }
a();                //输出Hello world!!

a = 'hello';

console.log(a);         //hello
//console.log(a());     //a is not a function

var a = 123;
function a() { console.log(a); }

a();    //a is not a function

var a;
a = function () { console.log(a); }
a = 123;

a();    //a is not a function

//f1();     //f1 is not a function，因为函数表达式不会被提升（而如果提升了的话，无论怎么调都是false，因为会覆盖）

if(true) {
    function f1(){ console.log('true'); }
} else {
    function f1(){ console.log('false'); }
}

f1();       //true，但是在老版本浏览器中可能会是false（把前面的当作函数声明了）

if(false) {
    var num = 123;
}

console.log(num);   //undefined

var num = 123;

function f2() {
    var num = 456;      //用var表示覆盖掉了上一级作用域的num属性，函数内就无法访问上一级作用域的num
    function f1() {
        console.log(num);
    }
    f1();
}

f2();       //456

var num = 123;

function f1() {
    console.log(num);
}
function f2() {
    var num = 456;
    f1();
}

f2();       //123

function f1() {
    var num = 1;
    return function() {
        num++;
        console.log(num);
    }
}

var func = f1();
func();     //2
func();     //3

function Person() {
    var __name__;       //这里name相当于私有成员，命名规范建议私有成员使用双下划线命名
    return {
        getName: function() { return __name__; },
        setName: function(name) { __name__ = name; }  //注意这里不能使用this，因为this指的是当前json对象，而不是Person，所以没有name属性
    };
}

var p = new Person();   //这里不写new也可以，返回对象时加new和不加new效果一样
p.setName("小明");
p.getName();

var p = (function() {
    var __name__;
    return {
        getName: function() { return __name__; },
        setName: function(name) { __name__ = name; }
    };
})();

p = null;

//--------------封装特性--------------
function DivTag() {     //构造函数的定义和普通函数一样，但根据命名规范，首字母应该大写
    this.DOM = document.createElement('div');
    this.appendTo = function (node) {
        node.appendChild(this.DOM);
        return this;
    };

    this.css = function (attrs) {
        for(var attrKey in attrs) {
            this.DOM.style[attrKey] = attrs[attrKey];
        }
        return this;
    }
}
// 使用（需使用new，否则就是获取函数返回值）
new DivTag().appendTo(document.body)
        .css({
            'width': '200px',
            'height': '200px',
            'backgroundColor': 'pink'
        });


//--------------值传递和引用传递问题--------------
var a = { 'id': 1, 'name': '小明'};
a.copy = function(obj) {
    for(var k in this){
        obj[k] = this[k];
    }
};
var b = 1;
a.copy(b);  //由于b是基本类型，使用的是值传递，所以b仍然是1，没有变

class SimpleDate {
    //构造器
    constructor(year, month, day) {
        this._year = year;
        this._month = month;
        let _day = day;     //可以用let实现属性私有化

        //用let实现的私有属性只能在当前代码块中访问，所以需要在当前代码块中提供访问该属性的方法
        this.addDay = function(n) {
            this._day += n;
        }
    }
 
    //方法
    toString(){
        return this._year + "-" + this._month + "-" + this._day;
    }

    //静态方法
    static setDefaultDate(year, month, day) {
        SimpleDate._defaultDate = new SimpleDate(year, month, day);
    }

    //get、set方法，用get、set关键字修饰，当调用obj.year时会调用get，调用obj.year=1时会调用set
    get year() {
        console.log('get year');
        return this._year;
    }
    set year(year) {
        console.log('set year=' + year);
        this._year = year;
    }
}

//子类
class SubClass extends SimpleDate {
    constructor(name, year, month, day) {
        super(year, month, day);
        this._name = name;
    }
}

//这样写的话每个对象的sayHello函数不是同一个，每次创建对象时会重复创建函数
function Foo() {
    this.sayHello = function() { console.log('Hello'); }
}
new Foo().sayHello == new Foo().sayHello;   //false


//一般会把函数定义到外面，或者放到prototype中
function Foo() {  }
Foo.prototype.sayHello = function() { console.log('Hello'); }
new Foo().sayHello == new Foo().sayHello;   //true
//也可以用替换的方式添加prototype属性（但是会把constructor属性替换掉，导致没有constructor属性，需要我们手动添加回去）
Foo.prototype = {
    constructor: Foo,
    'id': 1,
    'name': '小明',
    sayHello: function() {  },
    sayGoodBye: function() {  }
}


//如果找不到对象的属性，就会在原型中找
function Foo() {  }
Foo.prototype.id = 1;
var f = new Foo();
console.log(f.id);

//访问属性时找不到才到prototype中找，而赋值时，如果没有该属性，则会创建属性并赋值（js动态特性），与prototype无关
function Foo() {  }
Foo.prototype.id = 1;
var f1 = new Foo();
var f2 = new Foo();
f1.id = 2;
console.log(f1.id);     //2
console.log(f2.id);     //1


//以前访问原型只能通过构造函数，后来添加了通过实例直接访问的支持（但是一般不要用实例修改原型，仅用于调试时方便查看）
function Foo() {  }
var f = new Foo();
console.log(f.__proto__ === Foo.prototype);     //f.__proto__和Foo.prototype是同一个
//补充：如果像前面那样替换掉了prototype，那么在替换前创建的对象对__proto__的更改不会影响Foo.prototype

f.constructor.prototype;    //也可以先获取构造函数再获取原型
Foo.prototype.constructor;  //constructor和prototype可以相互获取

function MyArray() {  }
MyArray.prototype = [];     //[]相当于new Array()，继承了该数组实例的所有方法、属性
//也可以使用MyArray.prototype = Array.prototype，但是如果要往MyArray.prototype添加其他方法，这种写法会把我们的方法也添加到Array.prototype，导致污染了Array.prototype

//添加其他方法
MyArray.prototype.myfunc = function() { console.log('hello'); };

var a = new MyArray();
a.push(123);
a.push(456);
console.log(a);

var p = { 'id': 1, 'name': '小明', sayHello: function() { console.log('Hello!!')} }
var p2 = Object.create(p);  //p的id、name、sayHello及其原型的方法、属性 都会放在p2.__proto__中

function Foo() { this.create = function(){ return new Foo(); } }
var f = new Foo();
Foo = 123;
f.create();     //Foo is not a constructor，因为这时Foo已经是123了，无法new Foo()

function Foo() {
    this.create = function(){ return new this.constructor();}
}
Foo.prototype = { constructor: Foo };
var f = new Foo();
Foo = 123;
f.create();

//原型对象持有的是在创建时原型属性的引用
function Foo() {  }
Foo.prototype.func = function(){ console.log('1111'); };
var f1 = new Foo();
Foo.prototype = {
    func: function(){ console.log('2222'); }
};
var f2 = new Foo();
f1.func();      //1111
f2.func();      //2222

//但是如果只是更改了原型属性中的属性，而没有替换掉原型属性，则用的还是同一个原型属性
function Foo() {  }
Foo.prototype.func = function(){ console.log('1111'); };
var f1 = new Foo();
Foo.prototype.func = function(){ console.log('2222'); };
var f2 = new Foo();
f1.func();      //2222
f2.func();      //2222

//--------------查找--------------
var div1 = document.getElementById("div1");

var pTag = document.getElementsByTagName("p");  //全局查找，数组类型
pTag = div1.getElementsByTagName("p");          //找子元素，数组类型

document.getElementsByName("name");             //根据name属性设置的值查找，数组类型
document.getElementsByClassName("class1");      //根据class属性设置的值查找，数组类型

document.querySelector('#div1');                //根据选择器获取单个节点，如果有多个匹配，取第一个
document.querySelectorAll('#div1');             //根据选择器获取，数组类型


//--------------更改DOM节点属性--------------
//在body中添加内容，但是在DOM加载完成之后使用document.write()会覆盖文档原有内容
window.onload = function() { document.write(Date()); }      //错误

document.getElementById("div1").innerHTML="新文本!";        //通过innerHTML获取标签的文本内容时，如果有特殊字符，会被转义，如果想获取没有转义的内容，需使用nodeValue

var img1 = document.getElementById("img1")[0];

img1.getAttribute('src');
img1.getAttributeNode('src');              //获取AttributeNode对象，而不是String类型的属性值

img1.src="pic.jpg";                        //更改属性
img1.style.backgroundColor = "blue";
img1.className = 'class2';                 //class是少数的几个和html属性值名字不一样的属性之一
img1.setAttribute('src', 'pic.jpg');
document.querySelector('#checkbox1').checked = false;   //像checked等特殊属性设置的是布尔值，而非字符串


document.getElementsByTagName("image")[0].removeAttribute('backgroundColor');  //删除属性，对于类似checked等特殊属性，不能使用setAttribute('checked', '')，而必须使用removeAttribute删除


/* 在标签中使用JavaScript更改样式时，this指当前标签本身
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

使用函数
<h1 onclick="changetext(this)">点击文本!</h1>
function changetext(tag) { tag.innerHTML="Ooops!"; }
*/


//--------------更改DOM结构--------------
var parentTag = document.createElement("p");
var childTag = document.createTextNode("这是一个新的段落。");
parentTag.appendChild(childTag);    //插入

var divChild1 = div1.getElementsByTagName("image")[0];
div1.insertBefore(parentTag, divChild1);

parentTag.replaceChild(parentTag, document.createTextNode("2") );   //替换

div1.removeChild(parentTag);    //删除子元素


console.log(div1.nodeName);     //获取节点名字，输出为大写
div1.nodeValue = '文本';        //获取/更改文本节点
console.log(div1.nodeValue);

div1.parentNode;                //访问父节点，和div1.parentElement是一样的

div1.previousSibling;           //访问上一个兄弟节点，但是如果有换行符等文本节点，会把它们当作前一个节点
div1.previousElementSibling;    //访问上一个兄弟节点，忽略文本节点

div1.nextSibling；              //访问下一个兄弟节点
div1.nextElementSibling;        //访问下一个兄弟节点，忽略文本节点

div1.attributes;                //访问属性，数组类型
div1.childNodes;               //访问子节点，数组类型


//--------------监听事件--------------
window.onload = function() { console.log('Hello world!!'); }
pTag[0].click = function() { console.log('click!!'); }

//也可以通过addEventListener添加监听（如果是动态创建的新标签，需先添加到页面中再设置监听）
function myfunc() { console.log('mousemove!!'); }
pTag[0].addEventListener("mousemove", myfunc);
pTag[0].removeEventListener("mousemove", myfunc);