html/css 课程 - 第 1 课细分
第 1 课：基本 html 回顾和高级 html 元素简介
目标：
- 刷新基础 html 标签。
- 引入中级html元素来构建更多功能性网页。
1。 html结构简介
首先简要说明 html 如何使用标签组织网页内容。强调html（超文本标记语言）用于构建网页，而css用于样式化。
要回顾的关键概念：
立即学习“前端免费学习笔记（深入）”；
-
<html>, <head>, <body>: 说明每个html文档都有一个已定义的结构：
- <html>：包含整个网页的根元素。
- <head>：包含标题、css 链接、脚本等元信息
- <body>：包含所有可见内容，例如文本、图像以及用户与之交互的元素。
2。基本 html 标签回顾
- 标题（<h1> 到 <h6>）：解释标题按层次结构构建内容，从最大的 (<h1>) 到最小的 (<h6>)。
示例：
<h1>main heading</h1>
<h2>sub heading</h2>
- 段落 (<p>): 用于定义文本块或段落。
示例：
<p>this is a paragraph.</p>
- 锚点 (<a>): 用于创建超链接。突出显示 href 等属性以进行链接。
示例：
<a href="https://example.com">click here</a>
- 图片 (<img>): 用于显示图片。解释用于链接到图像文件的 src 属性和用于可访问性的 alt 属性。
示例：
<img src="image.jpg" alt="a descriptive text">
3。中间 html 元素简介
3.1。表单（<form>、<input>、<label>）
表单用于收集用户输入。
-
基本表单结构：
- <form>: 表单元素的容器。可以包含操作（发送表单数据的位置）和方法（get/post）等属性。
- <label>: 定义输入元素的标签并提高可访问性。
- <input>: 定义各种类型的输入字段，如文本、密码、复选框、单选框等
带有文本输入的简单表单示例：
<form action="/submit" method="post">
<label for="name">name:</label>
<input type="text" id="name" name="name">
<label for="email">email:</label>
<input type="email" id="email" name="email">
</form>
3.2。列表（<ul>、<ol>、<li>）
- 无序列表 (<ul>) 和 有序列表 (<ol>) 帮助以项目符号或编号列表的方式组织数据。
- 列表项 (<li>) 定义列表中的每个项目。
无序列表和有序列表的示例：
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<ol>
<li>step 1</li>
<li>step 2</li>
</ol>
3.3。表（<table>、<tr>、<td>、<th>）
-
表格允许结构化数据以行和列的形式显示。
- <table>：表的容器。
- <tr>：定义表中的一行。
- <td>：定义表格中的一个单元格。
- <th>：定义表格中的标题单元格（可选）。
简单表格示例：
<table>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>john</td>
<td>25</td>
</tr>
</table>
4。班级活动
4.1。回顾活动：
-
要求学生创建一个基本网页，其中包括：
- 标题 (<h1>)
- 一段(<p>)
- 图像 (<img>)
示例：
<h1>welcome to my website</h1>
<p>this is my first webpage.</p>
<img src="myimage.jpg" alt="an example image">
4.2。指导练习：
- 创建一个简单的表单：引导学生创建一个简单的表单来收集用户输入（姓名和电子邮件）。
- 包括 <label>、<input type="text"> 和 <input type="email">。
4.3。列表和表格：
- 要求学生创建一个包含他们最喜欢的事物的无序列表 (<ul>) 和一个包含几行数据（姓名、年龄、最喜欢的颜色）的简单表格。
示例：
<ul>
<li>reading</li>
<li>coding</li>
<li>traveling</li>
</ul>
<table>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>alice</td>
<td>30</td>
</tr>
</table>
5。家庭作业
学生应该通过以下方式扩展他们的网页：
- 添加表单元素，例如复选框、单选按钮和提交按钮。
- 自定义表单以收集其他用户信息（例如性别、爱好）。
示例：
<form action="/submit" method="POST">
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="submit" value="Submit">
</form>
6。额外提示
- 鼓励学生使用 w3c 标记验证服务等工具验证他们的 html。
- 解释语义 html 的重要性以及为什么使用正确的标签对于可访问性和 seo 很重要。
总结
- 学生将复习基本的 html 标签，如标题、段落、图像和链接。
- 他们将了解中级 html 元素：表单、列表和表格。
- 实践练习和家庭作业将为他们提供创建更加结构化的网页的实践经验。
