admin 管理员组文章数量: 887021
HTML5,CSS3,js
HTML5,CSS3,js
- html5
- html基本结构
- 块级标签和行级标签
- html5表格
- html5表单
- css3
- css使用方法
- css常用属性
- css3的过渡和变换
- css3的动画属性和多列属性
- css盒模型与浮动定位
- 移动开发css样式要求
- js
- javascript基础
- javascript函数
- BOM
- DOM
- javascript事件
- 数组和对象
- Cookie
- js数据类型转换注意事项
- js的模块
html5
html基本结构
1.html5文档的基本结构
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>html5</title><link rel="icon" href="img/icon.jpg"/>
</head>
<body></body>
</html>
2.head中常用的标签
<title></title>
<meta/>
<link/>
3.添加网页图标的代码
<link rel="icon" href="img/icon.jpg"/>
4.常见才字符集编码格式
GB2312、GBK、UTF-8
5.meta标签的常用属性代码
charset、http-equiv+content、name
块级标签和行级标签
1.常用的列表
1.无序列表标签
<ul><li></li>
</ul>
2.有序列表标签
<ol><li></li>
</ol>
3.定义列表标签
<dl><dt></dt><dd></dd>
</dl>
2.常用的块级标签
<div></div><br/><p></p><h1></h1>...<h6></h6><ul><li></li></ul><dl></dl>
3.常见的行级标签
![在这里插入图片描述]()<a></a><span></span><strong></strong><em></em><i></i><b></b>
4.img标签的常用属性及作用
src属性：引用图片的路径
height属性：图片的高度
width属性：图片的宽度
title属性：图片的标题，鼠标在图片上显示的文字
alt属性：图片无法显示时的文字
5.a标签的常用属性及作用
href属性：链接的地址
target属性：_self 在当前页打开新页面
_blank 在新窗口打开新页面
6.设置指定锚链接
在本页跳转1，设置锚点：<a name="top"></a>2，添加跳转锚点链接<a href="#top"></a>在页面间跳转1，在指定页面设置锚点：<a name="top"></a>2，在本页添加跳转锚点链接<a href="index.html#top"></a>
7.html5新增的结构标签
<section></section><article></article><header></header><footer></footer><nav></nav><aside></aside><canvas></canvas><video></video><audio></audio>
8.块级标签和行级标签的区别
| 区别 | 块级标签 | 行级标签 |
|---|---|---|
| 是否换行 | 是 | 否 |
| 宽度 | 100% | 由内容确定 |
| 设置属性 | 可以 | 不可以 |
html5表格
1.表格的基本结构
<table><tr><th>表头</th></tr><tr><td>第一行1</td></tr></table>
2.表格的属性
| 属性 | 含义 | 属性值 |
|---|---|---|
| border | 表格的边框 | 数字 |
| width | 表格的宽度 | 数字 |
| height | 表格的高度 | 数字 |
| bgcolor | 表格的背景色 | 颜色值 |
| bordercolor | 表格的边框颜色 | 颜色值 |
| cellspacing | 表格的单元格间距 | 数字 |
| cellpadding | 表格的单元格内边距 | 数字 |
| align | 表格的对齐属性 | 可选值center,left,right |
2.行列（单元格）的属性（横行数列）
| 属性 | 含义 | 属性值 |
|---|---|---|
| width | 单元格的宽度 | 数字 |
| height | 单元格的高度 | 数字 |
| bgcolor | 单元格的背景色 | 颜色值 |
| align | 单元格的内容水平对齐属性 | 可选值center,left,right |
| valign | 单元格的内容垂直对齐属性 | 可选值center,top,bottom |
| colspan | 单元格的跨行属性 | 数字 |
| rowspan | 单元格的跨列属性 | 数字 |
当表格属性与行列属性冲突时，以行列属性为准（近者优先）
| 区别 | 表格 | 单元格 |
|---|---|---|
| align属性控制位置 | 浏览器的显示位置 | 文字在单元格中的对齐方式 |
| align属性是否影响文字对齐方式 | 否 | 是 |
html5表单
1.表单的常用属性
action：表单发送的服务器地址
method：表单提交数据的方法，包括get和post
enctype：表单以post提交时，发送的编码方式，包括：application/x-www-form-urlencode 默认值
multipart/form-data 不对字符编码，用于文件上传
text/plain 将空格转换为“+”，用于发送电子邮件
2.post和get方法的区别
| 区别 | post | get |
|---|---|---|
| 安全性 | 安全 | 不安全 |
| 数据传递形式 | 不显示在地址栏 | 显示在地址栏 |
| 数据大小限制 | 不限制 | 限制 |
3.表单的常用标签
输入框<input type="" name=""> 下拉框<select><option></option></select>文本域<textarea></textarea>按钮<button></button>表单分组<fieldset></fieldset>
4.input常用属性
type属性，name属性，value属性，placeholder属性，tabindex属性，checked属性，disabled属性（该属性的数据不会传到表单中），hidden属性
5.input的type属性分类
text：文本输入框
password：密码输入框
radio：单选按钮
checkbox：复选按钮
file：文件上传按钮
submit：表单提交按钮
reset：重置按钮
image：图形提交按钮
6.select标签的属性
multipe=“mulpite” select控件为多选
size=“1” 表示下拉列表滚动条
7.html5新增元素
1.可输入下拉框<input type="text" name="" list="list"><datalist id="list"><option></option></datalist>2. input新增输入类型<input type="color" name=""> 拾色器<input type="date" name=""> 日期选择<input type="email" name=""> 电子邮件<input type="number" name=""> 数字输入<input type="range" name=""> 滑块输入<input type="search" name=""> 搜索框
css3
css使用方法
1.应用css的三种方式
1.行内样式表<a style="color:red;"></a>2.内部样式表<style>div{color:red;}</style>3.外部样式表<link ref="stylesheet" type="text/css" href="css/style.css"/>
2.css选择器
通用选择器：*{}标签选择器：div{}类选择器：.class{}id选择器：#id{}后代选择器：div .class{}子代选择器：div > ul{}交集选择器：.list#id{}并集选择器：.list,#id{}伪类选择器：a:hover{}
3.常见的伪类状态
link：未访问状态
visited：已访问状态
hover：鼠标悬浮在元素上时
active：鼠标点下没松开
focus：获得焦点时
!important代表不可更改的样式属性
css常用属性
1.文本属性
div{font-family:'Microsoft Yahei'; /*字体*/font-style:normal/italic;/*字体样式*/font-weight:bold/lighter/100~900;/*字体粗细*/font-size:10px/10%; /*字体大小*/color:颜色名如red/颜色值如#FFFFFF /*字体颜色*/opacity:0~1;/*字体透明度0全透明，1不透明*/line-height:10px;/*文本高度*/text-align:left/center/right; /*文本对齐方式*/letter-spacing:10px;/*文本字与字之间的间距*/text-decoration:underline/line-through/overline/none;/*文本修饰属性*/overflow:auto/scroll/hidden;/*文本超出范围显示方式，自动显示滚动条/始终显示滚动条/超出文本隐藏*/text-overflow:clip/ellipsis;/*多余文字显示方式，裁剪/使用...代替*/white-space:normal/nowrap/pre;/*元素内空白符，忽略/行末不断行/保留*/text-shadow:5px 6px 6px blue;/*文本阴影 水平/垂直/模糊距离/颜色*/text-indent:10px;/*首行缩进*/-webkit-text-stroke:2px yellow;/*文字描边*/font:italic bold 75%/1.8 'Microsoft Yahei';(font:font-style font-weight font-size/line-height font-family)}
2.背景属性
div{background-color:red;/*背景颜色*/background-image:url(../image/share.jpg);/*背景图像*/background-repeat:no-repeat/repeat/repeat-x/repeat-y;/*背景图是否平铺，不平埔/平铺/水平平铺/垂直平铺*/background-size:200px/contain/cover;/*背景图大小，指定宽度和高度/等比缩放（不会完全覆盖）/等比缩放（完全覆盖）*/background-position:left/right/top/bottom/center/50px -50px;/*背景图的起始位置*/background-origin:border-box/padding-box/content-box;/*背景图定位方式 边框外缘/内缘/文字内容区*/background-clip:border-box/padding-box/content-box;/*裁切背景和背景色显示区域*/background-attachment:scroll/fixed;/*背景图是否固定*/background:red url(../image/share.jpg) no-repeat fixed 50px -50px;/*背景简写，color image repeat attachment position */}
3.超链接四种状态
a:link 未访问
a:visited 已访问
a:hover 鼠标停留
a:active 正在被点击
去掉超链接下划线a{text-decoration:none;}
css3的过渡和变换
1.过渡 transition
div{transition:property duration timing-function delay; /*过渡的属性 过渡使用时间 过渡运行速度 过渡前时间*/}transition-timing-function 是过渡效果的运行速度 分为：ease(逐渐变慢，默认)/linear(匀速)/ease-in(加速)/ease-out(减速)/ease-in-out(加速后减速)
2.常见的变换属性值有
transform：定义元素向2D或3D的变换
transform-origin：改变转换元素的位置
css3的动画属性和多列属性
1.动画属性animation
2.多列属性columns
css盒模型与浮动定位
1.盒模型
盒模型结构从内到外依次是 content、padding、border、margin
margin：外边距
border：边框
padding：内边距
margin:0 auto；/*水平居中*/border-style:上 右 下 左；/*常用属性：none无边框，hidden无边框，dotted点状边框，dashed虚线边框，solid实线边框，double双线边框*/border-width:上 右 下 左；/*常用属性：thin细边框，medium 中等边框默认，thick粗边框，10px自定义边框*/border-color:上 右 下 左; /*设置边框颜色值*/padding:上 右 下 左; /*设置内边距值px*/
盒模型相关属性有
overflow:visible/auto/scroll/hidden; /*内容溢出控制*/outline:10px;/*外围线*/box-shadow:x轴阴影距离 y轴阴影距离 阴影模糊半径 阴影扩展半径 阴影颜色 内外阴影; /*盒子阴影*/border-radius:有8个参数;/*边框圆角*/ border-image:路径 切片宽度/边框宽度 重复方式(stretch拉伸,round铺满,repeat重复);/*图片边框4个参数*/
2.浮动
float:left/right/none;/*使元素浮动 向左/右/不浮动*/
3.定位
position:relative/absolute/fixed/static;/*相对/绝对/固定/没有 定位*/
4.元素层叠顺序
z-index:10px;/*只有在使用地位的情况下可用，>0是在父级元素的上方*/
移动开发css样式要求
1.viewport 视口
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"/>width=device-width /*视口宽度等于屏幕宽度*/initial-scale=1.0 /*页面初始缩放比例*/maximum-scale=1 /*不允许放大窗口*/minimum-scale=1 /*不允许缩小窗口*/user-scalable=no /*禁止缩放*/
js
javascript基础
1.页面使用javascript的三种方式
1.html标签中内嵌<button onclick="javascript:alert(1);">查看</button>2.html页面中直接使用<script>function showMsg(){alert('1')}</script>3.引用javascript文件<script src="js/act.js"></script>
2.javascript变量的命名规范
不能以数字开头，区分大小写，小驼峰命名法 如：helloJavaScript，匈牙利命名法 hello_java_script
3.javascript变量的数据类型
1.undefined 未定义2.null 空引用3.boolean 布尔类型4.number 数值类型5.string 字符串类型6.object 对象类型
4.javascript中的变量函数
1.Number() /*变量转换为数值类型*/Number("111") /*输出111*/Number("") /*输出0*/Number("111a") /*输出NaN*/Number(true) /*输出1*/Number(false) /*输出0*/Number(null) /*输出0*/Number(undefined) /*输出NaN*/
2.isNaN() /*判断变量是否为 非数字 */isNaN("111") /*输出fasle*/isNaN("") /*输出fasle*/isNaN("111q") /*输出true*/isNaN(false) /*输出fasle*/
3.parseInt() /*变量转换为整型,只能转换string类型，其余转换输出NaN*/parseInt("") /*输出NaN*/parseInt("111.11") /*输出111*/parseInt("111.1a") /*输出111*/parseInt("a111.11") /*输出NaN*/
4.parseFloat() /*变量转换为浮点型,只能转换string类型，其余转换输出NaN*/parseFloat('123.11a') /*输出123.11*/parseFloat('a123.11a') /*输出NaN*/
5.typeof() /*检测变量类型*/函数写法 typeof('1111')指令写法 typeof '1111'
6.document.write() /*文档中打印输出*/
7.alert() /*浏览器弹窗输出*/
8.prompt('提示信息','默认内容') /*浏览器弹窗输入*/
9.confirm() /*浏览器弹窗确认*/
10.console.log() /*浏览器控制台输出*/
5.javascript中的注释
//单行注释/*多行注释*//***文档注释*/
6.javascript中的运算符
1.算术运算符
+、-、*、/、%、++、--
2.赋值运算符
=、+=、-=、*=、/=、%=
3.关系运算符
==、===、!=、>、<、>=、<=
4.逻辑运算符
&&、||、!
5.多目运算
表达式1?表达式2:表达式3 /*当表达式1为true执行表达式2，为false执行表达式3*/
7.javascript中的流程控制语句
1.if结构 if(){}
if-else 结构 if(){}else{}
2.多重if 结构if(){}else if(){}else{}
3.嵌套if 结构
if(){if(){}
}else{}
4.switch-case 结构
switch(表达式){case 常量表达式1:语句1;break;default:语句n;break;}
5.while 循环
while(true){}
6.do-while 循环
do{}while(true)
7.for 循环
for(var i=0;i<5;i++){}
8.for-in 循环
var arr=[1,2,3,4]
for(item in arr){}
9.常用的流程控制语句
break:跳出本层循环
continue:跳过本次循环，继续下一个循环
return:终止当前函数执行
javascript函数
1.匿名函数的声明
1. 事件调用匿名函数window.onload-function(){}2. 匿名函数表达式var func=function(){}func() /*只能在函数表达式声明后调用*/3.自执行函数!function(num){}(1)(function(num){})(1) /*官方推荐*/(function(num){})(1)4.在函数中调用自身使用 arguments.callee()
BOM
1.window对象的属性
screen 屏幕history 历史纪录location 当前网页urlnavigator 浏览器的信息document 文档信息frames 命名框架信息
2.window 常用方法
alert() 弹窗提示window.open() 打开窗口window.close() 关闭窗口window.confirm() 确认弹窗window.prompt() 输入弹窗setTimeout() 设置延时n秒后，执行一次clearTimeout() 清除定时器setInterval() 设置循环每n秒执行一次clearInterval() 清除定时器location.href 当前完整路径location.protocol 协议名 http://或https:/等location.host 主机名+端口号location.hostname 主机名location.port 端口号location.pathname 文件路径location.search ?开头的参数列表location.hash #开头的锚点location.reload() 刷新location.replace() 新文档替换旧文档,不可回退location.assign() 新文档替换旧文档,可回退history.length 浏览历史个数history.back() 后退history.forward() 前进history.go() 前进:history.go(1),后退:history.go(-1) navigator.userAgent 代理信息window.onload 页面文档加载完成后执行window.focus() 获取焦点window.blur() 移除焦点screen.availHeight()屏幕的高度（除windows任务栏之外）screen.availWidth() 屏幕的宽度（除windows任务栏之外）
DOM
1.操作元素节点
getElementById() 获取id元素节点getElementByName() 获取name属性元素节点getElementByTagName() 获取标签名元素节点getElementByClassName() 获取css元素节点querySelector() 匹配css元素节点querySelectorAll() 匹配所有css元素节点
2.修改元素样式
classNamestylestyle.cssText
3.获取层次节点
childNodes/children 子节点firstChild/firstElementChildlastChild/lastElementChildparentNode 父节点previousSibling/previousElementSibling 兄弟节点nextSibling/nextElementSibling 兄弟节点attributes 当前节点
4.创建新节点
createElement() 创建节点insterBefore() 在之前插入节点cloneNode() 复制节点appendChild() 创建节点removeChild() 删除节点replaceChild() 替换节点
5.表格对象
rows insterRow()deleteRow()cellsrowIndexinsterCell()deleteCell()
6.document对象集合
document.alldocument.formsdocument.linksdocument.imagesdocument.anchorsdocument.bodydocument.cookiedocument.domain 当前文档的服务器域名document.referrer 当前文档的URLdocument.URL 当前文档的URL
7.element(元素)对象 element=document.getElementById(‘id’)
element.attributeselement.childNodeselement.classNameelement.clientWidth 可见宽度element.offsetWidth 本身宽度element.scrollWidth 整体宽度element.contentEditableelement.direlement.firstChildelement.lastChildelement.innerHTMLelement.textContentelement.styleelement.nextSiblingelement.previousSiblingelement.appendChild()element.insertBefore()element.cloneNode()element.getAttribute()element.setAttribute()element.removeAttribute()element.getAttributeNode()element.setAttributeNode()element.removeAttributeNode()element.removeChild()element.replaceChild()
javascript事件
1.鼠标事件onclick 单击ondbclick 双击onmouseover 鼠标移入onmouseout 鼠标移出onmousemove 鼠标被移动onmousedown 鼠标按下,属性clientX,clientY,screenX,screenY X坐标和Y坐标onmouseup 鼠标松开
2.键盘事件onkeydown 键盘按下onkeypress 键盘按下并松开瞬间onkeyup 键盘松开
3.html事件onload 加载完成onfocus 获取焦点onblur 失去焦点onselect 文本选中onchange 内容被修改onsubmit 表单提交onscroll 文档被滚动onresize 窗口被改变
4.绑定事件
btn.addEventListener('click',function(){},false/true) 添加事件绑定
btn.removeEventListener('click',function(){},false/true)取消事件绑定
数组和对象
1.数组对象的方法
delete arr[n] /*删除数组的第n个值*/arr.push() /*在数组后添加一个值*/arr.unshift() /*在数组前第0位添加一个值*/arr.pop() /*删除数组最后一位*/arr.shift() /*删除数组第0位*/arr.join(',') /*用,分隔符连接为字符串*/arr.concat(arr1) /*连接两个数组为一个数组*/arr.reverse() /*数组反转*/arr.slice(1,2) /*截取数组指定位置的元素，返回新数组(不改变原数组)*/arr.sort(function(a,b){return a-b; /*升序排序*/return b-a; /*降序排序*/})arr.splice(2,1) /*删除指定位置元素，返回删除完的数组(会改变原数组)*/arr.indexOf('name') /*匹配name的值，匹配返回大于-1，否则为-1*/arr.forEach(function(item,index){}) /*遍历数组，不可返回*/arr.map(function(item,index){}) /*数组映射，可以返回新数组*/2.Number的方法
num1.toString() /*数字转换为字符串*/num1.toFixed(n) /*数字转换为字符串，保留n位小数*/num1.valueOf() /*对象的数字值*/
3.String的方法
str.length /*字符串的长度*/str.charAt(n) /*截取数组的第n个字符*/str.indexOf() /*查询子串*/str.substring(1,n) /*从1截取到第n个字符，左闭右开，包含左不包含右*/str.replace('a','') /*只替换字符串的第一个a位空*/str.split(',') /*将字符串转换位数组*/
4.Date的方法
var date=new Date()date.getFullYear() /*年份 4位*/date.getMonth() /*月份0~11*/date.getDate() /*日期1~31*/date.getDay() /*一周0~6*/date.getHours() /*小时0~23*/date.getMinutes() /*分钟0~59*/date.getSeconds() /*秒数0~59*/date.getTime() /*毫秒数乘以1000是秒数*/date.getTimezoneOffset()/*标准时间和本地时间的差*/
5.Math的方法
Math.ceil(x) /*向上取整*/Math.floor(x) /*向下取整*/Math.min(x,y) /*最小值*/Math.max(x,y) /*最大值*/Math.pow(x,y) /*x的y次幂*/Math.random() /*返回0~1的随机数*/Math.round(x) /*四舍五入为整数*/Math.sqrt(x) /*x的平方根*/
6.对象的声明和调用
声明var obj={key:val,func:function(){}}调用obj.key/obj['key']obj.func()/obj['func']()删除delete obj.key
7.闭包的概念
是指能够读取其他函数内部变量的函数。
function func(){num=10;
}
func();
console.log(num) //10
8.继承
call(this,参数1,...,参数n)apply(this,参数1,...,参数n)
9.原型和原型链
prototype 函数的原型__proto__ 对象的原型
10.正则表达式
常用方法test() // /^[a-zA-Z0-9]{4,10}$/.test(str) 验证4~10位数字或字母exec()三种匹配模式//g 全局匹配//i 忽略大小写//m 多行匹配表达式元字符. 匹配除换行符之外的单个字符\w 匹配字符：[A-Za-z0-9]\W 匹配非字符：[^A-Za-z0-9]\d 匹配数字：[0-9]\D 匹配非数字：[^0-9]\s 匹配空白字符\S 匹配非空白字符\n 匹配换行符特殊字符^ 匹配开始$ 匹配结束| 匹配字符中任意一个：x|y 匹配x或y() 分组匹配[] 匹配方括号内的任意一个字符[^] 匹配不在方括号内的字符{x} 匹配前一项x次{x,} 匹配前一项x到n次{x,y} 匹配前一项x到y次 但不超过y次* 匹配前一项0或多次：{0,}+ 匹配前一项1或多次：{1,}? 匹配前一项0或1次：{0,1}
Cookie
1.特点
大小限制：数量最多300个，每个不超过4kb，每个网站数量不超过20个
不可跨域：不允许跨域使用
时效性： 有过期时间
不安全性：可被篡改
2.用途
纪录用户信息
保存登录信息
3.使用
1.添加cookie document.cookie='name=1';document.write(document.cookie)2.设置cookie过期时间function setCookie(key,value,time){var endTime=new Date();endTime.setTime(endTime.getTime()+time*60*1000);var gmTime=endTime.toGMTString();var value=escape(value);document.cookie=key+"="+value+";expires="+gmTime;}setCookie('name','Tom',1);document.write(document.cookie);3.获取cookiefunction getCookie(key) {var reg=new RegExp(key+"=([^;]*)");var arr=document.cookie.match(reg);if (!arr) return null;return unescape(arr[1]);}var value=getCookie('name');alert(value);4.删除cookiefunction delCookie(key) {var endTime=new Date();endTime.setTime(endTime.getTime()-1);var gmTime=endTime.toGMTString();document.cookie=key+"=null;expires="+gmTime;}delCookie('name');document.write(document.cookie);
js数据类型转换注意事项
1.null == undefined 返回true
2."3"==3 返回true
3.false==0 返回true true==1 返回true
4.NaN==NaN 返回false
js的模块
示例 创建Truck模块(function(window){'use strict';var App=window.App || {};function Truck(){this.data={};}Truck.prototype.add=function(key,val){this.data[key]=val;}App.Truck=Truck;window.App=App;})(window)var truck=new App.Truck();truck.add('222','000');console.log(truck.data);
版权声明：本文标题：HTML5,CSS3,js 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1687845911h148520.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论