HTML个人笔记

1.Html常用标签

  1. 常用块级标签

​ h : 标题
​ p : 段落
​ div : 容器
​ ul>li : 无序列表
​ form : 表单

2. 常用行内标签

a : 超链接
span : 小容器
img : 插入图 (宽高有效)
input : 输入框,text/password/radio/checkbox/file/reset/button (宽高有效)
label : 标签
em : 斜体(语义)
i : 斜体
b : 粗体
strong : 粗体(语义)

  1. 常见标签属性

    1.一般标签属性

    ​ id : id标识
    ​ style : 行内样式
    ​ href : a超链接地址,link外链css路径
    ​ src : 图片路径,script外链js路径
    ​ alt : 图片替换文字

    1. 表单控件属性
      name : 控件名字
      type : 控件类型
      value : 控件值
      outline : 轮廓
  2. Css常用样式

    1. 实体化样式

      width : 宽
      height : 高
      background : 背景图片,背景位置,背景重复,背景颜色
      border : 边框宽度,边框样式,边框颜色

    2. 间距和位置样式

      padding : 内边距
      margin : 外边距
      float : 浮动
      position : 定位,relative/absolute/fixed/static
      left/right/top/bottom : 方向属性
      z-index : z轴层级

    3. 文字常用属性:

      color : 颜色
      font-size : 字体大小
      font-family : 字体
      font-weight : 字体加粗,normal/bold
      font-style : 文字是否倾斜,normal/italic
      font : 是否加粗 字号/行高 字体
      text-decoration : 字体修饰,none/underline
      text-indent : 文字首行缩进

    4. 居中样式: *

      行内/行内块/文本 水平垂直居中: (父元素添加)

      line-height : 行高等于高 . 垂直居中
      text-align : center 内容对齐方式 . 水平居中

      块级标签水平居中: (自己添加)

      margin : 0 auto ; 块级自身水平居中

      所有标签水平垂直居中: (子绝父相)

      position定位 : 所有标签垂直水平居中

    5. 其他样式:
      list-style : 无序列表项目符号,none

      overflow : 溢出隐藏

      ​ 特性:检测自己大小,儿子大小,检测代码是否有问题.
      ​ 可以清除浮动产生的影响
      ​ 可以解决外边距塌陷问题

      display : 模式转换,none/block/inline/inline-block

      float,绝对定位,固定定位,display:inline-block, 都可以模式转换为行内块.

      border-radius : 圆角边框
      opacity : 透明度

  3. Js

    常用方法
    ​ document.getElementById(‘id’); 根据id获取元素对象

    常用事件

    ​ onload : 页面加载完成

    ​ onclick : 点击事件

    ​ onmouseover : 鼠标悬浮事件

    ​ onmouseout : 鼠标离开事件

    ​ onfocus : 获取焦点

    ​ onBlur : 失去焦点

    ​ onkeyup : 键盘抬起

    ​ onsubmit : 表单提交事件

    (元素对象)常用属性

    js元素对象属性,与html元素属性基本一致. 只罗列特殊的.

    1. id : id
    2. className : 元素类样式
    3. innerHTML : 内部文本/内部标签
    4. style : 行内样式
      style.fontSize : 文字大小.
      ….省略,带-的改为驼峰即可.

    数组常用属性/方法

    1. length : 长度
    2. xxx[index] : 根据索引获取xxx的某一项
    3. join(‘-‘) : 以某个字符拼接数组,返回string
    4. push(),pop() : 末尾添加和删除成员
    5. reverse() : 反转数组
    6. indexOf() : 获取成员第一次出现的索引
    7. splice() : 增加或删除成员

    字符串常用方法

    1. parseInt() : 将数字字符串转换为整数
    2. parseFloat() : 将数字字符串转换为小数
    3. split(‘-‘) : 以某个字符分割字符串,返回数组
    4. indexOf() : 获取字符/字符串出现的索引
    5. substring() : 截取字符串
  4. JQuery

    1.$()函数的用法

    1. $(匿名函数) : 页面加载完成事件
    2. $(‘css选择器’) : 获取元素对象
    3. $(‘标签代码’) : 创建元素对象

    4. 选择器

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

    1. 选择器过滤方法
    $('div').has('p'); // 选择包含p元素的div元素
    $('div').not('.myClass'); //选择class不等于myClassdiv元素
    $('div').eq(5); //选择第6个div元素

    1. 选择器转移方法 (层级方法)
    $('#box').prev(); //选择id是box的元素前面紧挨的同辈元素
    $('#box').prevAll(); //选择id是box的元素之前所有的同辈元素
    $('#box').next(); //选择id是box的元素后面紧挨的同辈元素
    $('#box').nextAll(); //选择id是box的元素后面所有的同辈元素
    $('#box').parent(); //选择id是box的元素的父元素
    $('#box').children(); //选择id是box的元素的所有子元素
    $('#box').siblings(); //选择id是box的元素的同级元素
    $('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素

    1. 常用方法
    css() : 获取/设置样式 (行内样式操作)
    
    addClass()/removeClass()/toggleClass() : 类样式操作
    
    index() : 获取元素索引值(自家排行老几)
    
    prop() : 获取/设置属性
    
    html() : 获取/设置内容
    
    animate() : 动画
    
    delegate() : 委托

    1. 常用动画
    fadeOut() 淡出
    fadeToggle() 切换淡入淡出
    hide() 隐藏元素
    show() 显示元素
    toggle() 切换元素的可见状态
    slideDown() 向下展开
    slideUp() 向上卷起
    slideToggle() 依次展开或卷起某个元素

    1. 常用事件

    给js的事件去掉on即可.

    blur() 元素失去焦点
    focus() 元素获得焦点
    click() 鼠标单击     
    mouseover() 鼠标进入 
    mouseout() 鼠标离开 
    mouseenter() 鼠标进入 
    mouseleave() 鼠标离开 
    hover() 同时为mouseentermouseleave事件指定处理函数
    ready() DOM加载完成
    submit() 用户递交表单

    1. 节点操作方法

    2. appendTo : A appendTo B , A追加到B . A追加到B的子节点末尾

      1. prependTo : A prependTo B , A追加到B之前 . A追加到B的子节点首位
      2. insertAfter : A insertAfter B, A插入到B的同级之后
    3. insertBefore : A insertBefore B, A插入到B的同级之前

    4. 异步请求

    5. ajax

      $.ajax({
      
      url:'js/data.json',  // 请求地址,接口 --- url : http://www.baidu.com?     username=xxx&password=xxx
      type:'get',          // 请求类型
      dataType:'json',    //  与服务器传输的数据类型 , json数据类型
      data:{key:value}   // 请求参数
      
      })
      .done(function(dat){   // 完成,请求成功的回调函数 . data: 服务器返回的数据
      
      alert(dat.name);
      $('.user_login_btn').hide();
      $('.user_info em').html( dat.name ).parent().show();
      
      })
      .fail(function(error){   // 失败, 请求失败的回调函数
      
      console.log(error);
      alert('服务器超时,请重试!');
      
      })

    6. jsonp

      将dataType : 改为jsonp即可

你可能感兴趣的:(HTML笔记)