制作微网站公司百度贴吧官网网页
目录
一、HTML的使用
1. 文档结构标记
2. 文本标记
3. 列表标记
4. 链接和图片标记
5. 表格标记
6. 表单标记
二、流行的网页编辑器——HBuilder
三、JavaScript 基本概念
JavaScript 内置对象
浏览器对象模型
JavaScript 脚本使用
四、jQuery
1. jQuery 对象创建
2. 文档加载代码
3. 获取 jQuery 对象的方式
根据标记名
根据 ID
根据类
五、在java项目中以JDBC方式访问MySQL
一、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();// 返回值类型为数据库中查询到的结果集