使用webStorm中html5的小入门基础

结构：（用过java eclipse的可以选择使用eclipse的快捷键）

2种元素类型
块元素: 前后换行,自占一行
可以嵌套行内元素,普通文本,块元素
行内元素:宽度由自身撑起
可以嵌套行内元素,普通文本

    1. a 超链接标签(所有关键字都可只打一个单词再按Tab键自动补充，比如打a再按tab会自动补齐超链接标签）  <a href="  "alt="  "></a>
        href 连接路径
                绝对路径:https://www.baidu.com
                相对路径:相对项目
        title 当鼠标悬停再内容上时显示的提示字
        target 打开方式
            _self  本页面打开  默认
            _blank 新页面打开
        特点:
            未访问:蓝色
            已访问:紫色
            自带下划线
            行内元素

       a 锚点|锚链接
            1)先在页面的某个位置定点  标签上id值
            2)a标签的href值=#+定点的id值   点击a标签跳转到定点所在位置

   h*   h1~h6 标题标签<h1>  </h1>
    根据权重的不同,字体大小会以此减小
    特点:字体大小   加粗

    align 块元素中内容的对其方式
        left
        right
        center
        eg.<h2 align="left">aaa  </h2>

    p 段落标签
        正常显示
        块元素

    div 块：<div> </div>
        块元素
        正常显示

    img 图像标签
        src 图片地址
            相对|绝对

        alt 当图片无法正常显示时的提示字
        title 当鼠标悬停再内容上时显示的提示字

        width  宽度   px像素值
        height 高度
        border 变框宽度  默认黑色

无序列表
ul 无序

type 修改列表项标记
desc 实心圆点
circle 空心圆圈
square 实心方块

        li 列表项
        <ul>
       			 <li>
       			 </li>
        </ul>

    有序列表
        ol 有序<ol>  </ol>
            type 修改列表项标记
                a A i I 1
        li 列表项
		<ol>
       			 <li>
       			 </li>
        </ol>


    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.

<script>
     <div id="div" style="background: palegreen">点击事件</div>
     var div=document.getElementById('div');
     div.onclick=function(){
                	console.log('点击');
     }
    </script>