web前端结构_HTML入门(五)_解析pink老师综合案例

南下000

于 2021-11-28 11:02:45 发布

阅读量300

点赞数

CC 4.0 BY-SA版权

分类专栏：前端入门_html学习文章标签：前端 html

本文链接：https://blog.csdn.net/qq_53760978/article/details/121492037

本文是pink老师的基础HTML综合案例教程，通过一个恋爱页面的数据收集表格制作，介绍HTML的基本用法。教程首先分析了需求，然后展示了如何使用HTML的table标签来构建页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础html综合案例

1. 需求部分：

pink老师教学中，向我们展示了一个恋爱页面的的简单制作，首先第一步分析需求，图中是一个数据收集表格
图片摘自pink老师视频
如图所示，此资料收集表格可以看成如图所示的表格

在这里插入图片描述

代码实现

主要使用到的标签 table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <h4>青春不常在，抓紧谈恋爱</h4>
        </tr>
        <!-- 第一行 -->
        <tr>
            <td>性别:</td>
            <!-- type属性为radio 单选按钮 通过设置其name值相同，控制用户只能选一个 -->
            <td><input type="radio" name="sex" id=man><label for="man"><img src="img.jpg"><

最低0.47元/天解锁文章