HTML精华笔记

java_le

浏览: 20820 次
性别:
来自: 成都

最近访客更多访客>>

u012363178

nevergiveupnoone

www1347

壹零lib

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javacript
html/css/js

html

HTML精华笔记

软件

   可执行的桌面应用程序---.exe
   web 类型的应用程序---B/S
   手持设备
   分布式
   等

结构
   UI 层----显示和交互
   业务层----JDBC
   数据存储层----Oracle、IO

Web 类型的应用程序：网站、OA、CRM等
需要的技术：
   客户端技术：浏览器发出请求、显示页面---Web基础

   服务器端技术：侦听、解析、返回页面---JSP+Servlet/PHP/ASP.NET

Web 基础课程：html + CSS + JavaScript
美工：效果图（jpg）/切图/切页面----修改

索引--目录--应用

HTML 课程
一：html 概述和基础语法
   1、html 是一种编写网页的解释性的标记语言，结合 CSS 和 JS 实现功能复杂的页面
   2、解释性：翻译，非编译---代码有错误，可能导致效果错误
   3、标记：用一对 <> 括起来的，显示时候会有特定的效果
       封闭类型：成对出现，也叫双标记，比如 <h1></h1>
       非封闭类型：只有一个标记，也叫单标记，比如 <br />（建议）或者 <br>
       属性：出现在开始标记里，用空格隔开，属性名称="属性值"或者一对单引号

<br/>
<img />

       比如
           <h1 align="center" xx="">sss</h1>
   4、术语：元素----标记

   4、显示页面：用浏览器---IE、Google、Firefox、Opera、Safari

二：html 文档的创建
   1、文档的标准结构
版本信息
<html>
   <head></head>
   <body></body>
</html>
   2、版本：严格型、传统型、框架型
   3、head：页面头元素---包含和页面整体信息相关的内容
       title：为页面定义标题
       meta：元数据
       style：样式
       script：脚本代码
   4、body：文档的主体---各种文本以及各种标记

三：文本标记
   1、特殊文本----转义字符
       空格    
       <   <
       >   >
   2、标题： h1---h6
       h1---一号标题
   3、段落：p----段落间距
   4、换行：<br />
   5、分组元素：
       <div></div>：独占一行
       <span></span>：不会影响原有的布局
   6、块级(block)元素和行内(inline)元素
       块级元素：独占一行的元素，比如 h1/p/div
       行内元素：和其他元素在同一行上，比如 span/a

四：图像和链接
   1、图像标记 <img />
       相对路径：<img src="images/a.jpg" />
       绝对路径：<img src="http://ssss/a.jpg" />
   2、超级链接 <a href="">click me</a>
       <a href="users/login.html"></a>
       href="http://www.xxx."
       target="_blank"
   3、不同页面之间的
   4、同一个页面的不同部分之间的
       <a href="#">XXXx</a>---回到顶端
   5、锚点的定义和使用
       实现选择性的在页面的不同位置之间跳转
       <a name="xxx"></a>---锚点
       <a href="#xxx">To XXX</a>

五：列表： ul ol li
   经常会使用嵌套的列表实现导航菜单
   ---配合链接，实现导航目录效果

<ul>
   <li>
       电器
       <ul>
           <li>小家电</li>
           <li>白色家电</li>
       </ul>
   </li>
   <li>
       图书
       <ul>
           <li>考试用书</li>
           <li>儿童读物</li>
       </ul>
   </li>
</ul>

六：表格：显示网格数据、布局
   1、表格的基本结构：自上而下，从左到右
       <table>
       <tr>---table row
       <td>---单元格 table defination
   2、常用的属性
       table：border/width/height/cellspacing/cellpadding
       td：width/height/align/valign
   3、表格的其他
       为表格添加标题： <caption>
       行分组：thead/tbody/tfoot
           复杂分组的时候，可以有多个 tbody
   4、不规则表格：设置 td 的跨行或者跨列
       colspan = "3"---横着
       rowspan = "3"---竖着
   5、表格的嵌套：实现复杂布局时
       table 写在 td 里

七：表单
   1、表单：承载表单上元素（如文本框、按钮等），数据的录入和交互，提交到服务器端
       其他数据
       <form action="login.jsp" method="post">
           ?????
           保存
       </form>
       其他数据
   2、表单上的元素：
   3、input ：输入框---type取值的不同，不同类型
       <input type="text" />
       <input type="password" />
       <input type="radio" />--互斥的单选效果
       <input type="checkbox" />--多选
       <input type="submit" />--提交按钮
       <input type="reset" />--重置，恢复到初始状态
       <input type="button" value="普通按钮" />
       <input type="file" />---选择本地文件，备于上传
       <input type="hidden" />--隐藏域，不显示----常用来记载不希望用户看见的关键数据，隐秘数据（加密完毕再存入）

   4、input 元素的属性
       name 属性：提交数据用，名称
       value 属性：提交的值--文本框（初始值）、单选或者多选框（提交的值）
       名值对：提交数据到服务器端，比如：second.html?uu=john&sex=m&role=sa

   5、label标记：使用for属性和某个元素发生关联，for的值必须是关联控件的 id 值

   6、select：下拉框或者列表框 size="n"
       option元素：选项

   7、textarea：多行文本域

   8、表单控件的分组元素：fielsetset/legend

八：浮动框架
   <iframe src="其他页面的URL"></iframe>
   当前页面上嵌入其他页面，常用于广告页面

一、CSS 概述
   1、CSS 的作用：定义网页的外观，统一的方式，实现内容（数据）和表现（样式）分离

   2、CSS 的基础语法：
       样式属性名称1:值1;样式属性名称2:值2
       width:100px;height:200px;

       提出来定义：
           样式选择器
           {
               样式声明；
           }

   3、CSS 的定义方式：
       方式一：内联方式---CSS 样式定义在 html 元素的 style 属性里---重用性和可维护度不好
       方式二：内部样式表---CSS 样式定义在 head 里的 style 元素里
       方式三：外部样式表---CSS 样式定义在单独的 .css 文件里，html 页面上用 link 引入-----优先推荐使用

       a.html----准备多套样式，类似于皮肤的切换
           s1.css---红色
           s2.css---蓝色
           s3.css--黑白色

   4、特征   css（级联/层叠样式表）
继承：子元素可以使用父元素的某些样式---字体相关、背景相关
   <body style="color:red" >
       111
       <p>text</p>
   </body>

不重复----并集
重复定义-----优先级
       内联 > 内部或者外部（以最后一次定义的为准，覆盖前面的相同部分）


二、选择器的定义---灵活的决定使用样式声明
   1、元素选择器，如 h1/div/p---以html中标记的名称-----为同一类元素定义样式

   2、样式类
       css：     .name {}
       html：    <任元素 class="name"
------多种元素相同的样式

   3、分类
       CSS：     input.txt {}
       html:      <input class="txt"
   同一种元素下的细分
       <input type="text" />
       <input type="button" />

   4、ID选择器-----对页面上某个元素的唯一定义
       CSS:     #idvalue {}
       html:    <元素 id="idvalue"

   5、派生选择器---利用html元素的层次关系，选中某种结构下的元素
       CSS：    ul li a{XXX}
       html： <ul><li><a>...

   6、选择器分组----为n多元素定义相同的样式部分
       CSS：       input,a.link,#title,.s1   {XXX}

   7、伪类----有不同的状态
       :link---未访问过的
       :hover---悬浮，悬停
       :active---按下
       :visited---访问过的
       CSS：   某种选择器:link/hover

   8、扩展---各种样式选择器----不重复的取并集，重复的依靠优先级
       选择器的优先级：范围越小，优先级越高
<div>
   <a id="link1" class="s1"></a>
</div>
div a {}
#link1 {}
a.s1 {}

三：各种样式属性
   尺寸单位：pt/px/cm/mm/%/..
   颜色单位:red/#ff0000

四：尺寸
   width
   height
   overflow:visible/hidden/scroll/auto(建议)---设置内容溢出时如何处理

五：边框
   border:width style color;---4边框
   border-top:1px solid red;
   border-left:2px dotted blue;

   border-left-width:2px;
   border-left-style:dotted;---线型
   border-left-color:blue;

六、边距
   盒子模型（框模型）：元素的边框、内容、外边距以及内边距之间的定义
   margin：外边距
       margin:20px;---四个方向
       margin:10px 20px 30px 40px;
                       top right bottom left
       margin:10px 20px;---值复制

       margin-left:10px;---单个方向的边距
       margin-top:20px;
   padding：内边距
       padding:1/2/4;
       padding-left/right:;
   定义边距，可能导致占用的总面积的增加
   特别的取值：
       margin:10px auto;----居中
       auto：由浏览器自动计算左右的边距

七：背景
   1、背景色： background-color:颜色；---纯色
   2、背景图片：
       background-image:url(images/a.jpg);
       background-repeat:repeat/no-repeat/repeat-x/repeat-y;
       background-position:x y;
       background-attachment:scroll/fixed;--附着方式---取值为fixed，背景图像固定，类似于水印的效果

八：文本
   color
   font-size
   font-family:value1,value2,value3;
   font-weight:normal/bold;
   text-align:left/center/right;
   text-decoration:none/underline;
   text-indent:12px;----仅首行缩进
   line-height:20px;---行高

九：表格
   vertical-align:top/middle/bottom;----td里
   border-collapse:separate/collapse;---边框合并
   border-spacing:10px;---边框之间的边距；
十：光标
   cursor:default/pointer/help/....;---光标

十一：浮动
   1、页面默认情况下，采用流布局的模式
   2、设置元素浮动，脱离原有的布局，原有的位置不再保留，后续元素补上
       float:none/left/right;
   3、清除浮动元素带来的影响
       clear:left/right/both;

十二：显示----元素的显示方式
   每个 html 元素都有其默认的显示方式（块级、行内）
   行内元素：高度和宽度---无效
   块级元素：高度和宽度有效
   display:
       none---不显示，结合js代码实现动态显示效果
       block---块级元素
       inline---行内元素

十三：列表的样式
   list-style-type:none/circle/...;
   list-style-image:url();----使用图片作为列表项的标识

十四：定位

一、javascript 概述---js
   1、是一种基于对象和事件驱动的解释性脚本语言，应用于网页的编程处理
   2、JavaScript、JScript/VbScript----W3C
   3、js的书写方式
       直接写在 onxxx 事件中
       <script>块中，onxxx 事件中调用---当前页面的重用
       js 文件中，页面上先使用 <script src="">引入，onxxx 事件中调用---建议使用

二、基础语法
   1、变量
       声明变量 var 名称 = 值；
       变量的数据类型以赋值为准
       标识符：不以数字开头的数字、字母、下划线和 $ ，不能和保留关键字重名

   2、数据类型
       基本类型：string/number/bool
       特殊类型：null/undefined
       复杂类型：Array/Date/Math/....

       String类型：字符串，一对双引号或者一对单引号，特殊字符使用转义符（\x，汉字对应一个 \uxxxx）

   3、基本数据类型之间的转换
       隐式转换：规则
       显式转换：使用转换方法
           parseInt/parseFloat/toString
           NaN----not a number
           isNaN("???")---bool，判断是否可以转化为数值：is not a number("??")---true

   4、运算符与表达式
       if(a == b)-----值
       if(a === b)---严格相等-----值和类型
       三元运算符

   5、流程控制
       默认情况下，顺序执行---改变其执行顺序
       条件：if/else、switch/case
       循环：for、while

三、内置对象的使用
   1、js中的对象：基于对象的语言，灵活的使用各种对象
   2、常用的内置对象：String、Number、Math等
   3、String对象
       创建   var s = "mary";
       属性   var n = s.length;
       方法   var s1 = s.substring(1,3);
           toLowerCase/toUpperCase
           split 1,2,3,4
           substring
           charAt
           indexOf/lastIndexOf
           replace/search/match---结合正则表达式使用、实现对string的操作
           replace(/\d{3}/ ,"*")

       正则表达式：js中，放置在 /中间/
       结合匹配标识用:g(global)i(ignour)m(multiline)
           /gcd/gim

   4、Array 对象
创建数组
   var a1 = new Array(3);
   a1[0] = 12;
   a1[1] = "mary";
   a1[2] = true;

   var s2 = [12,"mary",true];//简写方式

   var s3= new Array();
   a3[0] = [10,20];
   a3[1] = [30,40];
属性
   length
方法
   XXX.toString()---使用，连接成一个字符串，常用于输出数组的内容显示
   XXX.join("|")----使用 | 连接
   concat----数组的加法
   slice-----数组的截取
   reverse
   sort----默认情况下，按照字符比较
       ----按照数值比较，先定义一个用于比较规则的方法，将方法作为参数传给 sort

   5、Math 对象---直接使用不需要new
       属性或者方法： Math.round()

   6、Number 对象
       toString
       toFixed(n)---保留小数点后n位

   7、正则表达式对象
正则表达式本身就是一个纯文本的表达式，用来表示对文本的匹配，比如 \d{3}   [a-z]{2,5}       [a-zA-Z0-9]{4}
不同的语言、环境下，有着不同的应用
js中对于正则表达式的应用：
   一：结合string 的对象方法：replace/search/match
   二：直接使用正则表达式对象的方法
       var r = /\d{3}/;--r 是一个正则表达式对象
       r.test(string)----bool
       常用于验证界面的录入

   8、Date 对象
       创建    var r = new Date();--当前
           var r = new Date("2013-12-23");
       方法
           getXXX()--getDate()/getMonth
           setXXX()
           toXXX()---得到某种格式的字符串

   9、方法
       a、定义： function Name(x,y,z)
           {
               return XXX;
           }
       b、重载
js不可以实现传统意义上的重载---js中，只要方法重名，以最后一次定义的为准
   方法中可以使用 arguments 得到传入的参数的数组。模拟实现方法的重载
       c、方法和 Function 对象
       d、使用方法时
方式一：方法，与功能相关----function sss(){}
方式二：方法仅为某个方法里所使用，创建一个 Function对象即可-----适用于方法体简单
   var f = new Function("参数1","参数2","方法体");
   使用匿名函数---适用于方法体复杂
   var f = function(){};

   10、全局函数：所有js的对象均可使用
       parseInt/parseFloat
       isNaN
       decodeURI/encodeURI
xxxx.html?name=mary&age=17&sex=%45%65               eval：传入一个字符串，计算或者执行它

四：DHTML 应用 dynamic
   1、什么是 DHTML 应用：动态网页效果
   2、对象模型
       window
           history
           location
           navigator
           screen
           event
           document
       对象模型分为两类：DOM（文档对象模型）和 BOM（浏览器对象模型）
   3、window 对象
            对话框
       window.alert()
       window.confirm()
       window.prompt()
           打开新窗口
       window.open(url,name,配置);
       window.close();
           定时器相关
       周期性
       window.setInterval(func,time);
       window.clearInterval()
       一次性
       window.setTimeout(func,time);
       window.clearTimeout();
<img style="position:relavtive;left:10px;"
img.src
img.style.left += 10;

   4.document对象
       html 页面上的每个内容作为一个节点对象----整个文档是一颗节点树，document 对象代表的整个树，树根
       DOM：文档对象模型
       a、查询---找到文档中的某个节点对象
方法一：document.getElementById("")---通过id找到对象或者null
方式二：根据层次关系来查询
   obj.parentNode
   obj.childNodes---节点的数组
   obj.firstChild/lastChild
方式三：根据标签名称查找
   document.getElementsByTagName("input")---节点的数组
   obj.getElementsByTagName("input")[1]

       b、读取信息或者修改信息----知道节点的类型
方式一：将 HTML 标签对象化
   <input     obj.value/type
   <a   obj.href
   <img   obj.src
方式二：元素中间的文本内容-----innerHTML
   <a>text</a>   obj.innerHTML
方式三：样式
   简单样式
   <p style="color:red;">p text</p>
   obj.style.color = "red";
   obj.style.fontSize = "18pt";
   obj.style.backgroundColor = "silver";
   复杂的样式：建议在样式表中先定义好
   obj.className = "";

       c、不知道节点对象的类型时----读取数据？
       obj.nodeName----全大写方式，返回当前元素的标签的名称

       d、增加新节点
第一步：创建新的节点对象
   document.createElement("a/input/p");
   <a></a> <input /> <p></p>
第二步：设置新对象的各信息
第三步：加入
   xxx.appendChild(newObj);---追加
   xxx.insertBefore(newObj,refNode);

       e、删除
   XXX.removeChild(obj);
   obj.parentNode.removeChild(obj);

   5、HTML DOM：基于标准的DOM操作，进行封装，以实现代码的简化，比如：
       var obj = new Option("JDBC","1");
       sel.options[1] = obj;
主要讲解两种封装好的元素
select + option

table+tr+td
   DOM方式： createElement(“tr”)
   HTML DOM 方式：
       table.insertRow(index);
       row.insertCell(index);

   6、history 对象：当前浏览器窗口的历史访问记录---确实有历史记录
       history.back();
       history.forward();
       history.length;

   7、screen 对象：代表的就是当前屏幕信息--只能读取，不能修改
       var w = screen.width/availWidth;//ok
       screen.width = 123; //error

   8、location 对象：代表的是 URL 地址栏
       实现对 URL的修改，实现从页面去往另一个页面
       location.href = "url";--保留历史访问记录
       location.replace("url");--替换，没有历史
页面间
   <a>----静态
   window.open----一定打开新窗口
   history.xxx()----受限于历史记录
   location.href----保留历史记录
   location.replace()----不保留

   9、navigator 对象
       js中，可以循环对象的所有的属性，如下：
for(var p in navigator)//p代表对象的每个属性
{
}

   10、event
a、事件分类
   鼠标事件：onclick/onmouseover/onmouseout/ondblclick
   键盘事件：onkeyup/onkeydown
   状态事件：onblur/onfocus/onchange/onload/onunload

b、如何定义事件
   <元素标签中 onxxx = "function();"----静态
   btnObj.onxxx = Function； ----动态

c、事件可以被取消---常用于页面的提交时
   onxxx = "return true;"---默认值，事件触发
   onxxx = "return false;"---事件被取消

d、事件有冒泡机制---当多层元素定义了相同的事件时，事件从最里层开始触发，层层向上

e、event 对象：封装了和当前事件相关的所有信息
   clientX/clientY----事件发生的点
   srcElement/target---源元素对象，引发当前事件的元素
   使用event对象时，可以直接在 html 页面或者js代码中使用 event 关键字获得对象----firefox 除外
   firefox：只能在 html 页面上使用 event ，js 中不可用

浏览器兼容问题：标准，特殊问题特殊处理（event）

五：js中的面向对象基础
   封装、继承、抽象、多态
   封装：对象相关的数据和行为组织起来
   数据：属性
   行为：方法
   1、使用 Object：使用简单，重用性差----适用于简单数据的封装
       var obj = new Object();
       obj.name = "mary";
       obj.age = 18;
       obj.isGra = true;
   2、类似于创建一个类：使用较为复杂，重用性好---适用于大多数情况下的封装
创建类
   function Student(n,a)
   {
       this.name = n;
       this.age = a;
   }

       var p1 = new Student("mary",18);
       var p2 = new Student("john",20);

   3、为了传递到服务器端：JSON
       var obj = {
           "name":"mary",
           "age":18
       };

var p1 = {};
var p2 = {};
var array = new Array();
array[0] = p1;
array[1] = p2;