1.创建一个简单的HTML文档:
- 包含
<!DOCTYPE html>
声明。 - 包含
<html>
标签,并设置lang
属性为英语。 - 包含
<head>
标签,其中包含<meta charset="UTF-8">
和一个自定义的页面标题。 - 包含
<body>
标签,其中包含一个标题标签<h1>
和一个段落标签<p>
。 2.创建一个有序列表和无序列表: - 创建一个无序列表包含至少三个列表项,每个列表项可以是一些兴趣爱好。
- 创建一个有序列表包含至少三个列表项,每个列表项可以是你最喜欢的课程。 3.设计一个简单的表格:
- 创建一个包含表头的表格,表头包括姓名、年龄和城市。
- 在表格中添加两行数据,包含你自己和另一个虚构的人的信息。 4.创建一个链接到外部网页的超链接:
- 创建一个超链接,链接到你最喜欢的网站。设置链接文本为网站的名称。 5.添加一张图片到你的页面:
- 在页面中添加一张图片,并确保图片有一个合适的描述文本。
- 提示:使用
<img>
标签。 6.创建一个简单的表单: - 创建一个包含文本输入框、密码输入框和提交按钮的表单。
- 给每个输入框添加合适的标签,如用户名、密码等。 7.使用注释注解你的HTML代码:
- 在代码中添加注释,解释你代码的结构和目的。
答案
1. 创建一个简单的HTML文档
代码语言:javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
2. 创建一个有序列表和无序列表
代码语言:javascript复制<!-- 无序列表 -->
<ul>
<li>Hiking</li>
<li>Reading</li>
<li>Coding</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>Math</li>
<li>History</li>
<li>Science</li>
</ol>
3. 设计一个简单的表格
代码语言:javascript复制<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Your Name</td>
<td>Your Age</td>
<td>Your City</td>
</tr>
<tr>
<td>Fictional Person</td>
<td>30</td>
<td>Fictional City</td>
</tr>
</tbody>
</table>
4. 创建一个链接到外部网页的超链接
代码语言:javascript复制<a href="https://www.example.com">Example Website</a>
5. 添加一张图片到你的页面
代码语言:javascript复制<img src="image.jpg" alt="Description of the image">
6. 创建一个简单的表单
代码语言:javascript复制<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Submit">
</form>
7. 使用注释注解你的HTML代码
代码语言:javascript复制<!-- This is a simple HTML document -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata for character set and title -->
<meta charset="UTF-8">
<title>My First HTML Page</title>
</head>
<body>
<!-- Main content -->
<h1>Welcome to My Page</h1>
<p>This is a simple HTML page.</p>
<!-- Lists, tables, links, images, and form -->
<ul>
<!-- Unordered list -->
<li>Hiking</li>
<li>Reading</li>
<li>Coding</li>
</ul>
<!-- ... -->
</body>
</html>
我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!