ofo的网站用什么做的seo网站推广专员
准备
确定安装好以下工具：
- 文本编辑器（我用的VScode）
- 现代网络浏览器（firefox，Google，必应）
数据库准备
写前端之前先准备数据库
开启小皮，开启Apache、FTP、MySQL三个套件
然后在软件管理下载所需软件
然后打开phpAyAdmin,登录用户名和密码（可以在数据库看到）
然后点击数据库，输入数据库名，点击创建
输入想要的名字（不可为中文，否则后续无法连接），点击执行
然后自己编辑，创建列名
搭建网站
首先在小皮面板的根目录下的WWW中创建一个文件夹，来存储我们的网站前端的设计
打开小皮面板，创建网站，根目录就选到我们刚才建立的那个文件夹
网站首页要更改为写的前端html文件
搭建一个基础的html结构
首先创建一个文件夹，然后打开VScode，新建文件，开始搭建网页的html结构
HTML的基本结构
| 标签 | 定义 | 说明 | 位置 |
|---|---|---|---|
| <!DOCTYPE html> | HTML声明标签 | 位于文档开头，非HTML标签，告诉浏览器该文档用的是HTML5标准来确保浏览器以 HTML5 的规则进行解析和渲染网页。 | 开头 |
| <html></html> | HTML标签 | 页面中最大的标签，即根标签 | 包含除声明标签外的所有内容 |
| <head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title | 文档开头部分 |
| <title></title> | 文档的标题 | 让页面拥有自己的标题 | <head>里 |
| <body></body> | 文档的主题 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 | <head>外，<html>里 |
html标签显示的范围是整个页面的范围
head标签显示的范围是红色方框
head下面的title显示的是方框里的文字
body显示
lang语言种类
在html标签，用来定义当前文档显示的语言
en-----英文
zh-CN-------中文
字符集
字符集是多个字符的集合，以便计算机能够识别和存储各种文字
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
<mate charset='UTF-8'>
charset常用的值有：GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码，基本包含了全世界所有国家所用到的字符
视口设置（viewport）
帮助网页在各种屏幕尺寸和分辨率的设备上自适应显示。通过设置 <meta name="viewport">，可以控制页面的缩放、宽度等特性。
最常见的视口设置如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width：设定页面宽度为设备屏幕的宽度。
initial-scale=1.0：设定页面初始缩放比例为 1（即默认大小）。
通过设置视口，网页可以在移动设备上以适当的比例显示，避免出现过小或过大的界面。
标题标签
<h1></h1>~~<h6></h6>
位置
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
段落标签和换行标签
段落标签：<p></p>
换行标签:<br/>
使用段落标签，两个段落之间的空隙比较大；
使用换行标签，两行之间的空隙比较小
了解充分后就写
<!DOCTYPE html>
<html lang="en">
<head><mate charset='UTF-8'><mate name='viewport' content="width=device-width,initial-scale=1.0"><title>我的第一次尝试</title>
</head>
<body><h1>登录cookie</h1>
</body>
</html>link标签
<link> 标签用于将外部资源（如样式表、图标等）链接到 HTML 文档中。最常见的使用场景是引用外部的 CSS 样式表。
rel="stylesheet"：指定链接的资源类型为样式表。href="styles.css"：指定样式表的文件路径。
表单标签
在日常生活中，我们使用手机电脑，各种登录注册，输入密码，账户等都会用到表单标签
qq登录中被框起来的这三个都是表单标签
在HTML中，一个完整的表单通常由表单域，表单控件（也称表单元素）和提示信息3个部分构成
表单域
上方的qq的登录界面就可以看作是一个表单域，当我们输入账户密码后，点击登录，就可以将我们输入的消息输送给后台
表单域是一个包含表单元素的区域
在HTML标签中，<from>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器
语法格式：
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>常用属性：
| 属性 | 属性值 | 作用 |
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其值为get或post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
input表单元素
input翻译过来是输入，表单中<input>标签是用于收集用户输入的信息的
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多形式（可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）
格式：
<input type='属性'><input>标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
type属性的属性值及其描述：
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其输入文本，默认宽度为20个字符 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册和登录界面</title>
<link rel="stylesheet" href="styles.css">
<style>/*设置背景*/body{background-image:url('1.png');background-size: cover; background-repeat: no-repeat;
}
/*设置容器样式*/
.container{
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
/*设置表单容器样式*/
.form-container{
margin:20px;
padding:20px;
border:1px solid #ccc;
width:300px;
}
/*设置输入框样式*/
input{
margin-bottom:10px;
width:100%;
}
/* 设置按钮样式*/
button{
width:100%;
}
</style>
</head>
<div class="container">
<!-- 注册表单 --><div class="form-container"><h2>注册</h2><form id="registerForm"><input type="text" name="username" placeholder="username" required><input type="password" name="password" placeholder="password" required><button type="submit">注册</button></form></div><!-- 登录表单 -->
<div class="form-container"><h2>登录</h2><form id="loginForm"><input type="text" name="username" placeholder="username" required><input type="password" name="password" placeholder="password" required><button type="submit">登录</button></form>
</div>
</div><script>
//注册表单提交事件监听
document.getElementById('registerForm').addEventListener('submit', function(e) {e.preventDefault();//阻止默认提交行为let formData = new FormData(this);//获取表单数据//发送POST请求到zhuce.phpfetch('zhuce.php', {method: 'POST',body: formData}).then(response => response.text())//将响应转换为文本格式.then(data => {alert("注册成功，你可以登录了");//提示注册成功});
});//登录表单提交事件监听
document.getElementById('loginForm').addEventListener('submit', function(e) {e.preventDefault();//阻止默认提交行为let formData = new FormData(this);//获取表单数据// 发送POST请求到denglu.phpfetch('denglu.php', {method: 'POST',body: formData}).then(response => response.text())//将响应转换为文本格式.then(data => {alert(data);//提示返回的数据if(data ==='登录成功') {window.location.href = 'welcome.php';//重定向到welcome.php页面
}});
});
</script>
</body></html>
我们的前端设计完成
这里还需要登录成功的跳转，所以另建一个网页在这个文件之下，作登录成功的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<style>body {background-image: url('2.jpg');background-size: cover;background-repeat: no-repeat;color: black; text-align: center; }</style>
</head>
<body>
<h1>Welcome!</h1>
<h2>登录成功</h2>
<p>开始自我的探索吧</p>
</body>
</html> 
从小皮里面打开网站，进行注册试试
成功
为了禁用f12和右键菜单，我们将前端代码更改以下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>注册和登录界面</title>
<link rel="stylesheet" href="styles.css">
<style>/*设置背景*/body{background-image:url('1.png');background-size: cover; background-repeat: no-repeat;
}
/*设置容器样式*/
.container{
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
/*设置表单容器样式*/
.form-container{
margin:20px;
padding:20px;
border:1px solid #ccc;
width:300px;
}
/*设置输入框样式*/
input{
margin-bottom:10px;
width:100%;
}
/* 设置按钮样式*/
button{
width:100%;
}
</style>
</head>
<div class="container">
<!-- 注册表单 --><div class="form-container"><h2>注册</h2><form id="registerForm"><input type="text" name="username" placeholder="username" required><input type="password" name="password" placeholder="password" required><button type="submit">注册</button></form></div><!-- 登录表单 --><div class="form-container"><h2>登录</h2><form id="loginForm"><input type="text" name="username" placeholder="username" required><input type="password" name="password" placeholder="password" required><button type="submit">登录</button></form></div>
</div><script>
//注册表单提交事件监听
document.getElementById('registerForm').addEventListener('submit', function(e) {e.preventDefault();//阻止默认提交行为let formData = new FormData(this);//获取表单数据//发送POST请求到zhuce.phpfetch('zhuce.php', {method: 'POST',body: formData}).then(response => response.text())//将响应转换为文本格式.then(data => {alert("注册成功，你可以登录了");//提示注册成功});
});//登录表单提交事件监听
document.getElementById('loginForm').addEventListener('submit', function(e) {e.preventDefault();//阻止默认提交行为let formData = new FormData(this);//获取表单数据// 发送POST请求到denglu.phpfetch('denglu.php', {method: 'POST',body: formData}).then(response => response.text())//将响应转换为文本格式.then(data => {alert(data);//提示返回的数据if(data ==='登录成功') {window.location.href = 'welcome.php';//重定向到welcome.php页面
}});
});
</script><script>
// 禁用F12和开发者工具
document.addEventListener('keydown', function(e) {if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I') || (e.ctrlKey && e.shiftKey && e.key === 'J') ||(e.ctrlKey && e.key === 'U')) {e.preventDefault();alert('开发者工具已禁用');return false;}
});// 禁用右键菜单
document.addEventListener('contextmenu', function(e) {e.preventDefault();alert('右键菜单已禁用');return false;
});
</script>
</body></html>
