目录
一、HTML的使用
1. 文档结构标记
<html>
:作为 HTML 文档的根标记,包裹整个网页内容。
<html>
<!-- 网页内容 -->
</html>
<head>
:用于存放文档的元数据,像页面标题、字符编码、外部资源引用等。
<head>
<title>页面标题</title>
<meta charset="UTF-8">
</head>
<body>
:包含了在网页上可见的所有内容,如文本、图片、链接等。
<body>
<p>这是一个段落。</p>
</body>
2. 文本标记
<h1>
- <h6>
:用来定义不同级别的标题,<h1>
是最高级标题,<h6>
是最低级。
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>
:定义段落。
<p>这是一个段落的文本。</p>
<br>
:插入换行符。
这是第一行<br>这是第二行
<hr>
:插入水平分割线。
<p>第一段内容</p>
<hr>
<p>第二段内容</p>
3. 列表标记
<ul>
:定义无序列表,列表项用 <li>
标记。
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
</ul>
<ol>
:定义有序列表,列表项同样用 <li>
标记。
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
4. 链接和图片标记
<a>
:创建超链接,href
属性指定链接的目标地址。
<a href="https://www.example.com">访问示例网站</a>
<img>
:插入图片,src
属性指定图片的路径,alt
属性提供图片的替代文本。
<img src="image.jpg" alt="一张图片">
5. 表格标记
<table>
:定义表格。
<tr>
:定义表格的行。
<th>
:定义表格的表头单元格。
<td>
:定义表格的数据单元格。
<table>
<tr>
<th>表头 1</th>
<th>表头 2</th>
</tr>
<tr>
<td>数据 1</td>
<td>数据 2</td>
</tr>
</table>
6. 表单标记
<form>
:创建 HTML 表单,用于用户输入数据。action
属性指定表单数据提交的目标地址,method
属性指定提交方式(get
或 post
)。
<form action="submit.php" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<input type="submit" value="提交">
</form>
<input>
:用于创建各种输入字段,type
属性决定输入字段的类型,如 text
、password
、radio
、checkbox
、submit
等。
<input type="text" placeholder="请输入文本">
<input type="password" placeholder="请输入密码">
<input type="button" value="提交" onClick="客户端脚本方法"
二、流行的网页编辑器——HBuilder
Ctrl+Shift+/:注释若干行代码或取消
Ctrl+D:删除光标所在行
Ctrl+Enter:在下方产生一个空白行
Ctrl+Shift+F:用于代码格式化
Ctrl+Shift+W:一次性关闭已经打开的文档
三、JavaScript 基本概念
JavaScript(JS)是用于编写页面脚本、控制网页客户端行为的脚本语言 ,目前浏览器内嵌 JS 引擎执行客户端脚本,也可借助扩展库(如 jQuery )或第三方 JS 脚本。
JavaScript 内置对象
动态对象:Date(日期 / 时间)、Array(数组)、String(字符串) ,本质是类,需用
new
运算符创建实例,封装常用属性和方法。静态对象:Math(数学) ,无需实例化,可直接使用其方法和属性。
浏览器对象模型
顶级对象 - Window:表示浏览器窗口,有
alert()
(产生警示消息 )、confirm()
(客户端确认 )、setTimeout()
(定时器 )、setInterval()
(定时循环 )等方法 。二级对象
location:
href
属性用于实现客户端跳转。document:有
write(exp)
(向窗口输出表达式值 )、getElementById("id")
(获取指定 id 页面元素 )、history()
(返回历史访问记录 )等常用方法 。
JavaScript 脚本使用
内部脚本:在页面中用
<script>
与</script>
定义。示例代码通过setInterval
定时获取当前时间并更新页面指定元素内容。外部脚本:脚本代码存于扩展名为
.js
的文件,在页面用<script src="JS 文件" type="text/javascript"></script>
引入 。
四、jQuery
1. jQuery 对象创建
借助 $()
函数可把 DOM 对象包装成 jQuery 对象,转换后就能用 jQuery 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="myPara">示例段落</p>
<script>
const domObj = document.getElementById('myPara');
const $jqObj = $(domObj);
$jqObj.css('color', 'red');
</script>
</body>
</html>
2. 文档加载代码
用 $(document).ready()
方法,在文档加载完成后执行初始化操作。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="msg">加载中...</p>
<script>
$(document).ready(function() {
$('#msg').text('加载完成!');
});
</script>
</body>
</html>
3. 获取 jQuery 对象的方式
根据标记名
用标记名做 $()
参数,选文档中所有指定标记元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<script>
$('p').css('background-color', 'yellow');
</script>
</body>
</html>
根据 ID
用 $("#id")
选对应 ID 元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="special">特殊段落</p>
<script>
$('#special').css('font-size', '20px');
</script>
</body>
</html>
根据类
用 $(".name")
选有相同类名的元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p class="hl">高亮段落</p>
<p class="hl">高亮段落</p>
<script>
$('.hl').css('color', 'green');
</script>
</body>
</html>
五、在java项目中以JDBC方式访问MySQL
在包含有MySQL数据库访问的Maven项目里,未使用JDBC访问MySQL需要在pom.xml文件里添加如下依赖
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>版本号</version>
</dependency>
加载MySQL驱动
Class.forName("com.mysql.jdbc.Driver");
创建Connection接口对象
String url="jdbc:mysql://localhost:3306/数据库名";
String name="root";
String pwd="root";
Connection conn=DriverManager.getConnection(url,name,pwd);
如果访问的是MySQL 8.x时创建接口对象与上面有一定区别,需要包含时区信息
String url="jdbc:mysql://localhost:3306/数据库名?serverTimezone=UTC";
String name="root";
String pwd="root";
Connection conn=DriverManager.getConnection(url,name,pwd);
使用 Connection
对象的 prepareStatement
方法创建 PreparedStatement
对象,同时传入预编译的 SQL 语句,其中参数用 ?
占位。
String sql = "……";
// 例如:String sql = "SELECT * FROM your_table_name WHERE id = ?";
PreparedStatement pstmt = conn.prepareStatement(sql);
使用setObject()方法给参数赋值,比如我们来举个例子
String sql = "UPDATE your_table_name SET name = ? WHERE id = ?";
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setObject(1, name);
pstmt.setObject(2, id);
最后就是执行SQL语句,如果是增、删、改我们应该使用如下语句,并且他的返回值为数据库中被修改的行数
int row=pstmt.excuteUpdate(); // 返回的值为数据库中被修改的行数
如果我们要进行查询就要使用如下语句,他的返回值是数据库查询到的结果集
ResultSet rs=pstmt.excuteQuery();// 返回值类型为数据库中查询到的结果集