HTML div 标签
div可定义文档中的分区或节（division/section），把文档分割为独立的、不同的部分，可以为它设置 id 或 class。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。div默认情况下是块模式，即标记前后有类似换行符一样的功能，它的内容自动地开始一个新行，换行是 div 固有的唯一格式表现。若想要前后两个div标记块的内容出现在同一行，必须通过样式属性去修改。
HTML span 标签
span标签被用来组合文档中的行内元素。span默认情况下是行模式，即标记前后内容在同行显示。
DIV和SPAN标记行块模式，可以通过CSS的display属性予以调整。
HTML img 标签
img 元素向网页中嵌入一幅图像。img标签并不会在网页中插入图像，而是从网页上链接图像，img 标签创建的是被引用图像的占位空间。img 标签有两个必需的属性：src 属性 和 alt 属性。
- src属性用于确定图片的位置，可以来自网页所在位置或相对于该位置的其他位置，也可以换成其他外部网站的链接🔗
- alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
常见表单元素
-
form: 定义供用户输入的表单。
-
fieldset: 定义域。即输入区加有文字的边框。
-
legend：定义域的标题，即边框上的文字。
-
label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。
-
input: 定义输入域，常用。可设置type属性，从而具有不同功能。
-
textarea: 定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。
-
button: 定义一个按钮。
-
select: 定义一个选择列表，即下拉列表。
-
option: 定义下拉列表中的选项。
js中的点击事件（click）的三种实现方式
第一种 通过点击事件
第二种 监听点击事件
第三种 通过方法响应点击事件
例子看这里
- Onclick 使用分号分隔开的时候可以调用两个函数
JSP一个/两个/三个等号的区别
一个等号是赋值操作，==先转换类型再比较，===先判断类型，如果不是同一类型直接为false。
详细的看这里
HTML调用JavaScript代码的四种方式
- 内联，放置在
<script>和</script>标签对之间，JavaScript脚本可被放置在HTML页面的<body>标签和<head>标签中，一般放在<head>标签内。 - 放置在由
<script>标签的src属性指定的外部文件中，一般我们也采用分离的方式连接到HTML文档中。
<script type="text/javascript" src="/js/index.js"></script>
- 放置在HTML时间处理程序中，该事件处理程序有onClick或onmouseover这样的HTML属性值指定
- 放在一个URL里，这个URL使用特殊的javascript协议（很少用）
HTML调用CSS代码
先介绍两种
- 链接单独的css文件。在外部写一个css样式表文件中 ，用以下代码引用进来
<link rel="stylesheet" type="text/css" href="css文件路径" /> - HTML嵌入CSS。直接在html中写样式就用
<style type="text/css"> css样式</style>
css
CSS 指层叠样式表 (Cascading Style Sheets)
优先级：(内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
Css内容可以写在标记内的style属性中，也可以写在一个外部的css文件中。每个属性之间用分号间隔，属性与属性值之间用冒号隔开。在JQuery中，可以对选中标记进行一个或者多个属性值的设置。
style="style"包含内联样式说明，可用于span,div,body和其他大部分HTML标签
简单题目
- 题目：网页显示三列的表格，点击按钮之后随机生成三个数字，并每隔两秒刷新一次，直到三个数字相同时改变table的style，并显示“恭喜中奖”
主要函数：
getRandom(begin,end)
return Math.floor(Math.radom()*(end-begin))+begin;//生成随机数
windows.setTimeout(function getRadom(),2000); //两秒刷新一次
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div>
<table align="center" border="1" width="100%" height="100px"
style="text-align: center;">
<tr id="table1">
<td id="number1"><h4 id="h1"></h4></td>
<td id="number2"><h4 id="h2"></h4></td>
<td id="number3"><h4 id="h3"></h4></td>
</tr>
</table>
</div>
<div>
<p>
<h3 id="result"></h3>
</p>
</div>
<div style="text-align: center">
<button type="button" style="width: 90px; height: 30px;"
onclick="displayNum3()">Click Me!</button>
</div>
</body>
</html>
<script type="text/javascript">
function displayNum3() {
var number1 = Math.floor(Math.random() * (10 - 0) + 0);
var number2 = Math.floor(Math.random() * (10 - 0) + 0);
var number3 = Math.floor(Math.random() * (10 - 0) + 0);
document.getElementById("h1").innerHTML = number1;
document.getElementById("h2").innerHTML = number2;
document.getElementById("h3").innerHTML = number3;
if (number1 == number2 && number2 == number3) {
document.getElementById("result").innerHTML = "You are lucky";
table1.style.backgroundColor = "green";
return 1;
} else {
document.getElementById("result").innerHTML = "You are unlucky";
}
setTimeout(displayNum3, 2000);
}
</script>
-
将javascript和css代码从html代码中分离，实现简单的时钟功能
window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
html部分代码
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>
<script type="text/javascript" src="clockFun.js"></script>
<link rel="stylesheet" type="text/css" href="MyClock.css" />
</head>
<body>
<h1>Digital Clock</h1>
<span id="myclock" class="clock"></span>
</body>
</html>
css部分代码
.clock{
font:bold 24pt sans;
background:#ddf;
padding:10px;
border:solid black 2px;
border-radius:10px;
}
javascript部分代码
function disptime() {
var today = new Date();
document.getElementById("myclock").innerHTML =today;
setTimeout(disptime, 1000);
}
window.onload = disptime;
- eclipse自动排版快捷键是Ctrl+Shift+F
784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
