使用webStorm中html5的小入门基础
结构：（用过java eclipse的可以选择使用eclipse的快捷键）
Title2种元素类型
块元素: 前后换行,自占一行
可以嵌套行内元素,普通文本,块元素
行内元素:宽度由自身撑起
可以嵌套行内元素,普通文本
1. a 超链接标签(所有关键字都可只打一个单词再按Tab键自动补充，比如打a再按tab会自动补齐超链接标签）
href 连接路径
绝对路径:https://www.baidu.com
相对路径:相对项目
title 当鼠标悬停再内容上时显示的提示字
target 打开方式
_self 本页面打开 默认
_blank 新页面打开
特点:
未访问:蓝色
已访问:紫色
自带下划线
行内元素
a 锚点|锚链接
1)先在页面的某个位置定点 标签上id值
2)a标签的href值=#+定点的id值 点击a标签跳转到定点所在位置
h* h1~h6 标题标签
根据权重的不同,字体大小会以此减小
特点:字体大小 加粗
align 块元素中内容的对其方式
left
right
center
eg.aaa
p 段落标签
正常显示
块元素
div 块：
块元素
正常显示
img 图像标签
src 图片地址
相对|绝对
alt 当图片无法正常显示时的提示字
title 当鼠标悬停再内容上时显示的提示字
width 宽度 px像素值
height 高度
border 变框宽度 默认黑色
无序列表
ul 无序
type 修改列表项标记
desc 实心圆点
circle 空心圆圈
square 实心方块
li 列表项
-
有序列表
ol 有序
type 修改列表项标记
a A i I 1
li 列表项
-
ul,ol直接子元素只能是li标签
li内可以嵌套任意标签
table 定义表格
table+Tab
tr 行
td 表格体单元格
th 表格头单元格 加粗居中(tr内嵌套td和th,td与tr主要区别就是字体加粗，td一般用于小标题)
属性:
border 变框
bordercolor 变框颜色
align 对其方式
width 宽度
height 高度
cellspadding 单元格内边距
cellspacing 单元格外边距
bgcolor 背景颜色
style="border-collapse: collapse" 双线变单线
rowspan 跨行
colspan 跨列
样式：
1. font-family: "华文行楷"; 字体文本样式
2. font-size 字体大小
3. font-style 字体样式 italic斜体 normal正常
4.font-weight 文本加粗
100~900
bold 加粗
bolder 加粗
normal 正常
lighter 正常
5.list-style-position
inside 列表标记在内部
out
盒子模型
盒子模型: 内容+padding+border+margin（从内由外依次）
用户所看到元素的大小: 内容+paddiong+border
padding: 内边距
如果内容设置了背景样式,会延伸到内边距上
padding:50px; 上下左右都存在相同的50px内边距
padding 10px 50px; 上下10px 左右50px
padding:10px 50px 100px; 上 右 下 左与对面相同
padding:10px 50px 100px 200px; 上 右 下 左
margin: 外边距
line-height 行高
text-align: 水平方向的对其方式 块和行内块能够使用
vertical-align 垂直方向的对其方式 行内|行内块有效
对象类型不参与类型转换
自动|隐式转换
+ -
强制|显示转换
所有类型的数据都可以被转换成为以下三种类型
String(参数);
返回值:'参数'
Number(参数)
返回值:
'' 0------> eg. console.log(Number(' '));
' ' 0
'纯数字' 纯数字
'非纯数字' NaN
false 0
true 1
null 0
undefined NaN
Boolean(参数)
返回值:
0 false
1 true
'' false
' ' true
'abc' true
null false
undefined false
浮动
float : left|right
让元素按照指定的方向移动
停止:当遇到周围其他元素或浏览器的边界的时候停止
函数的定义
1.函数声明
function 函数名([参数列表]){
...
}
调用:
1.函数名(实参..);
2.函数声明前后添加()转为函数表达式,再最后添加()调用
3.函数声明前后添加!~+-转为函数表达式,再最后添加()直接调用执行
2.函数表达式
var 变量=function 函数名(参数){
....
}
调用:
1.变量(参数);
2.函数表达式的后面添加()直接执行
注意:再外部不可以通过函数名调用,只能在这个函数的内容通过函数名调用,实现递归
函数的作用域提升
函数声明才有函数的作用域提升的作用,函数表达式的不 存在提升情况的,会提升到当前函数作用域的最上面
js函数中函数可以嵌套
js中函数就是作用域
eg.
function fn(){
console.log('提升');
fun1();
//函数可以嵌套
function fun1(){
console.log("我是fun1");
function fun2(){}
}
return fun1;
}
js中的this上下文对象,在运行期间动态绑定对象
this决策树
1.this所在的函数是否是通过new使用,指代new的对象
2.是否是通过对象调用的函数,函数中的this指带调用函数的对象
3.this默认指代window对象
js的对象满足json格式的对象
json一种与任何语言都无关的一种特殊的轻量级语言格式
数据都满足键值对形式 key都是"“定义的字符串,如果值也为字符串也是”"定义的
key:value
key默认是字符串,'',""
key可以直接定义标准格式的名字,可以不加"",非标准格式必须加""
key可以使用关键字 var
value可以是任意类型的
使用对象中的属性:
1) 对象.属性名
2) 对象[‘属性’]
eg. var obj={
‘name’:“阿黄”,
age:4,
father:{name:‘老王’,age:12},
null:[1,2,3],
fn:function(){
console.log(“ha”)
}
};
序列化对象，将对象转为字符串
JSON.stringify(object);
反序列化，将一个Json字符串转换为对象
JSON.parse(jsonStr);
js 事件
通过做某些事情,出发了一些函数的执行,函数js已经定义好的,直接使用
鼠标事件
click dblclick mousedown mouseup mouseover、 mouseout
键盘事件
onkeyup、onkeydown
焦点事件
onfocus 获取焦点
onblur 失去焦点
文档事件
onload文件加载后执行的事件
表单事件
onchange 触发条件： 1)失去焦点 2)内容有改变
eg.