
html/css 课程 – 第 1 课细分
第 1 课:基本 html 回顾和高级 html 元素简介
目标:
刷新基础 html 标签。引入中级html元素来构建更多功能性网页。
1。 html结构简介
首先简要说明 html 如何使用标签组织网页内容。强调html(超文本标记语言)用于构建网页,而css用于样式化。
要回顾的关键概念:
立即学习“前端免费学习笔记(深入)”;
, , : 说明每个html文档都有一个已定义的结构::包含整个网页的根元素。:包含标题、css 链接、脚本等元信息:包含所有可见内容,例如文本、图像以及用户与之交互的元素。
2。基本 html 标签回顾
标题(
到
):
解释标题按层次结构构建内容,从最大的 (
) 到最小的 (
)。
示例:
main heading
sub heading
段落 (
):
用于定义文本块或段落。
示例:
this is a paragraph.
锚点 (): 用于创建超链接。突出显示 href 等属性以进行链接。
示例:
图片 (): 用于显示图片。解释用于链接到图像文件的 src 属性和用于可访问性的 alt 属性。
示例:
@@##@@
3。中间 html 元素简介
3.1。表单(
表单用于收集用户输入。
基本表单结构:
表单元素的容器。可以包含操作(发送表单数据的位置)和方法(get/post)等属性。 定义输入元素的标签并提高可访问性。: 定义各种类型的输入字段,如文本、密码、复选框、单选框等
带有文本输入的简单表单示例:
3.2。列表(、、)
无序列表 () 和 有序列表 () 帮助以项目符号或编号列表的方式组织数据。列表项 () 定义列表中的每个项目。
无序列表和有序列表的示例:
- item 1
- item 2
- step 1
- step 2
3.3。表(、、、
表格允许结构化数据以行和列的形式显示。
:表的容器。:定义表中的一行。:定义表格中的一个单元格。
简单表格示例:
| name | age |
|---|---|
| john | 25 |
4。班级活动
4.1。回顾活动:
要求学生创建一个基本网页,其中包括:
标题 (
)
一段(
)
图像 (
)
示例:
welcome to my website
this is my first webpage.
@@##@@
4.2。指导练习:
创建一个简单的表单:引导学生创建一个简单的表单来收集用户输入(姓名和电子邮件)。包括
4.3。列表和表格:
要求学生创建一个包含他们最喜欢的事物的无序列表 () 和一个包含几行数据(姓名、年龄、最喜欢的颜色)的简单表格。
示例:
- reading
- coding
- traveling
| name | age |
|---|---|
| alice | 30 |
5。家庭作业
学生应该通过以下方式扩展他们的网页:
添加表单元素,例如复选框、单选按钮和提交按钮。自定义表单以收集其他用户信息(例如性别、爱好)。
示例:
6。额外提示
鼓励学生使用 w3c 标记验证服务等工具验证他们的 html。解释语义 html 的重要性以及为什么使用正确的标签对于可访问性和 seo 很重要。
总结
学生将复习基本的 html 标签,如标题、段落、图像和链接。他们将了解中级 html 元素:表单、列表和表格。实践练习和家庭作业将为他们提供创建更加结构化的网页的实践经验。
以上就是HTML/CSS 课程 – 课程或年级的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1629952.html
微信扫一扫
支付宝扫一扫