APP
HTML, CSS, JavaScript
一、HTML
1. HTML4常用标签
1.1 文件标签
-
<html>标签：代表当前书写的是一个HTML文档 -
<head>标签：存储的本页面的一些重要的信息，它不会显示该标签下有一个子标签
<title>用于定义页面的标题栏的名称 -
<body>标签：该标签中的书写的内容会显示出来该标签下的属性：
HTML中标签的属性值可以用
' '或" "包围-
text用于设置文字的颜色 -
bgcolor用于设置页面的背景色 -
background用于设置页面的背景图片需要在当前项目下创建文件夹存放HTML中调用的图片文件，图片的路径不能以
/开始，必须是以这个文件夹开始
-
-
示例Code
<html> <head> <title> this is title </title> </head> <body text="red" bgcolor="pink" background="image/test.JPG"> </body> </html>
1.2 排版标签
-
HTML注释
<!-- 注释内容 -->VSCode中注释的快捷键
ctrl+/ -
换行标签
<br/>标签就是一个换行（回车）功能标签，标签中的/可有可无的。有/是HTML语言的标准化，但是HTML语言是一门不那么严谨的语言 -
段落标签
在
<p>标签中的内容,会在开始与结束之间产生一个空白行，并且它会自动换行.常用属性
align它的作用是设置段落中的内容对齐方式 可取值有left（默认值是left）、right、center<html> <head> <title> this is title </title> </head> <body text="red" bgcolor="pink" background="image/test.JPG"> hello <br/> hello hello <p align="center">hello</p> <p align="left">hello</p> <p align="right">hello</p> <p align>hello</p> </body> </html> -
水平线标签
<hr>标签会在页面上产生一个水平线对于hr标签常用属性:
align：取值有left，right，center代表水平线的位置size：代表水平线厚度（粗细）width：代表水平线宽度color：水平线的颜色
单位：size="5"，单位为"像素"/"像素点"，像素就是构成计算机图片的最小单位，单位也可以使用百分比，如：size="50%"
-
分区标签
<div>是一个块标签，用来进行布局的，不加属性值的<div>并没有什么效果，肉眼也看不见，但<div>与CSS结合，就会更好对页面进行排版<div>与<span>都是“容器”的作用，区别：-
<div>标签会自动换行，是块级元素，<span>标签不会自动换行，是行内元素div中的属性：
- width：设置div宽
- height：设置div高
- background或background-color：设置div背景颜色
- margin：用于设置本div与其他元素或页面四周边框之间的边距
- padding: div中元素与本div四周边框之间的距离
VSCode快捷键：
div*n快速创建n行div -
<div>：整体划分区块，<span>：局部划分
-
1.3 字体标签
-
字体标签
<font>标签可以设置字体，字体的大小和颜色，使用该标签包围要设置的内容即可常用属性：
-
face：设置字体 -
size：设置字体的大小 -
color：设置字体的颜色表示字体颜色属性值的3种方法：
-
使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）
当颜色值为#cc3300 时，可简化成 #c30 这种方式
-
RGB颜色表示法：RGB（x,y,z）其中x、y、z是0 ～ 255之间的整数
rgb字母大小写无所谓
- 直接使用给定的值：red、blue
可以使用color属性的标签：
<font>、<body>等 -
-
-
标题标记
作用：
<h数字>标签可以给一段文字起一个标题使用方法：在
<h1>到<h6>中标题尺寸递减与普通文本的区别：自动换行，字体加粗，标题与标题之间产生一定的距离
-
格式化标签
<b>：使文本内容字体加粗<i>：使文本内容字体倾斜<del>：为文本内容添加删除线<u>：为文本内容添加下划线
在HTML中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套
<b> hi how are you doing </b> <br/> <i><b> hi how are you doing </b></i> <br/> <del><b> hi how are you doing </b></del> <br/> <u><del><b> hi how are you doing </b></del></u> <br/>
1.4 列表标签
-
列表标记中先设置列表的类型标签，再用多个子标签
<li>表示列表一行的信息 -
有序列表
<ol>标签中的属性：-
type：设置标签显示的顺序的方式常用的属性值：
- 默认值是数字
- 以英文字母顺序：
A - 以罗马字符顺序：
I
-
start：给定义一个数字，设置序列从这个数字开始
-
-
无序列表
<ul>标签中的属性：-
type：设置无序列表中的符号形状常用的属性值：
- 实心圆（默认值）：
disc - 方块：
square - 空心圆：
circle
- 实心圆（默认值）：
-
-
示例Code
<ol type="I"> <li>this is the first line</li> <li>this is the second line</li> <li>this is the third line</li> <li>this is the fourth line</li> </ol> <ul type="circle"> <li><b>this is the first line</b></li> <li>this is the second line</li> <li>this is the third line</li> <li>this is the fourth line</li> </ul>
1.5 图像标签
-
作用：
<img>：图像标签可以在页面中引入图片 -
图像标签中的属性：
-
src：用于设置图片的路径 -
width：用于设置图片的宽度 -
height：用于设置图片的高度 -
border：用于设置图片的边框 -
alt：如果图片不可以显示时，默认显示的文本信息 -
title：鼠标悬停图片上，默认显示的文本信息 -
align：图片附件文字的对齐方式，可取值有常用的属性值：
left、right、middle、top、bottom
-
1.6 超链接标签
-
<a>标签可以实现鼠标点击这段内容后进行跳转到其它页面的操作超链接内容不仅可以是文本，也可以是图片等信息
超链接标签的常用属性：
-
href：代表要跳转的路径属性值若是网站的地址，则需要加
http:// -
target：性规定在何处打开这个链接文档常用的属性值：
_blank：在新窗口中打开页面_self：在本窗口打开页面
-
1.7 表格标签
-
定义一个表格先定义
<table>，再定义多个<tr>表示多行，在每个<tr>中定义多个<td>表示每行中的每列下的数据单元<table border="1" width="250px" align="center" cellspacing="0 "> <tr align="center"> <td align="right">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>
-
<table>标签用于定义整个表格常用的属性：
-
border：边框，取值是像素为单位 -
width：代表表格的宽度，取值是像素为单位 -
align：代表该表格在整个页面中的对其方式常用的属性值：
left：左对齐right：右对齐center：居中对齐
-
cellspacing：每个单元格之间的间距（通常设置0表示单线表格）
-
-
<tr>表示表格中的行 (Table Row)常用的属性：
-
align：统一设置表格中行的所有数据单元内容的对齐方式常见的属性值同
<table>中的<align>
-
-
<td>表示表格中的数据单元 (Table DataCell)常用的属性：
-
colspan：列的合并属性值为从当前列起向右一共要合并的列数
-
rowspan：行的合并属性值为从当前行起向下一共要合并的行数
-
align：设置合并后的数据单元内容在表格中的对齐方式，或者用于单独设置表格中数据单元内容的对齐方式常见的属性值同
<table>中的<align><table border="1" width="250px" align="center" cellspacing="0 "> <tr align="center"> <td colspan="2" align="center">row</td> <td>3</td> </tr> <tr> <td>4</td> <td rowspan="2" align="center">col</td> <td>6</td> </tr> <tr> <td>7</td> <td>9</td> </tr> </table>
-
1.8 表单标签
-
表单概念
通过录入的信息将要提交的信息，即所有的数据形成一个整体，一起提交给服务器，提交到指定的位置
常见的 登录页面、注册页面 都离不开表单的应用
-
表单标签
<form><form>中的属性：-
action：将整个表单提交到目的地 -
method：表单提交的方式属性值：
get：提交时，传输数据量少，明文提交post：提交时，传输数据量大，密文提交
-
表单标签常规写法
使用段落标签，标签中的内容，会在开始与结束之间产生一个空白行，并且它会自动换行
<form> <p> <input type="xxx"> </p> <p> <input type="xxx"> </p> <p> <input type="xxx"> </p> </form>
-
-
表单标签
<form>中的子标签-
所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法区识别多个元素之间的不同）
-
<intput>：提供指定的输入模式属性type的常见属性值：
-
text：type属性的默认值，普通的文本输入框当type为
text时，还可以加入以下属性placeholder：提示用户输入文本的信息maxlength：设置最多能输入的字符数量
<p>帐号：<input name="a" type="text" placeholder="请输入帐号..." maxlength="5" ></p> -
password：密码输入框<p>密码：<input name="b" type="password"></p> -
checkbox：多选框/复选框每个带checkbox属性的input标签都代表一个选项，要使这些选项成为一组必须要同时给input加入属性值相同的name属性
所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值
type属性值为checkbox的input标签，可以加入属性值为checked的checked属性，来实现默认选择一个选项
<p>爱好： <input type="checkbox" name="gender"> 抽烟 <input type="checkbox" name="gender"> 喝酒 <input type="checkbox" name="gender" checked="checked"> 烫头 <input type="checkbox" name="gender" checked="checked"> 泡澡 </p> -
radio：单选按钮每个带radio属性的input标签都代表一个选项，要使这些选项成为一组必须要同时给input加入属性值相同的name属性
单选框要想可以一次只选择一个，要具有相同的name值
type属性值为radio的input标签，可以加入属性值为checked的checked属性，来实现默认选择一个选项
<p>性别： <input type="radio" name="gender"> 男 <input type="radio" name="gender" checked="checked"> 女 </p> -
file：上传文件<p>头像： <input type="file"> </p> -
reset：重置按钮：重置当前表单的所有子标签的内容 -
submit：提交按钮：提交当前表单的所有子标签的内容 -
button：普通按钮：可以用作取消的按钮，用于返回上一个页面或退出<p> <input type="reset" value="清空"> <input type="submit" value="提交"> <input type="button" value="取消"> <button>保存</button> </p>value属性代表按钮上显示的内容
-
-
<select>：下拉列表子标签
<option>：列表中的项常见的属性：
selected：被选中
<p>血型： <select> <option>A型</option> <option>B型</option> <option>C型</option> <option selected="selected">O型</option> </select> </p> -
<textarea>：文本域（多行文本框）可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性
<p>个人简介： <textarea cols="10" rows="5"></textarea> </p> -
<button>：按钮在
<form>表单中，作用和submit一样<p> <input type="submit" value="提交"> <button>保存</button> </p>不在
<form>表单中，就是普通按钮（配合后期的JavaScript，可扩展性更高）
-
1.9 框架标签
-
框架标签
<frameset>作用：用多个界面拼接成一个界面
使用方法：每个frameset下的子标签可以是frame也可以还是一个frameset
在html标签中frameset标签不能与body标签共存
常用属性
-
rows：用于将页面分为几行内容属性值可以按照需求自定义每部分的百分比，剩下的一部分可以使用
* -
cols：用于将页面分为几列内容属性值可以按照需求自定义每部分的百分比，剩下的一部分可以使用
*
-
-
框架标签子标签
<frame>常用属性
src：表示当前行或列的资源路径
-
示例Code
<frameset rows="10%,*,13%"> <frame src="top.html"></frame> <frameset cols="15%,*"> <frame src="left.html"></frame> <frame src="right.html"></frame> </frameset> <frame src="foot.html"></frame> </frameset>
1.10 其他标签与特殊字符
-
<meta>标签常见的作用：
-
指定页面的字符编码方案
常见的编码表：
ASCII：美国标准信息交换码， 使用一个字节的低7位二位进制进行表示
ISO8859-1：拉丁码表，欧洲码表，使用一个字节的8位二进制进行表示
GB2312：中国的中文编码表，最多使用两个字节16位二进制为进行表示
GBK：中国的中文编码表升级，融合了更多的中文文字符号，最多使用两个字节16位二进制位表示
Unicode：国际标准码，融合了目前人类使用的所有字符，为每个字符分配唯一的字符码。所有的文字都用两个字节16位二进制位来表示
Unicode只是定义了一个庞大的、全球通用的字符集，并为每个字符规定了唯一确定的编号，具体存储成什么样的字节流，取决于字符编码方案
推荐的Unicode编码是UTF-8和UTF-16
UTF-8：变长的编码方式，可用1-4个字节来表示一个字符
-
指定页面的显示参数，如：显示窗口的宽度、显示文字和图形的初始比例
-
设置页面加载后在指定的时间后跳转到指定的页面
<meta>标签必须写在<head>标签中 -
-
<link>标签作用：一般通过该标签来导入CSS
<link>标签必须写在<head>标签中 -
特殊字符
作用：在HTML中标签的内容有时需要某些特殊字符
如：每个空格需要使用
来表示
2. HTML5新特性
2.1 HTML4和HTML5主要区别
-
HTML5包含了HTML4的标签
-
H5中大小写不敏感
可以在标签、属性、属性值中随机使用大小写字母
-
属性值的引号可以省略
-
可以省略结尾标签（不推荐）
查看源代码，浏览器会自动补全结尾标签
2.2 新增语义化标签
HTML4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此，新增许多语义化标签，让div“见名知意”
2.3 媒体标签
想在网页上播放视频，可以使用<video>标签
2.4 新增表单控件
- 新增了表单
<form>标签下的<input>标签下的type属性值，代表显示不同的工具 - 新增了表单
<form>标签下的新标签
二、CSS
1. CSS概述
- CSS是指层叠样式表 cascading style sheets
- 通过CSS可以让开发者定义HTML元素如何显示，而且CSS可以让原本HTML不能描述的效果，通过CSS描述出来
2. CSS与HTML结合的三种方式
-
内联/行内样式
实现方式：HTML标签上通过style属性来引用CSS代码
优缺点：直接通过属性简单方便，但是只能对一个标签进行修饰
<body> <div style="color:pink">hello, world</div> <font color="pink">hello, world</font> </body> -
内部样式表
通过
<style>标签来声明我们的CSS，通常<style>标签推荐写在<head>和<body>之间格式：
选择器 {属性:值;属性:值}优缺点：可以通过多个标签进行统一的样式设置，但是它只能在本页面上进行修饰
<style> div { color:blue; } </style> <body> <div>have a good day</div> </body> -
外部样式表
需要单独定义一个CSS文件，注意CSS文件的后缀名就是
.css实现方式1：在项目根目录下，创建css目录，在css目录中创建css文件，在
<head>中使用<link>标签引用外部的css文件需要将
<link>中属性rel的值设置为stylesheet，属性href为.css文件的目录<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../CSS/css_test.css"> </head>实现方式2：类似于内部样式表，
@import 'CSS文件所在地址'<style> @import '../CSS/css_test.css' </style>两种实现方式的区别：加载顺序不同，@import方式导入会先加载html，然后才导入css样式；如果使用link方式，它会先加载样式表
-
三种样式表的优先级：内联 > 内部 > 外部
3. CSS选择器、基本属性、定位
3.1 CSS选择器
-
作用：在style标签中，通过指定的标签名或标签内的属性值选定某个或多个标签，通过设定属性值来修改对应标签的样式
-
元素（标签）选择器
它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称
-
类选择器
类选择器在使用时使用
.来描述，它描述的是元素上的class属性值需要在元素添加class属性，选择器前加
.若选择器不加任何符号，会先去找与选择器同名的标签而不是class属性值VSCode快捷键:
div.xxx快速生成div标签和class属性值为xxx，<div class="xxx"></div> -
id选择器
它只能选择一个元素，使用
#引入，引用的是元素的id属性值。id选择器，比类选择器更具有唯一性需要在元素添加id属性，选择器前加
#若选择器不加任何符号，会先去找与选择器同名的标签而不是id属性值VSCode快捷键:
div#xxx快速生成div标签和id属性值为xxx，<div id="xxx"></div><style> .a { color:purple; } #b { color:red; } </style> <body> <div class="a">have a good day</div> <div class="a">have a good day</div> <div id="b">have a good day</div> <div>have a good day</div> </body> -
选择器组
作用：合并相同内容的选择器
使用方法：不同选择器名之间使用
,进行分隔<style> #b,.a { color:purple; } </style> <body> <div class="a">have a good day</div> <div class="a">have a good day</div> <div id="b">have a good day</div> <div>have a good day</div> </body> -
派生选择器
两个标签选择器同时写在一个内容上时(或只写一个)，这两个标签下的所有内容样式会被修改
<style> div p { color:purple; } </style> <body> <div> <p>11111</p> <p>22222</p> <p>33333</p> <span> <p>444444</p> <p>555555</p> <p>666666</p> </span> </div> </body>当设置
div > p时，就只会使得div子标签内容样式被修改，而div子标签下子标签的内容样式不被修改<style> div > p { color:purple; } </style> <body> <div> <p>11111</p> <p>22222</p> <p>33333</p> <span> <p>444444</p> <p>555555</p> <p>666666</p> </span> </div> </body> -
CSS伪类
-
CSS伪类可对css的选择器添加一些特殊效果
-
超链接伪类的四种状态：
:active向被激活的元素添加样式（鼠标长按时）:hover当鼠标悬浮在元素上方时，向元素添加样式:link向未被访问的链接添加样式:visited向已被访问的链接添加样式超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha
<!-- 当鼠标指向baidu时，字体变小变红 --> <style> a:hover{ color:red; font-size: small; } a { font-size: large; } </style> <body> <a href="http://www.baidu.com">baidu</a> </body>超链接伪类的四种状态测试：
重复查看
:link效果，需要清除浏览器浏览数据和缓存<style> a:link{ color:blue; font-size: small; } a:visited{ color:yellow; font-size: small; } a:hover{ color:red; font-size: small; } a:active{ color:green; font-size: small; } a { font-size: large; } </style> <body> <a href="http://www.qq.com">dubai</a> </body> -
其他伪类
:first-child向元素的第一个子元素添加样式。作用等同于使用class属性的标签，用类选择器来指定这个标签的样式，只是使用伪类更加便捷
-
3.2 CSS基本属性
-
文本属性
单位：px：像素、em：倍数
line-height的属性值表示当前文本上方和下方的所占空间大小
<style> #title{ font-family:"隶书"; font-size:5em; /* 默认字体大小的5倍 */ font-weight: bold; /*字体加粗*/ color:red; /*字体颜色*/ text-align: center; /*居中对齐*/ text-decoration: underline; /*下划线*/ line-height: 30px; /* 行高*/ } .content{ text-indent:2em; /*首行缩进*/ } </style> <body> <p id="title">中华人民共和国万岁！</p> <p style="text-align: right;">作者：AAA</p> <p class="content">我们相亲相爱，是一家人！</p> <p>我们相亲相爱，是一家人！</p> </body> -
背景属性
-
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
-
一般使用
<div>标签定义好宽高后，不指定background-color属性则默认是白色，为了区分可以设置background-color属性的颜色background-color和background作用相同可相互替换使用color属性是指div中的文本颜色，不是背景 -
添加
background-image属性后，原背景会被覆盖，若添加的图片尺寸小于背景尺寸，则默认使用全背景平铺效果 -
添加
background-repeat属性，修改属性值为no-repeat，则平铺方式为只是本图片不重复的效果其他的平铺方式：
-
repeat-x：表示横向平铺到整个背景上 -
repeat-y：表示纵向平铺到整个背景上
-
-
添加
background-position属性，属性值中第一个数字参数表示图片的左侧与背景左侧的距离，第二个数字参数表示图片的上方与背景上方的距离两个参数都可以是负数，表示图片进入到背景边界外的长度（这部分不显示）；当数字参数为正数超过背景范围后也不显示超过的图片部分
-
添加
background-attachment属性，属性值为fixed，表示当页面在在滚动时，图片位置不随页面滚动（在div范围中），该属性的默认值是scroll -
示例Code
<style> div { /*设置基本的背景属性*/ width: 500px; height: 500px;/*高度可以不指定，不指定时需要div中有带内容的其他标签，不指定时背景颜色height根据div中内容的长度变化而变化（内容会覆盖背景）；指定height时，背景颜色的height不会随div中内容变化（内容同样会覆盖背景）*/ background-color: pink; /* 背景颜色 */ /*添加一张图片到背景中*/ background-image: url("img/cat.gif"); background-repeat: no-repeat; /* 平铺方式*/ background-position: 0px 100px; /*背景的位置（移动）*/ background-attachment: fixed; /* 固定的背景*/ } </style> <body> <div></div> </body>
-
-
列表属性
-
通过
ul或ol的选择器来设置列表的标记形状-
设置不同的列表项标记为有序列表
-
设置不同的列表项标记为无序列表
-
设置列表项标记为图像
-
示例code
<style> .a { list-style-type: none;/* 无序列表无标记 */ } .b { list-style-type: decimal-leading-zero;/* 有序列表中以0开头的数字标记 */ } .c { list-style-type: upper-roman;/* 有序列表中标记是大写罗马数字(I, II, III, IV, V, 等 */ } .d { list-style-type: upper-alpha;/* 有序列表中标记是大写英文字母The marker is upper-alpha (A, B, C, D, E,等 */ } .e { list-style-image: url('img/list-img-2.gif');/* 设置列表项标记为图像 */ } </style> <body> <ul class="a"> <li>曹操</li> <li>刘备</li> <li>孙权</li> </ul> <ol class="b"> <li>吕布</li> <li>赵云</li> <li>典韦</li> </ol> <ol class="c"> <li>关羽</li> <li>马超</li> <li>张飞</li> </ol> <ol class="d"> <li>黄忠</li> <li>夏侯惇</li> <li>姜维</li> </ol> <ol class="e"> <li>老孙</li> <li>老杨</li> <li>老西</li> </ol> </body>
-
-
将纵向列表设置为横向的显示效果
为列表中的每个
li添加属性和属性值float: left;，一般也会添加属性和属性值list-style-type: none;来去除列表项标记 -
设置每个列表项
li中文字的对齐方式text-align、字体大小font-size、颜色color -
设置每个列表项
li中背景颜色background-color、行高line-height -
设置每个列表项
li中鼠标指向时的显示样式cursor -
设置每个列表项
li中的width，若不设置则背景颜色会填充整行 -
列表案例：导航条
<style> li{ list-style-type: none; color:white; background-color: black; width: 150px; text-align: center; float: left; /* 将li实现水平方向显示*/ line-height: 40px; font-size: 1.3em; cursor: pointer; /* 鼠标光标显示样式 */ } li:hover{ background-color: orange; /* 当鼠标在此悬浮时，显示背景颜色为橙色 */ line-height: 50px; /* 当鼠标在此悬浮时，显示的行高变大 */ } </style> <body> <ul> <li>apple</li> <li>banana</li> <li>peach</li> </ul> </body>
-
-
边框属性
-
CSS边框属性允许指定一个元素边框的样式和颜色
-
设置边框的样式必要的三个属性
border-width、border-color、border-style若缺少border-style属性则不显示边框
border-width: 2px; border-color:red; border-style: solid;可以向属性中加入位置，就可以指定边框具体某个边的样式
border-right-color:green; /* 设置右边框的颜色 */ border-bottom-style: dashed; /* 设置下边框的样子 */或使用简化写法：为
border属性指定属性值线宽、线条形状、颜色border:10px solid red; -
示例Code
<style> div { width: 400px; height: 40px; margin: 10px; /* div和div彼此之间产生10像素的距离*/ } .a { /* 设置四个边 */ border-width: 2px; border-color:red; border-style: solid; border-right-color:green; /* 设置右边框的颜色 */ border-bottom-style: dashed; /* 设置下边框的样子 */ } /* 以下是边框的简化写法 */ .b1{ border:10px solid red; } .b2{ border:10px dotted red; } .b3{ border:10px dashed red; } .b4{ border:10px double red; } .b5{ border:10px groove red; } .b6{ border:10px ridge red; } .b7{ border:10px inset red; } .b8{ border:10px outset red; } </style> <body> <div class="a"></div> <div class="b1">实心线</div> <div class="b2">点线</div> <div class="b3">虚线</div> <div class="b4">双线</div> <div class="b5">3D效果的凹槽</div> <div class="b6">3D脊边框</div> <div class="b7">嵌入边框</div> <div class="b8">突出边框</div> </body>
-
-
轮廓属性
轮廓是在边框外的一层线条，使用方法为
outline属性指定属性值线宽、线条形状、颜色（与边框border的属性值写法相同）<style> div{ width: 400px; height: 200px; border: 30px solid darkcyan; outline: 5px dashed red; /*轮廓*/ } </style> <body> <div></div> </body>
-
盒子模型
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
- margin(外边距) - 盒子与盒子之间的距离
margin使用场景：一般通过margin设置div在页面中的位置；div中的元素通过margin可以设置该元素在div中的位置
当div内元素的margin超过div的height和width时，该元素可以显示超出的部分，这是与div中添加背景图片的不同
更具体的属性：margin-top、margin-left
-
border(边框) - 盒子的保护壳
-
padding(内边距/填充) - 内填充，盒子边与内容之间的距离
更具体的属性：padding-top、padding-left
- content(内容) - 盒子的内容，显示的文本或图像
<style> div{ width: 200px; height: 200px; border:2px solid greenyellow; margin-top: 50px; /*上外边距*/ margin-left: 100px; /*左外边距*/ padding-top:20px; /*上内边距*/ padding-left:40px; /*左内边距*/ } </style> <body> <div> <img src="img/cat.gif"> </div> </body>
3.3 CSS定位
-
默认定位
-
块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高
-
行内元素：a, b, span,等，从左向右，水平排列（不会换行）；不能改变宽高，若在这些标签的选择器下更改width和height属性，则无法识别宽高
行内元素通过加入 display 属性设置属性值inline-block可以转换为行内块元素，从而改变宽高
-
行内块元素：input, img等，从左向右，水平排列（自动换行）；可以改变宽高
-
示例Code
<style> div{ width: 100px; height: 50px; border :1px solid red; } span{ width: 100px; height: 100px; border :1px solid red; } input{ width: 50px; height: 50px; border :1px solid red; } a { width: 50px; height: 50px; border :1px solid red; /* a标签是行内元素，无法改变宽高。但只要转换成行内块元素，就可以改变宽高了。 */ display: inline-block; /* 将a元素，显示成 行内块 */ } </style> <body> <a href="">aaa</a> <a href="">bbb</a> <a href="">ccc</a> </body>
-
-
浮动定位
-
不仅可以使块级元素靠着左边或右边。还可以消除块级元素的独自占一行的特性
-
float属性的取值：
none ：不浮动
left：贴着左边 浮动
right：贴着右边 浮动
-
示例Code
如图所示，c1，c2向右浮动直到本行堆满，c3换行继续向右堆
如图所示，若不指定float属性，默认从左上角开始从上至下堆；所有未指定float属性的元素为一列从左上第一个位置进行向下堆叠
-
-
相对定位
-
和原来的位置进行比较，进行移动定位（偏移）
-
使用方法：设定属性和属性值
position: relative、top: xxxpx、left: xxxpxtop和left可以为负值表示向左上移动，正值时表示向右下移动
-
示例Code
-
-
绝对定位
-
选定一个当前元素
position: absolute与它的父元素中设定有position: relative的元素按偏移量top和left的属性值进行偏移如果父级元素定位了，就以父级为参照物；
如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。
如果爷爷没定位，继续向上找，都没定位的话，body是最终选择
-
必须找当前元素的父元素作为参照物进行绝对定位，不可用与当前元素处于同一并列位置的元素作为参照物（位置保持不变，不会以偏移值进行偏移）
-
示例Code
<style> .parent{ width: 250px; height: 300px; border: 2px solid red; /* 设定属性值为parent的元素是参照物 */ position: relative; } .child{ width: 150px; height: 280px; border: 2px solid green; margin: 15px; /* 设定属性值为child的元素是参照物 */ /* position: relative; */ } .mod01{ width: 50px; height: 60px; border: 2px dashed gold; /* 有父元素的时候，设定属性值为mod1的元素是参照物, 此时是无效的*/ /* position: relative; */ } .mod02{ width: 50px; height: 60px; border: 2px dashed orange; /* 设定当前的绝对位置元素为mod2 */ position: absolute; /* 设置偏移值 */ top: 50px; left: 50px; } .mod03{ width: 50px; height: 60px; border: 2px dashed blueviolet; /* 有父元素的时候，设定属性值为mod3的元素是参照物, 此时是无效的*/ /* position: relative; */ } </style> <body> <div class="parent"> <div class="child"> <div class="mod01"></div> <div class="mod02"></div> <div class="mod03"></div> </div> </div> </body>
-
-
固定定位
-
将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动
-
使用方法：设定属性和属性值
position: fixed、width: xxxpx、height: xxxpx固定定位同时可以设定当前元素距离页面左和上的边距
-
-
z-index
-
如果有重叠元素，使用z轴属性，定义上下层次
-
z轴属性，要配合相对或绝对定位来使用
-
z值没有额定数值（整型就可以，具体用数字几，悉听尊便）
-
使用方法：为两个重叠的标签同时设定属性和属性值
position: relative、z-index: xxx其中
z-index的属性值较大的显示在上层 -
示例Code
-
4. CSS3
- 圆角与盒子阴影
- 渐变
- 背景
- 过渡
- 动画
三、JavaScript
1. JavaScript概述
- JavaScript的特点
- 解释执行：事先不编译，逐行执行
- 基于对象：内置大量现成对象
- JavaScript的组成
- ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
- DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象，更有层次感的管理每一个节点
- BOM：浏览器对象模型，是对浏览器窗口进行访问和操作
2. HTML与JavaScript结合方式
-
行内脚本
作为属性值来使用，一般只写方法调用或
return 方法调用 -
内部脚本
-
使用
<script></script> -
标准是写在head和body之间（脖子位置）
-
-
外部脚本
使用script标签中的属性src添加
.js文件来引入脚本
3. JavaScript的使用
-
变量
-
在定义变量的时候，所有的数据类型都是var
-
声明变量：
var x、var x,y -
实际的变量类型
- number：不区分整型数值和浮点型数值
- string：首尾由单引号或双引号括起
- boolean：true和false也代表1和0
-
自动类型转换
-
数据类型相关函数
- parseInt
- parseFloat
- typeof：查询变量的当前类型
-
null和undefined
- null：在程序中代表“无值”或者“无对象”，可以通过给一个变量赋值 null 来清除变量的内容
- undefined：声明了变量但从未赋值或者对象属性不存在
-
算数运算符特殊用法
-可以表示减号，也可以表示负号，如：x = -y+可以表示加法，也可以用于字符串的连接
-
关系运算符
-
===：类型相同，数值相同 -
!==：非严格相等，与==类似 -
示例Code
<script> var a = "10"; var b = 10; if (a == b) { alert("a == b");//成立 } if (a !== b) { alert("a !== b");//成立 } if (a === b) { alert("a === b");//不成立 } </script>
-
-
逻辑运算符
-
流程控制语句
-
-
字符串处理API
-
数组
-
创建数组
var arr1 = new Array(); -
初始化数组的三种方式：
- 利用索引进行初始化
- 使用Array构造方法传参进行初始化
- 利用方括号
[]进行初始化
数组类型的返回值类型通常也是用var
-
获取数组长度的字段
length -
对数组进行操作的常用方法
- 转字符串：
tostring()、join() - 利用现有数组创建新数组：
conact()、slice() - 更改当前数组：反转
reverse()、排序sort()
- 转字符串：
-
-
Math对象
无需创建Math对象，直接把 Math 作为对象使用就可以调用其所有属性和方法
-
Number对象
对数值进行四舍五入操作
-
正则表达式
对字符串执行模式匹配
-
日期对象
-
函数
-
使用关键字
function定义函数，形参列表中不要加数据类型；函数不写返回值类型，但是可以有返回值function 函数名( 形参列表 ) { // 函数体 return 返回值; } -
参数对象
arguments是参数列表内容的一个数组对象，可以使用length获取参数列表长度，使用索引下标访问数组中的元素，参数数组索引也是从0开始 -
构造函数
将函数的返回值直接写入原来的参数列表中，参数和返回值都用字符串表示
var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3); //使用构造函数 console.log(x); -
匿名函数
var fn = function(a, b) {// 没有名字的函数，应该用一个变量来接收 return a * 10 + b; }; console.log( fn(3, 4) ); -
全局函数：直接使用函数，无需创建对象
isNaNevalencodeURI和decodeURI
-
闭包
-
闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数
-
闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理
-
JavaScript中的全局变量可以不加var声明，不使用var声明的变量默认是全局变量，作用范围是整个script标签
-
使用全局变量有时不安全，容易改变变量的值；使用闭包可以实现全局变量的效果，较为安全，但不推荐大量使用闭包
-
闭包直观的说就是形成一个不销毁的栈环境。在函数中嵌套一个子函数，通过父函数返回值调用子函数，在父函数外可以使用返回值这个变量单独调用子函数的内容，而这个过程中父函数没有被销毁
-
闭包的使用：利用子函数将父函数中局部变量改变值
-
应用示例：统计一个函数被执行的次数
<script> function parent() { var cnt = 0; function child() { return cnt++; } return child; } var fun = parent(); fun();//0 fun();//1 alert(fun());//输出2 </script><script> function parent() { var cnt = 0; function child() { return cnt += 1; } return child; } var fun = parent(); alert(fun); // 输出结果： // function child() { // return cnt++; // } alert(fun());//输出结果：1 alert(fun());//输出结果：2 alert(parent); // 输出结果： // function parent() { // var cnt = 0; // function child() { // return cnt++; // } // return child; // } alert(parent()); // 输出结果： // function child() { // return cnt++; // } </script>
-
-
-
JavaScript几种输出方式（其中alert、confirm、prompt都是全局方法直接使用）
-
普通弹框
alert("hello，拉勾"); -
控制台日志输出
console.log("谷歌浏览器按F12进入控制台"); -
页面输出
将
<h2>元素输出到<body>中:document.write("<h2>我爱你中国</h2>");输出内容可以加标签，制作不同的页面输出效果
-
确认框
confirm("确定删除吗？");页面输出会显示确认和取消按钮传参是弹框提示语句的字符串
一般用var接收boolean类型的返回值，选择确认返回true，选择取消返回false
-
提示输入框
prompt("请输入姓名：");页面输出会显示输入框和确认、取消按钮传参是弹框提示语句的字符串
一般用var接收返回值，返回值内容为输入框输入的字符串内容
-
4. DOM操作
4.1 DOM访问
-
document对象：表示当前整个HTML页面
<!DOCTYPE html>HTML页面中通常在最上方进行声明文档类型
!表示声明，DOCTYPE表示文档类型，html表示是HTML类型的文档 -
通过标签的id属性获取元素节点对象
方法
getElementById<body> <form action="" onsubmit="login()"> <p>账号：<input id="username"></p> <p>电话：<input id="phone"></p> <p><button>登录</button></p> </form> <script> function login(){ var id = document.getElementById("username"); alert(id); } </script> </body>onsubmit属性可以在本表单提交后调用login方法，方法调用后弹框打印[object HTMLInputElement]，表示getElementById方法获取的对象类型对该对象调用
value字段可以获取具体数值或字符串<body> <form action="xxx" onsubmit="return login()"> <p>账号：<input id="username"></p> <p>电话：<input id="phone"></p> <p><button>登录</button></p> </form> <script> function login(){ var id = document.getElementById("username").value; if (id == "") { alert("账号不能为空"); return false; } return true; } </script> </body>本表单提交后，属性
onsubmit获取返回值，若为true则以继续执行，若为false则停在此处 -
通过标签的多个相同name属性获取元素节点对象数组
onchange属性可以在复选框选择时，调用checkAllBox方法，其中传入的this参数代表本input标签（type为checkbox的复选框）对象通过
getElementsByName方法可以获取同一name属性的所有标签对象，方法返回值为由这些对象组成的数组type属性值为checkbox的input标签，可以加入属性值为checked的checked属性，若不定义这个属性，checkbox类型的input也会默认有这个属性
<body> <table border="1" cellspacing="0"> <tr align="left"> <td><input type="checkbox" name="cb" onchange="checkAllBox(this)">全选</td> <td>生产日期</td> <td>价格</td> </tr> <tr align="center"> <td><input type="checkbox" name="cb">商品1</td> <td>1990</td> <td>25d</td> </tr> <tr align="center"> <td><input type="checkbox" name="cb">商品2</td> <td>1991</td> <td>30d</td> </tr> <tr align="center"> <td><input type="checkbox" name="cb">商品3</td> <td>1996</td> <td>67d</td> </tr> </table> <p><button>提交订单</button></p> <script> function checkAllBox(all) { var arr = document.getElementsByName("cb"); for (var n = 0; n < arr.length; n++) { arr[n].checked = all.checked; } } </script> </body> -
通过标签名称获得元素节点对象集，通常拿到元素节点对象可以使用
.style.属性值的方式的修改元素节点的样式（类似于使用CSS中style标签下的选择器）使用方法：使用element对象调用
getElementsByTagName方法取得返回值是数组，对数组进行遍历，其中每个数组元素为相同标签名的元素节点
4.2 DOM修改
-
获取或改变HTML中的内容
主要是通过获取到的元素节点对象调用
innerHTML字段来获取或修改标签的内容 -
获取或改变HTML中的样式
主要是通过获取到的元素节点对象调用
style字段来获取节点的style对象，再通过调用标签的样式字段来获取或修改标签的样式（类似于使用CSS中style标签下的选择器） -
添加元素节点
使用
createElement创建节点，对节点对象调用方法setAttribute设置属性和属性值插入节点一般用父节点对象调用方法
appendChild(子节点对象)使用getElementsByTagName获取当前页面的节点对象数组，通过索引下标来访问某个父节点
-
删除元素节点
通过
parentNode来获取该节点的父节点，通过父节点方法removeChild(子节点对象)来删除子节点 -
替换元素节点
- 获取当前节点对象old
- 创建新节点对象new
- 当前节点对象调用
parentNode方法获取当前节点的父节点，通过父节点方法replaceChild(new,old)进行替换
4.3 事件
-
事件：JavaScript通过捕获页面上的操作而做出反馈，事件一般是标签中的属性，一般将事件属性的属性值设定为JavaScript方法调用或return 方法调用
属性值是
return xxx()，方法返回值为布尔值时有效，方法返回true为执行，false为阻止当前标签事件发生（如<a>中会阻止页面跳转） -
窗口事件
在body和frameset元素中添加onload属性，将其属性值设定为一个JavaScript方法，每当页面加载完成后自动调用这个方法
-
表单元素事件
表单标签
<form>的子标签中可以添加属性onblur（失去焦点时执行）、onfocus（获得焦点时执行）获取焦点：通过点击输入框、复选框选项
-
鼠标事件
对执行脚本进行如：单击、双击、移出元素、悬停元素
-
键盘事件
-
事件冒泡
-
事件捕获
4.4 面向对象OOP
- 使用Object创建通用对象
- 使用构造函数
- 使用直接量
4.5 JSON
-
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式
-
作用：互联网上来回传递数据，如果没有一个统一的格式，解析起来的难度很大，
使用JSON易于人阅读和编写，同时也易于机器解析和生成
-
格式：
{ 属性1：值1， 属性2：值2， 。。。。 } -
使用JavaScript可以将JSON看作一个对象，通过
对象.属性值名的方式获取JSON对象属性值常见的用法：JSON数组（以JSON为元素类型的数组），同样可以使用索引下标访问每个JSON对象
-
复杂的JSON对象
JSON对象的属性值可以是字符串数组，属性的访问方式
JSON对象.属性名[索引]
5. BOM操作
-
BOM操作就是JavaScript对浏览器的一些常规操作的方法
-
window对象：
window是全局的可以直接调用相应的字段-
screen屏幕对象
window.screen屏幕对象，屏幕对象常用字段：width、height -
navigator对象包含有关访问者浏览器的信息
window.navigator -
location通常用来做页面跳转，是内置的对象可以直接使用该对象调用字段或方法
location.href：href字段可以指定URL进行跳转location.reload()：reload方法可以重新加载当前页面（相当于刷新页面） -
history对象会记录浏览器的痕迹，是内置的对象可以直接使用该对象调用字段或方法
history.go(-1)：跳回上一级页面history.back()：跳回上一级页面 -
存储对象
-
两种存储对象的存储方式：和Java中map很相似，都是键值对的方式存数据
-
localStorage:本地存储，在关闭窗口或标签页之后将会删除这些数据
常用方法：
getItem、setItem、removeItem -
sessionStorage:会话存储，就是保持浏览器别关闭，关闭浏览就等于结束了一次会话，
开启浏览器就意味着创建了一次会话。
常用方法：
getItem、setItem、removeItem、clear -
两种存储对象的使用方式：先set再get，若没有set就get，get方法返回false
-
-
-
计时操作（常用3个方法都是全局方法可以直接调用）
-
setInterval：指定时间间隔去执行某个方法，该方法返回定时器对象
setInterval(方法名, 毫秒数) -
clearInterval：和setInterval配合使用，向clearInterval传入定时器对象，停止定时器
clearInterval(定时器对象) -
setTimeout：设定指定时间倒计时完成后执行某个方法
setTimeout(方法名, 毫秒数)
-
本文摘自 ：https://www.cnblogs.com/
