html学习笔记

HTML

1.特殊符号

假如要在浏览器中显示这些符号，就必须用：

＆nbsp；来显示一个半角的空隔符号

＆ｌｔ；来显示小于符号

＆ｇｔ；来显示大于符号

＆ａｍｐ；来显示＆符号

＆ｑｕｏｔ；来显示双引号

2.注解

HTML 中的批注是

<!-- 这里可以写你要的批注 -->

<!--

批注同时也可以换行

写多少都可以

-->

3.图片

<img src="路径/图文件文件名" alt="找不到图档时出现的内容, 当鼠标移到图片上方时也会出现该内容" width=XX显示时的宽度 height=XX显示时的高度 >

例:<img src=“images/tree.jpg” alt=“树”>

4.CSS Style

属性

color : 文字的颜色

font-size : 文字大小

background : 背景颜色

display : 显示/隐藏

width : 宽度 (for DIV Element)

height : 高度(for DIV Element)

border : 边界(for DIV Element)

用法举例；<p style=“font-size:14pt;color:red”>style</p>

把 style 集中管理

<style type=“text/css”>

.styleOne {font-size:14pt; color:red}

.styleTwo {background:black; color:white}

</style>

<p class=“styleOne”>

段落内的文字…………

</p>

5.div的用法

<div>……</div>

外观 : 没有显示效果，除了用style来控制。

作用 : 可以把一群 element 包裹起来一起控制。

例 :

<div class=“styleTwo”>

<a href=http://www.sina.com.cn>新浪網</a>

<pre>一些文字</pre>

</div>

Div 的 Style Attribute

position : absolute ; top:30px; left : 60px ; width: 200px ; height: 200px; overflow-y:auto;

Overflow-y:auto=>内容超过边界时，会自动加一个 vertical scrollbar 在旁边。(x表示水平)

6.Input - Text

写法

<input type=“text” name=“compName” value=“ICSC”>

其它 attribute

value : 字段中的值

size : 字段显示出来的长度

maxlength : 最多能录入的文字数

7.Input - Hidden

隐藏的字段，网页上不会显示出来，只用能辅助背后逻辑处理。如(会员代号)

用法

<input type=“hidden” name=“orderNo” value=“2”>

8.Textarea

用在大量文字数据时，如留言版，意见栏等。

用法

<textarea>字段内容….</textarea>

attribute

name : 字段名字

rows

cols

9.Input - Radio

用在多选一的时候，如性别。

用法

<input type=“radio” name=“sex”> (名字相同与不同的区别)

attribute

name : jsp 将会依此名字取得 value，若是多选一时，一组 radio button 的name 要相同

value : jsp 依 name 取得的值

checked : 默认为被打勾

10.Input - Checkbox

允许多选多，彼此间不会互斥

用法

<input type=“checkbox”>

属性

name : jsp 将会依此名字取得 value，一组选项，中通常每个 checkbox 名称会一样。

value : jsp 依 name 取得的值

checked : 默认为被打勾

11.Select

下拉式选单

用法

<select name=“myName”><option>选项一</option></select>

属性

name : 下拉选单的名字

size : 设定下拉式选单的高度

multiple : 可以多选

定义下拉选单中的数据选项

用法:

<select name=“num”>

<option value=“1”>one （1的作用）

<option value=“2”>two

</select>

属性

value : 设定数据所传回给 JSP 的值

selected : 被选取 （设定默认的）

12.Input - Submit

用法

<input type=“submit” value=“送出表单”>

<input type=“button” value=“一般按钮”>

属性

name : JSP依此名称来接数据

disabled : 让按钮不能按

13.FORM

把数据从 client 送到 server 的重要组件。所有被送到 server 的数据均以 form 为单位。

<form name=“form1” action=“process.jsp” method=“post”>

<input type=“text” name=“empName”>

……………

</form>

Action后面加地址

action : 要被送至处理的 jsp或servlet或其它cgi

method : 被传送时的方法, 分 get, post 。

get : 被附在网址后面 (如: process.jsp?empName=李小明&..)

（没有字数限制）

post : 数据被隐藏在后面传送

target : 表单送出后server 处理完毕 response 回来的网页显示的地方，通常是 frame 的 名字或 window 的名字

14.IFRAME

被镶在网页中的另一个世界。有如在原来的网页中挖了一个洞，洞里可以浏览别的网页。

<iframe name=“fr” width=800 height=600></iframe>

attribute

name : 用作form submit 时的target 设定

width/height : frame 的宽度/ frame 的高度

src : frame 里面的网址

1.取得Object

var obj=document.getElementsById("tab")

<div > ....</div>

var names=document.getElementsByNames("empName")

for(var i=0; i<names.length;i++){

var obj=names[i];

}

<input type=text name="empName"....>

name可重复 id不可以重复。

2.Div 功能

将欲控制的项目包裹在一起统一控制，省却一个一个项目控制的锁碎事情

<input type=“text” name=“one”>

<input type=“text” name=“two”>

form1.one.style.display=“none” // 隐藏栏位

form1.two.style.display=“none” // 隐藏栏位

用div处理

<div id=“f”>

<input type=“text” name=“one”>

<input type=“text” name=“two”>

</div>

document.getElementById(“f”).style.display=“none”

3.Style Class 的用法

document.getElementsById("f").style.display="none"

document.getElementsById("f").style.fontSize="16"

document.getElementsById("f").style.background="pink"

<style>

.change{display:none; front-size:16;background:pink}

</style>

table{ front-size:16;background:pink}

document.getElementsById("f").style.className="change"

点的用法：

<div class="change">......</div>

table的用法：

<table> <tr> <td> .....</td> </tr> </table>

4.下拉菜单激活function的event

<select onchange="triggerEvent()">

<option value="....">..

</select>

<script>

function triggerEvent(){

//....

}

</script>

5.选中下拉式菜单 取得下来菜单的值

<form name="form1">

<select name=“docType” >

<option value=“01”>会议通知单

<option value=“02” selected>草稿

</select>

</form>

<script>

form1.docType.options[form1.docType.selectedIndex].value 得到? “02”

form1.docType.options[form1.docType.selectedIndex].text 得到? “草稿”

</script>

欲显示、隐藏的栏位，需用 div 将之包裹，

建立下拉菜单option value与显示隐藏内容的关系

即将 Div 的 id 与 option value 建立关系，

如:

<select name=“docType”>

<option value=“01”>…

<option value=“02”>…

<option value=“03”>…

</select>

<div id=“t01”>吉钢<input value=“”>字第…</div>

<div id=“t02”>会议<input value=“”>字第…</div>

<div id=“t03”>函<input value=“”>字第…</div>

6.当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。

例：

<html>

<head>

</head>

<body>

<Form>

<Input type="text" name="Test" value="Test" onCharge="check('this.test)">

</Form>

</body>

</html>

7.单击事件onClick

当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生：

button（按钮对象）

checkbox（复选框）或（检查列表框）

radio （单选钮）

reset buttons（重要按钮）

submit buttons（提交按钮）

一切文本和图片

例：可通过下列按钮激活alert()：

<html>

<head>

</head>

<body>

<Form>

<Input type="button" Value="你好 " onClick="alert('你好！我是JavaScript')">

</Form>

</body>

</html>

8.设定JAVA_HOME 步骤

右击我的电脑?内容?高级?环境变量?「系统变量」?新增?[变量名称: JAVA_HOME, 变量数值: JDK安装位置]

打开 d:/tomcat/webapps/examples/jsp/

创建目录 xx

创建 d:/tomcat/webapps/examples/jsp/xx/xxjj01.jsp

運行 xxjj01.jsp

http://localhost:8080/examples/jsp/xx/xxjj01.jsp

9.JSP產生的JAVA及CLASS所在

D:/tomcat/work/Standalone/localhost/examples/jsp/xx/

xxjj01_jsp.java

xxjj01_jsp.class

5.Class组合实现Div+CSS布局

现在编写xhtml，我们强烈不推荐此种方法，应该是id，class综合应用。此文章只是讲述一种思维，并非建站过程中的方法！

　　用标准件的方式来组装网页DIV布局。我把class分为2种：布局class；风格class。

　　布局class是骨架，风格class是衣服。

　　举个例子：比如布局中的左栏。首先它的属性有：是左栏，宽度，背景颜色，字体颜色等。

　　1、首先会定义一个class,比如:.layout,主要用来控制页面整个的大小

　　.layout{width:98%;margin:0 auto;text-align:left;}

　　2、然后会定义3个基本布局Class(l,m,r)

　　.l{float:left}

　　.m{width:auto}

　　.r{float:right}

　　我把2栏布局也归类于3栏布局，因为3栏布局中，左右栏的宽度分别为0的时候，3栏就变成了2栏．

　　我们写基本布局代码的时候，最好还是写成3栏格式．

　　3、对应布局Class，定义需要的风格Class，比如宽度，高度，背景颜色等等这些都属于风格元素

　　.class_l{background:#ff0;margin-right: -150px;width:150px;}

　　.class_m{background:#f00;margin:0 140px 0 150px;}

　　.class_r{background:#00f;margin-left: -140px;width:140px;}

　　布局class只有一套，风格class可以定义很多。比如，要中栏里面在做一个小的2栏布局，就可以再定义一个风格class。

　　.mid_l{background:#ff0;margin-right: -100px;width:100px;}

　　.mid_m{background:#f00;margin:0 0 0 100px;}

　　4、将布局class和风格class结合起来，在代码这样引用：

　　<div class="l class＿l"></div>

　　<div class="l mid_l"></div>

　　将2个class都引用，中间用空格隔开,前面的是布局class,后面的是风格class,后面还可以继续空格引用，如果需要再特殊定义，你可以给这个div取一个id来定义。

　　其他的一些常用的风格class也可以写成通用的，比如隐含可以定义为

　　.hide{display:none} 然后需要的时候，class="xxx hide"来引用。

　　示例代码浏览：http://tech.ddvip.com/yssl/29811/29815_1.html

6.JavaScript实例教程（十一）显示一个动态的时钟

前面说的显示当前时间日期是静态的，我们这里来实现一个动态的时钟。

在<head>和</head>之间插入下列代码：

<script>

//定义时钟显示的函数

function displayTime() {

var today = new Date();

// 定义日期对象

var hours = today.getHours();

var minutes = today.getMinutes();

var seconds = today.getSeconds();

// 从日期对象中中获得时间信息

minutes = fixTime(minutes);

seconds = fixTime(seconds);

// 引入fixTime（）函数，使分和秒可以正常显示，对于小于10的数字则在该数字前加一个0

var the_time = hours + ":" + minutes + ":" + seconds;

//将时间字符串组合在一起并写出

window.document.the_form.the_text.value = the_time;

//把表格的值重新写一遍，相当于刷新时间

the_timeout= setTimeout('displayTime();',500);

//每半秒钟执行一次该函数,即500毫秒

}

function fixTime(the_time)

{if (the_time <10) { the_time = "0" + the_time; } return the_time; }

</script>

把<body>改为<body onload=displayTime()>

再在<body>标签间输入

欢迎光临5D多媒体 现在是北京时间：

<form name="the_form">

<p><font ><input type="text" name="the_text" size="16"> </form>

运行，可以看到浏览器显示如下：