• HTML
  

• <b> 加粗
• <i> 斜体
• <u>下划线
• <p> 段落标签
• <h1>到<h6> 几级标题 越来越小
• 有序标签:
  <ol>
  <li>
  </li>
  </ol>
• 无序标签:
  <ul>
  <li>
  </li>
  </ul>
• 超级链 接标签:<a>
• 属性:
  
  
  
  
  
  
  
  • href : 连接的路径
  • target : 打开的方式
    
    • _self : 在自身页面打开
    • _blank : 新打开一个窗口
      
• 列表标签清除小圆点: ul style="list-style:none;"
• HTML的表单标签: <form>.
  
  • <form>的常用属性
    
    • action : 提交的路径 不写默认提交到当前页面
    • method : 请求的方式 GET 和 POST  不写默认get
      
      • get和post方式的区别:
        
        • get : 数据会显示到地址栏中 get方式提交有大小限制
        • post : 数据不会显示到地址栏中 post方式提交是没有大小限制(优先使用)
          
  • 表单元素:
  • <input type="text"> : 文本框
    
    • 常用属性:
      
      • name  : 表单元素的名称 必须有name属性 然后后台才可以接收数据
      • value : 文本框的默认值
      • size : 文本框的长度
      • maxlength : 文本框最大长度
      • readonly : 只读文本框 无法修改
        
  • <input type="password" : 密码框
    
    • 常用属性和文本框大部分相似
      
  • <input type="placeholder" : 提示                 
  • <input type="radio" :单选按钮
    
    • name  : 表单元素的名称 必须有name属性 然后后台才可以接收数据
    • value : 单选按钮的默认值
    • checked : 单选按钮默认被选中                                                                                                           
      
  • <input type="checkbox" : 复选按钮
    
    • name  : 表单元素的名称 必须有name属性 然后后台才可以接收数据
    • value : 单选按钮的默认值
    • checked : 单选按钮默认被选中     
      
  • <input type="button" : 普通按钮 没有任何功能的按钮
  • <input type="submit" : 提供按钮
  • <input type="reset" : 重置按钮
  • <input type="file"> : 文件上传的表单项
  • <input type="hidden"> : 隐藏字段
  • <input type="image"> : 图片按钮
  • 
    
  • <select> : 下拉列表
    
    • <option> : 下拉区域选项
    • selected : 默认被选中
      
  • <textarea> : 文本域
    
    • cols : 文本占的列数
    • rows : 文本占的行数
      
  • HTML5的扩展(部分浏览器支持)
    
    • <input type="data"> 出现日期选择
    • <input type="number"> 必须是数字
    • <input type="email">         必须是邮箱格式
      
• <td>:
  
  • rowspan:  合并行
  • colspan : 合并列
    
• HTML的框架标签
  

特殊字符的标签:

• 空格  :
• <  :  <
• >  :  >
  

常用标签

• <div>
• <span>
• <ul>
• <a>
• <i> : icon 图片或者倾斜
• html的块标签
• <div> </div> : 块级元素,默认一对div独占一行 可以修改高度和宽度
• <span></span> 3: 行内元素,默认在同一行 不可以修改高度和宽度
  

table和div布局的区别:

• div更加灵活 并且解析加载速度快
• css
  

构成 : 选择器 + 声明
CSS的引入方式:

• 3种样式
  

• 引入外部css文件: 多个HTML文件中使用了相同的样式
• 页面内样式: 同一个HTML文件中多个标签共用的这个样式
• 行内样式: 只有某个标签自己使用
  

CSS的选择器:

• 元素选择器
• ID选择器
• 类选择器
  

选择器的优先级:
ID选择器 > 类选择器 > 标签选择器

• div的浮动:
  

使用float属性可以完成div的浮动
clear : 清除浮动
为什么使用浮动::

• 为了让某些标签(块级标签 li , div)横着显示
  

如何使用浮动:

• float  :  left  向左浮动
  

如何清除浮动:

• 在浮动的元素后面添加<div style="clear:both"> 不建议使用
• 给浮动的元素的父元素添加一个样式 clearfix
  

清除浮动样式
                        .clearfix:before,
                        .clearfix:after {
                                content: "";
                                display: table;
                        }
                        .clearfix:after {
                                clear: both;
                        }
                        .clearfix {
                                *zoom: 1;
                        }
CSS中的继承问题

• 宽度是可以继承的 高度不可以继承
• 注意: 浮动以后的元素不会继承宽度
  

div的居中: margin : 0 auto ;
百分比和px计算: 用calc函数 例如
calc(70% - 2px)   注意减号的两边必须有空格
CSS的其他选择器:

• 属性选择器
• 后代选择器
• 子元素选择器
  

盒模型:
外边距 盒子与盒子距离 margin
内边距 padding
宽度计算方式 padding-left + padding-right + border -left + border-right +content

定位
position
absolute 绝对定位 是相对于body(边框)
relative 相对定位 默认是相对于父标签
子绝父相(子是绝对定位 父是相对定位)
position : fixed   div块会跟着屏幕动(广告)


伪类:
link  visited  hover  active 顺序不能乱 href属性中必须有值 记忆方法: " 驴哈 "

JavaScript  脚本语言
JS的基本语法

• 区分大小写
• 弱变量类型语言
  
  • 所有的变量类型都用var
    
• 结尾分号可有可无
• 括号代表代码块
  

数据类型

• 原始类型
  
  • undefined : 未定义类型
  • boolean : 布尔类型
  • number : 数字类型
  • string : 字符或字符串
  • null : 空
    

• 引用类型
  
  • 对象类型 对象类型默认值是null
    

JS的运算符

• 和Java基本一致
• JS中 有一个 === 全等于 : 类型和值都一致的情况下才为true
  

常见的事件:

• onclick   单击
• ondblclick   双击
• onmouseenter   鼠标悬停
• onmouseleave  鼠标离开
• onload 在HTML文本加载完毕后请求图片资源 图片请求回来后执行onload事件
  

JS的引入方式

• 页面内直接编写JS代码, JS代码需要使用<script></script>
• 将JS的代码编写到一个.js的文件中, 在HTML中引入该代码即可
  

C:/Users/Administrator/AppData/Local/YNote/data/qqEBE2595FAFE14C48C5D01E8533D8810E/c652edc732a74eec8d52eeec5eb873bf/18e372cfbdf942aba1714f2f70c299ce.jpg
JS检验正则表达式只有两个方法

• String对象中的match方法   str.match("表达式")
• 正则对象中的test方法   正则.test("字符串")
  

两个感叹号!!可以把变量转变为boolean类型 为空时false 不为空true







图片轮播
HTML的window对象中:

• setInterval()   每隔多少毫秒执行某个表达式
  
  • setInterval("change()" , 5000)
    
• setTimeout()  每隔多少毫秒执行一次某个表达式
  
  • setInterval("change()" , 5000)
    
• clearInterval()   取消由 setInterval()设置的timeout
• clearTimeout()  取消由 setTimeout()设置的timeout
  

定时广告
CSS显示和隐藏元素的方式

• display         隐藏后占位
  
  • block  显示元素
  • none  隐藏元素
    
• visibility    隐藏后不占位
  
  • visible  显示元素
  • hidden  隐藏元素
    

• HTML
  

• <b> 加粗
• <i> 斜体
• <u>下划线
• <p> 段落标签
• <h1>到<h6> 几级标题 越来越小
• 有序标签:
  <ol>
  <li>
  </li>
  </ol>
• 无序标签:
  <ul>
  <li>
  </li>
  </ul>
• 超级链 接标签:<a>
• 属性:
  
  
  
  
  
  
  
  • href : 连接的路径
  • target : 打开的方式
    
    • _self : 在自身页面打开
    • _blank : 新打开一个窗口
      
• 列表标签清除小圆点: ul style="list-style:none;"
• HTML的表单标签: <form>.
  
  • <form>的常用属性
    
    • action : 提交的路径 不写默认提交到当前页面
    • method : 请求的方式 GET 和 POST  不写默认get
      
      • get和post方式的区别:
        
        • get : 数据会显示到地址栏中 get方式提交有大小限制
        • post : 数据不会显示到地址栏中 post方式提交是没有大小限制(优先使用)
          
  • 表单元素:
  • <input type="text"> : 文本框
    
    • 常用属性:
      
      • name  : 表单元素的名称 必须有name属性 然后后台才可以接收数据
      • value : 文本框的默认值
      • size : 文本框的长度
      • maxlength : 文本框最大长度
      • readonly : 只读文本框 无法修改
        
  • <input type="password" : 密码框
    
    • 常用属性和文本框大部分相似
      
  • <input type="placeholder" : 提示                 
  • <input type="radio" :单选按钮
    
    • name  : 表单元素的名称 必须有name属性 然后后台才可以接收数据
    • value : 单选按钮的默认值
    • checked : 单选按钮默认被选中                                                                                                           
      
  • <input type="checkbox" : 复选按钮
    
    • name  : 表单元素的名称 必须有name属性 然后后台才可以接收数据
    • value : 单选按钮的默认值
    • checked : 单选按钮默认被选中     
      
  • <input type="button" : 普通按钮 没有任何功能的按钮
  • <input type="submit" : 提供按钮
  • <input type="reset" : 重置按钮
  • <input type="file"> : 文件上传的表单项
  • <input type="hidden"> : 隐藏字段
  • <input type="image"> : 图片按钮
  • 
    
  • <select> : 下拉列表
    
    • <option> : 下拉区域选项
    • selected : 默认被选中
      
  • <textarea> : 文本域
    
    • cols : 文本占的列数
    • rows : 文本占的行数
      
  • HTML5的扩展(部分浏览器支持)
    
    • <input type="data"> 出现日期选择
    • <input type="number"> 必须是数字
    • <input type="email">         必须是邮箱格式
      
• <td>:
  
  • rowspan:  合并行
  • colspan : 合并列
    
• HTML的框架标签
  

特殊字符的标签:

• 空格  :
• <  :  <
• >  :  >
  

常用标签

• <div>
• <span>
• <ul>
• <a>
• <i> : icon 图片或者倾斜
• html的块标签
• <div> </div> : 块级元素,默认一对div独占一行 可以修改高度和宽度
• <span></span> 3: 行内元素,默认在同一行 不可以修改高度和宽度
  

table和div布局的区别:

• div更加灵活 并且解析加载速度快
• css
  

构成 : 选择器 + 声明
CSS的引入方式:

• 3种样式
  

• 引入外部css文件: 多个HTML文件中使用了相同的样式
• 页面内样式: 同一个HTML文件中多个标签共用的这个样式
• 行内样式: 只有某个标签自己使用
  

CSS的选择器:

• 元素选择器
• ID选择器
• 类选择器
  

选择器的优先级:
ID选择器 > 类选择器 > 标签选择器

• div的浮动:
  

使用float属性可以完成div的浮动
clear : 清除浮动
为什么使用浮动::

• 为了让某些标签(块级标签 li , div)横着显示
  

如何使用浮动:

• float  :  left  向左浮动
  

如何清除浮动:

• 在浮动的元素后面添加<div style="clear:both"> 不建议使用
• 给浮动的元素的父元素添加一个样式 clearfix
  

清除浮动样式
                        .clearfix:before,
                        .clearfix:after {
                                content: "";
                                display: table;
                        }
                        .clearfix:after {
                                clear: both;
                        }
                        .clearfix {
                                *zoom: 1;
                        }
CSS中的继承问题

• 宽度是可以继承的 高度不可以继承
• 注意: 浮动以后的元素不会继承宽度
  

div的居中: margin : 0 auto ;
百分比和px计算: 用calc函数 例如
calc(70% - 2px)   注意减号的两边必须有空格
CSS的其他选择器:

• 属性选择器
• 后代选择器
• 子元素选择器
  

盒模型:
外边距 盒子与盒子距离 margin
内边距 padding
宽度计算方式 padding-left + padding-right + border -left + border-right +content

定位
position
absolute 绝对定位 是相对于body(边框)
relative 相对定位 默认是相对于父标签
子绝父相(子是绝对定位 父是相对定位)
position : fixed   div块会跟着屏幕动(广告)


伪类:
link  visited  hover  active 顺序不能乱 href属性中必须有值 记忆方法: " 驴哈 "

JavaScript  脚本语言
JS的基本语法

• 区分大小写
• 弱变量类型语言
  
  • 所有的变量类型都用var
    
• 结尾分号可有可无
• 括号代表代码块
  

数据类型

• 原始类型
  
  • undefined : 未定义类型
  • boolean : 布尔类型
  • number : 数字类型
  • string : 字符或字符串
  • null : 空
    

• 引用类型
  
  • 对象类型 对象类型默认值是null
    

JS的运算符

• 和Java基本一致
• JS中 有一个 === 全等于 : 类型和值都一致的情况下才为true
  

常见的事件:

• onclick   单击
• ondblclick   双击
• onmouseenter   鼠标悬停
• onmouseleave  鼠标离开
• onload 在HTML文本加载完毕后请求图片资源 图片请求回来后执行onload事件
  

JS的引入方式

• 页面内直接编写JS代码, JS代码需要使用<script></script>
• 将JS的代码编写到一个.js的文件中, 在HTML中引入该代码即可
  

C:/Users/Administrator/AppData/Local/YNote/data/qqEBE2595FAFE14C48C5D01E8533D8810E/c652edc732a74eec8d52eeec5eb873bf/18e372cfbdf942aba1714f2f70c299ce.jpg
JS检验正则表达式只有两个方法

• String对象中的match方法   str.match("表达式")
• 正则对象中的test方法   正则.test("字符串")
  

两个感叹号!!可以把变量转变为boolean类型 为空时false 不为空true







图片轮播
HTML的window对象中:

• setInterval()   每隔多少毫秒执行某个表达式
  
  • setInterval("change()" , 5000)
    
• setTimeout()  每隔多少毫秒执行一次某个表达式
  
  • setInterval("change()" , 5000)
    
• clearInterval()   取消由 setInterval()设置的timeout
• clearTimeout()  取消由 setTimeout()设置的timeout
  

定时广告
CSS显示和隐藏元素的方式

• display         隐藏后占位
  
  • block  显示元素
  • none  隐藏元素
    
• visibility    隐藏后不占位
  
  • visible  显示元素
  • hidden  隐藏元素