赵赵

删除回忆录丶 提交于 2020-02-03 17:12:08

title: 技术总结
date: 2018-02-09 22:14:00

##HTML和CSS和JavaScript的关系

  • 网页主要由三部分组成: 结构( Structure) 、 表现( Presentation) 和行为( Behavior)。
  • HTML —— 结构,是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包括文字、图片、视频等。 决定网页的结构和内容( “是什么”)。
  • CSS —— 表现( 样式),放于<style>标签内。就像网页的外衣。比如:标题字体、颜色变化、或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。设定网页的表现样式( “什么样子”)。
  • JavaScript( JS) —— 行为,是用来实现网页上的特效效果的。如:鼠标滑过的下拉菜单、鼠标滑过的背景色的改变、图片的轮播。可以说是,有动画的,有交互的一般都使用JavaScript来实现的。 控制网页的行为( “做什么”)。

###HTML

  1. <b>HTML文档结构</b>(括号里面的是注释)
    <!DOCTYPE html >
    *注:<!DOCTYPE>标签没有结束标签!

    <html >
    <head>(头部部分)
    <meta http-equiv=“ContentType”content=“text/html”;charset=gb2312>(可写可不写)
    <title>显示在浏览器标题栏中的标题</title>
    </head>
    <body>(主体部分)
    (页面内容)
    </body>
    </html>

    标签<body>中的属性有:
    bgcolor=颜色(背景颜色)background=图片的绝对路径或相对路径(背景图片)。

2.标题标签<hn></hn> n取1-6(设置文字标题)。

3.HTML文件的固定结构

  • <html>
  •       <head>…</head>
  •       <body>…</body>
  • </html>
    • <html></html>称为根标签,所有的网页标签都在<html></html>中
    • <head>标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<tittle>、<script>、<style>、<link>、<meta>等标签。
    • 在<body>和</body>标签之间的内容是网页的主要内容,如:<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

4.代码注释

  • 代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。
  • HTML注释
    语法:
    <!–注释文字 –>   ctrl+shift+/
  • CSS注释
    语法:
    /*注释语句*/

###HTML与XHTML区别
1.XHTML比HTML更严格,所有主流览器都支持XHTML
2.XHTML文档必须有XHTML DOCTYPE声明
3.XHTML元素必须正确被嵌套
4.XHTML元素始终是关闭的,空元素也必须正确被关闭
5.XHTML必须是小写
6.XHTML属性值必须加引号

###HTML为什么要语义化
1.屏幕阅读器会根据你的标记来阅读你的网页
2.PDA、手机等设备可能无法像电脑浏览器一样来渲染网页(通常是因为这些设备对css的支持较弱)
3.有利于SEO优化
4.便于团队的开发和维护

###HTML标签特性

  • HTML标签不区分大小写,<h1>和<H1>的识别是一样的,但建议小些,正常情况都 以小写为准。

###css

######css选择器

  • id选择器
  • 类选择器
  • 标签选择器
  • 兄弟选择器
  • 子选择器
  • 伪类选择器
  • 群组选择器
  • 通用选择器

######css盒模型

  • content padding(外边框) border margin(外边距)

######清除浮动的方法
(1) 给父级加高度
(2) clear:left;right;both
(3) 加一个空的div
(4) 给父级加display:inline-block
(5) 加<br/>
(6) Overflow;hidden
(7) 伪类after

######css定位

  • relative
    元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

  • absolute
    元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

  • fixed
    元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
    提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

  • 浮动
    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

###HTML5

  • HTML5代表着浏览器技术发展的一个新阶段,HTML5+CSS3+JavaScriptAPI是一套前端技术的结合
  • HTML5语法的特点:更简洁,更宽松

######语义化标签

  • 概念
    • 在合适的地方使用合适的标签,根据页面里面不同的内容来选择适合它的标签,而不是通篇只使用一种标签。
  • 优点
    • 对SEO优化有好处
    • 方便后期添加样式
    • 内容可读性高

######H5建立的一些规则

  • 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
  • 减少对外部插件的需求(比如 Flash)
  • 更优秀的错误处理
  • 更多取代脚本的标记
  • HTML5 应该独立于设备
  • 开发进程应对公众透明

######HTML5新增功能

  • form表单
    • action 提交地址
    • method 提交方式 get/post
    • enctype 规定内容在发送到服务器之前应如何对表单数据进行编码
    • target 控制提交数据之后,action指向的地址的打开方式
    • autofocus 在页面打开时将焦点自动设定到设置了该属性的组件上
    • required 指示输入字段的值是必需的,如果不填值就提交会出现提示并且也不会有提交的动作发出。
    • lable 用来将文字和指定的单选框、复选框或者任意的控件进行绑定
  • input表单
    • hidden   隐藏域
    • email     邮箱   自带验证功能
    • search   搜索
    • tel   电话号码
    • url   地址
    • color     改变填充色
    • number   数字
      • min   最小值
      • max   最大值
      • step   步数   数字差   偶数
    • range   滑块
      • min   最小值
      • max   最大值
      • value   起始值
    • date   日期  年   月   日
    • month   月   年   月
    • week   周   年   周
    • time   秒   时   秒
    • datetime   UTC时间
    • datetime-local   本地时间   年   月   日
    • 进度条:<progress>   value值:0–1
    • 刻度   :<meter>   value值:0–1
    • 下拉框:<datalist>放在input标签内,并且input的list值与datalist的id相同,datalist标签内放option标签 实现下拉功能。
    • 推拉条:<textarea>   值:  col   列   rows   行

######HTML5中的新特性:

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search

######音乐   audio

  • 用来解决音频播放的问题,并可以通过附加属性更好的控制音频的播放
    • 值:
      • autoplay:自动播放,默认预加载
      • controls:显示浏览器自带的控制条(每个浏览器都不同)
      • muted:静音
      • loop:循环播放
        • 不同的浏览器支持不同的音频格式,目前的浏览器还没有哪一种是获得所有浏览器的支持,要想做到兼容,至少支持两种格式
      • 音频格式:
        • .mp3.ogg
        • .mp3.wav
        • .mp3
      • preload=”true”   支持书写多个音频文件

######视频   video

  • 添加button实现播放及暂停功能,在JS中设置
    • 播放   .play();方法
    • 暂停   .pause();方法
  • 视频格式
    • mp4
    • WebM
    • ogg

######H5拖拽
拖拽API
拖拽API是h5的新特性
拖拽:drag
释放:drop
拖拽指的是鼠标点击原对象后一直移动对象不松手,一旦松手即释放了。
源对象:指的是我们鼠标点击的一个事物,这里可以是一张图片,一个div,一段文本等。
目标对象:指的是我们拖动源对象后移动到一块区域,源对象可以进入到这个区域,可以在这个区域上方悬停(未松手),可以松手释放源对象放置此处(一松手),也可以悬停后离开该区域
拖拽API相关 的函数
被拖拽的源对象可以触发的事件
1)ondragstart:原对象开始被拖动
2)ondrag:源对象被拖拽过程中(鼠标可能移动也可能未移动)
3)ondragend:源对象拖动结束

拖动源对象进入到上方目标对象可以触发的事件
1)ondragenter:目标对象被源对象拖动这进入;
2)ondragover:目标对象呗源对象拖动这悬停在上方
3)ondragleave:源对象拖动这离开目标对象
4)ondrop:源对象拖动着目标对象上方释放,放手

e.clientX 相对于可视区的坐标 chrome ff opera safari ie9及以上
e.pageX 相对于整个页面的坐标(加滚动条) chrome ff opera safari ie9及以上
e.offsetX 相对于当前坐标系的border左上角开始的坐标
e.layerX 相对于当前坐标系的border左上角开始的坐标 //存储数据
如何在拖动的源对象事件和目标事件中传递数据
e.dataTransfer{}数据传递对象
功能:用于在源对象和目标对象的事件间传递数据
源对象的事件处理中保留数据
e.datetransfer.satData(k,v)k,v必须是string类型
目标对象的事件处理中读取数据
var v=e.dataTransfer.getData(k);
处理浏览器的默认行为
e.preventdefult;

######cookies,sessionStorage和localStorage的区别

  • cookies

    • 数据的生命周期:
      一般由服务器生成,可设置失效时间,关闭浏览器后失效
    • 存储大小:
      4K
    • 与服务器端的通信:
      每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来 性能问题
    • 易用性:
      需要程序员自己封装,原生的cookie接口不好
  • localStorage

    • 数据的生命周期:
      除非被清除,否则永远保存
    • 存储大小:
      5mb
    • 与服务器的通信
      仅在客户端(即浏览器)保存,不参与与服务器的通信
    • 易用性:
      原生接口可以接受,也可以再次封装来对object和array更好的支持
  • sessionStorage

    • 数据的生命周期:
      仅在当前会话下有效,关闭页面或者浏览器后被清除
    • 存储大小:
      5mb
    • 与服务器的通信
      仅在客户端(即浏览器)保存,不参与服务器的通信
    • 易用性:
      原生接口可以接受,也可以再次封装来对object和array更好的支持。

###CSS3

######最重要的 CSS3 模块包括:
1)选择器
2)框模型
3)背景和边框
4)文本效果
5)2D/3D 转换
6)动画
7)多列布局
8)用户界面

######CSS3转化

  • transition 过渡
    1)参数一:过渡的时间 s 代表秒 ms毫秒
    2)参数二:过渡的属性(默认是过度所有的属性)all代表所有的属性
    3)参数三:过渡的方式 ease(默认的)减速运动 linear匀速 ease-in加速 ease-out减速 ease-in-out先加速后减速
  • transform:变换
    translate() rotate() scale() skew()

######CSS3兼容性并不好,写之前需要处理兼容问题

  • Can   I   use?   官网:查看兼容性
  • 绿色表示兼容,红色表示不兼容,黄色是部分兼容,灰色是未知是否兼容
  • 大专栏  赵赵ul>

    ######新增选择器

    • 属性选择器
      • 语法:标签[属性名=属性值]{}属性值可以加引号,可以不加引号,也可以是自定义属性
      • 伪类选择器   标准的伪类都是双冒号E::伪类
        • E:nth-child(n)   从E标签的父级中去获取第n个E标签(从上往下找)
        • nth-last-child(n)   从E标签的父级中去获取第n个E标签(从下往上找)
        • E:nth-of-type(n)   从E标签的父级中获取在父级下所有E标签中的第n个E标签(从上往下获取)
        • E:nth-last-of-type(n)   从E标签的父级中获取在父级下所有E标签中的第n个E标签(从下往上获取)
      • 隔行变色
        • nth-child(odd)奇数
        • nth-child(even)偶数
      • 目标伪类
        • E:target   类似于选项卡功能   修改锚点
      • 否定伪类
        • E:not(selector):selector可以是.class也可以是ID名称:除了selector的其他元素
      • 针对复选框和单选框的伪类
        • E:checked   表示被选中后的状态
      • 文本伪类
        • E:first-line   E标签里第一行文字状态
        • E:first-letter   E标签里第一个文字状态
        • E::selector   E标签里文字被选中状态,浏览器默认被选中色为蓝色
        • E:before   在E标签最前面添加文字
        • E:after   在E标签最后面添加文字
      • 选择后面的标签
        • E~F:找到E标签后面所有的F标签
      • 阴影
        • text-shadow   文字阴影
        • box-shadow   盒模型阴影

    ######CSS3动画
    animation
    @keyframes代表关键帧 name是自定义命名
    animation动画
    1)参数一:时间
    2)参数二:关键帧的名字
    3)参数三:运动 的方式

    • ease 默认的减速
    • linear 匀速的
    • ease-in 加速
    • ease-out 减速
    • ease-in-out 先加速后减速

    4)参数四:重复的次数
    数字
    infinite 无限次
    5)参数五:动画的顺序
    nomoal 正常
    alternate 顺时针 逆时针 偶数的次数会照着走 第一次0%-100%第二次100%-0%

    动画的暂停
    animation-play-state:表示动画的状态
    参数一:paused 暂停
    参数二:runnning 播放

    ######自适应网站的写法
    自适应网站(响应式) 可以在一个网站上,显示不同的屏幕分辨率的效果


    viewport 是网站默认的宽度和高度
    网页的宽度默认等于屏幕的宽度和高度
    原始比例缩放为1.0(initial-scale=1)即网页初始大小占屏幕面积的100%
    所有的主流浏览器都支持自适应,包括IE9以上的 IE678不支持 需要使用css3-mediaqueries.js;
    [if lt IE 9]
    <script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    [endif]
    不能使用绝对的宽度
    由于网页根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,包括元素也不能使用 width:xx% width:auto

    • @media screen and (max-width:500px) {
      body{
      background:blue;
      color:#fff;
      font-size:5rem;
      }
      }
      and左右必须有空格

    ###JavaScript

    ######JavaScript的组成
    ECMAScript(5.1) 核心
    DOM文档对象模型 描述处理网页内容的方法和接口
    BOM浏览器对象模型 描述浏览器进行交互的方法和接口

    ######JavaScript特点

    • 跨平台的WEB脚本语言
    • 向HTML页面添加交互行为
    • 可与服务器进行通讯

    ######JavaScript内容

    • 写在<script>和</script>标签内
    • 注释:ctrl+shift+?
      • 多行注释/**/
      • 单行注释//

    ######JS的引入方式

    • 外部脚本块 引入外部文件 src里的路径不允许写中文 script标签中不许放内容 多个文件可以公用一个 js文件,可以提高效率
    • 内部脚本块 一般写在body head部分 可以把样式和结构分离出来 但只能在当前页面使用
    • 行间样式 写的比较简单 但是后期维护率高 不利于后期维护

    ######变量命名规则
    允许是子母数字下划线美元任意组合 不允许数字开头 不允许关键字和保留字来命名

    ######函数

    • 命名函数
    • 匿名函数

    ######属性
    1.点 元素.属性名 获取到的结果是他的属性值
    2.[] 可以用中括号代替点,里边可以放带横杆的属性,但是必须把横杆去了,把横杆后的第一个字母大写

    ######数据类型
    |数据类型 |检测结果(type of) |
    | ————- |:————-:|
    | String |string|
    | Boolean | number |
    | Number | boolean |
    | Null | object |
    | Undefined | undefined |
    | Object | object |
    | function(属于Object) | function |

    ######DOM
    1.DOM 关于 创建 插入 修改 删除页面的元素的标准
    赋予我们操作页面的能力
    2.DOM 页面的内容都是字符串,js会把这些字符串转成dom树
    3.DOM树会把字符串转成节点,其实我们操作DOM的根本就是在操作节点

    ######BOM
    BOM 是关于浏览器的方法,属性,事件
    window.open()
    参数
    1.代表要打开的新网页的地址
    2.打开方式,是在本页面打开还是另外一个页面打开_black _self _iframName
    _self 在本窗口打开
    _black 在新窗口打开
    _iframName 在一个网页里面嵌套另一个网页
    3.打开新窗口的位置信息
    window.close()关闭页面
    window.location
    BOM方法可视区的宽和高window.innerWidth
    屏幕的宽和高 window.screen.width
    滚动条的距离 window.pageXOffset横向滚动条
    设置滚动条的距离 window.scrollTo(x,y)
    window.onscroll()监测滚动条的方法

    ###jQuery
    jQuery是js库,把常用的一些功能给封装好了,用它规定的API方法调用就好;知道它提供的方法是干嘛的就行;提供了很强大的选择器,简介的API,优雅的链式,便捷的操作。核心理念:写的少,做更多

    ######jQuery加载
    (1)$(callBack);
    (2)$(document).ready(callBack);
    (3)$().ready(callBack);
    jQuery获取到的元素都是集合
    获取元素的方法$(元素)
    用原生获取到的方法是不能用jquery里边的方法,如果想用的话,那就把原生获取到的元素转成jquery的形式

    ######jQuery事件(没有on)
    例如:$(‘selector’).click(callback);在事件里的this是原生的,如果要用this转成jquery的形式$(this);

    ###Ajax
    ajax是一种技术方案,但不是一种新技术,它依赖现有的css/html/javascript,而其中最核心依赖的是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出http请求和接收http请求

    ###jsonp(json+padding)
    1.通过script标签引入某些数据,是同步模式,只有上面的代码加载完成才能继续加载下面的代码一般用在script标签做跨域的时候,
    不建议数据提前加载,应该按需加载
    2.当需要数据是创建一个script标签,将需要的数据放在src中,通过onload去监听是否请求过来,请求完毕就调用传过来的数据
    3.jsonp不能用post请求只能用get请求

    ###git与github
    git是目前最先进的分布式版本控制系统,它在本地电脑里
    github是一个社交平台,开源项目,是一个远程仓库
    1、下载
    https://git-for-windows.github.io/
    2、在开始里打开Git Bash
    接下来要做的是把git绑定github
    3、打开github网站登录后
    1、点击最右上角的图标,点击settings
    2、再打开的页面左边点击SSH and GPG keys选项
    3、点击New SSH key
    4、在打开的页面里随便输入一个title
    4、找key
    在打开的软件(Git Bash)里输入ssh-keygen -t rsa -C ‘注册的邮箱’
    1、点击回车后提示要输入密码,可以输入也可以不输入
    2、接下来两次回车就可以,从提示的路径里找到对应的.ssh文件
    3、打开对应的路径,里面有两个id_rsa,打开带pub的那个id_rsa(里面带邮箱),复制里面的代码
    5、所复制的key放到网页里面,点击确定
    6、测试有没有绑定成功
    输入命令ssh -T git@github.com
    有提示 You have successfully authenticated就表示绑定成功
    7、设置用户信息(用于在提交的时候显示你的信息)
    查看的话,如果没有设置过的话什么也没有,查看也可以用git config –list
    设置用户名输入git config –global user.name ‘用户名’
    设置用户邮箱输入git config –global user.email ‘邮箱’
    8、建立项目(可能会提示输入密码)
    1、点击网站中右上角的加号
    2、点击弹出来框里面的New repository
    3、在Repository name输入框里输入项目名称
    4、在Description输入框里输入项目描述
    5、把Initialize this repository with a README的框打上对号,表示把项目的描述也放在文件夹里
    9、把项目放到本地
    1、在本地新建一个文件夹
    2、在命令提示框里找到新建的目录,用cd命令cd c: cd:github(tab可以补全)
    3、git clone 项目地址
    项目地址在网页里点击clone or download的绿色按钮弹出的输入框里复制一下
    等命令提示框里看到一个100%就证明已经下载完成了
    注意:下载后的文件里有一个隐藏的.git文件夹,不要去修改它,不然会出错的
    10、在项目里新建页面
    1、要看这个文件下有哪些文件,输入ls
    2、进入到Tab的文件,cd Tab
    地址里有一个master,表示已经进入到项目里了
    3、在Tab的文件夹里新建一个html文件
    可以在命令提示框里查看一下现在项目的状态git status,显示的红色的内容就是新添加的文件
    11、把本地的文件上传到github上
    1、添加到暂存区(过渡层,避免误操作,保护工作区和版本区)
    git add 文件名 将单个文件放到暂存区
    git add . 将多个文件放到暂存区
    2、添加到版本区
    git commit -m ‘注释’ 将文件放到版本区
    git commit -a -m ‘注释’ 从本地直接到版本区,跳过了暂存区
    每一次改动的内容都需要注释一下,容易查看版本
    3、添加到github上
    git push origin master
    这个步骤可能会提示要输入密码,输入注册时候的用户名与密码就可以
    提交完成后在网页里刷新就能看到提交的文件
    文件在本地修改的时候,可以随时git status,查看现在的状态

    ###Markdown–从入门到精通

    ######导语
    Markdown是一种轻量级的标记语言。它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被标记’语言所迷惑。Markdown的语法十分简单。常用的标记符号也不超过十个,这种相对于更为复杂的HTML标记语言来说,Markdown可谓是十分轻量的,学习成本也不需要太多,一旦熟悉这种语法的规则,会有一劳永逸的效果。

    ######认识Markdown
    在刚才的导语中提到,Markdown是一种用来写作的轻量级标记语言,它用简介的语法代替排版,而不像一般我们用的字处理软件Word或Pages有大量的排版、字体设置。她使我们专心于码字,用标记语法,来代替常见的格式。例如此文从内容到格式,甚至插图,键盘就可以搞定。目前来看,支持Markdown语法编辑器有很多,包括很多网站也支持Markdown的文字录入。Markdown从写作到完成,导出格式随心所欲。你可以导出HTML格式文件用来网站发布,用Markdown写出简历也可以十分方便导出PDF格式,内容也是用Markdown完成

    ######Markdown官方文档
    这里可以看到官方的Markdown语法规则文档,当然,后文我也会用自己的方式阐述这些语法的具体用法
    [创始人John Gruber的Markdown语法说明] [中文文档说明]

    ######使用Markdown的优点

    • 专注你的文字内容而不是样板样式
    • 轻松导出HTML、PDF和本身的.md文件
    • 纯文本内容,兼容所有的文本编辑器与字处理软件
    • 可读,直观。适合所有人的写作语言
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!