<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一个微小的开始</title>
<style>
.red{
/* ctrl+/注释快捷键 */
color:red;
}
.speak{color:#FFA500;background-color:grey;width:160px;}
ul li{
color:blue;background-color:aquamarine; width:190px;
}
/* 后代选择器 */
table th{color:aquamarine;width:200px;}
</style>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./外部样式.css"><!--link用来链接外部文件,rel=stylesheet是指外部文件与本文件的关系-->
</head>
<body>
<p class="speak">类选择器</p>
<hl>这是一个标题</hl>
<p>这是一个段落</p>
<p class="rad">我要写一个列表</p>
<div class="rad">这个文字变红</div>
<ul>
<li>无序列表的第一行</li>
<li>无序列表的第二行</li>
</ul>
<!--有序列表-->
<ol>
<li>有序列表的第一行</li>
<li>有序列表的第二行</li>
<li>有序列表的第三行</li>
</ol>
<p>写一个表格</p>
<table border="1">
<caption>标题居中</caption>
<thead>
<tr><!--一行-->
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</tbody>
</table>
<!--我要插入一个图片-->
<img src="白羊座.jpg" art="200">
<!--插入超链接忘了-->
<br/>
<a href="https://www.runoob.com/try/try.php?filename=tryhtml_layout_divs">点击链接到</a>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500"
<h1 style="margin-bottom: 0;">网页标题</h1>
<div id="menu" style="background-color:#FFD700; height:200px;width:100px;float:left;"
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height: 200px;width:40px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">高冠诃</div>
</div>
<h2>表单</h2><!--action是提交数据的目标地址，method是提交的方式-->
<form action="/" 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="femal">女</label>
<br>
<!--复选框-->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送消息</label>
<br>
</form>
<img src="../imaegs/屏幕截图 2023-11-05 190639.png" alt="图片"><!--插入失败-->
<h1>小试牛刀</h1>
<h2>我也是</h2>
<h3>路在脚下</h3>
</body>
</html>
底层人民的快乐很简单，我有饭吃就很开心啦。
扫一扫
752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
