HTML、CSS、JavaScript 学习笔记

最新推荐文章于 2023-07-04 19:39:49 发布

伍Wu哈Ha

最新推荐文章于 2023-07-04 19:39:49 发布

阅读量2.6k

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/Peng_Hong_fu/article/details/52789012

版权

HTML-CSS
JavaScript

HTML-CSS

块级元素和内联元素

区块元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>

内联元素

内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>

HTML `<div>` 和`<span>`

<div>   定义了文档的区域，块级 (block-level)
<span>  用来组合文档中的行内元素， 内联元素(inline)

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>

</div>

</body>
</html>

HTML框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。


<iframe src="http://www.baidu.com" width="400" height="400"></iframe>

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>

</body>
</html>

HTML 符号实体参考手册

http://www.runoob.com/tags/ref-entities.html

HTML 速查列表

HTML 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

基本标签（Basic Tags）

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>

<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

文本格式化（Formatting）

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>

<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

链接（Links）

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

图片（Images）

<img src="URL" alt="替换文本" height="42" width="42">

样式/区块（Styles/Sections）

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

无序列表

<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

定义列表

<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

表格（Tables）

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

框架（Iframe）

<iframe src="demo_iframe.htm"></iframe>

表单（Forms）


<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>

</form>

实体（Entities）

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

CSS3 transition

transition 属性是一个简写属性，用于设置四个过渡属性：
http://www.w3cplus.com/content/css3-transition

transition-property     规定设置过渡效果的 CSS 属性的名称。
transition-duration     规定完成过渡效果需要多少秒或毫秒。
transition-timing-function  规定速度效果的速度曲线。
transition-delay    定义过渡效果何时开始。

 transition: all 0.5s ease-in 0.3s;

-webkit-transition: all .5s ease-in-out 1s;
  -o-transition: all .5s ease-in-out 1s;
  -moz-transition: all .5s ease-in-out 1s;
  transition: all .5s ease-in-out 1s;

<!DOCTYPE html>
<html>
<head>
<style> 
div{
    width:100px;
    height:100px;
    background:blue;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

div:hover{
    width:300px;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

效果：
这里写图片描述

CSS-box-shadow

向 div 元素添加 box-shadow：

div{
    box-shadow: 10px 10px 5px #888888;
}

box-shadow 属性向框添加一个或多个阴影。
http://www.w3school.com.cn/tiy/t.asp?f=css3_image_gallery

CSS-float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        div img{
            width:300px;
        }
        div{
            float: left;
        }
        .main{
           // width: 900px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div> <img src="img/11.jpg"></div>
        <div> <img src="img/22.jpg"></div>
        <div> <img src="img/33.jpg"></div>
    </div>
</body>
</html>

CSS-Position的嵌套

相对定位和绝对定位嵌套：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Position</title>
    <style type="text/css">
        div.div1{
            width: 400px;
            height: 200px;
            margin: 0 auto;
            background: goldenrod;
            border:1px solid red;
            position: relative;
            left:10px;
        }
        .div2{
            margin: 0 auto;
            position: absolute;
            width: 300px;
            height: 50px;
            background: black;
            color: white;
            /*文字垂直 水平居中*/
            line-height: 50px;
            text-align: center;


            left: 0;
            bottom:0;
            right:0;
        }

    </style>
</head>
<body>
    <div class="div1">  <div class="div2">我是子元素</div></div>

</body>
</html>

这里写图片描述

CSS :position、Z-index

position 属性规定元素的定位类型。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

relative的特点

relative的作用，就是在其默认显示的位置的基础上，偏移一定的尺寸，可以是上下左右四个参数来设置。但是这个偏移是悄悄的，只有它自己知道，仅仅是显示出来的效果偏移了，但它实际还占用着原来的位置，就像放风筝，风筝随着风向的改变而偏移relative了一定距离，而实际人还是站在原来的位置，且所占用的平面面积不变。
如果div的position设置了relative属性，但是没有指定偏移量，则相当于默认的position：static。

absolute的特点：

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，如果在 body 中仅有一个 div 设置成 position:absolute ,则这个 div 的父元素就是body ，div相对于浏览器进行偏移，如果div 外嵌套了其他块级元素，并且，这个块级元素设置了 position:relative,则这个div 相对于这个块级元素进行偏移。

relative 不脱离文档流，absolute 脱离文档流。也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute的元素不仅位置改变了，同时也脱离了文档流。

定位 h2 元素：

<html>
<head>
<style type="text/css">
h2.pos_abs {
    position:absolute;
    left:100px;
    top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

</html>

h2标签相对于body这个容器定位。

可能的值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" /> 
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>

</html>

这里写图片描述

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

元素可拥有负的 z-index 属性值。
Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
可能的值：

auto    默认。堆叠顺序与父元素相等。
number  设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。

CSS :hover 选择器

选择鼠标指针浮动在其上的元素，并设置其样式：

a:hover{ 
    background-color:yellow;
}

提示：:hover 选择器可用于所有元素，不只是链接。

提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active选择器用于活动链接。

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited之后（如果存在的话），这样样式才能生效。

选择未访问、已访问、悬浮和活动链接，并设置它们的样式：

a:link    {color:blue;}
a:visited {color:blue;}
a:hover   {color:red;}
a:active  {color:yellow;}

CSS display 属性

display 属性规定元素应该生成的框的类型。

常用于< a> < span>这两个标签，因为这两个标签非块元素，如果不用display：block定义一下，那么定义width、height等和长宽相关的css属性时会发现完全不生效

块级元素(block-level elements)：

占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；

行内元素( inline elements )：

自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

block和inline

block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。>

大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。
http://www.cnblogs.com/KeithWang/p/3139517.html

值   描述
none    此元素不会被显示。
block   此元素将显示为块级元素，此元素前后会带有换行符。
inline  默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block    行内块元素。（CSS2.1 新增的值）
list-item   此元素会作为列表显示。
run-in  此元素会根据上下文作为块级元素或内联元素显示。
compact     CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker  CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table   此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table    此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group     此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group  此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group  此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row   此元素会作为一个表格行显示（类似 <tr>）。
table-column-group  此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column    此元素会作为一个单元格列显示（类似 <col>）
table-cell  此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption   此元素会作为一个表格标题显示（类似 <caption>）
inherit     规定应该从父元素继承 display 属性的值。

CSS-cursor

一些不同的光标：

<html>

<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>

</html>

层模型–绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

效果如下：

这里写图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>absolute样式</title>
<style type="text/css">
div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    right:100px;
    top:20px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

盒模型代码简写

外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

通常有下面三种缩写方法:

1、如果top、right、bottom、left的值相同，如下面代码：

margin:10px 10px 10px 10px;

可缩写为：

margin:10px;

2、如果top和bottom值相同、left和 right的值相同，如下面代码：

margin:10px 20px 10px 20px;

可缩写为：

margin:10px 20px;

3、如果left和right的值相同，如下面代码：

margin:10px 20px 30px 20px;

可缩写为：

margin:10px 20px 30px;

注意：padding、border的缩写方法和margin是一致的。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
p{
    padding:13px ;/*padding: 13px 13px 13px 13px;*/
    margin:10px 40px;/*margin:10px 40px 10px 40px;*/

    border-width:1px 10px 20px 30px;
    border-color:red;
    border-style:solid;
    /*
    border-width:2px 3px
    border: 3px dotted red;
     */
}
</style>
</head>
<body>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
</body>
</html>

颜色值缩写

关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

例子1：

p{color:#000000;}

可以缩写为：

p{color: #000;}

例子2：

p{color: #336699;}

可以缩写为：

p{color: #369;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
p{
    color:#369;/*#336699*/
}
</style>
</head>
<body>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
</body>
</html>

字体缩写

网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

这么多行的代码其实可以缩写为一句：

body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{
    font:12px/1.5em  "宋体",sans-serif;
}

只是有字号、行间距、中文字体、英文字体设置。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>字体缩写</title>
<style type="text/css">
body{
    font-style:italic;/*斜体*/
    font-variant:small-caps;/*英文字体大写*/
    font-weight:bold; /*粗体*/
    font-size:24px; 
    line-height:1.6em;/*行间距*/
    font-family:"宋体",sans-serif;/*多种字体保证调用*/
}
body{
    font:12px/1.5em  "宋体",sans-serif;
}

</style>
</head>
<body>
    <p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers.</p>
    <p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators.</p>
    <p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</body>
</html>

颜色值

在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：

1、英文命令颜色

前面几个小节中经常用到的就是这种设置方法：

p{color:red;}

2、RGB颜色

这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%);}

3、十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

配色表

这里写图片描述

HTML 颜色http://www.runoob.com/html/html-colors.html

长度值

长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

1、像素

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：

但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

html:

<p>以这个<span>例子</span>为例。</p>

css:

p{font-size:14px}
span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>长度</title>
  <style type="text/css">
    p{font-size:14px}
    span{font-size:0.8em;}
  </style>
</head>
<body>
    <p><span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>

水平居中设置-行内元素

我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。

这里我们又得分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：

html代码：

<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

css代码：

<style>
  .txtCenter{
    text-align:center;
  }
</style>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>定宽块状元素水平居中</title>
<style>
div{
    border:1px solid red;
    margin:20px;
    text-align:center;
}
.txtCenter{
    text-align:center;
}

</style>
</head>

<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>

<!--下面是任务部分-->

<div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>
</body>
</html>

水平居中设置-定宽块状元素

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

html代码：

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

css代码：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

</style>

也可以写成：

margin-left:auto;
margin-right:auto;

注意：元素的“上下 margin” 是可以随意设置的。

水平居中总结-不定宽块状元素方法（一）

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）

1.加入 table 标签
2.设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
3.设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的

为什么选择方法一加入table标签? 是利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括、、 )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

html代码：

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>

css代码：

<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table{
    margin:0 auto;
    border:1px solid;
}

/*下面是任务区代码*/
.wrap{
    background:#ccc;    
     display:table;
     margin:0px auto;
}
</style>
</head>

<body>
<div>
<table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
</table>
</div>

<div class="wrap">
  设置我所在的div容器水平居中  
</div>
</body>
</html>

水平居中总结-不定宽块状元素方法（二）

，可以使不定宽块状元素水平居中之外，本节介绍第2种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置。

第二种方法：改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align:center 来实现居中效果。如下例子：

html代码：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码：

<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container {
    text-align: center;
}

.container ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
}

.container li {
    margin-right: 8px;
    display: inline;
}
/*text-align:center(文本居中)*/
/*list-style:none(消除li圆点) margin:0;padding:0（消除文本与div边框之间的间隙）*/
/*display:inline（变成行内元素，也就是把ul文本列变成行。另外从border来看未设置inline之前宽度是无限的，设置后宽度变为随文本宽度）*/
/*margin-right:8px（设置li文本之间的间隔） display:inline（变成行内元素，也就是把li文本列变成行*/
</style>
</head>

<body>
    <div class="container">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </div>
</body>
</html>

水平居中总结-不定宽块状元素方法（三）

除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。

方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。

代码如下：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码：

<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;

    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;

    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:24px;}


/*下面是代码任务区*/

.wrap-center{
    background:#ccc;


}
</style>
</head>

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

<!--下面是代码任务区-->
<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>

垂直居中-父元素高度确定的单行文本

这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。

本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

宽度100px，内容每行的行间距为50px，上面间距，下面间距，刚好100px。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>

.wrap h2{
    margin:0;
    height:50px;
    line-height:50px;
    text-align:center;
    background:#ccc;
}

</style>
</head>

<body>

<!--下面是代码任务部分-->
<div class="wrap">
    <h2>hi,imooc!      
    </h2>
</div>
</body>
</html>

双行文字。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>

.wrap h2{
    margin:0;
    height:100px;
    line-height:50px;
    text-align:center;
    background:#ccc;
}

</style>
</head>

<body>

<!--下面是代码任务部分-->
<div class="wrap">
    <h2>hi,imooc!  <br>
    我是第二行
    </h2>
</div>
</body>
</html>

JavaScript

我的第一个 JavaScript 程序

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>

<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>

<button type="button" onclick="displayDate()">显示日期</button>

</body>
</html>

windows.open

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

http://www.w3school.com.cn/jsref/met_win_open.asp
语法

window.open(URL,name,features,replace)

参数	描述
URL	一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name	一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 `<a>` 和 `<form>` 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features	一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。
replace	一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

实例1

下面的例子讲在新浏览器窗口中打开 about:blank 页：

<html>
<body>
<script type="text/javascript">
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()
</script>
</body>
</html>

实例2

<td align="center"><a href="#" onClick="window.open('readerType?action=readerTypeModifyQuery&ID=<%=ID%>','','width=292,height=175')">修改</a></td>

DOM 文档对象模型

<input id="userName" name="userName2" type="text" class="input">

通过ID访问页面元素

var userName = document.getElementById("userName").value;

通过Name访问页面元素

var userNameInput = document.getElementsByName("userName2");//返回数组
var userName = userNameInput[0].value;

通过标签名访问页面元素

<input type="button" value="登录" onClick="login()">

var inputs = document.getElementByTagName("input");
alert(inputs.length); //1 有一个 input 对象

获得当前页面所有的 Form 对象

var frms = document.forms;// 获取含对象的数组
var loginfm = frms[0];// 获取第一个form对象，if exist

获取对象之后可以改变对象所在元素的样式

改变HTML样式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
  <h2 id="con">I love JavaScript</H2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  <script type="text/javascript">
    var mychar= document.getElementById("con");
    mychar.style.color="red";
    mychar.style.backgroundColor="#CCC";
    mychar.style.width="300px";


  </script>
</body>
</html>

显示和隐藏（display属性）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
        {  
        var mychar = document.getElementById("con");
        mychar.style.display="none";
        }  
        function showtext()  
        {  
        var mychar = document.getElementById("con");
        mychar.style.display="block";
        }
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" onclick="hidetext()" value="隐藏内容" /> 
       <input type="button" onclick="showtext()" value="显示内容" /> 
    </form>
</body> 
</html>

控制类名（className 属性）

className 属性设置或返回元素的class 属性。

语法：

object.className = classname

作用:

1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
    body{ font-size:16px;}
    .one{
        border:1px solid #eee;
        width:230px;
        height:50px;
        background:#ccc;
        color:red;
    }
    .two{
        border:1px solid #ccc;
        width:230px;
        height:50px;
        background:#9CF;
        color:blue;
    }
    </style>
</head>
<body>
    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" onclick="add()"/>
    <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" onclick="modify()"/>

    <script type="text/javascript">
       function add(){
          var p1 = document.getElementById("p1");
          p1.className="one";
       }
       function modify(){
          var p2 = document.getElementById("p2");
          p2.className="two";
       }
    </script>
</body>
</html>

测试

小伙伴们，请编写”改变颜色”、”改变宽高”、”隐藏内容”、”显示内容”、”取消设置”的函数，点击相应按钮执行相应操作，点击”取消设置”按钮后，提示是否取消设置，如是执行操作，否则不做操作

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body {
    font-size: 12px;
}
#txt {
    height: 400px;
    width: 600px;
    border: #333 solid 1px;
    padding: 5px;
}
p {
    line-height: 18px;
    text-indent: 2em;
}
</style>
</head>
<body>
<h2 id="con">JavaScript课程</H2>
<div id="txt">
  <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
  <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
  <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
  <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div>
<form>
  <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
  <input type="button" value="改变颜色" onclick="changleColor()" >
  <input type="button" value="改变宽高" onclick="changleWH()">
  <input type="button" value="隐藏内容" onclick="displayContext()">
  <input type="button" value="显示内容" onclick="showContext()">
  <input type="button" value="取消设置" onclick="cancelEdit()">
</form>
<script type="text/javascript">
//定义"改变颜色"的函数
    function changleColor(){
        var mytxt = document.getElementById("txt");
        mytxt.style.background="#CCC";
        mytxt.style.color="red";
        }

//定义"改变宽高"的函数
    function changleWH(){
        var mytxt = document.getElementById("txt");
        mytxt.style.width="400px";
        mytxt.style.height="500px";
        }

//定义"隐藏内容"的函数

    function displayContext(){
        var mytxt = document.getElementById("txt");
        mytxt.style.display="none";
        }
//定义"显示内容"的函数
    function showContext(){
        var mytxt = document.getElementById("txt");
        mytxt.style.display="block";
        }

//定义"取消设置"的函数
    function cancelEdit(){
        var rs = confirm("是否取消设置");
        if(rs){
            document.getElementsByTagName("div")[0].removeAttribute("style"); 
            }
        else{}
        }


  </script>
</body>
</html>

保持先后顺序(操作符优先级）

我们都知道，除法、乘法等操作符的优先级比加法和减法高，例如：

var numa=3;
var numb=6
jq= numa + 30 / 2 - numb * 3;  // 结果为0

如果我们要改变运算顺序，需添加括号的方法来改变优先级:

var numa=3;
var numb=6
jq= ((numa + 30) / (2 - numb)) * 3; //结果是-24.75

操作符之间的优先级（高到低）:

算术操作符 → 比较操作符 → 逻辑操作符 → “=”赋值符号

如果同级的运算是按从左到右次序进行,多层括号由里向外。

var numa=3;
var numb=6;
jq= numa + 30 >10 && numb * 3<2;  //结果为false

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作符优先级</title>
<script type="text/javascript">
var numa,numb,jq1;
numa=5;
numb=2;
jq1=numa + 30 >10 && numb * 3<20;
jq2=((numa + 30) / (7-numb)) * 3
document.write("jq1的值是:"+jq1+"<br>");
document.write("jq2的值是:"+jq2);
</script>
</head>
<body>
</body>
</html>

事件

事件分类	事件	事件句柄
窗口事件	当文档载入时	onload
	当文档卸载时	onunload

表单元素事件	用户改变元素的内容	onchange
	提交按钮被点击	onsubmit
	被重置时	onreset
	元素被选取时	onselect
	元素失去焦点时	onblur
	元素获取焦点	onfocus

鼠标事件	被单击	onclick
	被双击	ondblclick
	鼠标按钮被按下	onmousedown
	鼠标指针移动时	onmousemove
	鼠标移出某元素时	onmouseout
	鼠标指针悬停于某元素之上	onmouseover
	鼠标按钮被松开时	onmouseup

键盘事件	键盘被按下	onkeydown
	键盘按下又松开时	onkeypress
	键盘松开时	onkeyup

测试

使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

<!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>  
  <script type="text/javascript">
   function count(){

    //获取第一个输入框的值
    var a = parseInt(document.getElementById("txt1").value);
    //获取第二个输入框的值
    var b = parseInt(document.getElementById("txt2").value);

    //获取选择框的值
    var s = document.getElementById("select").value;
    //获取通过下拉框来选择的值来改变加减乘除的运算法则
    var sum;
    switch(s){
        case "+" :
             sum=a+b;
             break;
        case "-" :
             sum=a-b;
             break;
        case "*" : 
             sum=a*b;
             break;
        case "/" : 
            sum=a/b;
              break;            
        }
    //设置结果输入框的值 
      document.getElementById("fruit").value=sum;
   }
  </script> 
 </head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
   </select>
   <input type='text' id='txt2' /> 
   <input type='button' value=' = ' onclick="count()"/> <!--通过 = 按钮来调用创建的函数，得到结果--> 
   <input type='text' id='fruit' />   
 </body>
</html>

数组排序sort()

sort()方法使数组中的元素按照一定的顺序排列。

语法:

arrayObject.sort(方法函数)

参数说明：

1.如果不指定<方法函数>，则按unicode码顺序排列。

2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。

myArray.sort(sortMethod);

注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

1.使用sort()将数组进行排序，代码如下：

<script type="text/javascript">
  var myarr1 = new Array("Hello","John","love","JavaScript"); 
  var myarr2 = new Array("80","16","50","6","100","1");
  document.write(myarr1.sort()+"<br>");
  document.write(myarr2.sort());
</script>

运行结果：

Hello,JavaScript,John,love
1,100,16,50,6,80

注意:上面的代码没有按照数值的大小对数字进行排序。

2.如要实现这一点，就必须使用一个排序函数，代码如下：

<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序，如降序，把“a - b”该成“b - a”
}
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));
</script>

运行结果：

80,16,50,6,100,1
1,6,16,50,80,100

Date对象

var now = new Date();

getDate()  一个月中的某一天(1-31)
getDay() 一周的某一天(0-6)
getMonth() 返回月份(0-11)
getFullYear() 返回四位数字的年份
getHours 返回小时(0-23)
getMinutes() 返回分钟(0-59)
getSeconds() 返回秒数(0-59)
getMilliseconds() 返回毫秒数(0-999)

网页加载时，就显示时间的导航条：

这里写图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function clockon(bgclock) {
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth();
        var date = now.getDate();
        var day = now.getDay();
        var hour = now.getHours();
        var minu = now.getMinutes();
        var sec = now.getSeconds();
        var week;
        month = month + 1;
        if (month < 10)
            month = "0" + month;
        if (date < 10)
            date = "0" + date;
        if (hour < 10)
            hour = "0" + hour;
        if (minu < 10)
            minu = "0" + minu;
        if (sec < 10)
            sec = "0" + sec;
        var arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五",
                "星期六");
        week = arr_week[day];
        var time = "";
        time = year + "年" + month + "月" + date + "日 " + week + " " + hour + ":"
                + minu + ":" + sec;
        document.getElementById(bgclock).innerHTML = "<b>" + time + "</b>";
        var timer = window.setTimeout("clockon('bgclock')", 200);
    } 
</script>
</head>
<body onload="clockon('bgclock')">
        <p style="width: 330px; background-color: #c69a0a; text-align: center"><span
            id="bgclock" class="word_white"></span></p>

</body>
</html>

计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

语法:

setInterval(代码,交互时间);

参数说明：

代码：要调用的函数或要执行的代码串。
交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:

一个可以传递给 clearInterval() 从而取消对”代码”的周期性执行的值。

调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000)
或
setInterval(clock,1000)

我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
  var int=setInterval(clock, 100)
  function clock(){
    var time=new Date();
    document.getElementById("clock").value = time;
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
  </form>
</body>
</html>

取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

clearInterval(id_of_setInterval)

参数说明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();                    
      document.getElementById("clock").value = time;
   }
     var i = setInterval("clock()",1000);
     //var i = setInterval(clock,1000);
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)" />
  </form>
</body>
</html>

计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间);

参数说明：

要调用的函数或要执行的代码串。
延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

当我们打开网页3秒后，在弹出一个提示框，代码如下:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>

当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
  var t=setTimeout("alert('Hello!')",5000);
 }
</script>
</head>
<body>
<form>
  <input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>

要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
 document.getElementById('txt').value=num;
 num=num+1;
 setTimeout("numCount()",1000);
 }
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
  var num=0;
  function startCount() {
    document.getElementById('count').value=num;
    num=num+1;
     setTimeout("startCount()",1000);
  }
 setTimeout("startCount()",3000);
</script>
</head>
<body>
<form>
<input type="text" id="count" />
</form>
</body>
</html>

取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止计时器。

语法:

clearTimeout(id_of_setTimeout)

参数说明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
  var num=0;
  var i;
  function startCount(){
    document.getElementById('count').value=num;
    num=num+1;
    i=setTimeout("startCount()",1000);
  }
  function stopCount(){
  clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="count" />
    <input type="button" value="Start" onclick="startCount()" />
    <input type="button" value="Stop"   onclick="stopCount()"/>
  </form>
</body>
</html>

Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

语法:

location.[属性|方法]

location对象属性图示:
这里写图片描述

location 对象属性：
这里写图片描述

location 对象方法:
这里写图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>location</title>
</head>
 <script type="text/javascript">
    var s = location.host;
    document.write(s);

 </script>
</head>
<body>
</body>
</html>

 window.location.assign("http://www.w3school.com.cn")

History 对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

语法：

window.history.[属性|方法]

注意：window可以省略。

History 对象属性
这里写图片描述

History 对象方法
这里写图片描述
使用length属性，当前窗口的浏览历史总长度，代码如下：

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

屏幕分辨率的高和宽

window.screen 对象包含有关用户屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
注意:
1.单位以像素计。
2. window.screen 对象在编写时可以不使用 window 这个前缀。
我们来获取屏幕的高和宽，代码如下:

<script type="text/javascript">
  document.write( "屏幕宽度："+screen.width+"px<br />" );
  document.write( "屏幕高度："+screen.height+"px<br />" );
</script>

实践题


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* 
     标签和文本结合区域效果制作：
     1.用ul做分类标签
     2.把ul的display定义为block使ul区域和下面div区域结合在一起
     3.给ul定义一个下边框或者给div内容区域定义一个上边框
     4.所有li标签默认样式不设下边框，作为激活显示的li标签加宽其#fff（白色）
     区域的下边框，覆盖。
     */  
        /*全局元 素内边距0 外边距0 字体微软雅黑 12px 不加粗*/
        *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}

        /*以下是3个标签部分CSS*/
        /*div标签 宽290px 内边距 5px 高150px 外边距20px（这里，div标签在相对于浏览器）*/
        #tabs {width:290px;padding:5px;height:150px;margin:20px;}

        /* ul 去除无序列表的小圆点  显示为块级元素，独占一行  高度30px 行间距30px  边框底部实线重褐色 2px*/
        #tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}

        /*li  背景绿色 手型光标 浮动在左（相对于div容器） 去除li的样式 li高28px 行间距28px（为了让文字垂直居中设置与行高相同）左右与div边距3px 边框实线1px灰色 底部无边框  具有块级元素和内联元素的双重属性，同行，能设宽高 宽60px 文章水平据中*/
        #tabs ul li{background:#0F0;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;}

        /* 边框顶部2px 实线 重褐色#fff 白色（不显示）*/
        #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}

        /*以下是内容部分*/
        /*高120px 行间距25px 边框实线1px蓝色 顶部无边框 内边距5px*/
        #tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;}

         /*hide元素不会被显示*/
        .hide{display: none;}
    </style>
    <script type="text/javascript">
     window.onload=function(){
        var oTab = document.getElementById("tabs")
        var li = document.getElementsByTagName("li");
        var div = oTab.getElementsByTagName("div");//oTabs.get...是为了定义className作用对象为id为tabs下的所有文本div

        for(var i=0;i<li.length;i++){//获取所有i编号的元素
            li[i].index = i;  //定义一个index属性对li进行编号 防止闭包函数中无法正常获取当前索引i，而衍生出的一个绑定在dom元素上的数据index

            li[i].onclick = function(){//再注册一个点击事件，当点击的时候所有标签都恢复最初状态
            for(var n=0;n<li.length;n++){//这步是相对于未被点击部分的样式
                li[n].className = "";
                div[n].className = "hide";// div所有的div隐藏
            }
            this.className = "on";//再对点击事件添加相应的属性
            div[this.index].className = "";//通过之前的index编号绑定的指定div
            }
        }
    }
    </script>

</head>
<body>
<div id="tabs">
    <ul>
        <li class="on">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div>
        275万购昌平邻铁三居 总价20万买一居<br>
        200万内购五环三居 140万安家东三环<br>
        北京首现零首付楼盘 53万购东5环50平<br>
        京楼盘直降5000 中信府 公园楼王现房<br>
    </div>
    <div class="hide">
        40平出租屋大改造 美少女的混搭小窝<br>
        经典清新简欧爱家 90平老房焕发新生<br>
        新中式的酷色温情 66平撞色活泼家居<br>
        瓷砖就像选好老婆 卫生间烟道的设计<br>

    </div>
    <div class="hide">
        通州豪华3居260万 二环稀缺2居250w甩<br>
        西3环通透2居290万 130万2居限量抢购<br>
        黄城根小学学区仅260万 121平70万抛!<br>
        独家别墅280万 苏州桥2居优惠价248万<br>

    </div>
</div>

</body>
</html>

伍Wu哈Ha

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML、CSS、JavaScript 学习笔记

我寂寞寂寞就好你真的不用来我回忆里微笑我就不相信我会笨到忘不了赖着不放掉 HTML-CSSCSS3 transitiontransition 属性是一个简写属性，用于设置四个过渡属性： http://www.w3cplus.com/content/css3-transitiontransition-property 规定设置过渡效果的 CSS 属性的名称。transition
复制链接

扫一扫