htmlcssjavascript个人网站
时间: 2023-04-27 19:00:33 浏览: 73
HTML、CSS和JavaScript是构建个人网站的基本技术。HTML用于创建网页的结构和内容,CSS用于设计网页的样式和布局,JavaScript用于实现网页的交互和动态效果。通过学习和运用这些技术,可以打造出一个独具特色的个人网站,展示自己的作品和经历,吸引更多的访问者和关注者。
相关问题
htmlcssjavascript登录注册
HTML、CSS和JavaScript是web开发的三大核心技术,它们可以用于实现网站的各种功能,包括登录和注册。以下是一个简单的登录注册示例:
1. HTML:用于构建网页结构
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>登录</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="登录">
</form>
<h1>注册</h1>
<form>
<label for="reg-username">用户名:</label>
<input type="text" id="reg-username" name="reg-username"><br>
<label for="reg-password">密码:</label>
<input type="password" id="reg-password" name="reg-password"><br>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm-password"><br>
<input type="submit" value="注册">
</form>
</body>
</html>
```
2. CSS:用于美化网页样式
```
body {
font-family: Arial, sans-serif;
background-color: #F0F0F0;
}
h1 {
color: #333;
}
form {
background-color: #FFF;
padding: 20px;
border: 1px solid #CCC;
border-radius: 5px;
box-shadow: 0 0 5px #CCC;
margin-bottom: 20px;
}
input[type="text"],
input[type="password"],
input[type="submit"] {
display: block;
margin-bottom: 10px;
padding: 5px;
border-radius: 5px;
border: 1px solid #CCC;
width: 100%;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #333;
color: #FFF;
cursor: pointer;
}
```
3. JavaScript:用于实现交互逻辑
```
// 获取登录表单和注册表单
var loginForm = document.getElementsByTagName('form');
var regForm = document.getElementsByTagName('form');
// 给登录表单绑定submit事件
loginForm.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var username = this.username.value; // 获取用户名
var password = this.password.value; // 获取密码
console.log('用户名:' + username + ',密码:' + password);
});
// 给注册表单绑定submit事件
regForm.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var username = this['reg-username'].value; // 获取用户名
var password = this['reg-password'].value; // 获取密码
var confirmPassword = this['confirm-password'].value; // 获取确认密码
if (password !== confirmPassword) { // 检查密码是否一致
alert('两次输入的密码不一致!');
return false; // 阻止表单提交
}
console.log('用户名:' + username + ',密码:' + password);
});
```
以上是一个简单的HTML、CSS和JavaScript实现的登录注册功能示例。你可以根据实际需求进行更改和扩展。
htmlcssjavascript面试题
当然,请问以下是一些常见的HTML、CSS和JavaScript面试题:
HTML面试题:
1. 什么是HTML?它的全称是什么?
2. HTML5相比于HTML4有哪些新特性?
3. 请解释一下HTML语义化的概念。
4. 请解释一下HTML元素和标签的区别。
5. 请列举一些常见的HTML元素和其用途。
CSS面试题:
1. 什么是CSS?它的全称是什么?
2. CSS选择器有哪些类型?请举例说明。
3. 请解释一下CSS盒模型。
4. 什么是CSS优先级?如何计算优先级?
5. 如何使用CSS实现响应式布局?
JavaScript面试题:
1. 请解释一下JavaScript的基本数据类型。
2. 什么是闭包?它有什么作用?
3. 如何在JavaScript中处理异步编程?
4. 请解释一下事件委托的概念。
5. 请解释一下同步和异步的区别。
希望以上问题能帮助到你。如果你有其他问题,欢迎继续提问!
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)