一轮总结【Pharber & Black Mirror 3.5】

0-写在前面

从上学期的数据库课设要求搭建网页开始接触到前端技术,到假期冯如杯做展示平台的开发,学习了一定的前端技术基础,再此记录一下学习的心得与收获。



1-基础知识补充

1-1 HTML5

【概述】

  W3C对于超文本标记语言HTML(HyperText Markup Language) 的第五次重大修改。是继HTML4.01以后的一个新的标准。自2008年第一份正式草案提出,至2014年W3C宣布HTML5规范订制完成,一共历时6年时间,目前大多数浏览器对HTML5支持。

支持H5的浏览器有Chrome, FireFox,Safari, Opera,IE9以上版本,等等。

【设计目的】

  HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式,包括:

  · 新的解析规则增强了灵活性

  · 新属性

  · 淘汰过时的或冗余的属性

  · 一个HTML5文档到另一个文档间的拖放功能

  · 离线编辑

  · 信息传递的增强

  · 详细的解析规则

  · 多用途互联网邮件扩展(MIME)和协议处理程序注册

  · 在SQL数据库中存储数据的通用标准(Web SQL)

【新增元素】

几个比较重要的新增元素。

  1.画布

    <canvas>标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API

  2.多媒体

    <audio>音频

    <vedio>视频

    <source>多媒体资源 <video> 和 <audio>

  3.新增表单

    <keygen>规定用于表单的密钥对生成器字段。

    <datalist>定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

    <output>定义不同类型的输出,比如脚本的输出。

1-2 CSS3

【概述】

  三级层叠样式表,是在CSS(Cascading Style Sheet)的基础上的技术升级版本。主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

【部分新增选择器】

  结构性伪类:如E:nth-child(n)匹配父元素中的第n个子元素E。

  目标伪类:E:target匹配相关URL指向的E元素。


【部分新增特性】

   CSS3的新特征有很多,例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。

1-3 BOM

  浏览器对象模型Browser Object Modeling。是用于描述浏览器对象之间关系的层次模型,BOM由多个对象组成,代表浏览器窗口的Window是顶层对象,其他对象都是该对象的子对象。

其主要功能可以支持:

  1. 弹出新浏览器窗口的能力;

  2. 移动、关闭和更改浏览器窗口大小的能力;

  3. 可提供WEB浏览器详细信息的导航对象;

  4.可提供浏览器载入页面详细信息的本地对象;

  5 .可提供用户屏幕分辨率详细信息的屏幕对象;

  6. 支持Cookies;

  7. Internet Explorer对BOM进行扩展以包括ActiveX对象类,可以通过JavaScript来实现ActiveX对象。



2-题目总结

2-1 position:relative 定位与position:absolute定位

  absolute是相对于浏览器定位,使元素脱离文档流。

  relative是相对于前一个容器定位,不使元素脱离文档流。

2-2 CSS中的继承

  子元素继承父元素的样式,只有部分属性可以继承,部分内容总结如下: 

  1、不可继承的属性

    • display

    • 背景图片、颜色

      background、background-color、background-image、background-repeat、background-position、background-attachment

    • 盒子模型属性

      width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

    • 定位属性

      float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

  2、可继承的属性

    • 字体系列  

      font:组合字体

      font-family:规定元素的字体系列

      font-weight:设置字体的粗细

      font-size:设置字体的尺寸

    • 部分的文本属性

      color   

      text-indent:文本缩进

      text-align:文本水平对齐

      line-height:行高

    • visibility

2-3 JavaScript中的函数参数传递方式

  ECMAScript中所有函数的参数都是按值传递的——《高程3》原话。

  但是为了便于理解,JS中的函数参数传递可以理解成按值传递和按引用传递。

  按值传递即在函数内部的改变不会对外部产生影响。

  我们可以把ECMAScript函数的参数想象成局部变量。在向参数传递基本类型的值时,被传递的值被复制给一个局部变量(即命名参数,或者用ECMAScript的概念来说,就是arguments对象中的一个元素)。在向参数传递引用类型时,会把这个值在内存中的地址(指针)复制给一个局部变量,因此这个局部变量的变化会反映在函数的外部。

  这就是在函数参数传递之中的两种形式,总结来看,在传基本类型的值时,传入复制的实参;传递对象时,会将引用传入argument对象中。



3-后记

  这一周的日程还算比较紧凑,每天一场面试,还是希望自己能好好准备,认真应对。

  本来投的是Black Mirror的岗位,去了之后发现Pharber和Black Mirror是同一家。公司给人感觉氛围还不错,面试官很友善。

  第一轮是笔试,题目比较基础;第二轮是做技术的学长来面的,问到了一些比较基础而且重要的概念,有的内容不太好描述,所以回来查了查补充成笔记整理下来;第三轮是公司的合伙人Boss直接来面,聊了一些跟后台开发相关的内容,还问了问我如果做后台开发是不是也不排斥。

  总之还有很多需要努力的地方,还要继续好好加油,踏踏实实学好技术,做自己真正喜欢的。

原文地址:https://www.cnblogs.com/chrischen98/p/10480462.html

时间: 2024-07-31 21:14:11

一轮总结【Pharber & Black Mirror 3.5】的相关文章

NFS共享MySQL使用DNS轮询实现Web负载均衡

NFS共享MySQL使用DNS轮询实现Web负载均衡 前言: 今天学习了NFS,遂结合前面学习的LAMP+Bind做一个实验,实现两台Web服务器采用同一个MySQL数据库和相同的网页文件,对LAMP和Bind不了解的可以去查看我以前写的博客: AnyISalIn的文章 实验拓扑图 实验环境 主机名 IP地址 实现 storage.anyisalin.com 192.168.2.5 NFS ns.anyisalin.com 192.168.2.2 dns,MySQL www.anyisalin.

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

jQuery----无缝轮播图

1.效果 2.html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/iconfont.css"> <link rel="stylesh

Maven:mirror和repository 区别

1 Repository(仓库) 1.1 Maven仓库主要有2种: remote repository:相当于公共的仓库,大家都能访问到,一般可以用URL的形式访问 local repository:存放在本地磁盘的一个文件夹,例如,windows上默认是C:\Users\{用户名}\.m2\repository目录 1.2 Remote Repository主要有3种: 中央仓库:http://repo1.maven.org/maven2/ 私服:内网自建的maven repository,

Android自己定义控件之轮播图控件

背景 近期要做一个轮播图的效果.网上看了几篇文章.基本上都能找到实现,效果还挺不错,可是在写的时候感觉每次都要单独去又一次在Activity里写一堆代码.于是自己封装了一下.这里仅仅是做了下封装成一个控件,不必每次反复写代码了. 效果图 实现分析 轮播图的功能就是实现左右滑动的广告.图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还须要在以下加一个指示器来标示滑动到了第几张轮播图.指示器我们能够用一个线性布局来依据要展示的轮播图设置显示的View,我们要做这种一个控件没

apache日志轮询cronolog安装配置

centos安装很简单 yum install epel-release yum install cronolog 然后配置虚拟主机 [[email protected] ~]# vim /opt/app/apache/conf/extra/httpd-vhosts.conf (虚拟主机配置文件) # # <VirtualHost *:80> ServerAdmin sadoc.blog.51cto.com DocumentRoot "/var/www" ServerNam

CSS-用伪类制作小箭头(轮播图的左右切换btn)

先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作. 第一个是left按钮,即prev: .vmc-arrow-left:after { content: "\e079"; } 第二个是right按钮的,也就是next下一张的按钮: .vmc-arrow-right:after { content: "\e

Bootstrap 轮播(Carousel)插件

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引用该插件的功能,那么您需要引用 carousel.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用bootstrap.js 或压缩版的 bootstrap.min.js. 实例 下面是一个简单的幻灯片,使用 Bootstrap 轮播(Carousel)插件显示了一个循环播放元

js轮播特效

1.自动轮播 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片轮播--无限轮播</title> <style> #tuijian{ border:1px #000000 solid; width:640px; height:500px; background-repeat:no-rep