你的位置:首页 > 网页设计

[网页设计]前端——基础

前端入门 - 知乎

鼓励未来的前端工程师们~... 对于零基础非科班的同学来说,一个良好的前端学习流程和学习误区是需要我们去规避和计划的,爱创课堂目前专注于前端培训,总结了以下几点,...

前端入门1-基础概念 - 简书

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下beloved是什么意思。...

前端基础面试题(JS部分) - Jansens - 博客园

在它的基础上,封装了一系列有用的模块和模板,补充强化了sass的功能鸿运赌场。less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库,B...

前端基础入门(7)表格 - fenghulun的博客 - CSDN博客

最后,给大家推荐一个前端学习进阶内推交流群3(前端资料分享),不管你在地球哪个方位, 不管你参加工作几年都欢迎你的入驻!(群内会定期免费提供...

前端基础知识整理回顾~~ - python-club - 博客园

1. 前端是做什么的? 前端负责后端返回数据的展示 或者 对前端数据提交给后端2. 起我们为什么要学前端? 1. 全栈 3. 前端都有哪些内容? 1. HTML(2d) 2...

web前端开发(一)—HTML基础 - mdxiaohu的博客_CSDN博客

学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言娱乐场567。下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体韦德娱乐1946。内容就是...

前端基础

第十一章 前端开发11.1 html基础浏览器内核 IE trident chrome blink 火狐 gecko Safari webkitPS:「浏览器内核」也就是浏览器所采用的「渲染引擎」,...

前端基础——基本概念

进去菜鸟期,文章内容不会出现大量的专业晦涩的名词,只想通过最简单的方式来帮大家建立一个基础的前端概念,有了基础之后就会有自己的学习方式方法,就可以学习其他更高...

前端基础入门一(HTML) - 个人文章 - SegmentFault 思否

前端基础入门一(HTML) html 前端阅读约 21 分钟 学习目标 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像...

前端基础概念 - 简书

跌跌撞撞进了前端的门,在学习过程中也懵懵懂懂写了一些博客,现在回过头来,审视...每一项技能的习得,都离不开对于基础概念/术语的理解皇冠足球比分。这也叫做基础,...

前端学习之路(从入门到入坑...)_慕课手记

学习前端两年多了,拿了阿里巴巴实习offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料新2网址大全。由于能力有限,不能保面面俱到...

前端基础是什么意思、发音和在线翻译 - 英语单词大全 - 911查询

前端基础的解释,前端基础的发音,前端基础的同义词,前端基础的反义词,前端基础的例句,前端基础的相关词组,前端基础意思是什么,前端基础怎么翻译,单词前端基础是什么意思...

前端基础入门_JavaScript - UCloud云社区

前端基础入门,html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能,不需要依赖 flashdafabet下载。

Web前端基础入门教程 - 好知网-重拾学习乐趣-Powered By Howzhi

一、HTML知识超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言狗万买球。能够快速掌握HTML入门、文本、图像、链接、表格、列表、表单、...

【js/h5/web前端开发培训_入门/学习视频_教程_实战_下载】-慕课网

零基础web前端学习路线,前端小白入门课程让你先学习基础知识,系统学习html、css、js、jQuery,然后进阶,最后再到精通,一套完成的前端工程师学习路线图,本专题是你...

前端基础知识汇总 | 前端大班车

DevOps Linux基础 Nginx配置 算法 一道面试题引发的思考 面试题 基础知识# 前端基础知识汇总 # 思维导图# 常用绘图工具总结链接...

前端基础入门_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

前端基础入门 00:00 / 98:37 自动 高清1080P登录 高清720P登录 清晰480P 流畅360P 自动(480P) 1 人正在看 , 0 条实时弹幕 请先登录或注册 弹幕礼仪 ...

前端基础—HTML5+CSS3基础知识 - 网易云课堂

首页 编程与开发 前端开发 语言基础 课程详情 评价 网易云课堂 是网易公司(163.)旗下专注职业技能提升的在线学习平台澳门永利上搜博网。 关于我们 联系我们 帮助中心 ...

【web前端培训/开发工程师_开发主流/流行框架_框架实例/设计_小白...

全部 前端开发 后端开发 移动开发 计算机基础 前沿技术 云计算amp;大数据 运维amp;测试 数据库 UI设计amp;多媒体 不限 HTML/CSS JavaScript Vue.js React.JS Angular ...

前端的基础-Web开发代码类资源-CSDN下载

web前端的项目开发,基础教程ppt、html5一些基础知识万博manbetx网站。百家乐代理。皇冠备用。更多下载资源、学习资料请访问CSDN下载频道.从东莞到印度金三角旅游印度金三角十一日游多少钱印度金三角十一日游多少钱印度金三角7天跟团旅游印度金三角7天跟团旅游六月印度金三角旅游多少钱北京出发去澎湖列岛旅游 北京出发去澎湖列岛旅游 北京出发去澎湖列岛旅游 北京出发去澎湖列岛旅游 北京出发去澎湖列岛旅游 北京出发去澎湖列岛旅游 北京出发去皮特凯恩岛旅游 北京出发去皮特凯恩岛旅游 北京出发去皮特凯恩岛旅游 北京出发去皮特凯恩岛旅游 北京出发去皮特凯恩岛旅游 北京出发去皮特凯恩岛旅游 北京出发去葡萄牙旅游 北京出发去葡萄牙旅游 北京出发去葡萄牙旅游 北京出发去葡萄牙旅游 北京出发去葡萄牙旅游 北京出发去葡萄牙旅游 北京出发去普吉岛旅游 北京出发去普吉岛旅游 北京出发去普吉岛旅游 北京出发去普吉岛旅游 北京出发去普吉岛旅游 北京出发去普吉岛旅游
HTMLhtml概述和基本结构html概述HTML是 HyperText Mark-up Language 的首字母简写意思是超文本标记语言,超文本指的是超链接,标记指的是标签html注释<!-- 这是一段注释 -->html标题标签<h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3>html段落标签、换行标签与字符实体html段落标签<p>一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方 式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网 页可以从一个网页链接跳转到另外一个网页01足球比分新闻。</p>html换行标签插入<br />来强制换行html字符实体空格的字符实体: “<”和“>”的字符实体:< 和 >html块标签、含样式的标签html块标签1、<div> 标签 块元素,表示一块内容,没有具体的语义足球比分188。2、<span> 标签 行内元素,表示一行中的一小段内容,没有具体的语义新万博app。含样式和语义的标签1、<em> 标签 行内元素,表示语气中的强调词2、<i> 标签 行内元素,表示专业词汇3、<b> 标签 行内元素,表示文档中的关键字或者产品名4、<strong> 标签 行内元素,表示非常重要的内容 语义化的标签语义化的标签,就是在布局的时候多使用有语义的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录华球网直播。比如:h1标签是表示标题,p标签是表示段落,ul、li标签是表示列表,a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多足球全讯直播。html图像标签、绝对路径和相对路径html图像标签<img>标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有:?src属性 定义图片的引用地址?alt属性 定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片,所以此属性非常重要<img src="images/pic.jpg" alt="产品图片" />绝对路径和相对路径绝对地址:相对于磁盘的位置去定位文件的地址相对地址:相对于引用文件本身去定位被引用的文件地址绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件,相对路径就没有这个问题九州天下现金网。html链接标签?href属性 定义跳转的地址?title属性 定义鼠标悬停时弹出的提示文字框?target属性 定义链接窗口打开的位置 ?target="_self" 缺省值,新页面替换原来的页面,在原来位置打开 ?target="_blank" 新页面会在新开的一个浏览器窗口打开html列表标签有序列表<ol> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li></ol>无序列表<ul> <li><a href="#">新闻标题一</a></li> <li><a href="#">新闻标题二</a></li> <li><a href="#">新闻标题三</a></li></ul>定义列表<h3>前端三大块</h3><dl> <dt>html</dt> <dd>负责页面的结构</dd> <dt>css</dt> <dd>负责页面的表现</dd> <dt>javascript</dt> <dd>负责页面的行为</dd></dl>html表单<form>标签 定义整体的表单区域  ?action属性 定义表单数据提交地址  ?method属性 定义表单提交的方式,一般有“get”方式和“post”方式 <label>标签 为表单元素定义文字标注<input>标签 定义通用的表单元素?type属性?type="text" 定义单行文本输入框 ?type="password" 定义密码输入框 ?type="radio" 定义单选框 ?type="checkbox" 定义复选框 ?type="file" 定义上传文件 ?type="submit" 定义提交按钮 ?type="reset" 定义重置按钮 ?type="button" 定义一个普通按钮 ?type="image" 定义图片作为提交按钮,用src属性定义图片地址 ?type="hidden" 定义一个隐藏的表单域,用来存储值?value属性 定义表单元素的值?name属性 定义表单元素的名称,此名称是提交数据时的键名 <textarea>标签 定义多行文本输入框<select>标签 定义下拉表单元素 <option>标签 与<select>标签配合,定义下拉表单元素中的选项 注册表单实例<form action="http://www..." method="get"><p><label>姓名:</label><input type="text" name="username" /></p><p><label>密码:</label><input type="password" name="password" /></p><p><label>性别:</label><input type="radio" name="gender" value="0" /> 男<input type="radio" name="gender" value="1" /> 女</p><p><label>爱好:</label><input type="checkbox" name="like" value="sing" /> 唱歌<input type="checkbox" name="like" value="run" /> 跑步<input type="checkbox" name="like" value="swiming" /> 游泳</p><p><label>照片:</label><input type="file" name="person_pic"></p><p><label>个人描述:</label><textarea name="about"></textarea></p><p><label>籍贯:</label><select name="site"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option></select></p><p><input type="submit" name="" value="提交"><!-- input类型为submit定义提交按钮  还可以用图片控件代替submit按钮提交,一般会导致提交两次,不建议使用新皇冠体育官网。如:  <input type="image" src="xxx.gif">--><input type="reset" name="" value="重置"></p></form>html表格1、<table>标签:声明一个表格,它的常用属性如下:?border属性 定义表格的边框,设置值是数值?cellpadding属性 定义单元格内容与边框的距离,设置值是数值?cellspacing属性 定义单元格与单元格之间的距离,设置值是数值?align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有:left | center | right 2、<tr>标签:定义表格中的一行 3、<td>和<th>标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格,它们的常用属性如下:?align 设置单元格中内容的水平对齐方式,设置值有:left | center | right ?valign 设置单元格中内容的垂直对齐方式 top | middle | bottom ?colspan 设置单元格水平合并,设置值是数值 ?rowspan 设置单元格垂直合并,设置值是数值页面布局概述布局也可以叫做排版,它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上,布局的方式分为两种:1、table布局:通过table元素将页面空间划分成若干个单元格,将文字或图片等元素放入单元格中,隐藏表格的边框,从而实现布局经典老虎机19119澳门公司。这种布局方式也叫传统布局,目前主要使用在EDM(广告邮件中的页面)中,主流的布局方式不用这种伟德weide。 2、HTML+CSS布局(DIV+CSS):主要通过CSS样式设置来布局文字或图片等元素,需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局,它比传统布局要复杂,目前是主流的布局方式新特彩票网。CSScss基本语法及页面引用css基本语法选择器 { 属性:值; 属性:值; 属性:值;}/* css注释 ctrl+shift+"/"*/div{  width:100px;  height:100px;  color:red }css页面引入方法外联式:通过link标签,链接到外部样式表到页面中<link rel="stylesheet" type="text/css" href="css/main.css">嵌入式:通过style标签,在网页上创建嵌入的样式表<style type="text/css"> div{ width:100px; height:100px; color:red } ......</style>内联式:通过标签的style属性,在标签上直接写样式<div >......</div>css文本设置常用的应用文本的css样式:?color 设置文字的颜色,如: color:red;?font-size 设置文字的大小,如:font-size:12px;?font-family 设置文字的字体,如:font-family:'微软雅黑';?font-style 设置字体是否倾斜,如:font-style:'normal'; 设置不倾斜,font-style:'italic';设置文字倾斜?font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗?line-height 设置文字的行高,设置行高相当于在每行文字的上下同时加间距, 如:line-height:24px; 行高示例图片 ?font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px '微软雅黑';?text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉?text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px 行高示例图片 ?text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中css颜色表示法css颜色值主要有三种表示方法:1、颜色名表示,比如:red 红色,gold 金色2、rgb表示,比如:rgb(255,0,0)表示红色3、16进制数值表示,比如:#ff0000 表示红色,这种可以简写成 #f00css选择器标签选择器此种选择器影响范围大,建议尽量应用在层级选择器中*{margin:0;padding:0}div{color:red} <div>....</div> <!-- 对应以上两条样式 --><div >....</div> <!-- 对应以上两条样式 -->id选择器通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器#box{color:red} <div id="box">....</div> <!-- 对应以上一条样式,其它元素不允许应用此样式 -->类选择器通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器.red{color:red}.big{font-size:20px}.mt10{margin-top:10px} <div >....</div><h1 >....</h1><p >....</p>层级选择器主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突.box span{color:red}.box .red{color:pink}.red{color:red}<div > <span>....</span> <a href="#" >....</a></div><h3 >....</h3>组选择器多个选择器,如果有同样的样式设置,可以使用组选择器.box1,.box2,.box3{width:100px;height:100px}.box1{background:red}.box2{background:pink}.box2{background:gold}<div >....</div><div >....</div><div >....</div>伪类及伪元素选择器.box1:hover{color:red}.box2:before{content:'行首文字';}.box3:after{content:'行尾文字';}<div >....</div><div >....</div><div >....</div>CSS盒子模型把元素叫做盒子,设置对应的样式分别为:盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)美高梅网上娱乐。 设置宽高 width:200px; /* 设置盒子的宽度,此宽度是指盒子内容的宽度,不是盒子整体宽度(难点) */ height:200px; /* 设置盒子的高度,此高度是指盒子内容的高度,不是盒子整体高度(难点) */设置边框 设置一边的边框,比如顶部边框,可以按如下设置: border-top-color:red; /* 设置顶部边框颜色为红色 */ border-top-width:10px; /* 设置顶部边框粗细为10px */ border-top-style:solid; /* 设置顶部边框的线性为实线,常用的有:solid(实线) dashed(虚线) dotted(点线); */上面三句可以简写成一句: border-top:10px solid red;设置其它三个边的方法和上面一样,把上面的'top'换成'left'就是设置左边,换成'right'就是设置右边,换成'bottom'就是设置底边皇冠新二网址。四个边如果设置一样,可以将四个边的设置合并成一句: border:10px solid red;设置内间距padding 设置盒子四边的内间距,可设置如下: padding-top:20px;  /* 设置顶部内间距20px */ padding-left:30px;  /* 设置左边内间距30px */ padding-right:40px; /* 设置右边内间距40px */ padding-bottom:50px; /* 设置底部内间距50px */上面的设置可以简写如下: padding:20px 40px 50px 30px; /* 四个值按照顺时针方向,分别设置的是 上 右 下 左 四个方向的内边距值宝丽来国际娱乐。 */padding后面还可以跟3个值,2个值和1个值,它们分别设置的项目如下:padding:20px 40px 50px; /* 设置顶部内边距为20px,左右内边距为40px,底部内边距为50px */ padding:20px 40px; /* 设置上下内边距为20px,左右内边距为40px*/ padding:20px; /* 设置四边内边距为20px */设置外间距margin 外边距的设置方法和padding的设置方法相同,将上面设置项中的'padding'换成'margin'就是外边距设置方法极速体育。盒模型的实际尺寸盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子的真实尺寸</title> <style type="text/css">  .box01{width:50px;height:50px;background-color:gold;}  .box02{width:50px;height:50px;background-color:gold;border:50px   solid #000}  .box03{width:50px;height:50px;background-color:gold;border:50px   solid #000;padding: 50px;} </style></head><body> <div >1</div> <br /> <div >2</div> <br /> <div >3</div></body></html>盒模型使用技巧及相关问题margin相关技巧1、设置元素水平居中: margin:x auto;2、margin负值让元素位移及边框合并外边距合并外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距皇冠国际。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者解决方法如下: 1、使用这种特性2、设置一边的外边距,一般设置margin-top3、将元素浮动或者定位 margin-top 塌陷在两个盒子嵌套时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败解决方法如下:1、外部盒子设置一个边框2、外部盒子设置 overflow:hidden3、使用伪元素类: .clearfix:before{ content: ''; display:table;}css元素溢出当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置overflow的设置项: 1、visible 默认值好玩的棋盘游戏。内容不会被修剪,会呈现在元素框之外二七比分网。2、hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能manbetx怎么那么多人用。3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容和记娱乐。4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容澳门永利官网。5、inherit 规定应该从父元素继承 overflow 属性的值幸运28评测网。块元素、内联元素、内联块元素元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局博狗福。 块元素 块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为:?支持全部的样式?如果没有设置宽度,默认的宽度为父级宽度100%?盒子占据一行、即使设置了宽度内联元素内联元素,也可以称为行内元素,布局中常用的标签如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行为:?支持部分样式(不支持宽、高、margin上下、padding上下)?宽高由内容决定?盒子并在一行?代码换行,盒子之间会产生间距?子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式 解决内联元素间隙的方法 1、去掉内联元素之间的换行2、将内联元素的父级设置font-size为0,内联元素自身再设置font-size内联块元素内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用display属性将块元素或者内联元素转化成这种元素葡京赌场。它们在布局中表现的行为:?支持全部样式?如果没有设置宽高,宽高由内容决定?盒子并在一行?代码换行,盒子会产生间距?子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式uedbet赫塔菲官网。这三种元素,可以通过display属性来相互转化,不过实际开发中,块元素用得比较多,所以我们经常把内联元素转化为块元素,少量转化为内联块,而要使用内联元素时,直接使用内联元素,而不用块元素转化了即时比分体球。display属性display属性是用来设置元素的类型及隐藏的,常用的属性有:1、none 元素隐藏且不占位置2、block 元素以块元素显示3、inline 元素以内联元素显示4、inline-block 元素以内联块元素显示 浮动浮动特性1、浮动元素有左浮动(float:left)和右浮动(float:right)两种 2、浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来 3、相邻浮动的块元素可以并在一行,超出父级宽度就换行 4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) 5、浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果 6、父元素如果没有设置尺寸(一般是高度不设置),父元素内整体浮动的元素无法撑开父元素,父元素需要清除浮动 7、浮动元素之间没有垂直margin的合并 清除浮动父级上增加属性overflow:hidden在最后一个子元素的后面加一个空的div,给它样式属性 clear:both(不推荐)使用成熟的清浮动样式类,clearfix.clearfix:after,.clearfix:before{ content: "";display: table;}.clearfix:after{ clear:both;}.clearfix{zoom:1;}清除浮动的使用方法.con2{... overflow:hidden}或者<div >定位文档流文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置关于定位使用css的position属性来设置元素的定位类型,postion的设置项如下: ?relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移博狗导航。 ?absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位百家乐破解。 ?fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位狗博。 ?static 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性黑龙江彩票网。 ?inherit 从父元素继承 position 属性的值比分在线。定位元素的偏移定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值定位元素层级定位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级.box01{ ...... position:absolute; /* 设置了绝对定位 */ left:200px;   /* 相对于参照元素左边向右偏移200px */ top:100px;   /* 相对于参照元素顶部向下偏移100px */ z-index:10   /* 将元素层级设置为10 */}定位元素特性绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素前端女侠-博客园background属性属性解释background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ?background-color 设置背景颜色?background-image 设置背景图片地址?background-repeat 设置背景图片如何重复平铺?background-position 设置背景图片的位置?background-attachment 设置背景图片是固定还是随着页面滚动条滚动实际应用中,我们可以用background属性将上面所有的设置项放在一起,而且也建议这么做,这样做性能更高,而且兼容性更好,比如:“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”,这里面的“#00ff00”是设置background-color;“url(bgimage.gif)”是设置background-image;“no-repeat”是设置background-repeat;“left center”是设置background-position;“fixed”是设置background-attachment,各个设置项用空格隔开,有的设置项不写也是可以的,它会使用默认值www.hg0088.com。HTML5与CSS3CSS权重CSS权重CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式权重的等级可以把样式的应用方式分为几个等级,按照等级来计算权重1、!important,加在样式属性值后,权重值为 100002、内联样式,如:style=””,权重值为10003、ID选择器,如:#content,权重值为1004、类,伪类和属性选择器,如: content、:hover 权重值为105、标签选择器和伪元素选择器,如:div、p、:before 权重值为16、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0 权重的计算实例实例一:<style type="text/css"> div{  color:red !important; }  </style>......<div >这是一个div元素</div><!-- 两条样式同时作用一个div,上面的样式权重值为10000+1,下面的行间样式的权重值为1000,所以文字的最终颜色为red -->实例二:<style type="text/css"> #content div.main_content h2{  color:red;  } #content .main_content h2{  color:blue; }</style>......<div id="content"> <div >  <h2>这是一个h2标题</h2> </div></div><!-- 第一条样式的权重计算: 100+1+10+1,结果为112;第二条样式的权重计算: 100+10+1,结果为111;h2标题的最终颜色为red-->CSS3新增选择器元素选择器E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素E:first-child:匹配元素类型为E且是父元素的第一个子元素E:last-child:匹配元素类型为E且是父元素的最后一个子元素E > F E元素下面第一层子集E ~ F E元素后面的兄弟元素E + F 紧挨着的后面的兄弟元素<style type="text/css">    .list div:nth-child(2){  background-color:red; }</style>......<div > <h2>1</h2> <div>2</div> <div>3</div> <div>4</div> <div>5</div></div><!-- 第2个子元素div匹配 -->属性选择器E[attr] 含有attr属性的元素E[attr='ok'] 含有attr属性的元素且它的值为“ok”E[attr^='ok'] 含有attr属性的元素且它的值的开头含有“ok”E[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok”E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”<style type="text/css"> div[data-attr='ok']{  color:red; }</style>......<div data-attr="ok">这是一个div元素</div>CSS3圆角、rgbaCSS3圆角设置某一个角的圆角,比如设置左上角的圆角:border-top-left-radius:30px 60px;同时分别设置四个角: border-radius:30px 60px 120px 150px;设置四个圆角相同:border-radius:50%;rgba(新的颜色值表示法)盒子透明度表示法rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度.box {  opacity:0.1;  /* 兼容IE */  filter:alpha(opacity=10);  }CSS3 transition动画1、transition-property 设置过渡的属性,比如:width height background-color2、transition-duration 设置过渡的时间,比如:1s 500ms3、transition-timing-function 设置过渡的运动方式,常用有 linear(匀速)|ease(缓冲运动)4、transition-delay 设置动画的延迟5、transition: property duration timing-function delay 同时设置四个属性CSS3 transform变换1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放3、rotate(deg) 设置盒子旋转4、skew(x-angle,y-angle) 设置盒子斜切5、perspective 设置透视距离6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示7、translateX、translateY、translateZ 设置三维移动8、rotateX、rotateY、rotateZ 设置三维旋转9、scaleX、scaleY、scaleZ 设置三维缩放10、tranform-origin 设置变形的中心点11、backface-visibility 设置盒子背面是否可见CSS3 animation动画1、@keyframes 定义关键帧动画2、animation-name 动画名称3、animation-duration 动画时间4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)5、animation-delay 动画延迟6、animation-iteration-count 动画播放次数 n|infinite7、animation-direction 动画结束后是否反向还原 normal|alternate8、animation-play-state 动画状态 paused(停止)|running(运动)9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性CSS3 浏览器前缀浏览器样式前缀为了让CSS3样式兼容,需要将某些样式加上浏览器前缀-ms- 兼容IE浏览器-moz- 兼容firefox-o- 兼容opera-webkit- 兼容chrome 和 safaridiv{  -ms-transform: rotate(30deg);   -webkit-transform: rotate(30deg);  -o-transform: rotate(30deg);   -moz-transform: rotate(30deg);  transform: rotate(30deg);}自动添加浏览器前缀目前的状况是,有些CSS3属性需要加前缀,有些不需要加,有些只需要加一部分,这些加前缀的工作可以交给插件来完成,比如安装: autoprefixer可以在Sublime text中通过package control 安装 autoprefixerAutoprefixer在Sublime text中的设置preferences/key Bindings-User{ "keys": ["ctrl+alt+x"],  mand": "autoprefixer" }Preferences>package setting>AutoPrefixer>Setting-User{ "browsers": ["last 7 versions"], "cascade": true, "remove": true}last 7 versions:最新的浏览器的7个版本cascade:缩进美化属性值remove:是否去掉不必要的前缀HTML5新增标签新增语义标签1、<header> 页面头部、页眉2、<nav> 页面导航3、<article> 一篇文章4、<section> 文章中的章节5、<aside> 侧边栏6、<footer> 页面底部、页脚音频视频1、<audio>2、<video>PC端兼容h5的新标签的方法,在页面中引入以下js文件:<script type="text/javascript" src="/images/cdn.bootcss html5shivr29html5.js"></script>HTML5 新增表单控件新增类型:网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索<label>网址:</label><input type="url" name="" required><br><br> <label>邮箱:</label><input type="email" name="" required><br><br> <label>日期:</label><input type="date" name=""><br><br> <label>时间:</label><input type="time" name=""><br><br> <label>星期:</label><input type="week" name=""><br><br> <label>数量:</label><input type="number" name=""> <br><br><label>范围:</label><input type="range" name=""><br><br> <label>电话:</label><input type="tel" name=""><br><br> <label>颜色:</label><input type="color" name=""><br><br> <label>搜索:</label><input type="search" name=""><br><br>新增常用表单控件属性:1、placeholder 设置文本框默认提示文字2、autofocus 自动获得焦点3、aut plete 联想关键词 常用css列表 color 设置文字的颜色,如: color:red; font-size 设置文字的大小,如:font-size:12px; font-family 设置文字的字体,如:font-family:'微软雅黑'; font-style 设置字体是否倾斜,如:font-style:'normal'; 设置不倾斜,font-style:'italic';设置文字倾斜 font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗 line-height 设置文字的行高,设置行高相当于在每行文字的上下同时加间距, 如:line-height:24px; font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px '微软雅黑'; text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉 text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中 text-overflow 设置一行文字宽度超过容器宽度时的显示方式,如:text-overflow:clip 将多出的文字裁剪掉 text-overflow:ellipsis 将多出的文字显示成省略号 white-space 一般用来设置文本不换行,如:white-space:nowrap 设置文本不换行 一般与text-overflow和overflow属性配合使用来让一行文字超出宽度时显示省略号 list-style 一般用来设置去掉ul或者ol列表中的小圆点或数字 如:list-style:none width 设置盒子内容的宽度,如: width:100px; height 设置盒子内容的高度,如: height:100px; border-top 设置盒子顶部边框的三个属性 如:border-top:5px solid red;设置盒子顶部边框为3像素宽的红色的实线,详细设置说明:盒子模型 border-left 设置盒子左边边框的三个属性 如:border-left:3px dotted red;设置盒子左边边框为3像素宽的红色的点线,详细设置说明:盒子模型 border-right 设置盒子右边边框的三个属性 如:border-right:2px dashed red;设置盒子右边框为2像素宽的红色的虚线,详细设置说明:盒子模型 border-bottom 设置盒子底部边框的三个属性 如:border-bottom:1px solid red;设置盒子底部边框为1像素宽的红色的实线,详细设置说明:盒子模型 border 同时设置盒子的四个边框,如果四个边的样式统一就使用它 如:border:1px solid #000 设置盒子四个边都是1像素宽的黑色实线,详细设置说明:盒子模型 padding 设置盒子四个边的内边距 如:padding:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的内边距(顺时针),详细设置说明:盒子模型 margin 设置盒子四个边的外边距 如:margin:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的外边距(顺时针),详细设置说明:盒子模型 overflow 设置当子元素的尺寸超过父元素的尺寸时,盒子及子元素的显示方式 如:overflow:hidden 超出的子元素被裁切,详细设置说明:元素溢出 display 设置盒子的显示类型及隐藏,如:display:block 将盒子设置为以块元素显示 display:none 将元素隐藏,详细设置说明:元素类型 float 设置元浮动 如:float:left 设置左浮动 float:right 设置右浮动,详细设置说明:元素浮动 clear 在盒子两侧清除浮动 如:clear:both 在盒子两侧都不允许浮动,详细设置说明:元素浮动 position 设置元素定位 如:position:relative 设置元素相对定位,详细设置说明:元素定位 background 设置元素的背景色和背景图片,如:background:url(bg.jpg) cyan;设置盒子的背景图片为bg.jpg,背景色为cyan,详细设置说明:元素背景 background-size 设置盒子背景图的尺寸,如:background-size:30px 40px;设置背景图的尺寸宽为30px,高为40px,这个属性不能合到background属性中,详细设置说明:retina屏适配 opacity 设置元素整体透明度,一般为了兼容需要加上filter属性设置 如:opacity:0.1;filter:alpha(opacity=10) cursor 设置鼠标悬停在元素上时指针的形状 如:cursor:pointer 设置为手型 outline 设置文本输入框周围凸显的蓝色的线,一般是设为没有 如:outline:none border-radius 设置盒子的圆角 如:border-radius:10px 设置盒子的四个角为10px半径的圆角,详细设置说明:css圆角 box-shadow 设置盒子的阴影,如:box-shadow:10px 10px 5px 2px pink;设置盒子有粉色的阴影,详细设置说明:css阴影 transition 设置盒子的过渡动画,如:transition:all 1s ease;设置元素过渡动画为1秒完成,所有变动的属性都做动画,详细设置说明:过渡动画 animation 设置盒子的关键帧动画,详细设置说明:关键帧动画 transform 设置盒子的位移、旋转、缩放、斜切等变形,如:transform:rotate(45deg);设置盒子旋转45度,详细设置说明:元素变形 box-sizing 设置盒子的尺寸计算方式,如:box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算,此时width和height的值就是盒子的实际尺寸 border-collapse 设置表格边框是否合并,如:border-collapse:collapse,将表格边框合并,这样就可以制作1px边框的表格体球比分网。JavaScriptJavaScript介绍前端三大块1、HTML:页面结构2、CSS:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果3、JavaScript:页面行为:部分动画效果、页面与用户的交互、页面功能 JavaScript嵌入页面的方式行间事件(主要用于事件)<input type="button" name="" onclick="alert('ok!');">页面script标签嵌入<script type="text/javascript">   alert('ok!');</script>外部引入<script type="text/javascript" src="js/index.js"></script>变量JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定北京pk10模式新凤凰。 定义变量需要用关键字 'var'变量类型5种基本数据类型:1、number 数字类型2、string 字符串类型3、boolean 布尔类型 true 或 false4、undefined undefined类型,变量声明未初始化,它的值就是undefined5、null null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面上获取不到对象,返回的值就是null1种复合类型:objectjavascript注释<script type="text/javascript"> // 单行注释var iNum = 123;/*  多行注释 1、... 2、...*/var sTr = 'abc123';</script>变量、函数、属性、函数参数命名规范1、区分大小写2、第一个字符必须是字母、下划线(_)或者美元符号($)3、其他字符可以是字母、下划线、美元符或数字获取元素方法一可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如:<script type="text/javascript"> var oDiv = document.getElementById('div1');</script>....<div id="div1">这是一个div元素</div>上面的语句,如果把javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript去页面上获取元素div1的时候,元素div1还没有加载,解决方法有两种:第一种方法:将javascript放到页面最下边....<div id="div1">这是一个div元素</div>....<script type="text/javascript"> var oDiv = document.getElementById('div1');</script></body>第二种方法:将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,就不会出错了<script type="text/javascript"> window.onload = function(){  var oDiv = document.getElementById('div1'); }</script>....<div id="div1">这是一个div元素</div>操作元素属性获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写操作属性的方法1、“.” 操作2、“[ ]”操作属性写法1、html的属性和js里面属性写法一样2、“class” 属性写成 “className”3、“style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”通过“.”操作属性:<script type="text/javascript"> window.onload = function(){  var oInput = document.getElementById('input1');  var oA = document.getElementById('link1');  // 读取属性值  var sValue = oInput.value;  var sType = oInput.type;  var sName = oInput.name;  var sLinks = oA.href;  // 写(设置)属性  oA.style.color = 'red';  oA.style.fontSize = sValue; }</script>......<input type="text" name="setsize" id="input1" value="20px"><a href="http://www.itcast " id="link1">传智播客</a>通过“[ ]”操作属性:<script type="text/javascript"> window.onload = function(){  var oInput1 = document.getElementById('input1');  var oInput2 = document.getElementById('input2');  var oA = document.getElementById('link1');  // 读取属性  var sVal1 = oInput1.value;  var sVal2 = oInput2.value;  // 写(设置)属性  // oA.style.val1 = val2; 没反应  oA.style[sVal1] = sVal2;   }</script>......<input type="text" name="setattr" id="input1" value="fontSize"><input type="text" name="setnum" id="input2" value="30px"><a href="http://www.itcast " id="link1">传智播客</a>innerHTMLinnerHTML可以读取或者写入标签包裹的内容<script type="text/javascript"> window.onload = function(){  var oDiv = document.getElementById('div1');  //读取  var sTxt = oDiv.innerHTML;  alert(sTxt);  //写入  oDiv.innerHTML = '<a href="http://www.itcast ">传智播客<a/>'; }</script>......<div id="div1">这是一个div元素</div>函数变量与函数预解析JavaScript解析过程分为两个阶段,先是编译阶段,然后执行阶段,在编译阶段会将function定义的函数提前,并且将var定义的变量声明提前,将它赋值为undefined<script type="text/javascript">  fnAlert();  // 弹出 hello! alert(iNum); // 弹出 undefined function fnAlert(){  alert('hello!'); } var iNum = 123;</script>提取行间事件在html行间调用的事件可以提取到javascript中调用,从而做到结构与行为分离<!--行间事件调用函数 --><script type="text/javascript">   function fnAlert(){  alert('ok!'); }</script>......<input type="button" name="" value="弹出" onclick="fnAlert()"><!-- 提取行间事件 --><script type="text/javascript">window.onload = function(){ var oBtn = document.getElementById('btn1'); oBtn.onclick = fnAlert; function fnAlert(){  alert('ok!'); }} </script>......<input type="button" name="" value="弹出" id="btn1">匿名函数定义的函数可以不给名称,这个叫做匿名函数,可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用<script type="text/javascript">window.onload = function(){ var oBtn = document.getElementById('btn1'); /* oBtn.onclick = myalert; function myalert(){  alert('ok!'); } */ // 直接将匿名函数赋值给绑定的事件 oBtn.onclick = function (){  alert('ok!'); }}</script>条件语句switch语句多重if else语句可以换成性能更高的switch语句var iNow = 1;switch (iNow){ case 1:  ...;  break; case 2:  ...;  break;  default:  ...;}数组及操作方法数组就是一组数据的集合,javascript中,数组里面的数据可以是不同类型的定义数组的方法//对象的实例创建var aList = new Array(1,2,3);//直接量创建var aList2 = [1,2,3,'asd'];操作数组中数据的方法获取数组的长度:aList.lengthvar aList = [1,2,3,4];alert(aList.length); // 弹出4用下标操作数组的某个数据:aList[0]var aList = [1,2,3,4];alert(aList[0]); // 弹出1join() 将数组成员通过一个分隔符合并成字符串var aList = [1,2,3,4];alert(aList.join('-')); // 弹出 1-2-3-4push() 和 pop() 从数组最后增加成员或删除成员var aList = [1,2,3,4];aList.unshift(5);alert(aList); //弹出5,1,2,3,4aList.shift();alert(aList); // 弹出1,2,3,4unshift()和 shift() 从数组前面增加成员或删除成员var aList = [1,2,3,4];aList.unshift(5);alert(aList); //弹出5,1,2,3,4aList.shift();alert(aList); // 弹出1,2,3,4reverse() 将数组反转var aList = [1,2,3,4];aList.reverse();alert(aList); // 弹出4,3,2,1indexOf() 返回数组中元素第一次出现时的索引值var aList = [1,2,3,4,1,3,4];alert(aList.indexOf(1));splice() 在数组中增加或删除成员var aList = [1,2,3,4];aList.splice(2,1,7,8,9); //从第2个元素开始,删除1个元素,然后在此位置增加'7,8,9'三个元素alert(aList); //弹出 1,2,7,8,9,4循环语句数组去重var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];var aList2 = [];for(var i=0;i<aList.length;i++){ if(aList.indexOf(aList[i])==i) {  aList2.push(aList[i]); }}alert(aList2);获取元素方法二可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签,获取的是一个选择集,不是数组,但是可以用下标的方式操作选择集里面的标签元素<script type="text/javascript"> window.onload = function(){  var aLi = document.getElementsByTagName('li');  // aLi.style.backgroundColor = 'gold'; // 出错!不能同时设置多个li  alert(aLi.length);  aLi[0].style.backgroundColor = 'gold'; }</script>....<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li></ul>Javascript组成1、ECMAscript javascript的语法(变量、函数、循环语句等语法)2、DOM 文档对象模型 操作html和css的方法3、BOM 浏览器对象模型 操作浏览器的一些方法 字符串处理方法字符串合并操作:“ + ”var iNum01 = 12;var iNum02 = 24;var sNum03 = '12';var sTr = 'abc';alert(iNum01+iNum02); //弹出36alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加alert(sNum03+sTr);  // 弹出12abcparseInt() 将数字字符串转化为整数var sNum01 = '12';var sNum02 = '24';var sNum03 = '12.32';alert(sNum01+sNum02); //弹出1224alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36alert(sNum03) //弹出数字12 将字符串小数转化为数字整数parseFloat() 将数字字符串转化为小数var sNum03 = '12.32'alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数split() 把一个字符串分隔成字符串组成的数组var sTr = '2017-4-22';var aRr = sTr.split("-");var aRr2= sTr.split("");alert(aRr); //弹出['2017','4','2']alert(aRr2); //弹出['2','0','1','7','-','4','-','2','2']charAt() 获取字符串中的某一个字符var sId = "#div1";var sTr = sId.charAt(0);alert(sTr); //弹出 #indexOf() 查找字符串是否含有某字符var sTr = "abcdefgh";var iNum = sTr.indexOf("c");alert(iNum); //弹出2substring() 截取字符串 用法: substring(start,end)(不包括end)var sTr = "abcdefghijkl";var sTr2 = sTr.substring(3,5);var sTr3 = sTr.substring(1);alert(sTr2); //弹出 dealert(sTr3); //弹出 bcdefghijkltoUpperCase() 字符串转大写var sTr = "abcdef";var sTr2 = sTr.toUpperCase();alert(sTr2); //弹出ABCDEFtoLowerCase() 字符串转小写var sTr = "ABCDEF";var sTr2 = sTr.toLowerCase();alert(sTr2); //弹出abcdef字符串反转var str = 'asdfj12jlsdkf098';var str2 = str.split('').reverse().join('');alert(str2);类型转换直接转换 parseInt() 与 parseFloat()alert('12'+7); //弹出127alert( parseInt('12') + 7 ); //弹出19 alert( parseInt(5.6)); // 弹出5alert('5.6'+2.3); // 弹出5.62.3alert(parseFloat('5.6')+2.3); // 弹出7.8999999999999995alert(0.1+0.2); //弹出 0.3000000000000004alert((0.1*100+0.2*100)/100); //弹出0.3alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9隐式转换 “==” 和 “-”if('3'==3){ alert('相等');}// 弹出'相等'alert('10'-3); // 弹出7NaN 和 isNaNalert( parseInt('123abc') ); // 弹出123alert( parseInt('abc123') ); // 弹出NaN调试程序的方法1、alert2、console.log3、document.title 定时器定时器在javascript中的作用1、制作动画2、异步操作3、函数缓冲与节流/* 定时器: setTimeout 只执行一次的定时器  clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器*/var time1 = setTimeout(myalert,2000);var time2 = setInterval(myalert,2000);/*clearTimeout(time1);clearInterval(time2);*/function myalert(){ alert('ok!');}封闭函数封闭函数是javascript中匿名函数的另外一种写法,创建一个一开始就执行而不用命名的函数(function myalert(){ alert('hello!');})();在函数定义前加上“~”和“!”等符号来定义匿名函数!function myalert(){ alert('hello!');}()封闭函数的好处封闭函数可以创造一个独立的空间,在封闭函数内定义的变量和函数不会影响外部同名的函数和变量,可以避免命名冲突,在页面上引入多个js文件时,用这种方式添加js文件比较安全,比如:var iNum01 = 12;function myalert(){ alert('hello!');}(function(){ var iNum01 = 24; function myalert(){  alert('hello!world'); } alert(iNum01); myalert()})()alert(iNum01);myalert();常用内置对象documentdocument.getElementById //通过id获取元素document.getElementsByTagName //通过标签名获取元素document.referrer //获取上一个跳转页面的地址(需要服务器环境)locationwindow.location.href //获取或者重定url地址window.location.search //获取地址参数部分window.location.hash //获取页面锚点或者叫哈希值MathMath.random 获取0-1的随机数Math.floor 向下取整Math.ceil 向上取整原型继承JavaScript的原型继承实现方式就是:定义新的构造函数,并在内部用call()调用希望“继承”的构造函数,并绑定this;借助中间函数F实现原型链继承,最好通过封装的inherits函数完成;继续在新的构造函数的原型上定义新方法百家乐破解。廖雪峰-原型继承JQueryjqueryjquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用<script type="text/javascript" src="js/jquery-1.12.2.js"></script>jquery选择器jquery选择器jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功$('#myId') //选择id为myId的网页元素$('.myClass') // 选择class为myClass的元素$('li') //选择所有的li元素$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素$('input[name=first]') // 选择name属性等于first的input元素对选择集进行过滤$('div').has('p'); // 选择包含p元素的div元素$('div').not('.myClass'); //选择class不等于myClass的div元素$('div').filter('.myClass'); //选择class等于myClass的div元素$('div').eq(5); //选择第6个div元素选择集转移$('div').prev(); //选择div元素前面紧挨的同辈元素$('div').prevAll(); //选择div元素之前所有的同辈元素$('div').next(); //选择div元素后面紧挨的同辈元素$('div').nextAll(); //选择div元素后面所有的同辈元素$('div').parent(); //选择div的父元素$('div').children(); //选择div的所有子元素$('div').siblings(); //选择div的同级元素$('div').find('.myClass'); //选择div内的class等于myClass的元素判断是否选择到了元素jquery有容错机制,即使没有找到元素,也不会出错,可以用length属性来判断是否找到了元素,length等于0,就是没选择到元素,length大于0,就是选择到了元素var $div1 = $('#div1');var $div2 = $('#div2');alert($div1.length); // 弹出1alert($div2.length); // 弹出0......<div id="div1">这是一个div</div>jquery样式操作操作行间样式// 获取div的样式$("div").css("width");$("div").css("color");//设置div的样式$("div").css("width","30px");$("div").css("height","30px");$("div").css({fontSize:"30px",color:"red"});选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个div的width操作样式类名$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式$("#div1").removeClass("divClass divClass2") //移除多个样式$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式获取元素的索引值var $li = $('.list li').eq(1);alert($li.index()); // 弹出1......<ul > <li>1</li> <li>2</li> <li>4</li> <li>5</li> <li>6</li></ul>jquery特殊效果fadeIn() 淡入 $btn.click(function(){  $('#div1').fadeIn(1000,'swing',function(){   alert('done!');  }); });fadeOut() 淡出fadeToggle() 切换淡入淡出hide() 隐藏元素show() 显示元素toggle() 切换元素的可见状态slideDown() 向下展开slideUp() 向上卷起slideToggle() 依次展开或卷起某个元素jquery链式调用$('#div1') // id为div1的元素.children('ul') //该元素下面的ul子元素.slideDown('fast') //高度从零变到实际高度来显示ul元素.parent() //跳到ul的父元素,也就是id为div1的元素.siblings() //跳到div1元素平级的所有兄弟元素.children('ul') //这些兄弟元素中的ul子元素.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素jquery动画通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数$('#div1').animate({ width:'+=100', height:300},1000,'swing',function(){ alert('done!');});尺寸相关、滚动事件获取和设置元素的尺寸width()、height() 获取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height获取元素相对页面的绝对位置offset()获取浏览器可视区宽度高度$(window).width();$(window).height();获取页面文档的宽度高度$(document).width();$(document).height();获取页面滚动距离$(document).scrollTop(); $(document).scrollLeft();页面滚动事件$(window).scroll(function(){  ...... })jquery属性操作html() 取出或设置html内容// 取出html内容var $htm = $('#div1').html();// 设置html内容$('#div1').html('<span>添加文字</span>');prop() 取出或设置某个属性的值// 取出图片的地址var $src = $('#img1').prop('src');// 设置图片的地址和alt属性$('#img1').prop({src: "test.jpg", alt: "Test Image" });jquery循环对jquery选择的对象集合分别进行操作,需要用到jquery循环操作,此时可以用对象上的each方法:$(function(){ $('.list li').each(function(i){  $(this).html(i); })})......<ul > <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul>jquery事件事件函数列表blur() 元素失去焦点focus() 元素获得焦点click() 鼠标单击mouseover() 鼠标进入(进入子元素也触发)mouseout() 鼠标离开(离开子元素也触发)mouseenter() 鼠标进入(进入子元素不触发)mouseleave() 鼠标离开(离开子元素不触发)hover() 同时为mouseenter和mouseleave事件指定处理函数ready() DOM加载完成resize() 浏览器窗口的大小发生改变scroll() 滚动条的位置发生变化submit() 用户递交表单绑定事件的其他方式$(function(){ $('#div1').bind('mouseover click', function(event) {  alert($(this).html()); });});取消绑定事件$(function(){ $('#div1').bind('mouseover click', function(event) {  alert($(this).html());  // $(this).unbind();  $(this).unbind('mouseover'); });});事件冒泡什么是事件冒泡在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)事件冒泡的作用事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件阻止事件冒泡事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止$(function(){ var $box1 = $('.father'); var $box2 = $('.son'); var $box3 = $('.grandson'); $box1.click(function() {  alert('father'); }); $box2.click(function() {  alert('son'); }); $box3.click(function(event) {  alert('grandson');  event.stopPropagation(); }); $(document).click(function(event) {  alert('grandfather'); });})......<div > <div >  <div ></div> </div></div>阻止默认行为阻止表单提交$('#form1').submit(function(event){ event.preventDefault();})合并阻止操作// event.stopPropagation();// event.preventDefault();// 合并写法:return false;事件委托事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作一般绑定事件的写法$(function(){ $ali = $('#list li'); $ali.click(function() {  $(this).css({background:'red'}); });})...<ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul>事件委托的写法$(function(){ $list = $('#list'); $list.delegate('li', 'click', function() {  $(this).css({background:'red'}); });})...<ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul>jquery元素节点操作创建节点var $div = $('<div>');var $div2 = $('<div>这是一个div元素</div>');插入节点append()和appendTo():在现存元素的内部,从后面插入元素prepend()和prependTo():在现存元素的内部,从前面插入元素after()和insertAfter():在现存元素的外部,从后面插入元素before()和insertBefore():在现存元素的外部,从前面插入元素删除节点var $span = $('<span>这是一个span元素</span>');$('#div1').append($span);......<div id="div1"></div>$('#div1').remove();ajax与jsonpajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息12博。ajax技术的原理是实例化

  

HTML

html概述和基本结构

html概述

HTML是 HyperText Mark-up Language 的首字母简写意思是超文本标记语言,超文本指的是超链接,标记指的是标签

html注释

<!-- 这是一段注释 -->

html标题标签

<h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3>

html段落标签、换行标签与字符实体

html段落标签

<p>一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方 式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网 页可以从一个网页链接跳转到另外一个网页ttyule。</p>

html换行标签

插入<br />来强制换行

html字符实体

空格的字符实体:&nbsp;“<”和“>”的字符实体:&lt; 和 &gt;

html块标签、含样式的标签

html块标签

1、<div> 标签 块元素,表示一块内容,没有具体的语义皇冠代理。2、<span> 标签 行内元素,表示一行中的一小段内容,没有具体的语义本港同步现场开奖直播。

含样式和语义的标签

1、<em> 标签 行内元素,表示语气中的强调词2、<i> 标签 行内元素,表示专业词汇3、<b> 标签 行内元素,表示文档中的关键字或者产品名4、<strong> 标签 行内元素,表示非常重要的内容 

语义化的标签

语义化的标签,就是在布局的时候多使用有语义的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录网球比分直播。比如:h1标签是表示标题,p标签是表示段落,ul、li标签是表示列表,a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多百家乐代理。

html图像标签、绝对路径和相对路径

html图像标签

<img>标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有:?src属性 定义图片的引用地址?alt属性 定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片,所以此属性非常重要
<img src="images/pic.jpg" alt="产品图片" />

绝对路径和相对路径

  • 绝对地址:相对于磁盘的位置去定位文件的地址
  • 相对地址:相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件,相对路径就没有这个问题皇冠备用。

html链接标签

?href属性 定义跳转的地址?title属性 定义鼠标悬停时弹出的提示文字框?target属性 定义链接窗口打开的位置 ?target="_self" 缺省值,新页面替换原来的页面,在原来位置打开 ?target="_blank" 新页面会在新开的一个浏览器窗口打开

html列表标签

有序列表

<ol> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li></ol>

无序列表

<ul> <li><a href="#">新闻标题一</a></li> <li><a href="#">新闻标题二</a></li> <li><a href="#">新闻标题三</a></li></ul>

定义列表

<h3>前端三大块</h3><dl> <dt>html</dt> <dd>负责页面的结构</dd> <dt>css</dt> <dd>负责页面的表现</dd> <dt>javascript</dt> <dd>负责页面的行为</dd></dl>

html表单

<form>标签 定义整体的表单区域  ?action属性 定义表单数据提交地址  ?method属性 定义表单提交的方式,一般有“get”方式和“post”方式 
<label>标签 为表单元素定义文字标注
<input>标签 定义通用的表单元素?type属性?type="text" 定义单行文本输入框 ?type="password" 定义密码输入框 ?type="radio" 定义单选框 ?type="checkbox" 定义复选框 ?type="file" 定义上传文件 ?type="submit" 定义提交按钮 ?type="reset" 定义重置按钮 ?type="button" 定义一个普通按钮 ?type="image" 定义图片作为提交按钮,用src属性定义图片地址 ?type="hidden" 定义一个隐藏的表单域,用来存储值?value属性 定义表单元素的值?name属性 定义表单元素的名称,此名称是提交数据时的键名 
<textarea>标签 定义多行文本输入框
<select>标签 定义下拉表单元素 
<option>标签 与<select>标签配合,定义下拉表单元素中的选项 

注册表单实例

<form action="http://www..." method="get"><p><label>姓名:</label><input type="text" name="username" /></p><p><label>密码:</label><input type="password" name="password" /></p><p><label>性别:</label><input type="radio" name="gender" value="0" /> 男<input type="radio" name="gender" value="1" /> 女</p><p><label>爱好:</label><input type="checkbox" name="like" value="sing" /> 唱歌<input type="checkbox" name="like" value="run" /> 跑步<input type="checkbox" name="like" value="swiming" /> 游泳</p><p><label>照片:</label><input type="file" name="person_pic"></p><p><label>个人描述:</label><textarea name="about"></textarea></p><p><label>籍贯:</label><select name="site"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option></select></p><p><input type="submit" name="" value="提交"><!-- input类型为submit定义提交按钮  还可以用图片控件代替submit按钮提交,一般会导致提交两次,不建议使用01足球比分新闻。如:  <input type="image" src="xxx.gif">--><input type="reset" name="" value="重置"></p></form>

html表格

1、<table>标签:声明一个表格,它的常用属性如下:?border属性 定义表格的边框,设置值是数值?cellpadding属性 定义单元格内容与边框的距离,设置值是数值?cellspacing属性 定义单元格与单元格之间的距离,设置值是数值?align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有:left | center | right 2、<tr>标签:定义表格中的一行 3、<td>和<th>标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格,它们的常用属性如下:?align 设置单元格中内容的水平对齐方式,设置值有:left | center | right ?valign 设置单元格中内容的垂直对齐方式 top | middle | bottom ?colspan 设置单元格水平合并,设置值是数值 ?rowspan 设置单元格垂直合并,设置值是数值

页面布局概述

布局也可以叫做排版,它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上,布局的方式分为两种:1、table布局:通过table元素将页面空间划分成若干个单元格,将文字或图片等元素放入单元格中,隐藏表格的边框,从而实现布局足球比分188。这种布局方式也叫传统布局,目前主要使用在EDM(广告邮件中的页面)中,主流的布局方式不用这种新万博app。 2、HTML+CSS布局(DIV+CSS):主要通过CSS样式设置来布局文字或图片等元素,需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局,它比传统布局要复杂,目前是主流的布局方式华球网直播。

CSS

css基本语法及页面引用

css基本语法

选择器 { 属性:值; 属性:值; 属性:值;}

/* css注释 ctrl+shift+"/"*/div{  width:100px;  height:100px;  color:red }

css页面引入方法

  1. 外联式:通过link标签,链接到外部样式表到页面中
<link rel="stylesheet" type="text/css" href="css/main.css">
  1. 嵌入式:通过style标签,在网页上创建嵌入的样式表
<style type="text/css"> div{ width:100px; height:100px; color:red } ......</style>
  1. 内联式:通过标签的style属性,在标签上直接写样式
<div style="width:100px; height:100px; color:red ">......</div>

css文本设置

常用的应用文本的css样式:?color 设置文字的颜色,如: color:red;?font-size 设置文字的大小,如:font-size:12px;?font-family 设置文字的字体,如:font-family:'微软雅黑';?font-style 设置字体是否倾斜,如:font-style:'normal'; 设置不倾斜,font-style:'italic';设置文字倾斜?font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗?line-height 设置文字的行高,设置行高相当于在每行文字的上下同时加间距, 如:line-height:24px; 行高示例图片 ?font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px '微软雅黑';?text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉?text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px 行高示例图片 ?text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中

css颜色表示法

css颜色值主要有三种表示方法:1、颜色名表示,比如:red 红色,gold 金色2、rgb表示,比如:rgb(255,0,0)表示红色3、16进制数值表示,比如:#ff0000 表示红色,这种可以简写成 #f00

css选择器

标签选择器

此种选择器影响范围大,建议尽量应用在层级选择器中

*{margin:0;padding:0}div{color:red} <div>....</div> <!-- 对应以上两条样式 --><div class="box">....</div> <!-- 对应以上两条样式 -->

id选择器

通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器

#box{color:red} <div id="box">....</div> <!-- 对应以上一条样式,其它元素不允许应用此样式 -->

类选择器

通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器

.red{color:red}.big{font-size:20px}.mt10{margin-top:10px} <div class="red">....</div><h1 class="red big mt10">....</h1><p class="red mt10">....</p>

层级选择器

主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突

.box span{color:red}.box .red{color:pink}.red{color:red}<div class="box"> <span>....</span> <a href="#" class="red">....</a></div><h3 class="red">....</h3>

组选择器

多个选择器,如果有同样的样式设置,可以使用组选择器

.box1,.box2,.box3{width:100px;height:100px}.box1{background:red}.box2{background:pink}.box2{background:gold}<div class="box1">....</div><div class="box2">....</div><div class="box3">....</div>

伪类及伪元素选择器

.box1:hover{color:red}.box2:before{content:'行首文字';}.box3:after{content:'行尾文字';}<div class="box1">....</div><div class="box2">....</div><div class="box3">....</div>

CSS盒子模型

把元素叫做盒子,设置对应的样式分别为:盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)足球全讯直播。 设置宽高 width:200px; /* 设置盒子的宽度,此宽度是指盒子内容的宽度,不是盒子整体宽度(难点) */ height:200px; /* 设置盒子的高度,此高度是指盒子内容的高度,不是盒子整体高度(难点) */设置边框 设置一边的边框,比如顶部边框,可以按如下设置: border-top-color:red; /* 设置顶部边框颜色为红色 */ border-top-width:10px; /* 设置顶部边框粗细为10px */ border-top-style:solid; /* 设置顶部边框的线性为实线,常用的有:solid(实线) dashed(虚线) dotted(点线); */上面三句可以简写成一句: border-top:10px solid red;设置其它三个边的方法和上面一样,把上面的'top'换成'left'就是设置左边,换成'right'就是设置右边,换成'bottom'就是设置底边九州天下现金网。四个边如果设置一样,可以将四个边的设置合并成一句: border:10px solid red;设置内间距padding 设置盒子四边的内间距,可设置如下: padding-top:20px;  /* 设置顶部内间距20px */ padding-left:30px;  /* 设置左边内间距30px */ padding-right:40px; /* 设置右边内间距40px */ padding-bottom:50px; /* 设置底部内间距50px */上面的设置可以简写如下: padding:20px 40px 50px 30px; /* 四个值按照顺时针方向,分别设置的是 上 右 下 左 四个方向的内边距值新皇冠体育官网。 */padding后面还可以跟3个值,2个值和1个值,它们分别设置的项目如下:padding:20px 40px 50px; /* 设置顶部内边距为20px,左右内边距为40px,底部内边距为50px */ padding:20px 40px; /* 设置上下内边距为20px,左右内边距为40px*/ padding:20px; /* 设置四边内边距为20px */设置外间距margin 外边距的设置方法和padding的设置方法相同,将上面设置项中的'padding'换成'margin'就是外边距设置方法经典老虎机19119澳门公司。

盒模型的实际尺寸

盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子的真实尺寸</title> <style type="text/css">  .box01{width:50px;height:50px;background-color:gold;}  .box02{width:50px;height:50px;background-color:gold;border:50px   solid #000}  .box03{width:50px;height:50px;background-color:gold;border:50px   solid #000;padding: 50px;} </style></head><body> <div class="box01">1</div> <br /> <div class="box02">2</div> <br /> <div class="box03">3</div></body></html>

盒模型使用技巧及相关问题

margin相关技巧

1、设置元素水平居中: margin:x auto;

2、margin负值让元素位移及边框合并

外边距合并

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距雷速4s。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

解决方法如下: 1、使用这种特性2、设置一边的外边距,一般设置margin-top3、将元素浮动或者定位 

margin-top 塌陷

在两个盒子嵌套时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败

解决方法如下:1、外部盒子设置一个边框2、外部盒子设置 overflow:hidden3、使用伪元素类: .clearfix:before{ content: ''; display:table;}

css元素溢出

当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置

overflow的设置项: 1、visible 默认值皇冠现金租售。内容不会被修剪,会呈现在元素框之外贝博体育。2、hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能水浒传老虎机亚洲首选288x。3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容西甲直播pptv。4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容东森平台。5、inherit 规定应该从父元素继承 overflow 属性的值皇冠国际。

块元素、内联元素、内联块元素

元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局好玩的棋盘游戏。 块元素 块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为:?支持全部的样式?如果没有设置宽度,默认的宽度为父级宽度100%?盒子占据一行、即使设置了宽度内联元素内联元素,也可以称为行内元素,布局中常用的标签如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行为:?支持部分样式(不支持宽、高、margin上下、padding上下)?宽高由内容决定?盒子并在一行?代码换行,盒子之间会产生间距?子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式 解决内联元素间隙的方法 1、去掉内联元素之间的换行2、将内联元素的父级设置font-size为0,内联元素自身再设置font-size内联块元素内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用display属性将块元素或者内联元素转化成这种元素二七比分网。它们在布局中表现的行为:?支持全部样式?如果没有设置宽高,宽高由内容决定?盒子并在一行?代码换行,盒子会产生间距?子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式manbetx怎么那么多人用。这三种元素,可以通过display属性来相互转化,不过实际开发中,块元素用得比较多,所以我们经常把内联元素转化为块元素,少量转化为内联块,而要使用内联元素时,直接使用内联元素,而不用块元素转化了和记娱乐。display属性display属性是用来设置元素的类型及隐藏的,常用的属性有:1、none 元素隐藏且不占位置2、block 元素以块元素显示3、inline 元素以内联元素显示4、inline-block 元素以内联块元素显示 

浮动

浮动特性

1、浮动元素有左浮动(float:left)和右浮动(float:right)两种 2、浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来 3、相邻浮动的块元素可以并在一行,超出父级宽度就换行 4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) 5、浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果 6、父元素如果没有设置尺寸(一般是高度不设置),父元素内整体浮动的元素无法撑开父元素,父元素需要清除浮动 7、浮动元素之间没有垂直margin的合并 

清除浮动

  • 父级上增加属性overflow:hidden
  • 在最后一个子元素的后面加一个空的div,给它样式属性 clear:both(不推荐)
  • 使用成熟的清浮动样式类,clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;}.clearfix:after{ clear:both;}.clearfix{zoom:1;}

清除浮动的使用方法

.con2{... overflow:hidden}或者<div class="con2 clearfix">

定位

文档流

文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置

关于定位

使用css的position属性来设置元素的定位类型,postion的设置项如下: ?relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移澳门永利官网。 ?absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位12博。 ?fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位博狗福。 ?static 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性葡京赌场。 ?inherit 从父元素继承 position 属性的值澳门美高亚洲首选288x。

定位元素的偏移

定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值

定位元素层级

定位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级

.box01{ ...... position:absolute; /* 设置了绝对定位 */ left:200px;   /* 相对于参照元素左边向右偏移200px */ top:100px;   /* 相对于参照元素顶部向下偏移100px */ z-index:10   /* 将元素层级设置为10 */}

定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

前端女侠-博客园

background属性

属性解释

background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ?background-color 设置背景颜色?background-image 设置背景图片地址?background-repeat 设置背景图片如何重复平铺?background-position 设置背景图片的位置?background-attachment 设置背景图片是固定还是随着页面滚动条滚动实际应用中,我们可以用background属性将上面所有的设置项放在一起,而且也建议这么做,这样做性能更高,而且兼容性更好,比如:“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”,这里面的“#00ff00”是设置background-color;“url(bgimage.gif)”是设置background-image;“no-repeat”是设置background-repeat;“left center”是设置background-position;“fixed”是设置background-attachment,各个设置项用空格隔开,有的设置项不写也是可以的,它会使用默认值世博国际影城。

HTML5与CSS3

CSS权重

CSS权重

CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式

权重的等级

可以把样式的应用方式分为几个等级,按照等级来计算权重1、!important,加在样式属性值后,权重值为 100002、内联样式,如:style=””,权重值为10003、ID选择器,如:#content,权重值为1004、类,伪类和属性选择器,如: content、:hover 权重值为105、标签选择器和伪元素选择器,如:div、p、:before 权重值为16、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0 

权重的计算实例

实例一:

<style type="text/css"> div{  color:red !important; }  </style>......<div style="color:blue">这是一个div元素</div><!-- 两条样式同时作用一个div,上面的样式权重值为10000+1,下面的行间样式的权重值为1000,所以文字的最终颜色为red -->

实例二:

<style type="text/css"> #content div.main_content h2{  color:red;  } #content .main_content h2{  color:blue; }</style>......<div id="content"> <div class="main_content">  <h2>这是一个h2标题</h2> </div></div><!-- 第一条样式的权重计算: 100+1+10+1,结果为112;第二条样式的权重计算: 100+10+1,结果为111;h2标题的最终颜色为red-->

CSS3新增选择器

元素选择器

  • E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素
  • E:first-child:匹配元素类型为E且是父元素的第一个子元素
  • E:last-child:匹配元素类型为E且是父元素的最后一个子元素
  • E > F E元素下面第一层子集
  • E ~ F E元素后面的兄弟元素
  • E + F 紧挨着的后面的兄弟元素
<style type="text/css">    .list div:nth-child(2){  background-color:red; }</style>......<div class="list"> <h2>1</h2> <div>2</div> <div>3</div> <div>4</div> <div>5</div></div><!-- 第2个子元素div匹配 -->

属性选择器

  • E[attr] 含有attr属性的元素
  • E[attr='ok'] 含有attr属性的元素且它的值为“ok”
  • E[attr^='ok'] 含有attr属性的元素且它的值的开头含有“ok”
  • E[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok”
  • E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”
<style type="text/css"> div[data-attr='ok']{  color:red; }</style>......<div data-attr="ok">这是一个div元素</div>

CSS3圆角、rgba

CSS3圆角

设置某一个角的圆角,比如设置左上角的圆角:border-top-left-radius:30px 60px;同时分别设置四个角: border-radius:30px 60px 120px 150px;设置四个圆角相同:border-radius:50%;

rgba(新的颜色值表示法)

  • 盒子透明度表示法
  • rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度
.box {  opacity:0.1;  /* 兼容IE */  filter:alpha(opacity=10);  }

CSS3 transition动画

1、transition-property 设置过渡的属性,比如:width height background-color2、transition-duration 设置过渡的时间,比如:1s 500ms3、transition-timing-function 设置过渡的运动方式,常用有 linear(匀速)|ease(缓冲运动)4、transition-delay 设置动画的延迟5、transition: property duration timing-function delay 同时设置四个属性

CSS3 transform变换

1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放3、rotate(deg) 设置盒子旋转4、skew(x-angle,y-angle) 设置盒子斜切5、perspective 设置透视距离6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示7、translateX、translateY、translateZ 设置三维移动8、rotateX、rotateY、rotateZ 设置三维旋转9、scaleX、scaleY、scaleZ 设置三维缩放10、tranform-origin 设置变形的中心点11、backface-visibility 设置盒子背面是否可见

CSS3 animation动画

1、@keyframes 定义关键帧动画2、animation-name 动画名称3、animation-duration 动画时间4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)5、animation-delay 动画延迟6、animation-iteration-count 动画播放次数 n|infinite7、animation-direction 动画结束后是否反向还原 normal|alternate8、animation-play-state 动画状态 paused(停止)|running(运动)9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

CSS3 浏览器前缀

浏览器样式前缀

为了让CSS3样式兼容,需要将某些样式加上浏览器前缀

  • -ms- 兼容IE浏览器
  • -moz- 兼容firefox
  • -o- 兼容opera
  • -webkit- 兼容chrome 和 safari
div{  -ms-transform: rotate(30deg);   -webkit-transform: rotate(30deg);  -o-transform: rotate(30deg);   -moz-transform: rotate(30deg);  transform: rotate(30deg);}

自动添加浏览器前缀

目前的状况是,有些CSS3属性需要加前缀,有些不需要加,有些只需要加一部分,这些加前缀的工作可以交给插件来完成,比如安装: autoprefixer

可以在Sublime text中通过package control 安装 autoprefixer

Autoprefixer在Sublime text中的设置

  1. preferences/key Bindings-User
{ "keys": ["ctrl+alt+x"],  mand": "autoprefixer" }
  1. Preferences>package setting>AutoPrefixer>Setting-User
{ "browsers": ["last 7 versions"], "cascade": true, "remove": true}
  • last 7 versions:最新的浏览器的7个版本
  • cascade:缩进美化属性值
  • remove:是否去掉不必要的前缀

HTML5新增标签

新增语义标签

1、<header> 页面头部、页眉2、<nav> 页面导航3、<article> 一篇文章4、<section> 文章中的章节5、<aside> 侧边栏6、<footer> 页面底部、页脚

音频视频

1、<audio>2、<video>PC端兼容h5的新标签的方法,在页面中引入以下js文件:<script type="text/javascript" src="/images/cdn.bootcss html5shivr29html5.js"></script>

HTML5 新增表单控件

新增类型:网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索

<label>网址:</label><input type="url" name="" required><br><br> <label>邮箱:</label><input type="email" name="" required><br><br> <label>日期:</label><input type="date" name=""><br><br> <label>时间:</label><input type="time" name=""><br><br> <label>星期:</label><input type="week" name=""><br><br> <label>数量:</label><input type="number" name=""> <br><br><label>范围:</label><input type="range" name=""><br><br> <label>电话:</label><input type="tel" name=""><br><br> <label>颜色:</label><input type="color" name=""><br><br> <label>搜索:</label><input type="search" name=""><br><br>
新增常用表单控件属性:1、placeholder 设置文本框默认提示文字2、autofocus 自动获得焦点3、aut plete 联想关键词 

常用css列表

 color 设置文字的颜色,如: color:red; font-size 设置文字的大小,如:font-size:12px; font-family 设置文字的字体,如:font-family:'微软雅黑'; font-style 设置字体是否倾斜,如:font-style:'normal'; 设置不倾斜,font-style:'italic';设置文字倾斜 font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗 line-height 设置文字的行高,设置行高相当于在每行文字的上下同时加间距, 如:line-height:24px; font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px '微软雅黑'; text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉 text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中 text-overflow 设置一行文字宽度超过容器宽度时的显示方式,如:text-overflow:clip 将多出的文字裁剪掉 text-overflow:ellipsis 将多出的文字显示成省略号 white-space 一般用来设置文本不换行,如:white-space:nowrap 设置文本不换行 一般与text-overflow和overflow属性配合使用来让一行文字超出宽度时显示省略号 list-style 一般用来设置去掉ul或者ol列表中的小圆点或数字 如:list-style:none width 设置盒子内容的宽度,如: width:100px; height 设置盒子内容的高度,如: height:100px; border-top 设置盒子顶部边框的三个属性 如:border-top:5px solid red;设置盒子顶部边框为3像素宽的红色的实线,详细设置说明:盒子模型 border-left 设置盒子左边边框的三个属性 如:border-left:3px dotted red;设置盒子左边边框为3像素宽的红色的点线,详细设置说明:盒子模型 border-right 设置盒子右边边框的三个属性 如:border-right:2px dashed red;设置盒子右边框为2像素宽的红色的虚线,详细设置说明:盒子模型 border-bottom 设置盒子底部边框的三个属性 如:border-bottom:1px solid red;设置盒子底部边框为1像素宽的红色的实线,详细设置说明:盒子模型 border 同时设置盒子的四个边框,如果四个边的样式统一就使用它 如:border:1px solid #000 设置盒子四个边都是1像素宽的黑色实线,详细设置说明:盒子模型 padding 设置盒子四个边的内边距 如:padding:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的内边距(顺时针),详细设置说明:盒子模型 margin 设置盒子四个边的外边距 如:margin:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的外边距(顺时针),详细设置说明:盒子模型 overflow 设置当子元素的尺寸超过父元素的尺寸时,盒子及子元素的显示方式 如:overflow:hidden 超出的子元素被裁切,详细设置说明:元素溢出 display 设置盒子的显示类型及隐藏,如:display:block 将盒子设置为以块元素显示 display:none 将元素隐藏,详细设置说明:元素类型 float 设置元浮动 如:float:left 设置左浮动 float:right 设置右浮动,详细设置说明:元素浮动 clear 在盒子两侧清除浮动 如:clear:both 在盒子两侧都不允许浮动,详细设置说明:元素浮动 position 设置元素定位 如:position:relative 设置元素相对定位,详细设置说明:元素定位 background 设置元素的背景色和背景图片,如:background:url(bg.jpg) cyan;设置盒子的背景图片为bg.jpg,背景色为cyan,详细设置说明:元素背景 background-size 设置盒子背景图的尺寸,如:background-size:30px 40px;设置背景图的尺寸宽为30px,高为40px,这个属性不能合到background属性中,详细设置说明:retina屏适配 opacity 设置元素整体透明度,一般为了兼容需要加上filter属性设置 如:opacity:0.1;filter:alpha(opacity=10) cursor 设置鼠标悬停在元素上时指针的形状 如:cursor:pointer 设置为手型 outline 设置文本输入框周围凸显的蓝色的线,一般是设为没有 如:outline:none border-radius 设置盒子的圆角 如:border-radius:10px 设置盒子的四个角为10px半径的圆角,详细设置说明:css圆角 box-shadow 设置盒子的阴影,如:box-shadow:10px 10px 5px 2px pink;设置盒子有粉色的阴影,详细设置说明:css阴影 transition 设置盒子的过渡动画,如:transition:all 1s ease;设置元素过渡动画为1秒完成,所有变动的属性都做动画,详细设置说明:过渡动画 animation 设置盒子的关键帧动画,详细设置说明:关键帧动画 transform 设置盒子的位移、旋转、缩放、斜切等变形,如:transform:rotate(45deg);设置盒子旋转45度,详细设置说明:元素变形 box-sizing 设置盒子的尺寸计算方式,如:box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算,此时width和height的值就是盒子的实际尺寸 border-collapse 设置表格边框是否合并,如:border-collapse:collapse,将表格边框合并,这样就可以制作1px边框的表格明升娱乐亚洲首选288x。

JavaScript

JavaScript介绍

前端三大块1、HTML:页面结构2、CSS:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果3、JavaScript:页面行为:部分动画效果、页面与用户的交互、页面功能 

JavaScript嵌入页面的方式

行间事件(主要用于事件)

<input type="button" name="" onclick="alert('ok!');">

页面script标签嵌入

<script type="text/javascript">   alert('ok!');</script>

外部引入

<script type="text/javascript" src="js/index.js"></script>

变量

JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定疯狂比分网。 定义变量需要用关键字 'var'

变量类型

5种基本数据类型:1、number 数字类型2、string 字符串类型3、boolean 布尔类型 true 或 false4、undefined undefined类型,变量声明未初始化,它的值就是undefined5、null null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面上获取不到对象,返回的值就是null1种复合类型:object

javascript注释

<script type="text/javascript"> // 单行注释var iNum = 123;/*  多行注释 1、... 2、...*/var sTr = 'abc123';</script>

变量、函数、属性、函数参数命名规范

1、区分大小写2、第一个字符必须是字母、下划线(_)或者美元符号($)3、其他字符可以是字母、下划线、美元符或数字

获取元素方法一

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如:<script type="text/javascript"> var oDiv = document.getElementById('div1');</script>....<div id="div1">这是一个div元素</div>上面的语句,如果把javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript去页面上获取元素div1的时候,元素div1还没有加载,解决方法有两种:第一种方法:将javascript放到页面最下边....<div id="div1">这是一个div元素</div>....<script type="text/javascript"> var oDiv = document.getElementById('div1');</script></body>第二种方法:将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,就不会出错了<script type="text/javascript"> window.onload = function(){  var oDiv = document.getElementById('div1'); }</script>....<div id="div1">这是一个div元素</div>

操作元素属性

获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写

操作属性的方法

1、“.” 操作2、“[ ]”操作

属性写法

1、html的属性和js里面属性写法一样2、“class” 属性写成 “className”3、“style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”
通过“.”操作属性:<script type="text/javascript"> window.onload = function(){  var oInput = document.getElementById('input1');  var oA = document.getElementById('link1');  // 读取属性值  var sValue = oInput.value;  var sType = oInput.type;  var sName = oInput.name;  var sLinks = oA.href;  // 写(设置)属性  oA.style.color = 'red';  oA.style.fontSize = sValue; }</script>......<input type="text" name="setsize" id="input1" value="20px"><a href="http://www.itcast " id="link1">传智播客</a>
通过“[ ]”操作属性:<script type="text/javascript"> window.onload = function(){  var oInput1 = document.getElementById('input1');  var oInput2 = document.getElementById('input2');  var oA = document.getElementById('link1');  // 读取属性  var sVal1 = oInput1.value;  var sVal2 = oInput2.value;  // 写(设置)属性  // oA.style.val1 = val2; 没反应  oA.style[sVal1] = sVal2;   }</script>......<input type="text" name="setattr" id="input1" value="fontSize"><input type="text" name="setnum" id="input2" value="30px"><a href="http://www.itcast " id="link1">传智播客</a>

innerHTML

innerHTML可以读取或者写入标签包裹的内容

<script type="text/javascript"> window.onload = function(){  var oDiv = document.getElementById('div1');  //读取  var sTxt = oDiv.innerHTML;  alert(sTxt);  //写入  oDiv.innerHTML = '<a href="http://www.itcast ">传智播客<a/>'; }</script>......<div id="div1">这是一个div元素</div>

函数

变量与函数预解析

JavaScript解析过程分为两个阶段,先是编译阶段,然后执行阶段,在编译阶段会将function定义的函数提前,并且将var定义的变量声明提前,将它赋值为undefined

<script type="text/javascript">  fnAlert();  // 弹出 hello! alert(iNum); // 弹出 undefined function fnAlert(){  alert('hello!'); } var iNum = 123;</script>

提取行间事件

在html行间调用的事件可以提取到javascript中调用,从而做到结构与行为分离

<!--行间事件调用函数 --><script type="text/javascript">   function fnAlert(){  alert('ok!'); }</script>......<input type="button" name="" value="弹出" onclick="fnAlert()"><!-- 提取行间事件 --><script type="text/javascript">window.onload = function(){ var oBtn = document.getElementById('btn1'); oBtn.onclick = fnAlert; function fnAlert(){  alert('ok!'); }} </script>......<input type="button" name="" value="弹出" id="btn1">

匿名函数

定义的函数可以不给名称,这个叫做匿名函数,可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用

<script type="text/javascript">window.onload = function(){ var oBtn = document.getElementById('btn1'); /* oBtn.onclick = myalert; function myalert(){  alert('ok!'); } */ // 直接将匿名函数赋值给绑定的事件 oBtn.onclick = function (){  alert('ok!'); }}</script>

条件语句

switch语句

多重if else语句可以换成性能更高的switch语句

var iNow = 1;switch (iNow){ case 1:  ...;  break; case 2:  ...;  break;  default:  ...;}

数组及操作方法

数组就是一组数据的集合,javascript中,数组里面的数据可以是不同类型的

定义数组的方法

//对象的实例创建var aList = new Array(1,2,3);//直接量创建var aList2 = [1,2,3,'asd'];

操作数组中数据的方法

  • 获取数组的长度:aList.length
var aList = [1,2,3,4];alert(aList.length); // 弹出4
  • 用下标操作数组的某个数据:aList[0]
var aList = [1,2,3,4];alert(aList[0]); // 弹出1
  • join() 将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4];alert(aList.join('-')); // 弹出 1-2-3-4
  • push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4];aList.unshift(5);alert(aList); //弹出5,1,2,3,4aList.shift();alert(aList); // 弹出1,2,3,4
  • unshift()和 shift() 从数组前面增加成员或删除成员
var aList = [1,2,3,4];aList.unshift(5);alert(aList); //弹出5,1,2,3,4aList.shift();alert(aList); // 弹出1,2,3,4
  • reverse() 将数组反转
var aList = [1,2,3,4];aList.reverse();alert(aList); // 弹出4,3,2,1
  • indexOf() 返回数组中元素第一次出现时的索引值
var aList = [1,2,3,4,1,3,4];alert(aList.indexOf(1));
  • splice() 在数组中增加或删除成员
var aList = [1,2,3,4];aList.splice(2,1,7,8,9); //从第2个元素开始,删除1个元素,然后在此位置增加'7,8,9'三个元素alert(aList); //弹出 1,2,7,8,9,4

循环语句

数组去重

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];var aList2 = [];for(var i=0;i<aList.length;i++){ if(aList.indexOf(aList[i])==i) {  aList2.push(aList[i]); }}alert(aList2);

获取元素方法二

可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签,获取的是一个选择集,不是数组,但是可以用下标的方式操作选择集里面的标签元素

<script type="text/javascript"> window.onload = function(){  var aLi = document.getElementsByTagName('li');  // aLi.style.backgroundColor = 'gold'; // 出错!不能同时设置多个li  alert(aLi.length);  aLi[0].style.backgroundColor = 'gold'; }</script>....<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li></ul>

Javascript组成

1、ECMAscript javascript的语法(变量、函数、循环语句等语法)2、DOM 文档对象模型 操作html和css的方法3、BOM 浏览器对象模型 操作浏览器的一些方法 

字符串处理方法

  • 字符串合并操作:“ + ”
var iNum01 = 12;var iNum02 = 24;var sNum03 = '12';var sTr = 'abc';alert(iNum01+iNum02); //弹出36alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加alert(sNum03+sTr);  // 弹出12abc
  • parseInt() 将数字字符串转化为整数
var sNum01 = '12';var sNum02 = '24';var sNum03 = '12.32';alert(sNum01+sNum02); //弹出1224alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36alert(sNum03) //弹出数字12 将字符串小数转化为数字整数
  • parseFloat() 将数字字符串转化为小数
var sNum03 = '12.32'alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数
  • split() 把一个字符串分隔成字符串组成的数组
var sTr = '2017-4-22';var aRr = sTr.split("-");var aRr2= sTr.split("");alert(aRr); //弹出['2017','4','2']alert(aRr2); //弹出['2','0','1','7','-','4','-','2','2']
  • charAt() 获取字符串中的某一个字符
var sId = "#div1";var sTr = sId.charAt(0);alert(sTr); //弹出 #
  • indexOf() 查找字符串是否含有某字符
var sTr = "abcdefgh";var iNum = sTr.indexOf("c");alert(iNum); //弹出2
  • substring() 截取字符串 用法: substring(start,end)(不包括end)
var sTr = "abcdefghijkl";var sTr2 = sTr.substring(3,5);var sTr3 = sTr.substring(1);alert(sTr2); //弹出 dealert(sTr3); //弹出 bcdefghijkl
  • toUpperCase() 字符串转大写
var sTr = "abcdef";var sTr2 = sTr.toUpperCase();alert(sTr2); //弹出ABCDEF
  • toLowerCase() 字符串转小写
var sTr = "ABCDEF";var sTr2 = sTr.toLowerCase();alert(sTr2); //弹出abcdef
  • 字符串反转
var str = 'asdfj12jlsdkf098';var str2 = str.split('').reverse().join('');alert(str2);

类型转换

直接转换 parseInt() 与 parseFloat()

alert('12'+7); //弹出127alert( parseInt('12') + 7 ); //弹出19 alert( parseInt(5.6)); // 弹出5alert('5.6'+2.3); // 弹出5.62.3alert(parseFloat('5.6')+2.3); // 弹出7.8999999999999995alert(0.1+0.2); //弹出 0.3000000000000004alert((0.1*100+0.2*100)/100); //弹出0.3alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9

隐式转换 “==” 和 “-”

if('3'==3){ alert('相等');}// 弹出'相等'alert('10'-3); // 弹出7

NaN 和 isNaN

alert( parseInt('123abc') ); // 弹出123alert( parseInt('abc123') ); // 弹出NaN

调试程序的方法

1、alert2、console.log3、document.title 

定时器

定时器在javascript中的作用

1、制作动画2、异步操作3、函数缓冲与节流
/* 定时器: setTimeout 只执行一次的定时器  clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器*/var time1 = setTimeout(myalert,2000);var time2 = setInterval(myalert,2000);/*clearTimeout(time1);clearInterval(time2);*/function myalert(){ alert('ok!');}

封闭函数

封闭函数是javascript中匿名函数的另外一种写法,创建一个一开始就执行而不用命名的函数

(function myalert(){ alert('hello!');})();

在函数定义前加上“~”和“!”等符号来定义匿名函数

!function myalert(){ alert('hello!');}()

封闭函数的好处

封闭函数可以创造一个独立的空间,在封闭函数内定义的变量和函数不会影响外部同名的函数和变量,可以避免命名冲突,在页面上引入多个js文件时,用这种方式添加js文件比较安全,比如:

var iNum01 = 12;function myalert(){ alert('hello!');}(function(){ var iNum01 = 24; function myalert(){  alert('hello!world'); } alert(iNum01); myalert()})()alert(iNum01);myalert();

常用内置对象

  • document
document.getElementById //通过id获取元素document.getElementsByTagName //通过标签名获取元素document.referrer //获取上一个跳转页面的地址(需要服务器环境)
  • location
window.location.href //获取或者重定url地址window.location.search //获取地址参数部分window.location.hash //获取页面锚点或者叫哈希值
  • Math
Math.random 获取0-1的随机数Math.floor 向下取整Math.ceil 向上取整

原型继承

  • JavaScript的原型继承实现方式就是:
    • 定义新的构造函数,并在内部用call()调用希望“继承”的构造函数,并绑定this;
    • 借助中间函数F实现原型链继承,最好通过封装的inherits函数完成;
    • 继续在新的构造函数的原型上定义新方法新英体育英超直播。

廖雪峰-原型继承

JQuery

jquery

jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

jquery选择器

jquery选择器

jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功

$('#myId') //选择id为myId的网页元素$('.myClass') // 选择class为myClass的元素$('li') //选择所有的li元素$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素$('input[name=first]') // 选择name属性等于first的input元素

对选择集进行过滤

$('div').has('p'); // 选择包含p元素的div元素$('div').not('.myClass'); //选择class不等于myClass的div元素$('div').filter('.myClass'); //选择class等于myClass的div元素$('div').eq(5); //选择第6个div元素

选择集转移

$('div').prev(); //选择div元素前面紧挨的同辈元素$('div').prevAll(); //选择div元素之前所有的同辈元素$('div').next(); //选择div元素后面紧挨的同辈元素$('div').nextAll(); //选择div元素后面所有的同辈元素$('div').parent(); //选择div的父元素$('div').children(); //选择div的所有子元素$('div').siblings(); //选择div的同级元素$('div').find('.myClass'); //选择div内的class等于myClass的元素

判断是否选择到了元素

jquery有容错机制,即使没有找到元素,也不会出错,可以用length属性来判断是否找到了元素,length等于0,就是没选择到元素,length大于0,就是选择到了元素

var $div1 = $('#div1');var $div2 = $('#div2');alert($div1.length); // 弹出1alert($div2.length); // 弹出0......<div id="div1">这是一个div</div>

jquery样式操作

操作行间样式

// 获取div的样式$("div").css("width");$("div").css("color");//设置div的样式$("div").css("width","30px");$("div").css("height","30px");$("div").css({fontSize:"30px",color:"red"});

选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个div的width

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式$("#div1").removeClass("divClass divClass2") //移除多个样式$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

获取元素的索引值

var $li = $('.list li').eq(1);alert($li.index()); // 弹出1......<ul class="list"> <li>1</li> <li>2</li> <li>4</li> <li>5</li> <li>6</li></ul>

jquery特殊效果

fadeIn() 淡入 $btn.click(function(){  $('#div1').fadeIn(1000,'swing',function(){   alert('done!');  }); });fadeOut() 淡出fadeToggle() 切换淡入淡出hide() 隐藏元素show() 显示元素toggle() 切换元素的可见状态slideDown() 向下展开slideUp() 向上卷起slideToggle() 依次展开或卷起某个元素

jquery链式调用

$('#div1') // id为div1的元素.children('ul') //该元素下面的ul子元素.slideDown('fast') //高度从零变到实际高度来显示ul元素.parent() //跳到ul的父元素,也就是id为div1的元素.siblings() //跳到div1元素平级的所有兄弟元素.children('ul') //这些兄弟元素中的ul子元素.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素

jquery动画

通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数

$('#div1').animate({ width:'+=100', height:300},1000,'swing',function(){ alert('done!');});

尺寸相关、滚动事件

  • 获取和设置元素的尺寸
width()、height() 获取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
  • 获取元素相对页面的绝对位置
offset()
  • 获取浏览器可视区宽度高度
$(window).width();$(window).height();
  • 获取页面文档的宽度高度
$(document).width();$(document).height();
  • 获取页面滚动距离
$(document).scrollTop(); $(document).scrollLeft();
  • 页面滚动事件
$(window).scroll(function(){  ...... })

jquery属性操作

  • html() 取出或设置html内容
// 取出html内容var $htm = $('#div1').html();// 设置html内容$('#div1').html('<span>添加文字</span>');
  • prop() 取出或设置某个属性的值
// 取出图片的地址var $src = $('#img1').prop('src');// 设置图片的地址和alt属性$('#img1').prop({src: "test.jpg", alt: "Test Image" });

jquery循环

对jquery选择的对象集合分别进行操作,需要用到jquery循环操作,此时可以用对象上的each方法:

$(function(){ $('.list li').each(function(i){  $(this).html(i); })})......<ul class="list"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul>

jquery事件

  • 事件函数列表
blur() 元素失去焦点focus() 元素获得焦点click() 鼠标单击mouseover() 鼠标进入(进入子元素也触发)mouseout() 鼠标离开(离开子元素也触发)mouseenter() 鼠标进入(进入子元素不触发)mouseleave() 鼠标离开(离开子元素不触发)hover() 同时为mouseenter和mouseleave事件指定处理函数ready() DOM加载完成resize() 浏览器窗口的大小发生改变scroll() 滚动条的位置发生变化submit() 用户递交表单
  • 绑定事件的其他方式
$(function(){ $('#div1').bind('mouseover click', function(event) {  alert($(this).html()); });});
  • 取消绑定事件
$(function(){ $('#div1').bind('mouseover click', function(event) {  alert($(this).html());  // $(this).unbind();  $(this).unbind('mouseover'); });});

事件冒泡

什么是事件冒泡

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)

事件冒泡的作用

事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件

阻止事件冒泡

事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止

$(function(){ var $box1 = $('.father'); var $box2 = $('.son'); var $box3 = $('.grandson'); $box1.click(function() {  alert('father'); }); $box2.click(function() {  alert('son'); }); $box3.click(function(event) {  alert('grandson');  event.stopPropagation(); }); $(document).click(function(event) {  alert('grandfather'); });})......<div class="father"> <div class="son">  <div class="grandson"></div> </div></div>

阻止默认行为

阻止表单提交

$('#form1').submit(function(event){ event.preventDefault();})

合并阻止操作

// event.stopPropagation();// event.preventDefault();// 合并写法:return false;

事件委托

事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作

一般绑定事件的写法

$(function(){ $ali = $('#list li'); $ali.click(function() {  $(this).css({background:'red'}); });})...<ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul>

事件委托的写法

$(function(){ $list = $('#list'); $list.delegate('li', 'click', function() {  $(this).css({background:'red'}); });})...<ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul>

jquery元素节点操作

  • 创建节点
var $div = $('<div>');var $div2 = $('<div>这是一个div元素</div>');
  • 插入节点
    • append()和appendTo():在现存元素的内部,从后面插入元素
    • prepend()和prependTo():在现存元素的内部,从前面插入元素
    • after()和insertAfter():在现存元素的外部,从后面插入元素
    • before()和insertBefore():在现存元素的外部,从前面插入元素
  • 删除节点
var $span = $('<span>这是一个span元素</span>');$('#div1').append($span);......<div id="div1"></div>$('#div1').remove();

ajax与jsonp

ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息天下足球直播吧。ajax技术的原理是实例化

同步和异步

现实生活中,同步指的是同时做几件事情,异步指的是做完一件事后再做另外一件事,程序中的同步和异步是把现实生活中的概念对调,也就是程序中的异步指的是现实生活中的同步,程序中的同步指的是现实生活中的异步

局部刷新和无刷新

ajax可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只是局部刷新,ajax可以自己发送http请求,不用通过浏览器的地址栏,所以页面整体不会刷新,ajax获取到后台数据,更新页面显示数据的部分,就做到了页面局部刷新

同源策略

ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全的考虑信游娱乐。特征报错提示:

load https://www. /. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

$.ajax使用方法

常用参数:1、url 请求地址2、type 请求方式,默认是'GET',常用的还有'POST'3、dataType 设置返回的数据格式,常用的是'json'格式,也可以设置为'html'4、data 设置发送给服务器的数据5、success 设置请求成功后的回调函数6、error 设置请求失败后的回调函数7、async 设置是否异步,默认值是'true',表示异步 

以前的写法

$.ajax({ url: 'js/data.json', type: 'GET', dataType: 'json', data:{'aa':1} success:function(data){  alert(data.name); }, error:function(){  alert('服务器超时,请重试!'); }});

新的写法(推荐)

$.ajax({ url: 'js/data.json', type: 'GET', dataType: 'json', data:{'aa':1}}).done(function(data) { alert(data.name);}).fail(function() { alert('服务器超时,请重试!');});// data.json里面的数据: {"name":"tom","age":18}

jsonp

ajax只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要用到jsonp技术,jsonp可以跨域请求数据,它的原理主要是利用了<script>标签可以跨域链接资源的特性第一比分网。jsonp和ajax原理完全不一样,不过jquery将它们封装成同一个函数

$.ajax({ url:'js/data.js', type:'get', dataType:'jsonp', jsonpCallback:'fnBack'}).done(function(data){ alert(data.name);}).fail(function() { alert('服务器超时,请重试!');});// data.js里面的数据: fnBack({"name":"tom","age":18});

获取360搜索关键词联想数据

$(function(){ $('#txt01').keyup(function(){  var sVal = $(this).val();  $.ajax({   url:'https://sug.so.360 /suggest?',   type:'get',   dataType:'jsonp',   data: {word: sVal}  })  .done(function(data){   var aData = data.s;   $('.list').empty();   for(var i=0;i<aData.length;i++)   {    var $li = $('<li>'+ aData[i] +'</li>');    $li.appendTo($('.list'));   }  })   })})//......<input type="text" name="" id="txt01"><ul class="list"></ul>

本地存储

本地存储分为cookie,以及新增的localStorage和sessionStorage

  • ookie 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽,可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,在设置的过期时间之前有效
jquery 设置cookie$.cookie('mycookie','123',{expires:7,path:'/'});jquery 获取cookie$.cookie('mycookie');
  • ocalStorage 存储在本地,容量为5M或者更大,不会在请求时候携带传递,在所有同源窗口中共享,数据一直有效,除非人为删除,可作为长期数据
//设置:localStorage.setItem("dat", "456");localStorage.dat = '456';//获取:localStorage.getItem("dat");localStorage.dat//删除localStorage.removeItem("dat");
  • sessionStorage 存储在本地,容量为5M或者更大,不会在请求时候携带传递,在同源的当前窗口关闭前有效
localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制,可以将数据更新的通知监听者,Web Storage的api接口使用更方便iPhone的无痕浏览不支持Web Storage,只能用cookie

移动端库和框架

移动端js事件

1、touchstart: //手指放到屏幕上时触发2、touchmove: //手指在屏幕上滑动式触发3、touchend: //手指离开屏幕时触发4、touchcancel: //系统取消touch事件的时候触发,比较少用 

移动端一般有三种操作,点击、滑动、拖动,这三种操作一般是组合使用上面的几个事件来完成的,所有上面的4个事件一般很少单独使用,一般是封装使用来实现这三种操作,可以使用封装成熟的js库

  • zepto
  • swiper
  • bootstrap

正则表达式

  • 正则表达式的写法
var re=new RegExp('规则', '可选参数');var re=/规则/参数; 
  • 规则中的字符
1)普通字符匹配:如:/a/ 匹配字符 ‘a’,/a,b/ 匹配字符 ‘a,b’2)转义字符匹配:\d 匹配一个数字,即0-9\D 匹配一个非数字,即除了0-9\w 匹配一个单词字符(字母、数字、下划线)\W 匹配任何非单词字符www.hg0088.com。等价于[^A-Za-z0-9_]\s 匹配一个空白符\S 匹配一个非空白符\b 匹配单词边界\B 匹配非单词边界. 匹配一个任意字符
var sTr01 = '123456asdf';var re01 = /\d+/;//匹配纯数字字符串var re02 = /^\d+$/;alert(re01.test(sTr01)); //弹出truealert(re02.test(sTr01)); //弹出false
  • 量词:对左边的匹配字符定义个数
? 出现零次或一次(最多出现一次)+ 出现一次或多次(至少出现一次)* 出现零次或多次(任意次){n} 出现n次{n,m} 出现n到m次{n,} 至少出现n次 
  • 任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符[a-z0-9] : 匹配a到z或者0到9中的任意一个字符
  • 限制开头结尾
^ 以紧挨的元素开头$ 以紧挨的元素结尾 
  • 修饰参数
g: global,全文搜索,默认搜索到第一个结果接停止i: ingore case,忽略大小写,默认大小写敏感
  • 常用函数
1、test用法:正则.test(字符串) 匹配成功,就返回真,否则就返回假2、replace用法:字符串.replace(正则,新的字符串) 匹配成功的字符去替换新的字符 
  • 正则默认规则

匹配成功就结束,不会继续匹配,区分大小写

var sTr01 = 'abcdefedcbaCef';var re01 = /c/;var re02 = /c/g;var re03 = /c/gi;var sTr02 = sTr01.replace(re01,'*');var sTr03 = sTr01.replace(re02,'*');var sTr04 = sTr01.replace(re03,'*');alert(sTr02); // 弹出 ab*defedcbaCefalert(sTr03); // 弹出 ab*defed*baCefalert(sTr04); // 弹出 ab*defed*ba*ef
  • 常用正则规则
//用户名验证:(数字字母或下划线6到20位)var reUser = /^\w{6,20}$/;//邮箱验证:  var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;//密码验证:var rePass = /^[\w!@#$%^&*]{6,20}$/;//手机号码验证:var rePhone = /^1[3458]\d{9}$/;

前端性能优化

从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度12bo。网站的性能直接会影响到用户的数量,所有前端性能优化很重要

代码部署

1、代码的压缩与合并2、图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息日博开户。3、使用内容分发网络 CDN4、为文件设置Last-Modified、Expires和Etag5、使用GZIP压缩传送6、权衡DNS查找次数(使用不同域名会增加DNS查找)7、避免不必要的重定向(加"/") 

编码

html

1、使用结构清晰,简单,语义化标签2、避免空的src和href3、不要在HTML中缩放图片 

css

1、精简css选择器2、把CSS放到顶部3、避免@import方式引入样式4、css中使用base64图片数据取代图片文件,减少请求数,在线转base64网站:http://tool.css-js /base64.html5、使用css动画来取代javascript动画6、使用字体图标7、使用css sprite(雪碧图)8、使用svg图形9、避免使用CSS表达式 body{ background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" ); }

javascript

1、减少引用库的个数2、使用requirejs或seajs异步加载js3、JS放到页面底部引入4、避免全局查找5、使用原生方法6、用switch语句代替复杂的if else语句7、减少语句数,比如说多个变量声明可以写成一句8、使用字面量表达式来初始化数组或者对象9、使用innerHTML取代复杂的元素注入10、使用事件代理(事件委托)11、避免多次访问dom选择集12、高频触发事件设置使用函数节流13、使用Web Storage缓存数据 

移动端Web

流式布局

流式布局:就是百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,称为流式布局

视觉窗口

视觉窗口:viewport,是移动端特有澳门皇冠体育app。这是一个虚拟的区域,承载网页的hg0088皇冠。

承载关系

承载关系:浏览器---->viewport---->网页

适配要求

  1. 网页宽度必须和浏览器保持一致
  2. 默认显示的缩放比例和PC端保持(缩放比例1.0)
  3. 不允许用户自行缩放网页

满足这些要求达到了适配,国际上通用的适配方案,标准的移动端适配方案

适配设置

  1. 如果任何设置都没有,默认走的就是viewport的默认设置
  2. 去设置新的viewport设置,达到适配要求
  3. <meta name="viewport"> 设置视口的标签 在head里面并且应该紧接着编码设置
  4. viewport的功能
    1. width:可以设置宽度(device-width 当前设备的宽度)
    2. height:可以设置高度
    3. initial-scale:可以设置默认的缩放比例
    4. user-scalable:可以设置是否允许用户自行缩放
    5. maximum-scale:可以设置最大缩放比例
    6. minimum-scale:可以设置最小缩放比例
在<meta name="viewport" content="" > content="" 使用以上参数- width=device-width 当前设备宽度- initial-scale=1.0 宽度一致比例是1.0- user-scalable=no  不允许用户自行缩放 (yes,no 1,0)
标准适配方案<meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=0'>