第一章 HTML
第一节 HTML简介
1.1 HTML概述
HTML全称：Hyper Text Markup Language(超文本标记语言)
超文本标记语言是标准通用标记语言（SGML）下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
HTML是一门用户创建网页文档的标记语言，网页文件本身是一种文本文件，通过在文本文件中添加标记符。
HTML可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示、包括音频、视频等等如何播放）。
1.2 HTML特点
其主要特点如下： 1 简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。 2 可扩展性：超文本标记语言采取子类元素的方式，为系统扩展带来保证。 3 平台无关性：超文本标记语言可以使用在广泛的平台上，这也是万维网（www）盛行的另一个原因。 4 通用性：HTML是网络的通用语言,一种简单、通用的标记语言。
1.3 HTML的发展
超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布(并非标准)
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
W3C : XHTML1.0 -> XHTML1.1 -> XHTML2.0-->(XML) 死路
WHATWG:HTML 5
HTML 5——2014年10月29日，W3C推荐标准
第二节 HTML基本标签
2.1 结构标签
<html><html>:根标签 <head></head>：头标签 <title></title>:页面的标题 <body></body>：主体标签：网页内容
属性： color:文本的颜色 <font color="red">内容</font> size: 文本的大小 <font size="30">内容</font> bgcolor:背景色 <body bgcolor="bisque"> </body> background:背景图片 <body background="图片的地址"> </body> 颜色的表示方式： 第一种方式：使用颜色名称: red green blue skyblue 第二种方式：RGB模式 #000000 #ffffff #325687 #377405
2.2 排版标签
1.注释标签：<!--注释--> 2.换行标签：<br/> 3.段落标签：<p>文本文字</p> 特点：段与段之间有行高 属性：align对齐方式 (left：左对齐 center：居中 right：右对齐) 4.水平线标签:<hr/> 属性: width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示) size: 水平线的粗细 (像素表示，例如：10px) color:水平线的颜色 align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
2.3 标题标签
<h1></h1>—-<h6></h6> 随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；
2.4 容器标签
<div></div>:块级标签，独占一行，换行 <span></span>:行级标签，所有内容都在同一行 作用： <div></div>:主要是结合css页面分块布局 <span></span>:进行友好提示信息
2.5 列表标签
2.5.1 无序列表
ul （unorder list）
无序列表标签： <ul></ul>
属性：type :三个值，分别为
circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项：<li></li>
示例如下：
<ul type="square">无序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
2.5.2 有序列表
ol（order list）
有序列表标签：<ol></ol>
属性：type：1、A、a、I、i（数字、字母、罗马数字）
列表项： <li></li>
示例如下：
<ol type="I">有序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
2.5.3 定义列表
dl (defination list) 定义列表
dt (defination title) 定义标题
dd (defination description) 定义描述
定义列表 <dl>
<dt>苹果</dt>
<dd>苹果是一种水果，富含维生素C，美容养颜，吃了长寿....</dd>
</dl>
2.6 图片标签
<img/> 独立标签
属性:
src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）
width:宽度
height:高度
border:边框
align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
alt:图片的文字说明
title:图片的悬停显示
hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近
2.7 链接标签
超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
<a>文本或图片</a>
属性：
href:跳转页面的地址(跳转到外网需要添加协议)
target:_self(自己) _blank(新页面，之前页面存在) _parent _top 默认_self
_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。
name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值
2.8 表格标签
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
colspan 属性 表格的列合并 rowspan属性 表格的行合并
2.9 文本格式化标签
<b> 定义粗体文本。 <big> 定义大号字。 <em> 定义着重文字。 <i> 定义斜体字。 <small> 定义小号字。 <strong> 定义加重语气。 <sub> 定义下标字。 <sup> 定义上标字。 <ins> 定义插入字。 <del> 定义删除字。
综合示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝首页</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
a{
text-decoration: none;
}
#top{
background-color: gainsboro;
width:100%;
height: 40px;
margin: 0 auto;
line-height: 40px;
}
#top1{
background-color: white;
width:100%;
height: 100px;
line-height: 100px;
}
#top2{
background-color: gainsboro;
width:100%;
height: 40px;
margin: 0 auto;
color: black;
line-height: 40px;
}
#top3{
background-color: beige;
width:100%;
height: 40px;
text-align: left;
margin: 0 auto;
color:black ;
line-height: 40px;
}
.book{
margin-top: 0px;
}
</style>
</head>
<body>
<div>
<!--头部-->
<div id="top">
<div style="float: left;">
<a href="###" style="color: red; margin-left: 40px;" >亲，请登录 </a> <a href="###">免费注册 </a> <a href="###">手机逛淘宝</a>
</div >
<div style="float: right; margin-right: 20px;">
<a href="###" style="color: red;">淘宝网首页 </a>
<a href="###">我的淘宝</a>
<a href="###">购物车</a>
<a href="###">收藏夹</a>
<a href="###"> 商品分类</a>
<a href="###">卖家中心</a>
<a href="###">联系客服</a>
<a href="###">网站导航</a>
</div>
</div >
<!--顶部第二-->
<div id="top1">
<div style="float: left;">
<img src="img/logo.bmp" />
</div style="float:inherit; margin-left: 1230px;">
<div>
<div style="margin-left:350px">
<input type="text" name="search" style="width: 300px; border-radius: 5px;" />
<button type="submit" value="搜索">搜索</button>
</div>
</div>
</div>
<!--顶部第三-->
<div id="top2" >
<div style="margin-left: 40px;" >
你是不是想找：
<a href="###">客厅灯</a>|
<a href="###">冲锋衣</a>|
<a href="###">床垫</a>|
<a href="###">沙发垫</a>|
<a href="###">电脑桌</a>|
<a href="###">鞋柜</a>
</div>
</div>
<!--顶部第四-->
<div id=top3>
<div style="float: left; margin-left: 40px;">
价格: <input type="text" name="price" /> --
<input type="text" name="price" />
</div>
<div style="float: right; margin-right: 20px;">
<input type="checkbox" name="ck1" value="1" />包邮
<input type="checkbox" name="ck1" value="1" />包邮
<input type="checkbox" name="ck1" value="1" />包邮
</div>
</div>
<!--主体部分-->
<table bordercolor="white" border="0" width="100%" cellspacing="25">
<!--第一行-->
<tr align="center" >
<td>
<img src="img/002.png" />
<p style="color: coral; ">¥40.4包邮</p>
<p class="book">世界上最好的书籍</p>
<p class="book" style="color: darkgray;">小飞书籍专卖店</p>
<p class="book" style="color: darkgray; " align="right">如实描述</p>
</td>
<td>
<img src="img/003.png" />
<p style="color: coral; ">¥40.4包邮</p>
<p class="book">世界上最好的书籍</p>
<p class="book" style="color: darkgray;">小飞书籍专卖店</p>
<p class="book" style="color: darkgray; " align="right">如实描述</p>
</td>
<td>
<img src="img/004.png" />
<p style="color: coral; ">¥40.4包邮</p>
<p class="book">世界上最好的书籍</p>
<p class="book" style="color: darkgray;">小飞书籍专卖店</p>
<p class="book" style="color: darkgray; " align="right">如实描述</p>
</td>
<td>
<img src="img/005.png" />
<p style="color: coral; ">¥40.4包邮</p>
<p class="book">世界上最好的书籍</p>
<p class="book" style="color: darkgray;">小飞书籍专卖店</p>
<p class="book" style="color: darkgray; " align="right">如实描述</p>
</td>
<td>
<img src="img/006.png" />
<p style="color: coral; ">¥40.4包邮</p>
<p class="book">世界上最好的书籍</p>
<p class="book" style="color: darkgray;">小飞书籍专卖店</p>
<p class="book" style="color: darkgray; " align="right">如实描述</p>
</td>
</tr >
<!--第二行-->
<tr align="center" >
<td>
<img src="img/007.png"/>
<p style="color: coral; ">¥40.4包邮</p>
<p class="book">世界上最好的书籍</p>
<p class="book" style="color: darkgray;">小飞书籍专卖店</p>
<p class="book" style="color: darkgray; " align="right">如实描述</p>
</td>
<td>
<img src="img/008.png"/>
<p style="color: coral; ">¥40.4包邮</p>
<p class="book">世界上最好的书籍</p>
<p class="book" style="color: darkgray;">小飞书籍专卖店</p>
<p class="book" style="color: darkgray; " align="right">如实描述</p>
</td>
<td>
<img src="img/009.png"/>
<p style="color: coral; ">¥40.4包邮</p>
<p class="book">世界上最好的书籍</p>
<p class="book" style="color: darkgray;">小飞书籍专卖店</p>
<p class="book" style="color: darkgray; " align="right">如实描述</p>
</td>
<td>
<img src="img/010.png"/>
<p style="color: coral; ">¥40.4包邮</p>
<p class="book">世界上最好的书籍</p>
<p class="book" style="color: darkgray;">小飞书籍专卖店</p>
<p class="book" style="color: darkgray; " align="right">如实描述</p>
</td>
<td>
<img src="img/011.png"/>
<p style="color: coral; ">¥40.4包邮</p>
<p class="book">世界上最好的书籍</p>
<p class="book" style="color: darkgray;">小飞书籍专卖店</p>
<p class="book" style="color: darkgray; " align="right">如实描述</p>
</td>
</tr>
</table>
</div>
</body>
</html>
第二章 CSS
第一节 CSS简介
1.1 CSS概念
CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 多个样式可以层层覆盖叠加，如果不同的css样式对同一个html标签进行修饰，样式有冲突的,应用优先级高的，不冲突的样式规则共同作用。
CSS作用：
1. 修饰美化html网页。 2. 外部样式表可以提高代码复用性从而提高工作效率。 3. html内容与样式表现分离，便于后期维护。
1.2 CSS特点
1 丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2 易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
3 多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
4 层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
5 页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间
1.3 CSS语法规则
CSS 规则由两个主要的部分构成：（1）选择器（2）一条或多条声明.
1. 选择器通常是您需要改变样式的 HTML 元素。
2. 每条声明由一个属性和一个值组成。
基础语法：选择器｛属性：值;属性:值….. ｝
提示：请使用花括号来包围声明。
CSS书写方式有两种：
第一种：选择器、每个声明各占一行，优点:可读性好，便于修改
第二种：选择器声明都在一行，优点：节省空间
2.注意事项： a.如果值为若干单词，则要给值加引号；font-family: "黑体","华文彩云","微软雅黑","arial"; b.多个声明之间使用分号;分开； c.css对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感 d.css注释/*...*/
第二节 CSS使用方式
2.1 内联方式
把CSS样式嵌入到html标签当中，类似属性的用法，示例如下：
<div style="color:blue;font-size:50px">This is my HTML page. </div>
好处:可以单独设置某个元素样式，缺点：不利于样式重用
2.2 内部样式
在head标签中使用style标签引入css,示例如下:
<style type=“text/css”> //告诉浏览器使用css解析器去解析
div {color:red; font-size:50px}
</style>
好处：可以控制页面中多个元素样式，缺点：只能一个页面使用
2.3 外部样式
将css样式抽成一个单独文件，谁用谁就引用，好处：多个页面可以同时使用。
示例如下：
单独文件div.css: 内容示例：div{color:green;font-size:50px}
引用语句写在head标签内部，
链接式：
<link rel="stylesheet" type="text/css" href=“div.css"></link>
rel:代表当前页面与href所指定文档的关系
type:文件类型，告诉浏览器使用css解析器去解析
href:css文件地址
导入式：
<style type="text/css">
@import url("div.css")
</style>
该内容放在head标签中
备注:link和@import区别：
1.link所有浏览器都支持，@import某些版本低的IE不支持
2.@import是等待html加载完成才加载，link解析到这个语句，就加载
3.@import不支持js动态修改
优先级：内联样式>内部样式>外部样式，就近原则。注意：内部样式和外部样式的位置 。
第三节 CSS选择器
主要用于选择需要添加样式的html元素
3.1 基本选择器
3.1.1 标签选择器
在head中使用style标签引入在其中声明标签选择器:
html标签{属性:属性值}，
具体示例如下:
<style type="text/css">
span{color: red;font-size: 100px}
</style>
3.1.2 id选择器
给需要修改样式的html元素添加id属性标识，在head中使用style标签引入在其中声明id选择器: #id值{属性:属性值}
具体示例如下:
创建id选择器：
<div id="s1">hello,everyone!</div>
<div id="s2">hello,everyone!</div>
<div id="s3">hello,everyone!</div>
根据id选择器进行html文件修饰
<style type="text/css">
#s1{color: red;font-size: 100px}
#s2{color: green;font-size: 100px}
#s3{color: blue;font-size: 100px}
</style>
3.1.3 class选择器
给需要修改样式的html元素添加class属性标识，在head中使用style标签引入在其中声明class选择器: .class名{属性:属性值}，具体示例如下:
创建class选择器：
<div class="s1">hello,everyone!</div>
<div class="s2">hello,everyone!</div>
<div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰
<style type="text/css">
.s1{color: purple;font-size: 100px}
.s2{color: pink;font-size: 100px}
.s3{color: yellow;font-size: 100px}
</style>
备注:以上基本选择器的优先级从高到低:id >class >标签
3.2 属性选择器
根据元素的属性及属性值来选择元素。在head中使用style标签引入其中声明,
格式为:html标签[属性='属性值']{css属性:css属性值;}
或者html标签[属性]{css属性:css属性值;}，
具体示例如下:
body内容：
<form name="login" action="#" method="get">
<font size="3">用户名：<font>
<input type=“text" name="username" value="zhangsan" /> </br>
密码： <input type="password" name="password" value="123456" /> </br>
<input type="submit" value="登录"></input>
</form>
head中书写：
<style type="text/css">
input[type='text'] {
background-color: pink
}
input[type='password'] {
background-color: yellow
}
font[size] {
color: green
}
a[href] {
color: blue;
}
</style>
3.3 伪元素选择器
主要是针对a标签
语法：
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}
具体示例如下：
<a href="https://hao.360.cn/">点我吧</a>
<style type="text/css">
<!--静止状态 -->
a:link {color: red;}
<!--悬浮状态 -->
a:hover {color: green;}
<!--触发状态 -->
a:active {color: yellow;}
<!--完成状态 -->
a:visited {color: blue;}
</style>
3.4 层级选择器
具体示例如下：
后代选择器
div p{...} 表示div中的p标签，所有的p,后代
div span{....} 表示div中的span标签，包括所有的span，后代
子代选择器
div>span{....} 表示 div中有一个span， span是子代
相邻兄弟 +
通用兄弟 ~
<div id="div1">
<div class="div11">
<span>span1-1</span>
</div>
<div class="div12">
<span>span1-2</span>
</div>
</div>
<div class="div2">
<div id="div22">
<span>span2-1</span>
</div>
<div id="div23">
<span>span2-2</span>
</div>
</div>
<style type="text/css">
#div1 .div11{color:red;}
#div1 .div12{color:purple;}
.div2 #div22{color:green;}
.div2 #div23{color:blue;}
</style>
3.5其他选择器
全局选择器
* {
font-size: 35px;
margin: 0;
padding: 0;
}
群组选择器
h1,h2 {
background-color: red;
}
第四节 CSS属性
4.1 文字和文本属性
文字属性
1>.font-size:设置字体大小
2>.font-family:设置文字的字体,常见的值为 :黑体，宋体，楷体等
3>.font-style:规定斜体字,常见的值：
normal - 文本正常显示
italic - 文本斜体显示 字体斜体
oblique - 文本倾斜显示 变形斜体
4>.font-weight 属性设置文本的粗细。关键字 100 ~ 900 为字体指定了 9 级加粗度。
100 对应最细的字体变形，900 对应最粗的字体变形。
数字 400 等价于 normal，而 700 等价于 bold。
备注：
斜体（italic）是对每个字母的结构有一些小改动，来反映变化的外观。
倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样
简写：
font: italic bold 30px "幼圆","黑体"; /*style weight size family swsf*/
文本属性
1>.color:设置文本颜色
2>.text-indent:缩进元素中文本的首行,取值类型如下：
1》text-indent:5em;表示此段落第一行缩进5个字符的宽度
2》text-indent:20%:表示此段落第一行缩进父容器宽度的百分之二十
3>.text-decoration:
none:会关闭原本应用到一个元素上的所有装饰
underline: 添加下划线
overline:在文本的顶端画一个上划线
line-through:在文本中间画一个贯穿线
blink:让文本闪烁(无效果)
4>.text-align:一个元素中的文本行互相之间的对齐方式,值有left(左对齐)、right(右对齐) 和 center(居中)
5>.word-spacing: 字符之间的间隔
6>.letter-spacing: 单词或者字母之间的间隔
7>.line-height:设置行高 line-height:25px;
4.2 背景属性
1>.background-color：设置背景颜色，默认透明
2>.background-image:url("图片路径"):设置背景图片
3>.background-repeat:repeat-y:只在垂直方向都平铺
repeat-x:只在水平方向都平铺
repeat:在水平垂直方向都平铺
no-repeat:任何方向都不平铺
4>.background-position: 改变图像在背景中的位置。top、bottom、left、right 和 center
/*简写 没有顺序*/
background: red center no-repeat url(img/003.jpg);
4.3 列表属性
list-style-type:decimal;改变列表的标志类型
list-style-image: url("images/dog.gif");用图像表示标志
list-style-position: inside;确定标志出现在列表项内容之外还是内容内部
简写
list-style: decimal url(img/001.png) inside;
去掉样式:
list-style:none;
list-style-type:none;
4.4 尺寸显示轮廓属性
width:设置元素的宽度
height:设置元素的高度
显示属性(display)
display: none 不显示
block:块级显示
inline:行级显示
inline-block:行级块
轮廓（outline）
绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。常用属性：
outline-style:solid(实线)/dotted(虚线)/dashed(虚线，虚线的每段较长)/double(框为空心);设置轮廓的样outline-color:red;设置轮廓的颜色
outline-width:10px设置轮廓的宽度
4.5 浮动属性
浮动(float)的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在标准文档流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
clear 属性
规定元素的哪一侧不允许其他浮动元素。
可能的值
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
4.6 定位属性
postion: static | relative| absolute| fixed
4.6.1 静态定位（默认定位方式）static
4.6.2 相对定位(relative)
相对于原来的位置偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
4.6.3 绝对定位(absolute)
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是视窗本身。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于视窗本身。
4.6.4 固定定位(fixed)
元素框的表现类似于将 position 设置为 absolute，不过其位置相对于视窗本身。
第五节 CSS盒子模型
5.1 边框属性
border-style:边框样式，值有以下情况：
solid:实线
double:空心线
dashed:虚线组成的边框
dotted:圆点组成的边框
border-color:边框颜色
border-width:边框宽度
简写
border: 1px solid red;
5.2 外边距属性
margin:外间距,边框和边框外层的元素的距离 margin:四个方向的距离(top right bottom left) margin-top: margin-bottom: margin-left: margin-right:
5.3 内边距属性
padding:内间距,元素内容和边框之间的距离((top right bottom left)) padding-left: padding-right: padding-top: padding-bottom:
盒子模型的实际的宽度：width+2*（padding+border+margin）
盒子模型的实际的高度：height+2*（padding+border+margin）
实现div水平居中显示 ： /*使用margin实现水平居中*/
margin: 0 auto; /*0 上下 0 左右 auto*/
如何实现div垂直居中显示 ： /*弹性盒子*/ display: flex;
/*垂直对齐*/ align-items: center;
/*水平对齐*/ justify-content: center;
第六节 CSS3扩展属性
圆角属性：border-radius
用于向方框添加阴影：box-shadow
属性规定背景图片的尺寸： background-size
为指定元素使用多个背景图像： background-image
可向文本应用阴影： text-shadow
第三章 javaScript
第一节 JavaScript概述
1.1 JavaScript简介
JavaScript(LiveScript)一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
1.2 JavaScript发展史
它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型（DOM Document Object Model），浏览器对象模型(BOM Browser Object Model)。
第二节 JavaScript基本语法
2.1 变量声明
在JavaScript中，任何变量都用var关键字来声明，var是variable的缩写。
var num; //声明变量 num=10;//赋值 var s="zhangsan";//声明的同时赋值
var是声明关键字，a是变量名，语句以分号结尾，分号可以省略。
这里值得注意的是，JavaScript中的关键字，不可以作为变量名。就像在Java中你不可以写"int int=1;"一样。
JavaScript的关键字和保留字：
abstract、else、instanceof、super、boolean、enum、int、switch、break、export、interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、final、native、throws、char、finally、new、transient、class、float、null、true、const、for、package、try、continue、function、private、typeof、debugger、goto、protected、var、default、if、public、void、delete、implements、return、volatile、do、import、short、while、double、in、static、with。
JavaScript中的注释有两种：
单行注释//
多行注释/* ... */
2.2 数据类型
2.2.1 基本（原始）类型
变量的基本类型有number、string、boolean、undefined、null五种。
2.2.2 引用（对象）类型
1 创建对象方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript引用(对象)类型</title>
<script type="text/javascript">
//1创建(类)对象定义
function Person(){
//属性
this.age;
this.name;
this.address;
//函数(匿名函数)
this.show=function(){
document.write(this.age+"...."+this.name+"....."+this.address);
}
}
/*function Student(){
}
Student.prototype=new Person();*/
//2创建对象
var zhangsan=new Person();
zhangsan.age=20;
zhangsan.name="张三";
zhangsan.address="北京";
zhangsan.show();
</script>
</head>
<body>
</body>
</html>2 使用json对象直接写出来：
var student={id:1,name:"张三",age:18};
document.write(student.id);
document.write(student.name);
document.write(student.age);
事实上，student被赋值为了一个JSON，JSON就是我们在Java基础阶段学过的，全称是JavaScript Object Notation，叫做JavaScript对象标记，也就是说，在JavaScript中，JSON是用于标记一个对象的。
数组类型
数组就是和我们之前理解的数组概念一致，而在JavaScript中成为Array类型。、
var cities=new Array(3);
document.write(cities.length);
//添加数据
cities[0]=10;
cities[1]=20;
cities[2]=30;
cities[3]=40;
cities[4]=50;
document.write("<br/>");
document.write(cities.length);
2.2.3 JavaScript的三种使用方式
第一种方式：在<script>标签中，script可以放在网页中任何位置。
<script type="text/javascript">
var num=10;
var d=new Date();
document.write(num);
</script>
第二种方式：使用外部JavaScript文件，把js代码放入单独的文件中 ，这个文件的扩展名.js
<script type="text/javascript" src="js/myjs.js"></script>
第三种方式： 放在标签中的事件属性中,常见事件 ,onclick
<input type="button" value="你点我啊" οnclick="alert('你点我干嘛')" />
第三节 JavaScript函数和事件
3.1 函数
包含一段功能的代码。目的：重复使用
3.1.1 函数定义
用function关键字来声明，后面是函数名字，参数列表里不写var。整个方法不写返回值类型。
3.1.2 匿名函数
/*匿名函数*/
var method1=function(){
document.write("这是一个匿名函数");
}
method1();
/*匿名函数(自执行匿名函数)*/
(function(s){
document.write("这是一个自执行匿名函数"+s);
})("hahaha");
3.1.3 全局变量和局部变量
函数内部声明的变量是局部变量,所以只能在函数内部访问它。 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它
3.1.4 闭包 （Closure）
闭包就是能够读取其他函数内部局部变量的函数; 闭包可以理解成“定义在一个函数内部的函数“。
闭包三个条件：
1 闭包是一个内部函数
2 闭包能够读取其他（外部）函数的局部变量
3 闭包和局部变量在同一个作用域。
使用形式：1 闭包作为函数的返回值；2闭包作为函数的参数。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>闭包练习</title>
</head>
<body>
<script type="text/javascript">
function f1(){
var n=10; // n 的使用范围只能在f1之中
function f2(){
n++;
document.write(n+"<br />");
}
return f2;
}
var f3=f1();
f3();
f3();
f3();
f3();
</script>
</body>
</html>
闭包好处：1 使局部变量常驻内存，2 避免污染全局变量 3 .提高封装性保护局部变量 。
3.2 系统函数
3.2.1 弹框函数
提示框 alert();
确认框 confirm();
这是一个你可以点击确定或者取消的弹窗
输入框 prompt()
这是一个你可以输入文本内容的弹窗
3.2.4其他系统函数
parseInt(); 字符串转换整数
parseFloat(); 字符串转成小数
isNaN(); 判断数字是不是不是一个数字。
3.3 事件
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素内容改变(离开光标触发) |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 光标移动到HTML元素 |
| onmouseout | 光标离开HTML元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
3.4 字符串、正则表达式
var str="hello,我爱java";//原始类型
var str2=new String("hello");//引用类型对象类型
var str3=String("hello");//原始类型
document.write(str==str2);
document.write("<br/>");
document.write(str===str2);
document.write("<br/>");
document.write(typeof(str2));
document.write("<br/>");
//document.write(str instanceof String);
document.write("长度:"+str.length);
document.write("<br/>");
document.write("指定位置的字符:"+str.charAt(0));
document.write("<br/>");
document.write("indexOf:"+str.indexOf("java"));
document.write("<br/>");
var ss=str.split(",");
document.write(ss.length);
document.write("<br/>");
var s1=str.substr(6,6);
document.write(s1);
var s2=str.substring(6,12);
document.write(s2);
3.4.2 RegExp 对象
Regular Expression 正则表达式
正则表达式是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
语法：
var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers;
3.4.3 正则表达式的使用
test()方法：
test()方法搜索字符串指定的值，根据结果并返回真或假。
exec() 方法：
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
第四节 JavaScript的DOM和BOM
第一节 JavaScript的DOM
JavaScript主要包括三部分内容:ECMAScript、DOM、BOM
1.1 DOM概述
通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
-
JavaScript 能够改变页面中的所有 HTML 元素。
-
JavaScript 能够改变页面中的所有 HTML 属性。
-
JavaScript 能够改变页面中的所有 CSS 样式。
-
JavaScript 能够对页面中的所有事件做出反应。
1.2 获取HTML元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
-
通过 id 找到 HTML 元素
-
通过标签名找到 HTML 元素
-
通过类名找到HTML 元素
4.2.1 id找到HTML元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
本例查找 id="intro" 元素：
var x=document.getElementById("intro");
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。
1.2.2 标签名找到 HTML 元素
本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
1.2.3 类名找到HTML 元素
本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：
var x=document.getElementsByClassName("intro");
1.3 修改HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
1.3.1 改变HTML内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML="abcd";
document.getElementById(id).innerText="xxxx";
1.3.2 改变HTML属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=新属性值
1.4 修改CSS样式
改变HTML的样式：
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=新样式
1.5 元素操作
1.5.1 创建新元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>1.6 DOM事件
HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件：
-
元素被点击。
-
页面加载完成。
-
输入框被修改。
1.7 EventListener
addEventListener() 方法
在用户点击按钮时触发监听事件：
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
语法：
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown"). 把on去掉
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
当用户点击元素时弹出 "Hello World!" :
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件：
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
事件冒泡或事件捕获？
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 *冒泡 *中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 *捕获 *中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
element.removeEventListener("mousemove", myFunction);
第二节 JavaScript的BOM
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
2.1 window
有三种方法能够确定浏览器窗口的尺寸。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
-
window.innerHeight - 浏览器窗口的内部高度(不包括滚动条、菜单栏、工具栏)
-
window.innerWidth - 浏览器窗口的内部宽度(不包括滚动条、菜单栏、工具栏)
对于 Internet Explorer 8、7、6、5：
-
document.documentElement.clientHeight
-
document.documentElement.clientWidth
或者
-
document.body.clientHeight
-
document.body.clientWidth
Location：
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
3.1JavaScript计时函数
setInterval() 周期执行函数
setTimeout() 延迟执行函数
延迟执行指定的函数，只能执行一次。
示例： 动态加载时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="click" style="background-color: deepskyblue; width: 500px; height: 300px;line-height: 250px;">
</div>
<input id="bt1" type="button" value="暂停" onclick="stop()"/>
<input id="bt2" type="button" value="开始" disabled="true" onclick="start()"/>
<script type="text/javascript">
var click=document.getElementById("click");
//获取时间
function show(){
var d=new Date();
var year=d.getFullYear();
var month=d.getMonth();
var day=d.getDate();
var hours=d.getHours();
var minutes=d.getMinutes();
var s=d.getSeconds();
click.innerHTML="<h3>"+year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+s+"</h3>";
}
var tid=setInterval("show()",1000);
function stop(){
clearInterval(tid);
bt1.disabled=true;
bt2.disabled=false;
}
function start(){
tid=setInterval("show()",1000);
bt2.disabled=true;
bt1.disabled=false;
}
</script>
</body>
</html>
248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
