HTML基础——趣味小练习

linlinzi的学习日记

已于 2024-04-07 17:24:10 修改

阅读量237

点赞数 3

分类专栏： web全栈学习日记文章标签： html 前端学习

于 2024-03-28 22:15:49 首次发布

本文链接：https://blog.csdn.net/lqqqqqql6/article/details/137126040

版权

web全栈学习日记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

目的：熟悉相关操作+娱乐

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>linlinzi的第一个web练习</title>
</head>
<body>
<h1>欢迎光临linlinzi的线上烧烤店(基础版)</h1>
<h2><p>（所有订单都会顺着网线送过来哈哈哈哈）<del>bushi</del></h2>
&emsp;非常感谢您的支持！（新店开业，准备未全面请见谅！）<br/>
&emsp;本店新开业，为了回馈广大顾客的支持，我们准备了特别的优惠活动。<br/>
&emsp;只要您光临我们店铺，即可享受到折扣优惠和精美小礼品。
我们将竭诚为您提供最优质的服务和最美味的烧烤，让您在这里度过愉快的用餐时光。
欢迎您和您的朋友们一起前来品尝我们的特色美食，共同见证我们的成长和进步！
期待您的光临，让我们一起开启美好的烧烤之旅！</p>
<img src="imgs/烧烤.webp" style="max-width: 30%" style="max-height: 10%" alt="烧烤图片">
<h2>菜单</h2>
<h3>
<table>
    <tr>
        <td>商品名称</td>
        <td>原价</td>
        <td>现价</td>
    </tr>
    <tr>
        <td>苕皮</td>
        <td><del>3.5r</del></td>
        <td>2.5r</td>
    </tr>
    <tr>
        <td>年糕</td>
        <td><del>3r</del></td>
        <td>2r</td>
    </tr>
    <tr>
        <td>热狗</td>
        <td><del>3.5r</del></td>
        <td>2r</td>
    </tr>
    <tr>
        <td>豆干</td>
        <td><del>3r</del></td>
        <td>2r</td>
    </tr>
    <tr>
        <td>面筋</td>
        <td><del>3r</del></td>
        <td>2r</td>
    </tr>
    <tr>
        <td>韭菜</td>
        <td><del>3r</del></td>
        <td>2r</td>
    </tr>
    <tr>
        <td>五花肉</td>
        <td><del>5r</del></td>
        <td>3.5r</td>
    </tr>
    <tr>
        <td>鱿鱼</td>
        <td><del>10r</del></td>
        <td>6r</td>
    </tr>
    <tr>
        <td>鸡中翅</td>
        <td><del>8r</del></td>
        <td>5r</td>
    </tr>
    <tr>
        <td>羊肉串</td>
        <td><del>5r</del></td>
        <td>3.5r</td>
    </tr>

</table>
</h3>
    <hr/>
<h2>亲，请提交你的订单哟！</h2>
<form action="">
    <p>用户名：<input type="text"></p>
    <p>密&emsp;码：<input type="password"></p>
    <p>性&emsp;别：
        男<input type="radio" name="gender" value="1">
        女<input type="radio" name="gender" value="0">
    </p>

    <p>！！！部分城市暂且不能配送，请广大顾客见谅！！！</p>
    <p>城&emsp;市:<select name="城市选择" >
        <option>重庆</option>
        <option>江西</option>
        <option>四川</option>
        <option>山东</option>
        <option>北京</option>
        <option>安徽</option>
        <option>湖北</option>
        <option>湖南</option>
        <option>广西</option>
        <option>广东</option>
        <option>云南</option>
        <option>贵州</option>
        <option>陕西</option>
        <option>山西</option>
        <option>浙江</option>
        <option>福建</option>
        <option>台湾</option>
        <option>江苏</option>
        <option>海南</option>
        <option>深圳</option>
        <option>上海</option>
        <option>天津</option>
        </select></p>
    <p>备注：<textarea name="description" id="" cols="30" rows="10">请在此处描述你的备注</textarea></p>
    <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<input type="reset">&emsp; &emsp; &emsp; <input type="submit"></p>
</form>


</body>
</html>