HTML/CSS 课程 - 课程或年级-css教程-PHP中文网

HTML/CSS 课程 - 课程或年级

DDD

发布： 2024-10-04 14:20:27

转载

547人浏览过

html/css 课程 - 课程或年级

html/css 课程 - 第 1 课细分

第 1 课：基本 html 回顾和高级 html 元素简介

目标：

刷新基础 html 标签。
引入中级html元素来构建更多功能性网页。

1。 html结构简介

首先简要说明 html 如何使用标签组织网页内容。强调html（超文本标记语言）用于构建网页，而css用于样式化。

要回顾的关键概念：

立即学习“前端免费学习笔记（深入）”；

, , : 说明每个html文档都有一个已定义的结构：
- ：包含整个网页的根元素。
- ：包含标题、css 链接、脚本等元信息
- ：包含所有可见内容，例如文本、图像以及用户与之交互的元素。

2。基本 html 标签回顾

标题（
到
）：
解释标题按层次结构构建内容，从最大的 (
) 到最小的 (
)。

示例：

    <h1>main heading</h1>
    <h2>sub heading</h2>

登录后复制

段落 (
):
用于定义文本块或段落。

示例：

    <p>this is a paragraph.</p>

登录后复制

锚点 (): 用于创建超链接。突出显示 href 等属性以进行链接。

示例：

    <a href="https://example.com">click here</a>

登录后复制

图片 (): 用于显示图片。解释用于链接到图像文件的 src 属性和用于可访问性的 alt 属性。

示例：

    @@##@@

登录后复制

3。中间 html 元素简介

3.1。表单（

表单用于收集用户输入。
基本表单结构：
- :
  表单元素的容器。可以包含操作（发送表单数据的位置）和方法（get/post）等属性。
- : 定义输入元素的标签并提高可访问性。
- : 定义各种类型的输入字段，如文本、密码、复选框、单选框等

带有文本输入的简单表单示例：

    <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。列表（

、

、
）

无序列表 (
)
和有序列表 (
)
帮助以项目符号或编号列表的方式组织数据。
列表项 (
)

无序列表和有序列表的示例：

多个迹象表明你还是PHP菜鸟

我愿意把本文归入我的“编程糗事”系列。尽管在正规大学课程中，接触到软件工程、企业级软件架构和数据库设计，但我还是时不时地体会到下述事实带给我的“罪恶”感，当然，都是我的主观感受，并且面向Eclipse：　　你是PHP菜鸟，如果你：　　1. 不会利用如phpDoc这样的工具来恰当地注释你的代码　　2. 对优秀的集成开发环境如Zend Studio或Eclipse PDT视而不见　　3

394

查看详情

    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>

    <ol>
      <li>step 1</li>
      <li>step 2</li>
    </ol>

登录后复制

3.3。表（

、、

、

）

表格允许结构化数据以行和列的形式显示。

：表的容器。

：定义表中的一行。

：定义表格中的一个单元格。

：定义表格中的标题单元格（可选）。

简单表格示例：

    <table>
      <tr>
        <th>name</th>
        <th>age</th>
      </tr>
      <tr>
        <td>john</td>
        <td>25</td>
      </tr>
    </table>

登录后复制

4。班级活动

4.1。回顾活动：

要求学生创建一个基本网页，其中包括：
- 标题 (
  )
- 一段(
  )
- 图像 ()

示例：

    <h1>welcome to my website</h1>
    <p>this is my first webpage.</p>
    @@##@@

登录后复制

4.2。指导练习：

创建一个简单的表单：引导学生创建一个简单的表单来收集用户输入（姓名和电子邮件）。
- 包括、和。

4.3。列表和表格：

要求学生创建一个包含他们最喜欢的事物的无序列表 (

示例：

    <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。额外提示