前端基础笔记HTML&CSS&JS

最新推荐文章于 2023-12-31 11:07:05 发布

zhangbohun

最新推荐文章于 2023-12-31 11:07:05 发布

阅读量368

点赞数

分类专栏：其他文章标签：前端 HTML CSS JS JQuery

本文链接：https://blog.csdn.net/zhangbohun/article/details/50659296

版权

其他专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML 内容设置

基本格式

  <html> 

  <head> 

<title>< title >

<meta http-equiv=“content-type” content=“text/html;charset=gb2312”>

<meta http-equiv=“refresh” content=“3";url="http://www.foo.com”>

<meta name="keywords" content="your keywords">

<meta name="description" content="your description">

<meta http-equiv="expires" content="0">

<meta http-equiv="pragma" content="no-cache">

<meta name="generator | author | copyright" content="…..">

</head>
<body></body>
</html>

常用标签

 
 <br/>换行 
 <hr/>分割线 
 <p>段落<pre>原格式文本<h123456>标题 
 <ol>有序 
 <ul>无序 
 <li> 

文本标签

   &lt;    < 
 
   &gt;    > 
 
   &reg    注册商标 
 
   &amp;    & 
 
   &nbsp;    空格 
 
   &copy;    copyright 
 
   &trade;    商标™ 
 
   &quot;    “

  超链接<a href="地址" target="_blank"></a> 

  图片<img src="地址" width="300" hight="300" title="题目" alt="描述"/> 

表单

  <form action=""> 

  <input type=" 
 text radio checkbox password hidden select submit reset button textarea image 
 "  
 name: "提交到服务器端的变量的名字" 
 > 

 
 <select><option> 

  <textarea> 

  <input type=button name=“” value=“”> 按下该按钮没有反映  

  <input type=submit name=“” value=“”> 按下该按钮，该form中所有的输入信息将被提交到服务器 <input type=reset name=“” value=“”> 按下该按钮，该form中所有的输入部分将被重置  

  <input type=“image” src=“”> 点击图片提交 
 
 

  上传的数据又form对应的后台action处理 

其他

  页框 

  <frameset cols(rows)="150,*,150" frameborder="1">不能在body内设置 

 
      
 <frame src="" name="test" noresize/> 

  </frameset> 

  块<div>小块<span> 

  表格<table><tr><td> 

 CSS 显示装饰 选择器
   <head> 
 
   <link rel=stylesheet" href="123.css" tpye="text/css"> 
 
  <style tpye="text/css"> 
 
  *{ 
 
  margin：0px; 
 
  padding:0px; 
 
  } 
 
  h2{标签选择器 
 
       height:25px;  
    
       font-size:12px;  
    
       color:#555;  
    
       /*背景会默认完成填充*/  
    
       background:url("point.jpg") no-repeat;  
    
       /*背景的第一个值设置的是左右，第二个才是上下*/  
    
       background-position:10px 8px; 
    
  } 
 
  #id{id选择器 
 
  } 
 
  h2.class{类选择器 
 
  } 
 
  div span{包含选择符 
 
  包含之内所有标签 
 
  } 
 
  div>h1{子对象选择符 
 
  只包含一级子标签 
 
  } 
 
  #div，#h1{，分组选择符 
 
  } 
 
  </ style> 
 
   </head> 
 
   <style="color:red(#FFFFFF)">局部，内嵌样式 
 
CSS文本属性
    颜色color:#ab1919; 
  
    字体大小font-size:14px 
  
    font-stytle:italic 
  
    font_weight: 90 
  
    line-height 行距 
  
    text-align,对齐方式 
  
    text-decoration:underline下划线 
  
    word-spacing 
  
 布局
   margin外部距离，顺时针： top,right,bottom,left 
 
   padding内部距离 
 
 定位
   position:absolute绝对定位 
 
   position:relative相对于父类定位 
 
 图片设置
   norepeat 
 
   float:left 
 
   clear:both设置float块占用空间 
 
 伪类
   a.class:link,a.class:hover,a.class:visited {} 
 
   a:link 未访问时的状态  
 
   a:visited 访问过后的状态  
 
   a:active 鼠标点中不放时的状态  
 
   a:hover 鼠标划过时的状态 
 
 Javascript 页面交互
    this 
  
 基本对象
    (Function)argunts,call,apply,protype 
  
    json 
  
    Number 
  
    String 
  
    Date 
  
    Math 
  
    Array 
  
    RegExp 
  
 事件
    onlick,onmouseover,onmouseout 
  
    Timer setInterva,clearInterval,setTimeout 
  
    onload 
  
    button 绑定事件 event=event|window.event 
  
    onFocus：在用户为了输入而选择select、text、textarea等时 
  
    onBlur：在select、text、password、textarea失去焦点时 
  
    onChange：在select、text、textarea的值被改变且失去焦点时 
  
    onClick：在一个对象被鼠标点中时（button,checkbox,radio,link,reset,submit,text,textarea等）  
  
    onLoad：出现在一个文档完成对一个窗口的载入时  
  
    onUnload：当用户退出一个文档时 
  
     onMouseOver：鼠标被移动到一个对象上时  
  
    onMouseOut：鼠标从一个对象上移开时 
  
    onSelect：当form对象中的内容被选中时 
  
    onSubmit：出现在用户通过提交按钮提交一个表单时 
  
 DOM
    docment 
  
    getElementById表示根据id获取，获取的是一个元素 
  
    getElementsByName表示通过属性的name的值获取，获取的是数组 
  
    getElementByTagName表示根据标签名称获取，获取的是数组 
  
    style,innerHTML 
  
 BOM
    window 
  
    screan 
  
    history.back() 
  
 JQuery
   jQuery 对象就是通过jQuery包装DOM对象后产生的对象 
  
   选择器基本的同CSS 
 
   更多扩展 
 
   包装集 
  ：通过$("exp")会筛选出页面的一组满足表达式的元素，这一组元素就属于JQuery包装集中的元素 
 
   比较常用的一些方法有：获取包装集中的元素个数(size())，通过某个下标获取包装集中的某个元素(get(index))，某个某个元素在包装集中的位置(index(ele)) 
 
   属性操作 
 
   样式操作addCss,removeCss 
 
   节点操作 
 
   表单操作 
 
   事件event bind live 
 
   show hide 
 
   常用工具 
 
   $.browser 
 
   each,map,has 
 
   $.grep 
 
   ajax 
 
   XXX.load(url,function()) 
 
   XXX.get(url,type,function()) 
 
   XXX.getjson