1.HTML部分
- 1.HTML简介
- 2.实例介绍
- 3.标题
- 4.段落
- 5.链接
- 6.图像
- 7.表格
- 8.速查列表
- - 1.基本文档
  - 2.基本标签
  - 3.文本格式化
  - 4.链接
  - 5.图片
  - 6.无序列表
  - 7.有序列表
  - 8.定义列表
  - 9.表格
  - 10.框架
  - 11.表单
2.CSS部分
- 1.CSS简介
- - 1.什么是CSS
  - 2.为什么使用CSS
  - 3.CSS作用
- 2.基本用法
- - 1.CSS语法
  - 2.CSS应用方式
  - - 1. 内部样式
    - 2.行内样式
    - 3.外部样式
    - - 1.使用 link标签链接外部样式文件
      - 2.@import 指令导入外部样式文件
      - 3.使用举例
- 3.选择器
- - 1.基础选择器
  - - 1.标签选择器
    - 2.类选择器
    - 3.ID选择器
    - 4.使用举例
  - 2.复杂选择器
  - - 1.复合选择器
    - 2.组合选择器
    - 3.嵌套选择器
    - 4.使用举例
    - 5.伪类选择器
    - 6.伪元素选择器
  - 3.选择器优先级
  - - 1.优先级
    - 2.可以使用!important使某个样式有最高的优先级
- 4.常用CSS属性
- - 1.字体属性
  - - 1.font-size:大小、尺寸
    - 2.font-weight:粗细
    - 3.font-family:字体
    - 4.font-style:样式
    - 5.font:组合
  - 2.文本属性
  - - 1.使用举例
  - 3.背景属性
  - 4.列表属性
  - 5.表格属性
- 5.盒子模型
- - 1.简介
  - 2.border
  - 3.padding
  - 4.margin
- 6.定位方式
- 7.其他CSS属性
- - 1.浮动属性和清除属性
  - 2.元素的显示和隐藏
  - - 1.display
    - 2.visibility
    - 3.display和display的区别
    - 4.代码举例
  - 3.轮廓属性
  - - 1.简介
    - 2.基本用法
    - 3.outline和border的区别
    - 4.代码举例
  - 4.宽高相关
  - 5.overflow属性
  - 6.cursor属性
- 8.页面布局
- - 1.简介
  - 2.表格布局
  - - 1.简介
    - 2.用法
    - 3.代码举例
  - 3.div布局
  - - 1.简单布局
    - - 1. 1-1-1布局
      - 2. 1-2/ 3-1布局
  - 4.圣杯布局
3.JavaScript部分
- 1.简介
- 2.使用方式
- - 1.标签引用
  - 2.文件引入
- 3.输出
- - 1.向页面输出
  - 2.向控制台输出
  - 3.弹出窗口输出
- 4.使用var关键字声明一个变量
- 5.数据类型
- - 1.类型分类
  - 2.typeof运算符
- 6.对象基础
- - 1.创建对象
  - 2.访问属性
  - 3.删除属性
  - 4.遍历对象
- 7.函数
- - 1.函数创建
  - 2.函数调用
  - 3.匿名函数
- 8.垃圾回收
- 9.数组对象
- - 1.创建数组
  - 2.遍历数组
  - 3.数组方法
- 10.Date对象
- 11.Math对象
- 12.RegExp对象
- 13.JavaScript DOM

补习一下前端基础知识。
说明：

HTMl部分摘抄并改编自HTML零基础入门教程（详细），在原教程的基础上进行学习。
CSS部分摘抄并改编自CSS入门学习笔记+案例，在原教程的基础上进行学习。

在这里插入图片描述

1.HTML部分

1.HTML简介

HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

2.实例介绍

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TestView</title>
    </head>
    <body>
        <h1>我得第一个元素</h1>
        <p>我的第一个段落</p>
    </body>
</html>

其中：

< !DOCTYPE html>声明为HTML5文档。
< html>元素是HTML页面的根元素。
< head>元素包含了文档的元数据，如< meta charset=“utf-8”>定义网页编码格式为utf-8(防止出现中文乱码)。
< title>元素描述了文档的标题。
< body>元素包含了可见的页面内容。
< h1>元素定义了一个大标题。
< p>元素定义了一个段落。

3.标题

HTML标题是通过< h1>~< h6>标签来定义的。例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TestView</title>
    </head>
    <body>
        <h1>这是标题1</h1>
        <h2>这是标题2</h2>
        <h3>这是标题3</h3>
        <h4>这是标题4</h4>
        <h5>这是标题5</h5>
        <h6>这是标题6</h6>
    </body>
</html>

4.段落

HTML段落是通过标签< p>来定义的。例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TestView</title>
    </head>
    <body>
        <p>这是一个段落。</p>
        <p>这是一个段落。</p>
        <p>这是一个段落。</p>
    </body>
</html>

5.链接

HTML链接是通过标签< a>来定义的。例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TestView</title>
    </head>
    <body>
        <a href="https://www.zhihu.com/">这是一个知乎主页链接</a>
    </body>
</html>

6.图像

HTML图像是通过标签< img>来定义的。注意：图像的名称和尺寸是以属性的形式提供的。例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TestView</title>
    </head>
    <body>
        <img src="head.jpg" width="640" height="640"/>
    </body>
</html>

7.表格

表格由 < table> 标签来定义。每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 < th> 标签进行定义。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TestView</title>
    </head>
    <body>
        <table border="3">
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
            <tr>
                <td>row 1,cell 1</td>
                <td>row 1,cell 2</td>
            </tr>
            <tr>
                <td>row 2,cell 1</td>
                <td>row 2,cell 2</td>
            </tr>
        </table>
    </body>
</html>

8.速查列表

1.基本文档

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

2.基本标签

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
    <h1>最大的标题</h1>
    <h2> . . . </h2>
    <h3> . . . </h3>
    <h4> . . . </h4>
    <h5> . . . </h5>
    <h6>最小的标题</h6>
     
    <p>这是一个段落。</p>
    <br> （换行）
    <hr> （水平线）
    <!-- 这是注释 -->
</body>
</html>

3.文本格式化

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
    <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> （上标文本）
</body>
</html>

4.链接

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
    普通的链接：<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>
</body>
</html>

5.图片

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
    <img src="URL" alt="替换文本" height="42" width="42">
</body>
</html>

6.无序列表

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
    <ul>
        <li>项目</li>
        <li>项目</li>
    </ul>
</body>
</html>

7.有序列表

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
    <ol>
        <li>第一项</li>
        <li>第二项</li>
    </ol>
</body>
</html>

8.定义列表

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
    <dl>
        <dt>项目 1</dt>
          <dd>描述项目 1</dd>
        <dt>项目 2</dt>
          <dd>描述项目 2</dd>
      </dl>
</body>
</html>

9.表格

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
    <table border="1">
        <tr>
          <th>表格标题</th>
          <th>表格标题</th>
        </tr>
        <tr>
          <td>表格数据</td>
          <td>表格数据</td>
        </tr>
      </table>
</body>
</html>

10.框架

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

11.表单

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
    <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>
</body>
</html>

2.CSS部分

1.CSS简介

1.什么是CSS

CSS是一组样式设置的规则，用于控制页面的外观样式.

2.为什么使用CSS

实现内容与样式的分离，便于团队开发。

样式复用，便于网站的后期维护。

页面的精确控制，让页面更精美。

3.CSS作用

页面外观美化。
布局和定位。

2.基本用法

1.CSS语法

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>

选择器：要修饰的对象（东西）。
属性名：修饰对象的哪一个属性（样式）。
属性值：样式的取值。

例如：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            p{
                color: red;
                background: #cccccc;
            }
            h2{
                color: blue;
            }
        </style>
    </head>
    <body>
        <p>CSS从入门到精通</p>
        <h2>摸鱼</h2>
    </body>
</html>

运行结果：

在这里插入图片描述

2.CSS应用方式

有三种方式：内部样式、行内样式、外部样式。

1. 内部样式

也称为内嵌样式，在页面头部通过style标签定义。对当前页面中所有符合样式选择器的标签都起作用。
行内样式举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            p{
                color: red;
                background: #cccccc;
            }
            h2{
                color: blue;
            }
        </style>
    </head>
    <body>
        <p>CSS从入门到精通</p>
        <h2>摸鱼</h2>
    </body>
</html>

2.行内样式

也称为嵌入样式，使用HTML标签的style属性定义。只对设置style属性的标签起作用。
行内样式举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <p style="color: rgb(34, 33, 33);">CSS从入门到精通</p>
        <h2 style="color: blue;">摸鱼</h2>
    </body>
</html>

3.外部样式

使用单独的 .CSS 文件定义，然后在页面中使用 link标签或 @import指令引入。

1.使用 link标签链接外部样式文件

<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

提示：type属性可以省略

2.@import 指令导入外部样式文件

<style>
	@import "CSS样式文件路径";
	@import url(CSS样式文件路径);
</style>

3.使用举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- <link rel="stylesheet" type="text/css" href="style/hello.css"> -->
	<style>
		@import url(style/hello.css);
	</style>
</head>
<body>
	<p>welcome to CSS!</p>
	<p>欢迎来到CSS课堂!</p>
	<hr>
	<h2 style="color:red;">WEB前段工程师</h2>
	<h2>JAVA开发工程师</h2>
	<hr>
	<div>嘿嘿</div>
	<div>哈哈</div>
</body>
</html>

3.选择器

1.基础选择器

1.标签选择器

也称为元素选择器，使用HTML标签作为选择器的名称。以标签名作为样式应用的依据。

2.类选择器

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器。
以标签的class属性作为样式应用的依据。

注意事项：

调用时不能添加 . 号。
同时调用多个类选择器时,以空格分隔。
类选择器名称不能以数字开头。

3.ID选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配。

以标签的id属性作为样式应用的依据，一对一的关系。

4.使用举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			color:red;
			font-size:20px;
		}
		h2{
			color:yellow;
		}
		.hello{
			background: #cccccc;
		}
		.world{
			font-weight:bold;
		}
		#haha{
			color:blue;
		}
	</style>
</head>
<body>
	<p>welcome to css!</p>
	<p>hello world!</p>
	<hr>
	<p class="hello">welcome to css!</p>
	<p>hello world!</p>
	<h2>前端开发</h2>
	<h3>后端开发</h3>
	<div class="hello">张三</div>
	<div class="world">李四</div>
	<hr>
	<h1 id="haha">哈哈</h1>
</body>
</html>

运行结果：

在这里插入图片描述

2.复杂选择器

1.复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用。

必须同时满足两个条件才能应用样式。

2.组合选择器

也称为集体声明。
将多个具有相同样式的选择器放在一起声明，使用逗号隔开。

3.嵌套选择器

在某个选择器内部再设置选择器，通过空格隔开。

只有满足层次关系最里层的选择器所对应的标签才会应用样式。

注意：使用空格时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行。

4.使用举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* 1.标签选择器和类选择器合起来使用----复合选择器 */
		h1.aaa{
			color:red;
		}
		/* 1.标签选择器和ID选择器合起来使用----复合选择器 */
		p#bbb{
			color:blue;
		}
		/* 2.组合选择器 */
		h1,p,div,span,.ccc{
			font-size:30px;
		}
		div{
			background:violet;
		}
		.ccc{
			font-weight:bold;
		}
		/* 3.嵌套选择器 */
		/* div p{
			color:green;
			text-decoration:underline;
		} */
		div>p{
			color:green;
			text-decoration:underline;
		}
		div h3.ddd{
			color:red;
		}
	</style>
</head>
<body>
	<!-- 需求：只想修饰class属性为aaa的h1标签 -->
	<h1 class="aaa">welcome</h1>
	<h4 class="aaa">css</h4>
	<h1>hello</h1>
	<hr>
	<!-- 我要修饰ID属性为bbb的p标签 -->
	<p id="bbb">world</p >
	<p>html</p>
	<hr>
	<!-- 给h1、p、div、span标签中的内容设置字号为30px -->
	<h1>hello</h1>
	<p>CSS</p>
	<div>WEB开发</div>
	<span class="ccc">JAVA开发</span>
	<hr>
	<!-- 需求：修饰div内部的p标签 -->
	<div>
		<p>div内部的p标签</p>
		<h3>div内部的h3标签</h3>
	</div>
	<hr>
	<div>
		<h3>
			<p>div内部的h3内部的p标签</p>
		</h3>
	</div>
	<hr>
	<!-- 需求：修饰div内部的class为ddd的标签 -->
	<div>
		<p>div内部的p</p>
		<h3 class="ddd">div内部的h3</h3>
		<p class="ddd">PPPP</p>
	</div>
	<h3 class="ddd">h3h3h3</h3>
</body>
</html>

运行结果：

在这里插入图片描述

5.伪类选择器

根据不同的状态显示不同的样式，一般多用于标签。

四种状态：

:link 未访问的链接。
:visited 已访问的链接。
:hover 鼠标悬浮到连接上，即移动在连接上。
:active 选定的链接，被激活。

注：默认超链接为：蓝色、下划线。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style>
		/*a:link{
			font-size: 12px;
			color:black;
			text-decoration: none;
		}
		a:visited{
			font-size: 15px;
			color:;
		}
		a:hover{
			font-size: 20px;
			color:blue;
		}
		a:active{
			font-size: 40px;
			color:green;
		}*/
		a:link,a:visited{
			color:#666666;
			font-size: 13px;
			text-decoration: none;
		}
		a:hover,a:active{
			color:#ff7300;
			text-decoration: underline;
		}
		/*普通的标签也可以使用伪类选择器*/
		p:hover{
			color:red;
		}
		p:active{
			color:blue;
		}
	</style>
</head>
<body>
	<a href="复杂选择器.html">复杂选择器.html</a>
	<p>CSS从入门到精通！</p>
</body>
</html>

6.伪元素选择器

:first-letter 为第一个字符的样式。
:first-line 为第一行添加样式。
:before 在元素内容的最前面添加的内容，需要配合content属性使用。
:after 在元素内容的最后面添加的内容，需要配合content属性使用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p:first-letter{
			color:red;
			font-size:30px;
		}
		p:first-line{
			background:pink;
		}
		p:before{
			content:"嘿嘿";
		}
		p:after{
			content:"哈哈";
		}
	</style>
</head>
<body>
	<p>hello world!</p>
	<hr>
	<p>
		hello world! <br>
		welcome to css!
	</p>
</body>
</html>

运行结果：

在这里插入图片描述

3.选择器优先级

1.优先级

行内样式>ID选择器>类选择器>标签选择器。

原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式。后加载会覆盖先加载的同名样式。

2.可以使用!important使某个样式有最高的优先级

4.常用CSS属性

1.字体属性

在这里插入图片描述

1.font-size:大小、尺寸

取值：

inherited继承，默认从父标签继承字体大小（默认值），所有CSS属性的默认值都是inherited：
px像素 pixel。
%百分比，相对父标签字体大小的百分比。
em倍数，相对于父标签字体大小的倍数。
HTML根元素默认字体的大小为16px,也称为基础字体大小。

2.font-weight:粗细

3.font-family:字体

4.font-style:样式

5.font:组合

是font-style、font-weight、font-size、font-family的组合编写。
必须按照先后顺序来，顺序为：font-style、font-weight、font-size、font-family,例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			font-size: 30px;
		}
		p{
			/*font-size: 20px;*/
			font-size: 80%;
		}
		body{
			font-size: 62.5%;
		}
		ul li{
			/*font-size: 30px;
			font-weight: bold;
			font-family: 华文行楷,宋体,黑体;
			font-style: italic;*/
			font: italic bold 30px 微软雅黑;
		}
	</style>
</head>
<body>
	<p>
		CSS从入门到精通！
	</p>
	<hr>

	<div>
		我的DIV
		<p>
			CSS从入门到精通
		</p>
	</div>
	<hr>
	<hr>

	<ul>
		<li>
			嘿嘿
		</li>
	</ul>
</body>
</html>

2.文本属性

在这里插入图片描述

1.使用举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			color: red;
			/*background-color: #ccc;*/
			/*background-color: rgba(0,255,0,0.5);*/
			background-color: rgba(0, 237, 255, 0.5);
			line-height: 50px;
			text-align: center;
		}
		img{
			vertical-align: middle;
		}
		div{
			text-indent: 30px;
		}
		span{
			font-size: 30px;
			text-decoration: underline;
			text-transform: capitalize;
			letter-spacing: 10px;
			world-spacing:;
		}
		h3{
			width: 300px;
			height: 200px;
			background-color:#ccc;
			white-space: nowrap;
			overflow:hidden;
		}
	</style>
</head>
<body>
	<p>welcome to css!</p>
	<p>welcome to css!</p>
	<p>welcome to css!</p>
	<hr>

	<img src="head.jpg" width="15%">
	HTML和CSS很简单吗？
	<hr>


	<div>&nbsp;&nbsp;welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS</div>
	<hr>
	<div>welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS</div>
	<hr>

	<span>hello world</span>
	<hr>

	<h3>welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS</h3>
	<hr>
</body>
</html>

运行结果：

在这里插入图片描述

3.背景属性

在这里插入图片描述

4.列表属性

在这里插入图片描述

5.表格属性

border-collapse:表格中相邻的边框是否合并（折叠）为单一边框。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		table{
			width:500px;
			border:1px solid blue;
			border-collapse:collapse;
		}
		td{
			border:1px solid blue;
		}
	</style>
</head>
<body>
	<!-- table>(tr>td{td$}*5)*4 -->
	<table cellspacing="0px"cellpadding="0px">
		<tr>
			<td>bbb</td>
			<td>aaa</td>
			<td>aaa</td>
			<td>td4</td>
			<td>td5</td>
		</tr>
		<tr>
			<td>aaa</td>
			<td>aaa</td>
			<td>bbb</td>
			<td>td4</td>
			<td>td5</td>
		</tr>
		<tr>
			<td>td1</td>
			<td>td2</td>
			<td>td3</td>
			<td>td4</td>
			<td>td5</td>
		</tr>
		<tr>
			<td>td1</td>
			<td>td2</td>
			<td>td3</td>
			<td>td4</td>
			<td>td5</td>
		</tr>
	</table>
</body>
</html>

运行结果：

在这里插入图片描述

5.盒子模型

1.简介

盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：

width 宽度。
height 高度。
border 边框。
padding 内边距。
margin 外边距。

2.border

表示盒子的边框。

分为四个方向：上top、右right、下bottom、左left。
border-top、border-right、border-bottom、border-left。

每个边框包含三种样式：
border-top-color、border-top-width、border-top-style
border-right-color、border-right-width、border-right-style
border-bottom-color、border-bottom-width、border-bottom-style
border-left-color、border-left-width、border-left-style

样式style的取值：
solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线。

3.padding

表示盒子的内边距，即内容与边框之间的距离。

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）。

4.margin

表示盒子的外边距，即盒子与盒子之间的距离。

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）。

6.定位方式

通过position属性实现对元素的定位，有四种定位方式。

在这里插入图片描述

代码举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        /* id选择器 */
        #container {
            width: 800px;
            border: 2px solid #000000;
            position:relative;
        }
        /* 类选择器 */
        .div1,
        .div2,
        .div3,
        .div4 {
            width: 100px;
            height: 50px;
        }

        .div1 {
            background: red;
            position: relative;
            top: 20px;
            left: 50px;
            z-index: -5;
        }

        .div2 {
            background: blue;
            position: absolute;
            left: 100px;
            bottom: 50px;
            z-index: 100px;
        }

        .div3 {
            background: green;
            position: fixed;
            bottom: 50px;
            left: 100px;
        }

        .div4 {
            background: cyan;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div class="div4">div4</div>
    </div>
</body>

</html>

运行结果：

7.其他CSS属性

1.浮动属性和清除属性

通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，如果一行显示不下，则会换行显示。
通过clear属性来实现清除，设置元素的哪一侧不允许有浮动元素。

2.元素的显示和隐藏

1.display

通过display属性设置元素是否显示，以及是否独占一行。

常用取值：

2.visibility

也可以通过visibility属性设置元素的显示和隐藏。

常用属性：

在这里插入图片描述

3.display和display的区别

display隐藏时不再占据页面中的空间，后面的元素会占用其位置。

visibility隐藏时会占据页面中的空间，位置还保留在页面中，只是不显示。

4.代码举例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .div1{
                width:100px;
                height: 100px;
                background: blue;
                display: inline;
            }
            span{
                width: 100px;
                height: 100px;
                background: 50px;
                display: inline-block;
            }
            i{
                display: block;
                width: 100px;
                height: 50px;
                background: red;
            }
            p{
                width: 50px;
                height: 50px;
                background: red;
            }
            .p1{
                visibility: hidden;
            }
            .login{
                display: inline-block;
                text-decoration: none;
                background: rgba(255, 0,0, 0);
                color: #940ff2;
                padding: 10px;
                text-align: center;
                border-radius: 10px;
            }
            .login:hover{
                background: #05f14c;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <span>span1</span>
        <i>呵呵</i>
        <hr>
        <p class="p1">Hello</p>
        <p class="p2">World</p>
        <hr>
        <a href="javascript:alert('欢迎光临')" class="login">登&nbsp;&nbsp;录</a>
    </body>
</html>

运行结果：

在这里插入图片描述

3.轮廓属性

1.简介

轮廓outline,用于在元素周围绘制一个轮廓，位于border外围，可以突出显示元素。

2.基本用法

常用属性:

outline-width:轮廓宽度。
outline-color:轮廓颜色。
outline-style:轮廓样式。
outline简写。

在浏览器中，当鼠标单击或使用TAB键让一个表单或链接获得焦点时，该元素会有一个轮廓outline

优点：可以提高使用表单的用户体验。
缺点：有时会影响美观。

3.outline和border的区别

border可以应用于所有html元素，而outline主要用于表单元素、超链接元素。
当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为。
outline不影响元素的尺寸和位置，而border会影响。

4.代码举例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Documnet</title>
        <style>
            span{
                border: 2px solid red;
                outline: 4px dashed green;
            }
            .userName{
                border: 1px solid red;
                outline: none;
                padding-left: 3px;
                width: 80px;
            }
            .email{
                border: 0;
                outline: 0;
                border-bottom: 1px solid #000;
            }
            .btnsubmit{
                border: 0;
                padding: 5px;
                width: 100px;
            }
            .mydiv{
                width: 100px;
                background: #ccc;
                border: 2px solid red;
            }
        </style>
    </head>
<body>
	<span>welcome to CSS</span>
	<hr>
	用户名：<input type="text" class="username">
	<a href="#">CSS</a>
	<hr>
	邮箱：<input type="text" class="email">
	<input type="submit" value="提交" class="btnsubmit">
	<hr>
	<div class="mydiv">div</div>
</body>
</html>

运行结果：

在这里插入图片描述

4.宽高相关

max-width:设置元素的最大宽度。
max-height:设置元素的最大高度。
min-width设置元素的最小宽度。
min-height设置元素的最小高度。

5.overflow属性

当元素内容溢出时该如何处理。

常用取值：

visible溢出时可见，显示在元素外，默认值。
hidden溢出的部分不可见（常用）。
scroll无论是否出现溢出始终出现滚动条。
auto溢出时自动出现滚动条。

6.cursor属性

用于设置光标的形状。

常用属性：

default默认光标，一般为箭头。
pointer手形，光标移动超链接上时一般显示为手形。
move表示可移动。
text表示文本。
wait表示程序正忙，需要等待。
hep表示帮助。

代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			border:1px solid red;
			min-width:500px;
		}
		div{
			border:1px solid blue;
			width: 300px;
			height: 100px;
			overflow:auto;
		}
		span{
			cursor:help;
		}
	</style>
</head>
<body>
	<p>
		welcome to css welcome to css welcome to css welcome to css
		welcome to css welcome to css welcome to css welcome to css
		welcome to css welcome to css welcome to css welcome to css
		welcome to css welcome to css welcome to css welcome to css
	</p>
	<hr>
	<div>
		welcome to css welcome to css welcome to css welcome to css
		welcome to css welcome to css welcome to css welcome to css
		welcome to css welcome to css welcome to css welcome to css
		welcome to css welcome to css welcome to css welcome to css
	</div>
	<hr>
	<span>光标形状</span>
</body>
</html>

运行结果：

在这里插入图片描述

8.页面布局

1.简介

常见页面布局：

表格布局。
div布局。

2.表格布局

1.简介

不适用于复杂布局，仅用于简单、有规则的结构。

定位相对准确，与浏览器基本无关，适用于简单分隔。

2.用法

table常用样式的属性：

border在表格外围设置边框。
border-spacing设置单元格之间的距离（相当于table标签中的cellspacing属性，即间距）。
border-collapse表格中相邻边框是否合并，取值：seprate、collapse。

th/td常用样式属性：

border为单元格设置边框。
padding设置单元格的内边距（相当于table标签中的cellpadding属性，边距）。

3.代码举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.hello{
			width: 80%;
			border:1px solid #ccc;
			border-spacing:0;
			border-collapse:collapse;
		}
		.hello th,.hello td{
			border:1px solid #ccc;
			padding:5px;
		}
	</style>
</head>
<body>
	 <!-- table>(thead>tr>th{th$}*4)+tbody>(tr>td{td$}*4)*6 -->
	 <table class="hello">
	 	<thead>
	 		<tr>
	 			<th>th1</th>
	 			<th>th2</th>
	 			<th>th3</th>
	 			<th>th4</th>
	 		</tr>
	 	</thead>
	 	<tbody>
	 		<tr>
	 			<td>td1</td>
	 			<td>td2</td>
	 			<td>td3</td>
	 			<td>td4</td>
	 		</tr>
	 		<tr>
	 			<td>td1</td>
	 			<td>td2</td>
	 			<td>td3</td>
	 			<td>td4</td>
	 		</tr>
	 		<tr>
	 			<td>td1</td>
	 			<td>td2</td>
	 			<td>td3</td>
	 			<td>td4</td>
	 		</tr>
	 		<tr>
	 			<td>td1</td>
	 			<td>td2</td>
	 			<td>td3</td>
	 			<td>td4</td>
	 		</tr>
	 		<tr>
	 			<td>td1</td>
	 			<td>td2</td>
	 			<td>td3</td>
	 			<td>td4</td>
	 		</tr>
	 		<tr>
	 			<td>td1</td>
	 			<td>td2</td>
	 			<td>td3</td>
	 			<td>td4</td>
	 		</tr>
	 	</tbody>
	 </table>
</body>
</html>

运行结果：

在这里插入图片描述

3.div布局

定位绝对精确，使用灵活，适合于复杂的布局方式。

1.简单布局

1. 1-1-1布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style1.css">
</head>
<body>
	<div id="container">
		<header class="header">
			header
		</header>
		<article class="main">
			main
		</article>
		<footer class="footer">
			footer
		</footer>
	</div>
</body>
</html>

运行结果：

在这里插入图片描述

2. 1-2/ 3-1布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <link rel="stylesheet" href="css/style2.css"> 
</head>
<body>
	<div id="container">
		<header class="header">
			herder
		</header>
		<article class="wrapper">
			<section>
				main
			</section>
			<aside>
				right aside
			</aside>
		</article>
		<footer class="footer">
			footer
		</footer>
	</div>
</body>
</html>

运行结果：

在这里插入图片描述

4.圣杯布局

页面结构，两边的边栏宽度固定，中间主体在一定范围内可自适应，并且主体优先被加载。

一般防止页面缩放影响浏览，都会为页面设置一个最小宽度。

<!DOCTYPE html>
<html lang="en"> 
<head>
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<link rel="stylesheet" href="css/style4.css"> 
</head> 
<body>
	<div id="container">
		<header class="header"> 
            header 
        </header> 
		<article class="wrapper"> 
			<section class="main">
				main
			</section>
			<aside class="left"> 
				left
			</aside>  
			<aside class="right"> 
				right
			</aside> 
		</article>
		<footer class="footer"> 
            footer 
        </footer>  
    </div>
</body> 
</html>

运行结果：

在这里插入图片描述

3.JavaScript部分

1.简介

解释性语言。
动态语言。
面向对象的语言。
严格区分大小写。

2.使用方式

1.标签引用

直接在HTML中引入script标签就可以使用JS代码。例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
</head>
<body>
	<script>
		alert('Hello World!')
	</script>
	<input type="button" value="hello" />
</body>
</html>

2.文件引入

在一个单独的JS文件中编写代码，然后在HTMl中引入该文件。例如：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="test.js"></script>	
</head>
<body>
	<input type="button" value="hello" />
</body>
</html>

3.输出

1.向页面输出

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		document.write("测试!");//向页面输出
	</script>
	<input type="button" value="hello" />
</body>
</html>

2.向控制台输出

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		console.log("这是第1条测试信息");
		console.log("这是第2条测试信息");
	</script>
	<input type="button" value="hello" />
</body>
</html>

在这里插入图片描述

3.弹出窗口输出

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		alert("测试弹窗!");
	</script>
	<input type="button" value="hello" />
</body>
</html>

4.使用var关键字声明一个变量

5.数据类型

1.类型分类

JavaScript中一共有6种基本数据类型：

字符串型（String）。
数值型（Number）。
布尔型（Boolean）。
undefined型（Undefined）。
null型（Null）。
Object类型

2.typeof运算符

使用typeof操作符可以用来检查一个变量的数据类型。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		console.log(typeof 123);
		console.log(typeof "Hello,World!");
		console.log(typeof true);
		console.log(typeof undefined);
		console.log(typeof null);
	</script>
	<input type="button" value="hello" />
</body>
</html>

在这里插入图片描述

6.对象基础

1.创建对象

有2种方式来创建对象：

方式1：

<script>
		var person = new Object();
		person.name = "孙悟空";
		person.age = 18;
		console.log(person);
	</script>`

方式2：

	<script>
		var person = {
			name: "孙悟空",
			age: 18
		};
		console.log(person);
	</script>

2.访问属性

有2种方式来放访问属性：

方式1：使用 . 来访问

对象.属性名

方式2：使用 [] 来访问

对象[‘属性名’]

3.删除属性

删除对象的属性可以用delegate关键字，格式如下：

delete 对象.属性名

代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		var person=new Object();
		person.name="孙悟空";
		person.age=18;
		console.log(person);

		delete person.name;
		console.log(person);
	</script>
	<input type="button" value="hello" />
</body>
</html>

4.遍历对象

语法格式：

for (var 变量 in 对象) {

}

代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		var person={
			age:18,
			name:"李四"
		};

		for(var item in person){
			var personval=person[item];
			console.log(item+":"+personval);
		}
	</script>
	<input type="button" value="hello" />
</body>
</html>

7.函数

1.函数创建

使用函数声明来创建一个函数：

function 函数名([形参1,形参2,...,形参N]) {
    语句...
}

代码示例：

function fun(){
    console.log("这是我的第二个函数");
}

2.使用函数表达式来创建一个函数：

var 函数名  = function([形参1,形参2,...,形参N]) {
    语句....
}

代码示例：

var fun  = function() {
    console.log("这是我的第三个函数");
}

2.函数调用

	<script>
		// 函数声明
		var fun = function () {
			console.log("哈哈，我执行啦！");
		}

		// 函数声明
		var sum = function (num1, num2) {
			var result = num1 + num2;
			console.log("num1 + num2 = " + result);
		}

		// 函数调用
		fun();
	    sum(10, 20);
	</script>

3.匿名函数

匿名函数：没有名字的函数就是匿名函数，它可以让一个变量来接收，也就是用 “函数表达式” 方式创建和接收。

代码示例：

var fun = function () {
    alert("我是一个匿名函数");
}

fun();

8.垃圾回收

垃圾回收（GC）：就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾，这些垃圾积攒过多以后，会导致程序运行的速度过慢，所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生垃圾。

当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须进行清理。

在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作，我们需要做的只是要将不再使用的对象设置null即可。

// 使用构造函数来创建对象
function Person(name, age) {
    // 设置对象的属性
    this.name = name;
    this.age = age;
}

var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);

person1 = null;
person2 = null;
person3 = null;

9.数组对象

1.创建数组

var arr = new Array();
arr[0] = 1;
arr[1] = "2";
arr[2] = 3;
arr[3] = "4";
arr[4] = 5;
arr[5] = "6";
arr[6] = 7;
arr[7] = "8";
arr[8] = 9;

2.遍历数组

	<script>
		var arr = new Array();
		arr[0] = 1;
		arr[1] = "你好";
		arr[2] = 3;
		arr[3] = "4";
		arr[4] = 5;
		arr[5] = "6";
		arr[6] = 7;
		arr[7] = "张三";
		arr[8] = 9;

		for(var item in arr){
			console.log(arr[item]);
		}

	</script>

3.数组方法

push()方法：该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度。
pop()方法：该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回。
unshift()方法演示：该方法向数组开头添加一个或多个元素，并返回新的数组长度。
shift()方法演示：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回。
forEach()方法演示：该方法可以用来遍历数组。
slice()方法演示：该方法可以用来从数组提取指定元素，该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回。
splice()方法演示：该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回。
concat()方法演示：该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响。
oin()方法演示：该方法可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用，作为连接符。
reverse()方法演示：该方法用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组。
sort()方法演示：该方法可以用来对数组中的元素进行排序，也会影响原数组，默认会按照Unicode编码进行排序。
注意：对于sort方法，即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，所以对数字进排序时，可能会得到错误的结果。

10.Date对象

在JavaScript中使用Date对象来表示一个时间，如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间。

	<script>
		var date = new Date();
		console.log(date);

		console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
		console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
		console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
		console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
		console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
		console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
		console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)
	</script>

在这里插入图片描述

11.Math对象

Math和其它的对象不同，它不是一个构造函数，它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法。

/*固定值*/
console.log("PI = " + Math.PI);
console.log("E  = " + Math.E);
console.log("===============");
/*正数*/
console.log(Math.abs(1));        //可以用来计算一个数的绝对值
console.log(Math.ceil(1.1));     //可以对一个数进行向上取整，小数位只有有值就自动进1
console.log(Math.floor(1.99));   //可以对一个数进行向下取整，小数部分会被舍掉
console.log(Math.round(1.4));    //可以对一个数进行四舍五入取整
console.log("===============");
/*负数*/
console.log(Math.abs(-1));       //可以用来计算一个数的绝对值
console.log(Math.ceil(-1.1));    //可以对一个数进行向上取整，小数部分会被舍掉
console.log(Math.floor(-1.99));  //可以对一个数进行向下取整，小数位只有有值就自动进1
console.log(Math.round(-1.4));   //可以对一个数进行四舍五入取整
console.log("===============");
/*随机数*/
//Math.random()：可以用来生成一个0-1之间的随机数
//生成一个0-x之间的随机数：Math.round(Math.random()*x)
//生成一个x-y之间的随机数：Math.round(Math.random()*(y-x)+x)
console.log(Math.round(Math.random() * 10));            //生成一个0-10之间的随机数
console.log(Math.round(Math.random() * (10 - 1) + 1));  //生成一个1-10之间的随机数
console.log("===============");
/*数学运算*/
console.log(Math.pow(12, 3));   //Math.pow(x,y)：返回x的y次幂
console.log(Math.sqrt(4));      //Math.sqrt(x) ：返回x的平方根