Skip to content

Latest commit

 

History

History
136 lines (113 loc) · 4.91 KB

4.0_JavaScript_Brower.md

File metadata and controls

136 lines (113 loc) · 4.91 KB
Raw

title: 征服：JavaScript、brower speaker: bugzhang url: https://github.com/CSU-Apple-Lab/Slides-for-Web-Class description：中南大学苹果实验室web开发教程第四节 transition: slide3 files: /css/theme.moon.css theme: moon highlightStyle: monokai_sublime date: 2017年3月12日

================================================================ [slide]

Web开发系列——第四节

JavaScript、borewer

[slide]

1.1 JavaScript简史

https://news.cnblogs.com/n/558565/

  • 1994年12月，Navigator发布了1.0版

[slide]

1.2 HTML5新元素

  • <article> 定义页面独立的内容区域。
  • <aside> 定义页面的侧边栏内容。
  • <dialog> 定义对话框，比如提示框
  • <footer> 定义 section 或 document 的页脚。
  • <header> 定义了文档的头部区域
  • <nav> 定义导航链接的部分。
  • <section> 定义文档中的节（section、区段）。
  • <time> 定义日期或时间。
  • <video> 定义视频
  • <audio> 定义音频

[slide]

1.3 HTML5游览器支持

五大游览器:
-Safari：完全支持
-Chrome：完全支持
-Firefox：完全支持
-Opera：完全支持
-IE：9部分支持，10以上完全支持

所以之后开发，以HTML5为标准，不考虑其他老旧版本。

[slide]

2.1 CSS3简介

CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 CSS3 被拆分为一个个模块，一个模块负责一类样式。
CSS3的重要模块:
-选择器
-盒模型
-背景和边框
-文字特效
-2D/3D转换
-动画
-多列布局
-用户界面
-图片
-分页

[slide]

2.2 定位

为了让网页中的元素，在我们html中更加合理的分布和展示。我们需要使用position属性，对其进行定位。例如很多网页中的提示语浮动层，一些特殊情况的形状见的拼合。
定位种类:
-static：无特殊定位---默认
-absolute：绝对定位---对象从文档流中脱离（不再占位），使用left，right，top，bottom等属性进行绝对定位。其层叠展示，使用z-index来定义。
-relative:相对定位---可以使用left，right，top，bottom等属性进行位置调整，但是，原有位置，依然被其占据。
-fix:固定定位---相对游览器固定位置。

[slide]

2.3 盒子模型

所有HTML元素可以看作盒子，CSS盒模型封装周围的HTML元素，它包括：边距，边框，填充，内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距)：清除边框外的区域，外边距是透明的。 Border(边框)：围绕在内边距和内容外的边框，不透明的。 Padding(内边距)：清除内容周围的区域，内边距是透明的。 Content(内容)：内容。

[slide]

2.4 CSS3动画

动画：使元素从一种样式逐渐变化为另一种样式的效果。
animation：为绑定的元素创建动画，同时创建动画持续时间
@keyframes：指定一个CSS样式将逐步从目前的样式更改为新的样式，即完成了动画

 div {
    width:100px;
    height:100px;
    background:dodgerblue;
    animation:myfirst 5s;
 }
 
 @keyframes myfirst {
    from {background:dodgerblue;}
    to {background:sandybrown;}
 }

[slide]

2.5 响应式布局简介

Viewport

viewport 是用户网页的可视区域。 手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
-width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
-height：和 width 相对应，指定高度。
-initial-scale：初始缩放比例，即当页面第一次 load 的时候缩放比例。
-maximum-scale：允许用户缩放到的最大比例。
-minimum-scale：允许用户缩放到的最小比例。
-user-scalable：用户是否可以手动缩放。

[slide]

3.1 BootStrap

目前最流行的响应式框架，来自twitter

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.


官网地址：http://getbootstrap.com/
中文网：http://www.bootcss.com/

[slide]

4.1 Git && GitHub

Git是目前最流行的版本控制系统，由Linus开发 GitHub 是一个面向开源及私有软件项目的托管平台，是目前最大的托管平台