go17/skills/web/html/index.html
2024-12-22 16:34:46 +08:00

101 lines
2.9 KiB
HTML

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<p>这是一个<br> 段落</p>
<hr>
<!-- POST / body urlEncode data -->
<form action="https://www.baidu.com/test" method="post">
<!-- 文本输入框 -->
<label for="name">用户名:</label>
<input type="text" id="name" name="name" required>
<br>
<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male"></label>
<input type="radio" id="female" name="gender" value="female">
<label for="female"></label>
<br>
<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息</label>
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息2</label>
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息3</label>
<br>
<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
<iframe style="width: 100%;height: 200px;" src="https://www.mcube.top/docs/framework/">
<p>您的浏览器不支持 iframe 标签。</p>
</iframe>
<hr>
<table style="margin-top: 12px;" border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<hr>
<div style="width: 200px;height: 200px;background-color: aqua;">
</div>
<hr>
<div style="width: 200px;height: 200px;background-color: aqua;">
</div>
<hr>
<div style="width: 200px;height: 200px;background-color: blueviolet;">
</div>
<hr>
<span style="background-color: aqua;"><span>test1</span><span>test2</span></span>
<span id="my_test_id" style="background-color: aqua;">test</span>
<span style="background-color: aqua;">test</span>
</body>
<script>
document.getElementById("my_test_id").style.backgroundColor = 'blueviolet'
</script>
</html>