当前位置: 代码迷 >> Java Web开发 >> html、javascript的简要笔记
  详细解决方案

html、javascript的简要笔记

热度:383   发布时间:2010-09-21 12:14:30.0
html、javascript的简要笔记
刚发了servlet的一些简要笔记,现在在发一下web的html和javascript的,只是希望能对大家有一点帮助。
中秋快乐!
web:
    在适用Internet、维护工作量等方面,B/S比C/S要强得多的多;但在运行速度、数据安全、
    人机交互等方面,B/S远不如C/S。综合起来可以发现,凡是C/S的强项,便是B/S的弱项,反之亦然
HTML的如下
1、了解一些html基本常识
    (1)什么是html,发展历史
        制作网页的标记语言.
        Hypertext Markup Language的英文缩写,即超文本标记语言.
        是一种标记语言,不需要编译,直接由浏览器执行.
        是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀.
        是大小写不敏感的.
        HTML是由W3C的维护的(http://www.w3school.com.cn/)
        1990年, Tim Berners-Lee 创立了HTML,web之父
        1997年, HTML4.0成为W3C标准
    (2)w3c、web标准
        结构:html,xhtml,xml
        表现:CSS
        行为:W3C DOM,ECMAScript
    (3)xhtml与文档类型声明
        EXtensible Hypertext Markup Language,html-->xml 过渡。
        常见的文档类型声明
        XHTML 过渡型
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
        Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        XHTML 严格型
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
         HTML严格型
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        HTML松散型
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    (4)主要浏览器
        IE浏览器是用户数量最多的浏览器,超过80%的用户使用IE.
        Firefox
            由Mozilla基金会所开发,市场使用率第二。
        Navigator
            Netscape通信公司开发,是浏览器的最早的创始者和先驱者。
        Google Chrome
            Google在2008年新推出的浏览器  
2、掌握html基本结构及主要标记的使用。
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=gbk">
                <!--
                <meta http-equiv="refresh" content="3;url=http://bbs.tarena.com.cn">
                <meta http-equiv="refresh" content="3">
                -->
                <title>html01</title>
                <link rel="stylesheet" type="text/css" href="css/1.css">
            </head>
            <body>
                <h1>欢迎</h1>
                <p>欢迎大家来到<a href="http://bbs.tarena.com.cn">这里</a></p>
                <h2>在这里,你可以</h2>
                <ul>
                    <li>学java</li>
                    <li>有机会找到人生的另外一半</li>
                </ul>
            </body>
        </html>
        (1)meta
                http-equiv="content-type"告知浏览器HTML页面的编码方式。
                http-equiv="refresh",指定页面刷新的频率。
                name="keywords",为搜索引擎指定关键字,例如:
                <meta name="keywords" content=“tarena","java">
        (2)link
        (3)列表
                ul元素用于创建无号序列表
                ol元素用于创建有序号列表
                li元素表示列表项目
        (4)块级元素与行内元素
                div、p 、h1等元素常常被称为“块级元素”(需要另开始一行);
                span、 strong 等元素称为“行内元素” (不需要另开始一行)
3、掌握链接的使用
        (1)基本语法
        <a href="http://www.sina.com" target="">sina</a>
        target属性确定链接页面显示的窗口
        _blank(新窗口), _self(原窗口)
        (2)文档内导航
        <a name="top"/> … … … <a href="#top">to top</a>
        (3)发送邮件
        <a href="mailto:eric_ct@126.com?subject=hello">发送邮件</a>  
        (4)图片作为链接
        <a href="#"><img border="0" src="img/dl.gif" /></a>
        (5)图片区域产生链接
        <img src="index04.jpg" width="500" height="500" border="0" usemap="#m1" />
        <map name="m1" id="m1">
            <area shape="rect" coords="…" href="#" />
            <area shape="circle" coords="…" href="#" />
            <area shape="poly" coords="…" href="#" />
        </map>
            当shape="rect"(矩形)时,coords的值为左上角和右下角的坐标值; 当shape="poly"(多边形)时,
            为各顶点值; 当shape="circle"(圆形)时,为圆心坐    标值和半径值。 coords值依照图片大小的不同
            和所希望链接区域的不同而有所不同
        </map>
        (6)链接中的伪样式
            a:link { color: red} 没有访问时
            a:visited { color: blue} 访问后
            a:active { color: lime} 鼠标点击但还没有放开时
            a:hover { color: aqua} 鼠标指向时
4、掌握表格的使用
        table元素定义表格
        tr元素定义行
        td元素单元格
        单元格间隔和单元格填充
            table的cellspacing属性定义单元格之间的间距.
            table的cellpadding属性定义单元格边界与单元格中内容的间距.
        单元格的对齐方式
            align属性用于指明横向对齐方式:left center right
            valign属性纵向对齐方式:top middle bottom
        单元格的合并
            td的colspan用于指定单元格所占的列数, 用于横向合并单元格.
            td的rowspan用于指定单元格所占的行数, 用于纵向合并单元格.
5、熟练掌握表单的使用
        表单的作用
        常用属性
            action
            method
            input
                text checkbox radio submit reset image button
                select textarea  
6、了解css,掌握一些比较核心(程序员应该掌握)的css知识
    (1)什么是css
        Cascading Style Sheets(层叠样式表)。标准网页设计中CSS负责网页内容的表现。
    (2)css的基本语法
        selector {property:value; property:value; …}
    (3)css选择器
        简单选择器
            例如:    h1{color:blue} 针对所有的h1元素
        类选择器
            例如:.msg {color:red} 针对class属性为msg的元素.
            p.msg {color: blue} 只针对class属性为msg的p元素.
        ID选择器
            例如:#err {background-color:#blue} 针对id属性为err的元素.
        派生选择器
        例如: #content p {color:blue} 针对id是content元素中的p元素.
        li span { font-color: red}针对li中的span元素
    (4)选择器分组
        可以对选择器进行组合, 这些选择器就可以共享样式,例如:
        h1,h2,h3 {color:green}
    (5)css继承
        子元素将继承父元素的样式而不需要另加指定
    (6)样式表的引入与优先级
            1. 浏览器缺省设置
            2. 外部样式表
            3. 内部样式表(位于 <head> 标签内部)
            4. 内联样式(在 HTML 元素内部)
    (7)css定位
            diplay属性
                display:none 不显示
                display:block 块级元素
                display:  inline 行内元素
            position属性
                static 默认的选项, 按照浏览器默认的方式摆放。
                absolute 相对于父元素, 按top和left值指定的值摆放。
                relative 按照浏览器默认的方式摆放位置的基础上加以top和left值作为偏移
    (8)盒模型
            内容(content)、填充(padding)、边框(border)、边界(margin)
            这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也
            具有这些属性,所以叫它盒子模式。那么内容就是盒子里装的东西;而填充就是怕盒子里装的东西
            (贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框就是盒子本身了;至于边界则说明盒子摆
            放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。
            内边距相关CSS属性
            例如:
                h1 {padding: 10px 20px 30px 20%;}
            相当于
                h1 {
                padding-top: 10px;
                padding-right:20px;
                padding-bottom:30px;
                padding-left: 20%;
                }
            其中padding属性的书写顺序为从top开始顺时针旋转,既top、right、bottom、left;设置为百分数意为相对于父元素的width的百分比。
            外边距相关CSS属性
            例如:
                h1 {margin : 10px 0px 15px 5px} 和padding类似
                p {margin : 10%} 相对于父元素的width
                body{margin: 0}
            边框相关CSS属性
                border-style 针对所有边框的样式
                border-width 针对所有边框设置宽度
                border-color针对所有边框中可见部分的颜色。
                也可这样设置:
                    border:宽度、样式(ashed/solid)、颜色
                border-bottom
                border-bottom-color
                border-bottom-style
                border-bottom-width
              
7、框架
    <html>
    <head>
    <frameset cols="50%,*" border="1">
        <frame src="left" name="f1" noresize="true" />
        <frame src="right" name="f2" marginwidth="50" marginheight="60" />
    </frameset>
    </head>
    </html>
JavaScript的如下
1、了解javascript的一些常识
(1)什么是javascript
    最早由网景公司开发的一种脚本语言, 被浏览器解释执行。
    是一个文本文件,后缀为.js
    用来向 html页面添加动态的交互行为。
(2)javascript的作用
    操作html(包括修改html属性,增加、删除html标记,修改html元素样式等)
    ajax核心技术之一,可异步向服务器发送请求。
    使用的常见场合:
        数据验证
        为页面添加动态行为
        动态改变页面外观
        ajax
2、一个简单的javascript程序。
     js的执行过程
     基于事件的响应方式
3、掌握javascript脚本引入方式:
        (1)页面内部
        <script type="text/JavaScript">
            alert('hello');
        </script>
        (2)单独放在文件里
        <script type="text/JavaScript" src="js01.js"></script>
        (3)嵌入html元素内部
        <a href="javascript:alert('hello’);">sayHello</a>
4、掌握常见的数据类型及操作
    (1)基本类型
            JS有5种基本数据类型
                number, string, boolean,null,undefined
                几个需要注意的问题:
            var a = null; alert(a == undefined);
            typeof 用于返回类型
                Infinity和NaN
                    对于number类型Infinity表示无穷, NaN表示非数字
            isNaN("aaa")
            将字符串转换为数值
                parseInt(…),parseFloat()
            将数值转换为字符串
                toString(…)
            字符串的基本属性和方法
                length属性 返回字符串的长度
                charAt(index) 返回指定位置的字符
                substring(from, to) 返回子字符串
                indexOf(str) 指定字符串在原字符串中
                第一次出现的位置
                lastIndexOf(str) 指定字符串在
                原字符串中最后一次出现的的位置
                match(regexp) 返回匹配指定正则表达式的字符串,返回的结果是一个数组
                    var str2 = 'asd212abc345';
                    var reg2 = /[0-9]+/g;
                    var arr = str2.match(reg2);
                search(regexp) 返回按照正则表达式检索
                到的字符串位置
                    str2.search(reg2)
                toLowerCase/toUpperCase 返回小写/大写形式
                replace(regexp,'abc'); 替换符合reg正则表达式
                规定的字符串
                    str2 = str2.replace(reg2,'888');
              
        (2)复合类型
                数组、对象、函数
            数组的使用
            创建数组, 长度由后期赋值决定
                var a = [1,2,3,4,5];
                var b = [];
                var c = new Array();
                    length属性返回数组的长度
                    toString()方法, 返回数组的字符串表示
                    concat方法, 用于连接两个数组
                    join方法,用于将数组中的各个元素
                    连接成字符串。
                    reverse方法,将数组反转
                    slice用于截取数组的一部分并以
                    数组的形式返回
                    sort()排序,可通过如下形式来重新定义排序方式:
                        var arr4 = arr3.sort(function(a1,a2){
                        return -a1.length + a2.length;
                    });              
6、掌握常见事件
        onclick 鼠标单击
        onchange 内容改变
        onfocus 获得焦点
        onblur 失去焦点
        onload 元素加载显示
        onunload 页面关闭
        onmouseout 鼠标移出
        onDblClick 鼠标双击
7、如何访问页面内元素
    getElementByID()
    使用prototype
搜索更多相关主题的帖子: html  笔记  javascript  

----------------解决方案--------------------------------------------------------
支持
----------------解决方案--------------------------------------------------------
只能当作是了解,没有多大的意义。
----------------解决方案--------------------------------------------------------
  相关解决方案