Web前端快速入门

zoukankan html css js c++ java

Web前端快速入门
HTML基础

网站建站的流程
- 注册域名(网址)
- 租用空间
- 网站建设
  
  确定网站主题
  
  搜集资料
  
  规划网站
  
  制作页面
- 网站推广
- 网站维护
网页的组成部分
- HTML
  
  相当于毛坯房
- CSS
  
  网页的装修队
- JavaScript
  
  智能家居
HTML基础
- 网页
  
  一个html文件就是一个网页
- 网站
  
  把所有的网站资源文件整合到一起
- html
  
  超文本标记语言
  
  hyper text markup language
  
  xhtml
  
  Extensible
  
  可扩展超文本标记语言
- 建立站点
  
  规划网站的所有内容和代码，整合资源
- html文档基本结构
  
  <!doctype html>命名文档类型 <html>说明我们写的是标记语言 <head>文件头部(描述区) <meta charset=“utf-8”/>编码格式(gb2312/gbk中文编码) <title>html5</title>文件标题（显示在状态栏上的内容） </head> <body> 文件主体(所有要写的内容) </body> </html>
- 网页的调试工具
  
  PC端
  
  浏览器
  
  移动端
  
  Chrome浏览器
- html标记的语法
  
  
  
  双标记/常规标记
  
  <标记名属性1名="属性1值" 属性2名="属性2值" ……></标记名>
  
  单标记/空标记
  
  <标记名属性1名="属性1值" />
- 标题字体
  
  <h1></h1>
  
  文本标题共有6个，h1~h6
- 字体标记
  
  <p></p>
  
  段落标记，标识一个段落
  
  <i></i> <em></em>
  
  文本倾斜
  
  <b></b> <strong></strong>
  
  字体加粗
  
  <u></u>
  
  文本加下划线
- 换行
  
  <br>
  
  <hr>
  
  换行并加分割线
- 转义字符
  
  &nbsp
  
  不换行空格
  
  &gt
  
  右尖括号
  
  &lt
  
  左尖括号
- 列表
  
  ul
  
  无序列表
  
  a,1,A,i,I,none
  
  <ul> <li></li> ．．．． </ul>
  
  ol
  
  有序列表
  
  <ol> <li></li> ．．．．．． </ol>
  
  有序列表的属性
  
  <ol type="a"></ol>
  
  a,1,A,i,I,none
  
  <ol start="5"></ol>
  
  规定有序列表的开始点(列表内容总数不变)
  
  dl
  
  自定义列表
  
  <dl> <dt>名词</dt> <dd>解释</dd> (definition description 定义描述) ．．．．．． </dl>
- 超链接和图像
  
  <a href=“目标文件路径及全称或者连接地址” title=“提示文本”>链接文本或图片</a> <a href="#">空链接</a>
  
  target 属性参数定义了打开链接的目标窗口。 _blank -- 在新窗口中打开链接页面（会保留原窗口） _self -- 在当前窗口打开链接页面，此为默认值
- 插入图片
  
  <img src=“图片的路径” border=“边框" alt="图片替换文本" title="图片标题" width="" height="" />
  
  HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的，图片标题
  
  alt:当图片不显示的时候，提示的信息。用户体验较好
- 相对路径与绝对路径
  
  与Python/Linux中的相对路径/绝对路径用法一致
  
  当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名
- 常用元素
  
  <div></div>
  
  没有具体含义，统称为块标签，用来设置文档区域，是文档布局常用对象
  
  <span> </span>
  
  文本结点标签,可以是某一小段文本，或是某一个字
  
  <label></label>
  
  也可以实现
- 注释
  
  <!- -注释的内容- ->
  
  Ctrl+/
- 表格
  
  <table> <tr> <th></th> </tr> <tr> <td></td> </tr> </table>
  
  一对th表示表头;一对tr表示一行;一对td表示一个单元格（一列）
  
  注意，th与td都包含在tr中
  
  表格属性
  
  加在表格上的
  
  <table border="1px" bordercolor="ff00ff" align="center" cellspacing="0">
  
  
  
  颜色
  
  RGB
  
  red/green/blue
  
  bordercolor="#00ff00"
  
  RGBA
  
  alpha
  
  透明度
- 表单
  
  用来收集用户信息的
  
  表单框
  
  <form name=“表单名称” method=“post/get” action=“路径"> </form>
  
  name 属性规定表单的名称,name 属性用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据
  
  将数据规划为字典结构
  
  action 属性规定当提交表单时，向何处发送表单数据
  
  表单控件
  
  <input type=“” name=“” value=“” size=“” maxlength=" " />
  
  注意,一定要对控件加name,对同类控件加相同的name
  
  
  
  
  
  表单域下拉列表
  
  <select > <option>下拉选项1</option> <option>下拉选项2</option> ………… </select>
  
  表单域多行文本
  
  <textarea name="" cols="" rows="" > </textarea>
  
  多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符
  
  post和get的区别
  
  1. get是从服务器上获取数据，post是向服务器传送数据。 2. get是把参数数据队列加到提交表单的action属性所指的URL中，在URL中可以看到。post是通过HTTP post机制，用户看不到这个过程。 3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。 4. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
CSS

CSS基础
- css简介
  
  层叠样式表(英文全称：Cascading Style Sheets)
- 基础语法
  
  CSS语法由两部分组成：选择符、声明
  
  选择符 {属性: 属性值 ;属性:属性值}
  
  div{ 200px;height:200px;background:red; }
- 样式及其优先级
  
  样式
  
  内部样式
  
  嵌套到页面中
  
  <style type="text/css"> css语句 </style>
  
  使用style标记创建样式时，最好将该标记写在<head></head>
  
  外部样式
  
  1-创建外部样式表
  
  2-导入外部样式表
  
  <link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
  
  使用link元素导入外部样式表时，需将该元素写在文档头部
  
  rel：用于定义文档关联，表示关联样式表
  
  type：定义文档类型
  
  内联样式
  
  表行间样式，行内样式，嵌入式样式
  
  <标签 style=“属性:属性值;属性:属性值;”></标签>
  
  <div style="100px;"></div>
  
  样式优先级
  
  内联样式表的优先级别最高
  
  注意，如果定义了默认的内联样式，再用js通过改变class改变外部样式，会无法改变
  
  内部样式表与外部样式表的优先级和书写的顺序有关，临近原则
- CSS选择符/选择器
  
  选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素
  
  元素选择符/类型选择符(element选择器)
  
  元素名称{属性：属性值；……}
  
  类型选择符是根据html语言中的标记来直接定义
  
  id选择器
  
  #id名{属性：属性值;}
  
  当我们使用id选择符时，应该为每个元素定义一个id属性
  
  <div id="top"></div>
  
  最大的用处：创建网页的外围结构
  
  class选择器
  
  .class名{属性：属性值;}
  
  当我们使用类选择符时，应先为每个元素定义一个类名称
  
  <div class="top"></div>"
  
  伪类选择器
  
  理解伪类
  
  伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式
  
  CSS伪类是用来添加一些选择器的特殊效果
  
  伪类可以看作以选中元素为基准点，此元素的一些状态或属性
  
  anchor伪类
  
  a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */
  
  注意顺序
  
  对于a标签
  
  也可以相对于其他标签
  
  :before/:after
  
  .fix_float:after{ content: ""; clear: both; display: block; }
  
  伪类用法：在原有的选择符基础上，后面加:伪类{}
  
  群组选择器
  
  选择符1，选择符2，选择符3......{属性：属性值;}
  
  .top, #nav, p{100px;}
  
  包含/父子选择器
  
  选择符1(父) 选择符2（子）{属性：属性值;}
  
  选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;
  
  效果针对选择器2
  
  div ul li{height:200px;}
  
  父子选择器中的父是用来定位目标子的
  
  通配符
  
  *{属性：属性值；}
  
  含义就是所有元素
  
  常用来重置样式
  
  选择符的权重
  
  类型选择符的权重为0001
  
  class选择符的权重为0010
  
  id选择符的权重为0100
  
  内联样式的权重为1000
  
  !improtant
  
  慎用
  
  .top{ color: brown !important; }
核心属性和浮动
- 文本字体属性
  
  {font-size:12px/14px/16px;}
  
  用js操作时一定注意单位
  
  PPI是图像分辨率的单位，图像ppi值越高，画面的细节就越丰富，因为单位面积的像素数量更多。PPI也叫图像的采样率（在图像中，每英寸所包含的像素数目）
  
  字体大小
  
  em:表示元素字体高度，em值是根据父元素值(本节点没有设置字体大小)来确定
  
  font-size:12px;line-height:2em(行高为字号的两倍); 则行高为24px；
  
  注意line-height的设定
  
  字体的类型
  
  {font-family:字体1,字体2,;}
  
  当字体是中文字体时需加引号当英文字体中有空格时需加引号：如“Times New Roman”；
  
  文本颜色
  
  rgb
  
  #faf7fc
  
  color:#F00;
  
  显示的不够细腻
  
  rgba
  
  字体加粗
  
  { font-weight:bolder/bold/normal/100-900 ;}
  
  字体倾斜
  
  { font-style：italic/oblique/normal;}
  
  oblique倾斜幅度更大
  
  检索或设置对象中的文本的大小写
  
  {text-transform:none/capitalize/uppercase/lowercase}
  
  文本对齐方式
  
  {text-align:left/right/center;}
  
  {vertical-align:top/bottom/middle;}
  
  注意这里只是一行，如果设定竖直方向的居中对齐，往往需要设置行高与对应区域高度一致(line-height)
  
  文本行高
  
  {line-height:normal/数值;}
  
  文本修饰
  
  text-decoration:none/underline/overline/line-through/blink
  
  blink已不可用
  
  首行缩进
  
  {text-indent:value;}
  
  text-indent可以取负值； text-indent属性只对第一行起作用
  
  字间距
  
  {letter-spacing:value;}
  
  控制英文字母或汉字的字距
  
  词间距
  
  word-spacing:value;
  
  控制英文单词词距
  
  垂直对齐方式
  
  {vertical-align:top/bottom/middle;}
  
  当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐
  
  此属性无法单独使用，需要支持的条件
  
  让一个图片垂直居中的几个条件
  
  必须给容器加一个text-align:center;
  
  必须给当前元素转成行内块级元素（display:table-cell）再给当前元素加上vertical-align:middle;
- CSS列表属性
  
  定义列表符号样式
  
  {list-style-type： }
  
  取值： disc(实心圆) circle(空心圆) square(实心方块) none(去掉列表符号)；
  
  使用图片作为列表符号
  
  {list-style-image:url(图像路径)； }
  
  定义列表符号位置
  
  {list-style-position: ；}
  
  取值： outside(外边) inside(里边)；
  
  简写方法
  
  {list-style: ； }
  
  可简写直接设置列表属性值；常用属性： list-style:none;去掉列表样式；
- CSS边框属性
  
  {border: ； }
  
  border-style
  
  solid/dashed/dotted/double
  
  border-width：取值；
  
  border-color:取值；
  
  可以单独设置某一个边框的属性
- css背景图属性
  
  背景颜色
  
  选择符{background-color:颜色值;}
  
  背景图片的设置
  
  background-image:url(背景图片的路径及全称)；
  
  背景图片的显示原则
  
  1）容器尺寸等于图片尺寸，背景图片正好显示在容器中; 2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素； 3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。 4）加载背景图必须有容器区域；
  
  背景图片平铺属性
  
  选择符 {background-repeat:no-repeat/repeat/ repeat-x/repeat-y }
  
  no-repeat:不平铺,repeat：平铺 (默认),repeat-x：横向平铺
  
  背景图片的位置
  
  选择符{background-position：水平方向属性值垂直方向属性值;}
  
  水平方向值：left/center/right或数值,垂直方向值： top/center/bottom或数值
  
  水平向右垂直向下移动是正数值,水平向左垂直向上移动是负数值
  
  背景缩放
  
  background-size
  
  设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏
  
  设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域
  
  各属性的缩写
  
  选择符{background：属性值1 属性值2 属性值3;}
  
  网页上常用的图片格式
  
  jpg
  
  rgb，压缩性比较好，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )
  
  gif
  
  多张图切换，有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像
  
  png
  
  压缩性基本为0，有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，适用于颜色数量较少的图像
  
  webp
  
  Google推出的一种格式，支持透明，支持压缩
- CSS浮动属性
  
  float:定义网页中其它文本如何环绕该元素显示
  
  left/right/none
  
  浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动框是脱离了普通的文档流
  
  清除浮动
  
  清除浮动是让当前元素远离浮动元素
  
  clear:both清除浮动
  
  父级添加overflow:hidden;缺点：父级这个盒子不能放其他元素
  
  万能清除浮动
  
  .clearfix:after{ content:""; display:block; height:0; clear:both; }
  
  在末尾添加块状空元素，使用清除浮动属性
CSS盒模型
- 盒模型的概念
  
  盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。
- 标准盒子模型
  
  盒子宽度=margin left+border left+padding left+width+padding right+border right+margin right
- padding属性
  
  Padding是设定页面中一个元素内容到元素的边框之间的距离
  
  补白
  
  用法
  
  1）用来调整内容(子元素)在容器（父元素）中的位置关系 2）用来调整子元素在父元素中的位置关系。注：padding属性需要添加在父元素上
  
  padding属性值不允许是负值
  
  钟面原则
  
  如果不指定，先取对面，对面缺失则取右面
  
  padding区域在border与content之间；背景色和背景图像会覆盖padding和content组成的区域
- margin外边界
  
  边界：margin,在元素外边的空白区域，被称为边距
  
  margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px;
- border属性
  
  border:5px solid #f00;
  
  边框宽度边框类型边框颜色
- 怪异盒模型
  
  box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素
  
  盒模型尺寸基准有两种
  
  默认的content-box
  
  border-box/怪异盒
- 文本属性
  
  容器溢出
  
  {overflow: visible/hidden/scroll}
  
  visible:默认值，内容不会被修剪，会呈现在元素框之外； hidden：内容会被修剪，并且其余内容是不可见的； scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
  
  文本溢出
  
  {text-overflow: clip / ellipsis;}
  
  clip：不显示省略号（...），而是简单的裁切; ellipsis：当对象内文本溢出时，显示省略标记
  
  text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义
  
  1、容器宽度：width：value；（px、%，都可以） 2、强制文本在一行内显示:white-space：nowrap; 3、溢出内容为隐藏：overflow：hidden； 4、溢出文本显示省略号：text-overflow：ellipsis;
  
  #box{ 100px; height: 25px; border: 1px solid red; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  
  必须是单行文本才能设置文本溢出
  
  单位
  
  px
  
  em
  
  相对单位
  
  相对父级
  
  rem
  
  相对单位
  
  相对根级
js基础

js基础
- js简介
  
  JavaScript是一种专为与网页交互而设计的脚本语言, 具有较强的逻辑性
  
  JavaScript 是一种具有面向对象能力的、解释型的程序设计语言
  
  因为它不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加 Web互动、加强用户体验度等
- 特点
  
  脚本语言
  
  面向对象
  
  简单
  
  JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求
  
  动态性
  
  JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应
  
  跨平台
- 组成
  
  核心(ECMAScript)
  
  是一种由ECMA国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。ECMAScript 定义的只是这门语言的基础，他的组成部分有：语法、类型、语句、关键字、保留字、操作符、对象等
  
  浏览器对象模型(BOM)
  
  Browse Object Model, 浏览器对象模型，提供与浏览器交互的方法和接口(API), 开发人员使用BOM可以控制浏览器显示页面以外的部分
  
  文档对象模型(DOM)
  
  Document Object Model,文档对象模型，提供访问和操作网页HTML内容的方法和接口
  
  增删改查/CRUD
  
  create
  
  retrieve
  
  update
  
  delete
- js程序基础
  
  导入JavaScript标签: <script type="text/javascript"></script>
  
  在标签中间写js程序
  
  script标签可以出现多次, 且可以出现在html文件的任何地方, 建议写在body的末尾
  
  同一个文件中Javascript和HTML代码, 它们的执行顺序都是自上而下，谁在前就谁先执行, 谁在后就后执行
  
  1.避免因为加载（下载）脚本或脚本运行过慢，阻塞页面。 2.防止脚本运行时，页面未加载完成，造成script要操作的DOM节点没有加载完成而出错。
  
  MIME
  
  多用途互联网邮件扩展类型
  
  表示数据是哪种类型
  
  导入外部js文件<script type="text/javascript" src="demo1.js" ></script>
  
  外部引入的js标签中如果写代码，不会被执行
  
  alert(“hello world!”) ;
  
  弹窗
  
  document.write(“hello world!”) ;
  
  文档输出
  
  console.log(“hello world!”) ;
  
  控制台输出
  
  var age=20；
  
  变量定义赋值
  
  JS是弱数据类型的语言，容错性较高, 在赋值的时候才确定数据类型
  
  变量名可以是数字,字母,下划线_和美元符$组成
- js数据类型
  
  Boolean: 布尔类型
  
  Number：数字（整数int，浮点数float）
  
  由于保存浮点数值需要的内存空间比整型数值大两倍，因此 ECMAScript 会自动将可以转换为整型的浮点数值转成为整型
  
  NaN, 即非数值(Not a Number)是一个特殊的值
  
  isNaN()检测
  
  var b = 0/0; //NaN var b = 12/0; //Infinity var b = 12/0 * 0 //NaN
  
  String：字符串
  
  parseInt() 是把其它类型转换为整型
  
  parseFloat() 是把其它类型转换为浮点型（小数）
  
  Array：数组
  
  Object：对象
  
  特殊数据类型 Null、Undefined
  
  Undefined 类型只有一个值，即特殊的 undefined。在使用 var 声明变量，但没有对其初始化时，这个变量的值就是 undefined
  
  Null 类型是一个只有一个值的数据类型，即特殊的值 null。它表示一个空对象引用(指针)，而 typeof 操作符检测 null 会返回 object
- js运算符
  
  算数运算符
  
  +，-, *, /, %(取余数)
  
  整除：Math.floor(5/3)
  
  向下取整
  
  ceil向上取整
  
  关系运算符
  
  <、>、<=、>=、、=、!=, !==
  
  ==比较的是值
  
  ===指的是恒等
  
  null == undefined
  
  true
  
  NaN == NaN
  
  false
  
  undefined == 0
  
  false
  
  null == 0
  
  false
  
  逻辑运算符
  
  && 与(且)、|| 或、! 非
  
  赋值运算符
  
  =、+=、-=、*=、/=、%=
  
  自增/自减
  
  ++a, a++, --a, a--
  
  a++
  
  先调用a，再a+1
  
  var b = a ++
  
  先把a赋值给b，a再自加1
  
  ++a
  
  a先+1，再调用a
  
  var b = ++a
  
  a先+1，再赋值给b
  
  var b = '89'; b++; //90,数值字符自动转换成数值
  
  var b= 'ab'; b++; //NaN,字符串包含非数值转成NaN
  
  var b = false; b++; //1,false转成数值0,累加就是1
循环语句
- while
  
  while(表达式) { 执行代码; }
- do-while
  
  do…while 循环和 while 循环相似，不同的是，do…while 循环至少会执行一次
  
  do { //代码语句 }while(布尔表达式);
- for
  
  for (表达式1; 表达式2; 表达式3) { 执行代码; }
  
  for(var i=100; i<=999; i++){ //循环体 }
- forEach
  
  forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
- for-in
  
  用的是索引，尽量不用
逻辑分支
- 三目运算符
  
  b == true ? console.log("a是素数") : console.log("a不是素数")
- 程序的三大流程控制
  
  顺序
  
  分支/选择
  
  if分支
  
  if单分支
  
  if(表达式){ 执行语句 }
  
  if双分支
  
  if(表达式){ 执行语句1 }else{ 执行语句2 }
  
  if多分支
  
  if(表达式){ 执行语句1 } else if(表达式2){ 执行语句2 } else{ 执行语句n }
  
  switch分支
  
  switch(表达式) { case 常量1:语句; break; case 常量2:语句; break; … case 常量n:语句; break; default:语句; break; }
  
  注意case后面跟的是常量
  
  注意break
  
  循环
字符串
- 属性
  
  length
  
  字符串的长度
  
  var str = “how are you”; console.log(str.length);
  
  console.log(str[0])
  
  获取字符串中对应下标的字符
  
  str = str+” world!”;
  
  字符串连接
  
  数字也可以和字符串直接连接
- 方法/函数
  
  str.charAt(3);
  
  获取下标为3的字符
  
  str.charCodeAt(3);
  
  获取下标为3的字符的编码(Unicode码)
  
  编码为了解决兼容性的问题
  
  Unicode（统一码、万国码、单一码）是计算机科学领域里的一项业界标准,包括字符集、编码方案等。Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求
  
  utf-8是一种编码规则
  
  String.fromCharCode(94);
  
  Unicode编码转换成字符
  
  str.concat();
  
  连接字符串
  
  var str1 = “hello”; var str2 = str1.concat(“ world”);
  
  str.indexOf(“abc”);
  
  查找字符串第一次出现的位置, 如果没找到则返回-1
  
  var str = “abcdabcd”; var subStr = “bcd”; var index = str.indexOf(subStr);
  
  str.lastIndexOf(“abc”);
  
  查找字符串最后一次出现的位置, 如果没找到则返回-1
  
  str.search();
  
  var str = “Abcdabcd”; var index = str.search("abc");
  
  str.match()
  
  正则
  
  inputText.match(/W+/)
  
  g表示进行全局匹配，i表示匹配的时候忽略大小写
  
  括号内没有引号
  
  str.replace();
  
  替换字符串
  
  var str = “how are Are are you!”; var newStr = str.replace(“are”, “old are”);
  
  这里的替换只能执行一次，不能够进行全局匹配，如果需要全局匹配，则应使用正则表达式： str.replace(/are/gi, "old are")
  
  str.substring(start,end);
  
  截取字符串范围是[start, end)
  
  var str = “Hello world!”; console.log(str.substring(2,5));
  
  str.split(separator, howmany);
  
  根据分隔符、拆分成数组
  
  separator(字符串或正则表达式)
  
  howmany(可以指定返回的数组的最大长度, 可以省略)
  
  如果空字符串(“”)用作separator, 那么stringObject中的每个字符之间都会被分割
  
  str.toLowerCase();
  
  把字符串转换成小写
  
  str.toUpperCase();
  
  把字符串转换成大写
数组
- 定义数组
  
  var arr = new Array();
  
  定义一个空数组
  
  var arr = new Array(10);
  
  创建一个包含 10 个元素的数组，没有赋值
  
  var arr2 = new Array(“芙蓉姐姐”,30);
  
  创建一个数组有两个元素
- 属性
  
  arr.length
  
  数组的长度/数组元素的个数
  
  数组的下标
  
  下标就是索引，即元素的序号，从0开始，下标最大取值是：数组的长度(length) -1；
- 赋值
  
  arr[0] = 20;
- 数组的使用
  
  for in遍历
  
  for(var i in arr){ document.write(arr[i]); }
  
  数组中元素交换位置
  
  var a = 1; var b = 2; var c =a; a = b; b = c;
  
  var a = 1; var b = 2; a = a + b; b = a - b; a = a - b;
  
  var a = 1; var b = 2; a = a ^ b; b = a ^ b; a = a ^ b;
  
  位运算
- 方法
  
  push()
  
  可以接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度
  
  alert(box.push('盐城'));
  
  pop()
  
  从数组末尾移除最后一个元素，减少数组的 length 值，然后返回移除的元素
  
  box.pop()
  
  shift()
  
  从数组前端移除一个元素
  
  unshift()
  
  从数组前端添加一个或多个元素
  
  reverse()
  
  逆向排序方法，返回排序后的数组
  
  sort()
  
  从小到大排序，返回排序后的数组
  
  该方法对于既含有数值型数字又含有字符型数字的排序不起作用，需要给sort方法传递一个函数参数
  
  function compare(value1, value2){ if(parseInt(value1)<=parseInt(value2)){ // 返回0或1，表示不交换值 return -1 }else{ // 返回1，表示交换值 return 1 } } var a = ["-100",-200,2,4,65,7,"7",3,"0",89,2]; a.sort(compare); console.log(a);
  
  concat()
  
  追加数据, 创建一个新数组, 不改变原数组
  
  var box2 = box.concat('美队', '雷神');
  
  slice()
  
  不修改原数组, 将原数组中的指定区域数据提取出来
  
  var box = [2, 3, 4, "绿巨人"]; var box2 = box.slice(1, 3);
  
  取的是下标在区域: [1,3)
  
  类比字符串的substring方法
  
  splice()
  
  截取原数组中指定的数据, 会改变原数组
  
  var a = [2,4,65,7,7,3,6,89]; // 参数2为0则为插入 a.splice(1,0,"e"); console.log(a); // 参数2不为0则为替换,表示替换多少个 a.splice(2,2,0); console.log(a); // 只有;两个参数则为删除,从参数1开始删除参数2个 a.splice(3,1); console.log(a);
  
  参数1表示索引
  
  参数2表示替换数量
  
  为0，则替换0个，即插入,不为0，则替换参数个
  
  参数3表示引入的字符
  
  为空则是用空字符替换，即删除
元素、定位、js对象及DOM

元素类型
- 分类
  
  块状元素
  
  内联元素
  
  可变元素
- 块状元素特点
  
  块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域
  
  默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列
  
  块状元素都可以定义自己的宽度和高度
  
  块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子
  
  常见块状元素
  
  div/dl/form/h1-h6/hr/ol/p/ul
- 内联元素/行内元素特点
  
  内联元素的表现形式是始终以行内逐个进行显示
  
  内联元素没有自己的形状，不能定义它的宽和高，根据所包含的内容显示
  
  内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示
  
  常见内联元素
  
  a/br/i/em/lable/span/strong/textarea/select
- 行内块元素
  
  元素的内容以块状显示，行内的其他元素显示在同一行
  
  img - 图片
  
  input - 输入框 display:inline-block
  
  致命bug
  
  会识别标签之间的空格
- 元素转变
  
  需要根据上下文关系确定该元素是块元素或者内联元素，盒子模型可通过display属性来改变默认的显示类型
  
  display属性
  
  属性值
  
  block/inline/inline-block/none
  
  作用
  
  该属性设置或检索对象元素应该生成的盒模型的类型
  
  display+
  
  block
  
  转换为块状
  
  inline
  
  inline-block
  
  none
定位
- position定位属性
  
  position
  
  检索对象的定位方式
  
  各属性值的作用
  
  static
  
  默认值
  
  只有此模式不支持 left，right， top， bottom
  
  relative
  
  相对定位，相对自己原来的位置
  
  通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方
  
  未脱离文档流
  
  飘出来的是影子
  
  absolute
  
  绝对定位，坐标系需要手动指定
  
  逐级向外查找
  
  找到拥有定位的父级结束，如果一直没找到就是html
  
  父级指的是有非默认定位属性的元素
  
  脱离文档流
  
  fixed
  
  绝对定位
  
  相对于浏览器
  
  悬停在固定位置，哪怕页面进行滚动
  
  脱离文档流
  
  使用定位后，就多支持了left，right，top，bottom
  
  坐标系
  
  坐标系原点屏幕左上角
  
  向右为x正轴，向下为y正轴
  
  向屏幕外为z正轴
  
  可以使用z-index设置z轴值
  
  包含块
  
  包含块是绝对定位的基础，包含块就是为定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考
  
  定义元素为包含块
  
  给绝对定位元素的父元素添加声明position：relative；
  
  定位元素层叠属性
  
  z-index : auto |number
  
  检索或设置对象的层叠顺序
  
  auto：默认值。 number:无单位的整数值。可为负数
  
  较大数值的对象会覆盖在较小数值的对象之上，值相同将依据它们在HTML文档中声明的顺序层叠
  
  锚点链接
  
  是网页制作中超级链接的一种，又叫命名锚记
  
  命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍
  
  <a href="#footer">去底部</a>
  
  footer为目标标签id
  
  滚动条
  
  overflow 水平及垂直方向内容溢出时的设置
  
  overflow-x 水平方向内容溢出时的设置
  
  <div style="overflow-x:hidden">test</div>
  
  overflow-y 垂直方向内容溢出时的设置
  
  属性值
  
  visible
  
  默认值，其中的内容无论是否超出范围都将被显示
  
  hidden
  
  效果与visible相反。任何超出“width”和“height”的内容都会隐藏
  
  scroll
  
  无论内容是否超越范围，都将显示滚动条
  
  auto
  
  当内容超出范围时，显示滚动条，否则不显示
对象和日期
- 对象
  
  什么是对象，其实就是一种类型，即引用类型。而对象的值就是引用类型的实例；JavaScript没有类
  
  对象本质上就是一个字典结构
  
  统称为Object
  
  创建对象
  
  var box = new Object(); //new方式 box.name =‘张三’;
  
  使用字面量方式创建Object
  
  var box = { //字面量方式 name :‘张三', //创建属性字段,最后加逗号 age : 18 };
  
  属性字段也可以加“”
  
  类似于直接创建一个字典
  
  var box={}; //字面量方式声明空的对象 box.name='张三'; //点符号给属性赋值 box.age= 18;
  
  输出方式
  
  alert(box.age); //点表示法输出
  
  alert(box['age']); //中括号表示法输出，注意引号
  
  对象方法
  
  var box={ //对象中添加方法(函数)run run : function() { retrun “正在跑步..”; } } alert(box.run()); //调用对象中的方法
  
  注意调用方法时要加括号
  
  删除属性
  
  delete box.name
- 日期对象Date
  
  创建日期对象
  
  var d = new Date();
  
  new Date() 用当前日期和时间创建新的日期对象
  
  var d = new Date("2015/08/22");
  
  创建日期对象并指定时间
  
  日期对象格式化方法
  
  alert(box.toDateString());
  
  星期几、月、日和年
  
  alert(box.toTimeString());
  
  时、分、秒和时区
  
  alert(box.toLocaleDateString());
  
  年、月、日
  
  alert(box.toLocaleTimeString());
  
  时、分、秒
  
  alert(box.toUTCString());
  
  UTC 日期: 年,月,日,时,分,秒。
  
  setDate/getDate
  
  getDate
  
  以数字（1-31）返回日期的日
  
  setDate
  
  设置日期对象的日（1-31）
  
  d.setDate(d1+1); console.log(d)；
  
  设置完成后，查看的是日期对象
  
  其他
  
  /* getDay() set / getMonth() set / getFullYear() set / getHours() set / getMinutes() set / getSeconds() set / getMilliseconds() set / getTime() getTimezoneOffset() */
  
  月份是从0-11，所以取得的值要加1才是当前月份,星期天是从0-6, 0代表星期天
- 定时器
  
  setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
  
  注意定时器内不要加循环
  
  setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
  
  var st = 0; var tim = setInterval(function(){ if (st <= 100){ console.log(st); st += Math.random() * 10; }else{ clearInterval(tim); } },1000)
  
  定时器在启动时会返回一个定时器的唯一标识(tim)
  
  使用定时器的唯一标识进行定时器的中止
DOM初步
- 概念
  
  DOM就是Document Object Model(文档对象模型)的缩写，DOM 是 W3C（万维网联盟）的标准
  
  通过DOM，我们可以访问所有的HTML元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素
- DOM树
  
  加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构，DOM 将这种树型结构称为节点组成的节点树
  
  标签的包含关系
  
  抽象成对象的结构
- 元素节点对象的获取方式
  
  document.getElementById()
  
  获取特定ID元素的节点对象(返回一个对象)
  
  getElementsByTagName()
  
  获取指定标签名的节点列表(返回一个数组)
  
  需要遍历
  
  getElementsByName()
  
  获取相同name属性值的节点列表(返回一个数组)
  
  需要遍历
  
  getElementsByClassName()
  
  获取相同class值的节点列表(返回一个数组)
  
  需要遍历
DOM进阶

DOM概念
- Document Object Model
  
  文档对象模型
- DOM 是 W3C（万维网联盟）的标准
- DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式
- D
  
  可以理解为整个Web加载的网页文档
- O
  
  可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是 document 对象
- M
  
  可以理解为网页文档的树型结构
- DOM树
  
  加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构称为节点组成的节点树
元素节点
- 元素节点的获取方式
  
  getElementById()
  
  获取特定ID元素的节点对象(返回一个对象)
  
  getElementsByTagName()
  
  获取指定标签名的节点列表(返回一个数组)
  
  getElementsByName()
  
  获取相同name属性值的节点列表(返回一个数组)
  
  getElementsByClassName()
  
  获取相同class值的节点列表(返回一个数组)
- getElementById()
  
  var box = document.getElementById('box');
  
  如果id值存在, 但是返回null，则是执行顺序的问题
  
  把<script>标签(JS代码)移到html结构后面
  
  使用onload事件来处理， onload事件会在html加载完毕后再调用
  
  window.onload=function() { document.getElementById('box'); //id具有唯一性 };
- 元素节点的属性
  
  tagName
  
  元素节点对象所指向的标签名称
  
  id
  
  元素节点的id属性值
  
  innerHTML
  
  元素节点中的内容
  
  innerText
  
  className
  
  元素节点的class属性值
  
  style
  
  css内联样式对象
  
  box.style.width = start * 5 + "px"
  
  title
  
  元素节点的title属性值
- 获取子元素节点
  
  利用document
  
  document.getElementsByTagName();
  
  document.getElementByName();
  
  通过父元素节点
  
  <div id="box"> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> </div> <img id="showImg" src="images/4.jpg" />
  
  var oBox = document.getElementById("box"); var aImg = oBox.getElementsByTagName("img");
- DOM节点间关系的相关属性
  
  parentNode
  
  返回该节点的父节点
  
  console.log(box.parentNode.nodeName);
  
  previousSibling
  
  返回该节点的前一个同级节点
  
  空白区域也算
  
  previousElementSibling
  
  返回该节点的前一个同级节点
  
  忽略空白区域
  
  nextSibling
  
  返回该节点的后一个同级节点
  
  nextElementSibling
  
  返回该节点的后一个同级节点
  
  忽略空白区域
- DOM节点操作
  
  createElement();
  
  创建一个元素节点
  
  var newEle = document.createElement(‘div’);
  
  appendChild();
  
  添加一个新子节点到节点的末尾
  
  box.appendChild(pNode);
  
  通过父节点调用
  
  createTextNode();
  
  创建一个文本节点
  
  var textNode = document.createTextNode(‘段落’);
  
  段落是文本节点的内容
  
  insertBefore();
  
  将新节点插入到某节点前面
  
  box.parentNode.insertBefore(p, box);
  
  通过父节点调用, 在box之前插入一个新节点p;
  
  replaceChild();
  
  将新节点替换旧节点
  
  box.parentNode.replaceChild(p, div);
  
  通过父节点调用, 新节点p替换了旧节点div
  
  cloneNode();
  
  复制节点
  
  var newNode = box.firstChild.cloneNode(true);
  
  这里box是父节点
  
  通过父节点调用，获取第一个子节点, true表示复制标签和内容 , false表示只复制标签
  
  removeChild();
  
  移除节点
  
  box.parentNode.removeChild(box);
  
  通过父节点调用, 来删除指定子节点
事件初步

基本概念
- JS中的事件
  
  用户在页面上操作, 然后我们要调用函数来处理
- 事件触发
  
  用户在页面上操作(如点击按钮, 鼠标滑过, 鼠标点击, 鼠标松开, 文本框获得焦点, 失去焦点等), 就是事件触发
事件模式
- 内联模式
  
  直接在HTML标签中添加事件
  
  这种模型是最传统简单的一种处理事件的方法。但是这种模式中事件和HTML是混写的, 并没有将JS与HTML分离, 当代码量多了以后,对后期代码维护和扩展很不利
  
  <input type="button"value="按钮" onclick="btnClick();" />
  
  注意: 内联模式调用的函数不能放到window.onload里面, 否则会找不到该函数
- 脚本模式
  
  脚本模式能将JS代码和HTML代码分离, 符合代码规范
  
  使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件
  
  方式一
  
  var box = document.getElementById('box'); box.onclick = function() { console.log('Hello world!'); };
  
  通过匿名函数，可以直接触发对应的代码 (推荐)
  
  方式二
  
  box.onclick = func; //注意这里不能写成func() function func() { console.log('Hello world!'); };
  
  通过指定的函数名赋值的方式来执行函数
事件的组成
- 触发事件的元素节点对象
- 事件处理函数
  
  所有的事件处理函数都会都有两个部分组成，on+事件类型
  
  事件处理函数一般都是小写字母
- 事件执行函数
  
  document.onclick = function(){ console.log('单击了文档页面的某一个地方'); };
  
  document : 是触发事件的对象, 表示触发事件的元素所在区域
  
  onclick : 表示一个事件处理函数(on+事件类型click)
  
  function(){} : 匿名函数是被执行的函数, 用于触发事件后执行
事件的分类
- 鼠标事件
  
  onclick
  
  当单击鼠标按钮并在松开时触发
  
  X.onclick = function() { console.log('单击了鼠标'); };
  
  ondblclick
  
  当双击鼠标按钮时触发
  
  onmousedown
  
  当按下了鼠标还未松开时触发
  
  onmouseup
  
  释放鼠标按钮时触发
  
  onmouseover
  
  当鼠标移入某个元素的那一刻触发
  
  只在移入本元素时调用一次
  
  onmouseenter
  
  当鼠标移入某个元素的那一刻触发
  
  移入内部元素都会进行触发
  
  onmouseout
  
  当鼠标刚移出某个元素的那一刻触发
  
  移入内部元素也算是一种移出
  
  onmouseleave
  
  当鼠标刚移出某个元素的那一刻触发
  
  只在移出本元素时触发一次
  
  onmousemove
  
  当鼠标指针在某个元素上移动时触发
- 键盘事件
  
  键盘事件，在键盘上按下键时触发的事件
  
  一般由window对象或者document对象调用
  
  onkeydown
  
  当用户按下键盘上某个键触发，如果按住不放，会重复触发
  
  window.onkeydown = function() { console.log(按下了键盘上的某个键); };
  
  onkeypress
  
  当用户按下键盘上的字符键触发，如果按住不放，会重复触发
  
  onkeyup
  
  当用户释放键盘上的某个键触发
- HTML事件
  
  onload
  
  当页面完全加载后触发
  
  window.onload = function() { console.log('页面已经加载完毕'); };
  
  onunload
  
  当页面完全卸载后触发
  
  onselect
  
  当用户选择文本框(input 或 textarea)中的内容触发
  
  onchange
  
  当文本框(input 或 textarea)内容改变且失去焦点后触发
  
  onfocus
  
  当页面或者元素获得焦点时触发
  
  onblur
  
  当页面或元素失去焦点时触发
  
  onscroll
  
  当用户滚动带滚动条的元素时触发
- 循环事件中的下标
  
  在JS事件中, this表示触发事件的元素节点对象
  
  var box = document.getElementById('box'); box.onclick = function() { console.log(this.nodeName); //this表示box对象 };
  
  通过for循环添加事件, 使用this
  
  var aInput = document.getElementsByTagName('input'); for (var i=0; i<aInput.length; i++) { aInput[i].index = i; aInput[i].onclick = function() { console.log(this.index); }; }
  
  用index存储下标
事件对象
- 事件对象(event对象)
  
  event对象是在触发事件时, 浏览器会通过函数把事件对象作为参数传递过来, 在事件触发执行函数时一般会得到一个隐藏的参数
  
  var container = document.getElementById("container"); container.onclick = function(event){ console.log(event); }
- 事件对象的属性
  
  button
  
  鼠标按下了哪个键
  
  0左键
  
  1鼠标滚轮键(一般)
  
  2右键(一般)
  
  坐标
  
  clientX: 浏览器可视区域的x坐标
  
  clientY: 浏览器可视区域的y坐标
  
  pageX: 浏览器内容区域的x坐标
  
  pageY: 浏览器内容区域的y坐标
  
  screenX: 显示器屏幕的x坐标
  
  screenY: 显示器屏幕的y坐标
  
  offsetX: 鼠标坐标到元素的左侧的距离
  
  offsetY: 鼠标坐标到元素的顶部的距离
  
  键盘事件的组合键
  
  shiftKey
  
  判断是否按下了Shift键
  
  ctrlKey
  
  判断是否按下了Ctrl键
  
  altKey
  
  判断是否按下了Alt键
  
  键码
  
  所有按键(包括功能键control, alt,shift, tab, 方向键等, 不包括亮度,音量...的按键)在发生 keydown和keyup 事件时，event对象的 keyCode属性中会包含一个代码，与键盘上一个特定的键对应
  
  对数字字母字符集，keyCode属性的值与 ASCII 码中对应
  
  document.onkeydown = function(event) { console.log(event.keyCode); //按任意键，得到相应的 keyCode };
  
  对于onkeydown而言，大写字母或小写的编码相同, 都为大写字母
  
  字符编码: charCode属性
  
  Firefox, Chrome和Safari的event对象支持charCode属性, 只有按下字符键并且使用keypress事件时才会得到charCode, 这个charCode的值和UniCode码对应
  
  charCode的字母区分大小写. ( 字符键: 数字, 字母(区分大小写), 字符, 空格, 回车 )
  
  用了keypress后，keyCode也区分大小写
  
  document.onkeypress = function(event) { console.log(event.charCode); }
  
  可以使用 String.fromCharCode()将 Unicode 编码转换成实际的字符
阻止事件冒泡
- 事件流
  
  事件流描述的是从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而是层叠在你点击范围的所有元素都会触发事件
  
  事件流包括两种模式：冒泡和捕获
- 事件冒泡
  
  事件冒泡是从里往外逐个触发. 事件捕获, 是从外往里逐个触发. 现代的浏览器默认情况下都是事件冒泡的模式
- 阻止事件冒泡的方法
  
  一般我们只在指定的节点上添加事件, 而不想让其传递到下层节点触发事件, 这样我们就需要阻止事件冒泡
  
  evt.stopPropagation();
  
  停止传播
- 例
  
  var first = document.getElementById("first"); var second = document.getElementById("second"); var third = document.getElementById("third"); first.onclick = function(event){ console.log(1); } second.onclick = function(event){ console.log(2); // event.stopPropagation(); } third.onclick = function(event){ console.log(3); event.stopPropagation(); }
事件进阶&CSS3

事件
- 阻止右键菜单默认行为
  
  如果我们想要创建自己的右键菜单, 则需要先阻止默认的右键菜单
  
  document.oncontextmenu = function(){ console.log("右键被按下"); return false;}
  
  自定义右键菜单
  
  右键菜单初始状态为隐藏
  
  right_menu.style.display = "none";
  
  右键菜单的位置跟随鼠标移动的位置
  
  onmousemove
  
  右键后，右键菜单状态为可见
  
  right_menu.style.display = "block";
- 获取生效的style样式
  
  style=window.getComputedStyle(element, null)
  
  传入的两个参数，元素和伪类
  
  第二个参数伪类是非必传的，当不需要查询伪类时，可以忽略，或者传入null
  
  获取计算后的属性
  
  与HTMLElement.style的区别
  
  HTMLElement.style获取的是内联样式，即写在元素style上的属性
  
  可以通过Window.getComputedStyle()去获取样式，使用HTMLElement.style去修改样式
- 拖拽
  
  实现拖拽相关的三大事件
  
  onmousedown
  
  onmousemove
  
  onmouseup
  
  实现拖拽的思路
  
  给目标元素添加onmousedown事件(鼠标按下事件)
  
  当onmousedown事件发生以后(鼠标按下后)，就给document添加onmousemove事件(鼠标移动事件)
  
  在onmousedown事件(鼠标按下事件)发生以后，给document再添加onmouseup事件(鼠标松开事件)，且在onmouseup事件中，取消document的onmousemove事件
- 事件监听器
  
  事件监听器, 是JS事件中的一种事件触发机制, 我们可以通过添加事件监听器的方式给元素添加事件及执行函数
  
  添加事件监听器
  
  box.addEventListener(“click”, func, false)
  
  第三个参数(false/true) : 是否使用捕捉(反向冒泡)，默认false，为冒泡
  
  container.addEventListener("click",function(){ console.log("container被点击"); },true);
  
  移除事件监听器
  
  box.removeEventListener(“click”, func)
  
  这里只会删除使用box.addEventListener()方法添加的事件监听器
- offsetTop和offsetLeft
  
  offsetTop
  
  自身上外边框到定位父级的上内边框的距离
  
  offsetLeft
  
  自身左外边框到定位父级的左内边框的距离
HTML5基础
- HTML5发展史
  
  HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG（网页超文本应用技术工作小组）提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队
  
  2013年5月6日， HTML 5.1正式草案公布
- HTML5语法
  
  DOCTYPE声明
  
  <!DOCTYPE html>
  
  指定字符编码集
  
  <meta charset="UTF-8">
  
  可省略标记的元素
  
  不允许写结束标记的元素
  
  br、col、embed、hr、img、input、link、meta
  
  可以省略结束标记的元素
  
  li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
  
  可以省略全部标记的元素
  
  html、head、body、colgroup、tbody
- video和audio的应用
  
  video元素定义视频
  
  <video src="movie.ogg" controls="controls">Video元素</video>
  
  audio元素定义音频
  
  <audio src="someaduio.wav">Audio元素</audio>
  
  属性
  
  controls
  
  如果出现该属性，则向用户显示控件，比如播放按钮
  
  autoplay
  
  如果出现该属性，则视频在就绪后马上播放
  
  loop属性
  
  重复播放属性
  
  muted属性
  
  静音属性
  
  poster属性
  
  视频的海报图片，直到用户点击播放按钮
  
  <source>标签
  
  为媒介元素（比如 <video> 和 <audio>）定义媒介资源，允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择
  
  <video controls> <source src="../mv/movie.ogg" type="video/ogg"> <source src="../mv/web.mp4" type="video/mp4"></video>
- HTML5智能表单
  
  Type=“email” 限制用户必须输入email类型
  
  它不检查email地址是否存在
  
  具有multiple属性，它允许在该文本框中输入一串以逗号分隔的email地址
  
  Type=“url” 限制用户必须输入url类型
  
  Type=“range” 产生一个滑动条表单
  
  它具有min属性与max属性，及step属性
  
  Type=“search” 产生一个搜索意义的表单
  
  Type=“color” 生成一个颜色选择的表单
  
  Type=“time” 限制用户必须输入时间类型
  
  Type=“month” 限制用户必须输入月类型
  
  Type=“week” 限制用户必须输入周类型
  
  Type=“datetime-local” 选取本地时间
  
  Number类型
  
  专门用来输入数字的文本框。在提交时会检查其中的内容是否为数字，具有min、max、step的属性
CSS3的选择器及属性
- CSS3的优势及概念
  
  CSS3语言开发是朝着模块化发展的
  
  CSS3将完全向后兼容
  
  CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果，而且可以很简单的设计出现在的设计效果
- 渐进增强和优雅降级
  
  渐进增强
  
  针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
  
  优雅降级
  
  一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
- CSS3选择器
  
  以title属性为例：
  
  E[attr]
  
  只使用属性名，但没有确定任何属性值
  
  li[title]{background:red;}
  
  E[attr="value"]
  
  指定属性名，并指定了该属性的属性值
  
  li[class="first"]{background:green;}
  
  E[attr~="value"]
  
  指定属性名，并且包含有指定词汇，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，注意是词列表，以空格隔开
  
  li[title~="ya"]{background:#ccc;}
  
  E[attr^="value"]
  
  指定了属性名，并且有属性值，属性值是以value开头的
  
  li[title^="zhao"]{background:#fcc;}
  
  E[attr$="value"]
  
  指定了属性名，并且有属性值，而且属性值是以value结束的
  
  li[title$="zhao"]{background:#faa;}
  
  E[attr*="value"]
  
  指定了属性名，并且有属性值，而且属值中包含了value，注意，这里属性值包含value即可
  
  li[title*="hua"]{background:#dcc;}
  
  E[attr|="value"]
  
  指定了属性名，并且属性值是value或者以“value-”开头的值
  
  li[lang|="en"]{font-weight: bold;}
  
  lang属性，设定语言
  
  结构性伪类选择器
  
  X:first-child 匹配父元素的第一个X元素
  
  li:first-child{background:red;}
  
  X:last-child匹配父元素中最后一个X元素
  
  li:last-child{background:yellow;}
  
  X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始
  
  li:nth-child(2){background:#fcc;}
  
  li:nth-child(2n){background:#fcc;}
  
  匹配偶数索引子元素
  
  li:nth-child(2n-){background:#fcc;}
  
  匹配奇数索引子元素
  
  X:only-child匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配
  
  p:only-child{background:red;}
  
  X:nth-last-child(n)从最后一个开始算索引
  
  li:nth-last-child(1){background:#caa;}
  
  X:first-of-type匹配同级兄弟元素中的第一个X元素
  
  p:first-of-type{background:#bcc;}
  
  X:last-of-type匹配同级兄弟元素中的最后一个X元素
  
  p:last-of-type{background:#bcc;}
  
  X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X
  
  li:nth-of-type(2){background:#bbb;}
  
  X:only-of-type匹配属于同类型中唯一兄弟元素的X
  
  p:only-of-type{background:#ddd;}
  
  只有一个p才会匹配到
  
  X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素
  
  li:nth-last-of-type(1){background:red;}
  
  :root匹配文档的根元素
  
  在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
  
  :root{background:#c2c2c2;}
  
  X:empty匹配没有任何子元素（包括包含文本）的元素X
  
  li:empty{background:red; 100px;height: 20px;}
  
  <li>剑圣，我的剑，就是你的剑 </li> <li></li> <li>盲僧，我用双手成就你的梦想</li>
  
  层级选择器
  
  E F
  
  包含选择器
  
  选择所有被E元素包含的F元素
  
  E>F
  
  子选择器
  
  选择所有作为E元素的子元素F
  
  与包含选择符(E F) 不同的是，子选择符只能命中子元素，而不能命中孙辈
  
  E+F
  
  相邻选择器
  
  与兄弟选择符(E~F) 相同的是，相邻选择符也是选择同级的元素F；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）
  
  E~F
  
  兄弟选择器
  
  选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级
- CSS3文本属性
  
  文本阴影属性
  
  语法：text-shadow
  
  text-shadow: 2px 2px 2px red
  
  水平阴影位置垂直阴影位置阴影模糊距离阴影颜色
  
  盒子阴影属性
  
  box-shadow: 10px 10px 5px 10px #888888 inset;
  
  水平阴影位置垂直阴影位置模糊距离阴影大小阴影颜色阴影向内
  
  后四个参数可以省略
  
  文本换行相关属性
  
  word-warp
  
  normal
  
  只在允许的断字点换行（浏览器保持默认处理）
  
  break-word
  
  属性允许长单词或 URL 地址换行到下一行
  
  Word-break
  
  break-all
  
  它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句
  
  Keep-all
  
  文本不会换行，只能在半角空格或连字符处换行
  
  @font-face
  
  @font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中
  
  语法规则
  
  @font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }
  
  YourWebFontName:此值指的就是你自定义的字体名称
  
  source:此值指的是你自定义的字体的存放路径
  
  format：此值指的是你自定义的字体的格式
动画
- CSS3渐变（gradient）
  
  可以让你在两个或多个指定的颜色之间显示平稳的过渡
  
  线性渐变
  
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
  
  direction
  
  to left、top right、to bottom、to top
  
  to right bottom、top right top、top left bottom、top left top
  
  使用角度渐变
  
  div { background: linear-gradient(10deg, red, blue) }
  
  0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变
  
  角度代表着渐变线的方向
  
  径向渐变
  
  径向渐变是从“一个点”向四周的颜色渐变
  
  background: radial-gradient(center, shape, size, start-color, ..., last-color);
  
  center：渐变起点的位置，可以为百分比，默认是图形的正中心
  
  shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样
  
  size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角
  
  div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); }
  
  div { background: radial-gradient(red 5%, green 15%, blue 60%); }
  
  重复渐变
  
  重复性线性渐变
  
  div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }
  
  10%的位置为yellow，20%的位置为green，然后按照这20%向下重复
  
  重复性径向渐变
  
  div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }
- transition
  
  css3的transition允许css的属性值在一定的时间区间内平滑地过渡
  
  transition-property
  
  检索或设置对象中的参与过渡的属性
  
  transition-duration
  
  检索或设置对象过渡的持续时间
  
  transition-delay
  
  检索或设置对象延迟过渡的时间
  
  transition-timing-function
  
  检索或设置对象中过渡的动画类型
  
  linear
  
  匀速
  
  ease
  
  逐渐慢下来
  
  ease-in
  
  加速
  
  ease-out
  
  减速
  
  ease-in-out
  
  先加速后减速
  
  transtion:all/具体属性值运动时间s/ms 延迟时间s/ms 动画类型
- CSS3 2Dtransform
  
  属性
  
  rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey()
  
  translate(tx,ty)或者 translate(tx)
  
  将元素向指定的方向移动
  
  水平向右，竖直向下为正
  
  translateX()
  
  水平方向移动一个对象
  
  translateY()
  
  纵轴方向移动一个对象
  
  scale()
  
  让元素根据中心原点对对象进行缩放。默认的值1
  
  他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等
  
  rotate()
  
  旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转
  
  主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转
  
  rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
  
  定义沿 X 轴的 3D 旋转
  
  rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
  
  定义沿 Y 轴的 3D 旋转
  
  skew()
  
  倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜
  
  一个参数时：表示水平方向的倾斜角度；两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度
  
  水平方向上的拉伸变形及竖直方向上的拉伸变形
  
  transform-origin
  
  transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用
- CSS3动画
  
  CSS3属性中有关于制作动画的三个属性
  
  transform,transition,animation
  
  transition+transform
  
  过度+转场实现动画
  
  并不是真正的动画
  
  transition需要触发一个事件(hover事件或click事件等)才会随时间改变其
  
  animation
  
  是真正的动画
  
  animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation只需要明确的动画属性值
  
  语法
  
  @keyframes mymove{ from{初始状态属性} to{结束状态属性}}
  
  mymove为动画名
  
  keyframes关键帧
  
  @keyframes mymove{ 0%{初始状态属性} 20%{中间状态属性} 100%{结束状态属性} }
  
  写在css的开头，确保最先加载，避免出现其他的问题
  
  animation-name
  
  检索或设置对象所应用的动画名称
  
  必须与规则@keyframes配合使用
  
  @keyframes move{}
  
  #container{animation-name:move;}
  
  animation-duration
  
  检索或设置对象动画的持续时间
  
  animation-duration:3s;
  
  animation-timing-function
  
  检索或设置对象动画的过渡类型
  
  linear,ease,ease-in......
  
  step-start:马上跳到动画每一结束桢的状态
  
  animation-delay
  
  检索或设置对象动画延迟的时间
  
  animation-delay:0.5s;
  
  animation-iteration-count
  
  检索或设置对象动画的循环次数（包含初始的第一次）
  
  animation-iteration-count: infinite | number;
  
  animation-direction
  
  检索或设置对象动画在循环中是否反向运动
  
  normal：正常方向 reverse：反方向运行 alternate：动画先正常运行再反方向运行，并持续交替运行 alternate-reverse：动画先反运行再正方向运行，并持续交替运行
  
  animation-play-state
  
  检索或设置对象动画的状态
  
  animation-play-state:running | paused;
  
  animation-play-state:paused;
  
  当鼠标经过时动画停止，鼠标移开动画继续执行
  
  animation-fill-mode
  
  规定对象动画时间之外的状态
  
  none不改变默认行为
  
  forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
其他
- draggable
  
  draggable属性可以控制图片是否允许拖动，默认效果，拖动并不是真正移走了，而是有一个拖动的阴影
  
  draggable=false
- setTimeout
  
  只执行一次
  
  setTimeout(function () { console.log("延迟执行") fengche.style.transform = "rotate(8turn)"; }, 2000)
jQuery

jQuery概述
- 简介
  
  jQuery是什么
  
  是一个JavaScript程序库
  
  JS是语言，jQuery是建立在这个语言上的一个基本库(框架)，利用jQuery可以更简单的使用JS
- jQuery优势
  
  轻量级，使用灵巧(只需引入一个js文件)
  
  强大的选择器(模仿CSS选择器更精确、灵活)
  
  出色的DOM操作的封装(动态更改页面样式/页面内容,添加、移除等)
  
  可靠的事件处理机制(动态添加响应事件)
  
  提供基本网页特效(提供已封装的网页特效方法)
  
  完善的Ajax
  
  易扩展、插件丰富
- jQuery版本
  
  jquery.js(开发版)
  
  完整无压缩版本，主要用于测试、学习和开发
  
  jquery.min.js(生产版)
  
  经过工具压缩, 主要应用于产品和项目
  
  jQuery不需要安装，把下载的jquery.js放到网站上的一个公共的位置，想要在某个页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件的位置即可
jQuery操作初步
- 引入jQuery包
  
  a. 引入本地的jQuery
  
  b. 引入在线的库文件
  
  在jQuery库中，(是jQuery的别名，)()等效于就jQuery()
- 文档就绪事件
  
  jQuery入口函数
  
  $(document).ready(function(){ // 执行代码 });
  
  $(function(){ // 执行代码 });
  
  jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行
  
  JS入口函数
  
  window.onload = function () { // 执行代码 }
  
  JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行
  
  如果写在body的最后，则默认已经加载完毕，不需要入口函数，灵活处理
jQuery对象与DOM对象
- DOM对象
  
  var domObj = document.getElementById(“id”); var objHtml = domObj.innerHTML；
- jQuery对象
  
  就是通过jQuery包装DOM对象后产生的对象
  
  $("#foo").html();
  
  document.getElementById(“foo”).innerHTML;
- 相互转换
  
  DOM对象转成jQuery对象
  
  var foo = document.getElementById(“foo”); var $foo = $(foo);
  
  jQuery对象转成DOM对象
  
  jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
  
  var $foo = $(“#foo”); var foo = $foo[0]; 或 var foo = $foo.get(0);
jQuery字典
- 核心（最常用的地方）
  
  jQuery(选择器)
  
  获取jQ对象
  
  jQuery(html)
  
  创建html对象
  
  $("<div>", { "class": "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); }}).appendTo("body");
  
  动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中
  
  jQuery(callback)
  
  callback回调函数
  
  就是一个function，指的是页面加载好了，准备好了
  
  jQuery.holdReady
  
  开发jQuery插件使用
  
  each
  
  可以迭代所有匹配的对象
  
  $("img").each(function(i){ this.src = "test" + i + ".jpg"; });
  
  [ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
  
  size()
  
  方法
  
  length
  
  属性
  
  selector
  
  当前对象通过哪个选择器获取过来的
  
  context
  
  jQuery关联的是哪块的DOM上下文
  
  get(index)
  
  根据索引获取对应的元素
  
  index
  
  计算指定元素的索引值
  
  data
  
  将数据绑定在jQuery对象上
  
  $("div").data("blah"); // undefined$("div").data("blah", "hello"); // blah设置为hello$("div").data("blah"); // hello
  
  queue
  
  元素上的执行序列
  
  noConflict
  
  没有冲突
  
  礼让$
- 选择器（获取元素手段）
  
  基本选择器
  
  #id
  
  element
  
  .class
  
  *
  
  selector1,selector2...selectorN
  
  层级选择器
  
  ancestor descendant
  
  parent > child
  
  prev + next
  
  prev ~ siblings
  
  伪类选择器
  
  :first
  
  :last
  
  :not()
  
  :even
  
  :odd
  
  :eq(index)
  
  注意，索引从0开始
  
  :gt(index)
  
  :lt(index)
  
  :nth-child
  
  :first-child
  
  :last-child
- 属性
  
  attr
  
  支持任意属性
  
  removeAttr
  
  prop
  
  只支持html内置属性
  
  removeProp
  
  class
  
  addClass
  
  removeClass
  
  toggleClass（toggle切换）
  
  html
  
  设置或获取内容
  
  html(内容)设置
  
  html()获取
  
  text
  
  设置或获取文本内容
  
  text(内容)设置
  
  text()获取
  
  val
  
  设置或获取值
  
  val(值)设置
  
  val()获取
- 筛选/过滤规则
  
  对选择器进行补充
  
  eq(index|-index)
  
  index
  
  一个整数，指示元素基于0的位置,这个元素的位置是从0算起
  
  -index
  
  一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(1算起)
  
  first()
  
  last()
  
  hasClass(class)
  
  is(expr|obj|ele|fn)
  
  根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
- 文档处理（DOM操作）
  
  CRUD
  
  C
  
  $(html)创建元素
  
  append
  
  appendTo
  
  prepend
  
  prependTo
  
  R
  
  $("选择器")
  
  U
  
  css
  
  attr
  
  addClass
  
  removeClass
  
  D
  
  remove
  
  detach（与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来）
- CSS
  
  设置或获取
  
  key,value设置
  
  ($("p").css("color","red");
  
  设置一个属性用,分隔
  
  ($("p").css({ color: "#ff0011", background: "blue" });)
  
  设置多个属性中间用:分隔
  
  key获取
- 事件
  
  on
  
  在选择元素上绑定一个或多个事件的事件处理函数
  
  $("p").on("click", function(){alert( $(this).text() );});
  
  off
  
  bind
  
  为每个匹配元素的特定事件绑定事件处理函数
  
  一个事件一个处理函数/多个事件一个处理函数/多个事件多个处理函数
  
  $("button").bind({ click:function(){$("p").slideToggle();}, mouseover:function(){$("body").css("background-color","red");}, mouseout:function(){$("body").css("background-color","#FFFFFF");} });
  
  one
  
  只执行一次
  
  trigger
  
  $("#container").on("click",function(){ alert("gogogo"); }) setTimeout(function(){ $container.trigger("click"); },3000)
  
  注意，如果不设置Timeout，trigger就是触发的意思，即自动触发
  
  hover
  
  click
  
  鼠标事件等
jQ效果&Ajax&Vue

jQuery效果
- 自定义动画
  
  animate内写关键帧，设定持续时间及回调函数
  
  $("button").click(function(){ $("#box").animate({ left:"500px", top:"0px" },2000,function(){})
- slideDown/slideUp/slideToggle
- fadein/fadeout/fadeTo
Ajax
- 网络请求工具
  
  Python
  
  urllib
  
  requests
  
  封装urllib
  
  前端
  
  jQuery中的Ajax
  
  网络请求核心点
  
  请求地址
  
  请求方法
  
  请求参数
  
  请求结果
- $.getJSON()
  
  $.getJSON("data/movie_list.json", function(data) {});
- $.get()
  
  $.get("data/movie_list.json",function(data){},"json");
- $.ajax({})
  
  $.ajax({type: "get",url: "data/movie_list.json",success: function(data) {});
Vue初步
- 简介
  
  一套用于构建用户界面的渐进式框架
  
  Vue 的核心库只关注视图层
- 引入vue
  
  网络版本
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
  本地版本
  
  <script src="vue.js" type="text/javascript" charset="utf-8"></script>
- 声明式渲染
  
  Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
  
  一个 Vue 应用会将其挂载到一个 DOM 元素上，然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部
  
  html
  
  <div id="container"> {{ message }}</div>
  
  js
  
  var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})
- 绑定元素 attribute
  
  <span v-bind:title="message">title提示</span>
  
  也可以通过浏览器更新data中的message，进而来更新span标签的title提示
- 条件与循环
  
  条件
  
  <p v-if="seen">现在你看到我了</p>
  
  对应data中的seen值为true/false，控制v-if为true/false，进而控制标签是否显示
  
  可以在控制台更新
  
  循环
  
  <li v-for="todo in todos"> {{ todo.text }}</li>
  
  data中有一个列表为todos，列表的每一个元素都是一个字典，字典的key为text
  
  可以在控制台更新
  
  container.todos.push({ text: '新项目' })
- 处理用户输入
  
  v-on监听
  
  <button v-on:click="reverseMessage">反转消息</button>
  
  vue对象有一个名为reverseMessage的方法
  
  v-model
  
  实现表单输入和应用状态之间的双向绑定
  
  <p>{{ message }}</p><input v-model="message">
  
  将input的value与message绑定
- 组件化应用构建
  
  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="code/HelloJQ/js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="container"> <button type="button" v-on:click="getdata">获取数据</button> <ul> <test_li v-for="movie in movie_list" v-bind:film="movie"></test_li> </ul> </div> <script type="text/javascript"> Vue.component("test_li", { props: ["film"], template: "<li><h2>{{ film.title }}<h2></li>" }); var vm = new Vue({ el: "#container", data: { movie_list: [] }, methods: { getdata: function() { $.getJSON("data/movie_list.json", function(data_origin) { vm.$data.movie_list = data_origin.data; }) } } }) </script> </body> </html>
  
  组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用
  
  注册组件
  
  Vue.component('todo-item', { template: '<li>这是个待办项</li>' }) var app = new Vue(...)
  
  创建实例
  
  <ol> <todo-item></todo-item> <todo-item></todo-item> </ol>
  
  从父作用域将数据传到子组件
  
  Vue.component('todo-item', { // todo-item 组件现在接受一个"prop"，类似于一个自定义 attribute，这个 prop 名为 todo props: ['todo'], template: '<li>{{ todo.text }}</li>' })
MVVM
- 一种软件架构模型
  
  软件设计规范，不是固定的标准
- Model
  
  模型
  
  数据
  
  data
- View
  
  视图
  
  展示数据的
  
  html
- ViewModel
  
  视图模型
  
  视图和模型的绑定
  
  核心思想：解耦合
  
  基本不需要去操作
bootstrap&swiper

bootstrap
- 简介
  
  Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷
  
  复制粘贴
  
  https://v3.bootcss.com/
- 加载插件
  
  使用在线插件
  
  使用离线插件
  
  <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css"/>  <script src="./bootstrap/bootstrap-3.3.7-dist/js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  
  需要额外加载jQuery插件，而且顺序在bootstrap插件之前
  
  移动设备优先
  
  在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能
- 使用
  
  在官网找到需要的样例，进行针对性的修改即可
- 栅格系统
  
  Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
  
  栅格参数
  
  参数分类屏幕尺寸
  
  手机屏幕
  
  平板屏幕
  
  桌面显示器
  
  大桌面显示器
  
  栅格系统行为
  
  总是水平排列
  
  开始是堆叠在一起的，当大于这些阈值时将变为水平排列
  
  类前缀
  
  .col-xs-
  
  .col-sm-
  
  .col-md-
  
  .col-lg-
  
  .container最大宽度
  
  None(自动)
  
  750px
  
  970px
  
  1170px
  
  栅格系统，优先使用大的，大的不行了用小的
  
  <div class="box col-lg-3 col-md-4 col-sm-6">1</div>
  
  <div class="container">
  
  非铺满
  
  <div class="row">
  
  铺满
swiper
- 轮播组件
- 使用方法
  
  加载插件
  
  <link rel="stylesheet" type="text/css" href="swiper-6.1.1/swiper-master/package/swiper-bundle.css"/> <script src="swiper-6.1.1/swiper-master/package/swiper-bundle.js" type="text/javascript" charset="utf-8"></script>
  
  html内容
  
  <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div>  <div class="swiper-pagination"></div>  <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div>  <div class="swiper-scrollbar"></div> </div>
  
  定义swiper大小
  
  .swiper-container { 600px; height: 300px; }
  
  初始化swiper
  
  <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }) </script>
  
  官网找到样式，自己修改
查看全文

相关阅读:
《游戏引擎构架Game Engine Architecture》略读笔记
 Visual Studio快速入门（大纲）
Linux课程学习第四课
 Linux课程学习第三课
 Linux课程学习第二课
 vmware虚拟机安装centos7.3
Win7 Linux双系统，恢复Linux启动项
 Java中Collection、Map常用实现类研究分析
 数据库计算每个表所占空间和记录数
 tomcat中部署多个项目，webAppRootKey 参数配置

原文地址：https://www.cnblogs.com/lotuslaw/p/14882698.html

Web前端快速入门

HTML基础

网站建站的流程

网页的组成部分

HTML基础

CSS

CSS基础

核心属性和浮动

CSS盒模型

js基础

js基础

循环语句

逻辑分支

字符串

数组

元素、定位、js对象及DOM

元素类型

定位

对象和日期

DOM初步

DOM进阶

DOM概念

元素节点

事件初步

基本概念

事件模式

事件的组成

事件的分类

事件对象

阻止事件冒泡

事件进阶&CSS3

事件

HTML5基础

CSS3的选择器及属性

动画

其他

jQuery

jQuery概述

jQuery操作初步

jQuery对象与DOM对象

jQuery字典

jQ效果&Ajax&Vue

jQuery效果

Ajax

Vue初步

MVVM

bootstrap&swiper

bootstrap

swiper