vanilla 框架的10个入门演示代码
- Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
- 简单的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
</tr>
</table>
</body>
</html>
- 图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<body>
<img src="image.jpg" alt="图片">
</body>
</html>
- 超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a href="https://www.google.com">Google</a>
</body>
</html>
- 列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<h2>有序列表</h2>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ol>
<h2>无序列表</h2>
<ul>
<li>红色</li>
<li>蓝色</li>
<li>绿色</li>
</ul>
</body>
</html>
- 表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br><br>
<label for="gender">性别：</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br><br>
<label for="message">留言：</label><br>
<textarea id="message" name="message" rows="5" cols="30"></textarea><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
- JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<button onclick="alert('Hello World!')">点击按钮</button>
</body>
</html>
- CSS 样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 样式</title>
<style>
h1 {
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
</body>
</html>
- 引入外部 CSS 样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>引入外部 CSS 样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一段文字。</p>
</body>
</html>
- 引入外部 JavaScript 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>引入外部 JavaScript 文件</title>
<script src="script.js"></script>
</head>
<body>
<h1>这是一个标题</h1>
<button onclick="showMessage()">点击按钮</button>
</body>
</html>
以上是 10 个入门演示代码，可以帮助初学者快速上手 vanilla 框架。
原文地址: https://www.cveoy.top/t/topic/0Lp 著作权归作者所有。请勿转载和采集!