JavaScript入门:HTML表格与基本语法详解

需积分: 34 0 下载量 52 浏览量 更新于2024-08-18 收藏 5.29MB PPT 举报
"HTML和JavaScript是Web开发中的基础技术。HTML用于构建网页结构,而JavaScript则提供了动态交互的能力。本文将回顾HTML的一些常用标签,并介绍JavaScript的基础语法。" 在HTML中,常用的标签包括: 1. `<html>`:定义整个HTML文档的根元素。 2. `<head>`:包含文档元数据,如标题、字符集设置等。 3. `<title>`:定义在浏览器标签页上显示的页面标题。 4. `<body>`:定义文档的主要内容区域。 5. `<h1>`到`<h6>`:定义不同级别的标题,`<h1>`是最主要的标题,`<h6>`是最小的标题。 6. `<p>`:定义一个段落。 7. `<br>`:插入一个换行符。 8. `<img>`:插入一个图像,通常通过`src`属性指定图片路径。 9. `<hr>`:插入一条水平线,常用于分隔内容。 10. `<a>`:定义超链接,通过`href`属性指定链接地址。 表格的基本结构由`<table>`、`<tr>`、`<th>`(表头)和`<td>`(单元格)组成。跨行和跨列可以通过`rowspan`和`colspan`属性来实现。例如: ```html <table border="1"> <tr> <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>85</td> </tr> <tr> <td>数学</td> <td>96</td> </tr> </table> ``` 在这个例子中,第一行的`<td>`跨越了三个列,而“张三”的信息则跨越了两行。 JavaScript作为客户端脚本语言,它的基本语法包括变量声明、数据类型、操作符、流程控制语句(如条件语句和循环)、函数定义和调用等。例如: ```javascript // 声明变量 var name = "John Doe"; var age = 30; // 数据类型转换 var num = parseInt("30 years old"); // 将字符串转换为数字 // 条件语句 if (age >= 18) { console.log(name + " is an adult."); } // 循环 for (var i = 0; i < 10; i++) { console.log(i); } // 函数定义与调用 function greet(person) { console.log("Hello, " + person + "!"); } greet(name); // 输出 "Hello, John Doe!" ``` JavaScript常用于网页交互,比如表单验证、动态效果、响应用户事件等。例如,可以使用JavaScript来检查用户输入的有效性,防止提交无效数据: ```javascript function validateForm() { var input = document.getElementById("username").value; if (input == "") { alert("用户名不能为空"); return false; } } ``` 上述代码会在用户提交表单前检查用户名字段是否为空,如果为空,则显示警告并阻止表单提交。 HTML负责网页的静态结构,而JavaScript赋予了网页动态交互的能力。两者结合使用,可以创建出丰富的、具有用户友好性的Web应用。在学习过程中,掌握这些基础知识至关重要,因为它们构成了Web开发的基石。