web前端从入门到精通（二）

最新推荐文章于 2021-09-12 15:34:50 发布
最新推荐文章于 2021-09-12 15:34:50 发布
阅读量258 收藏 3
点赞数 3
分类专栏： 笔记 文章标签： web html html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46315852/article/details/117463231
版权

今天发布几个在课堂上的小练习，适用于小白，小编是带着小白共同进步成为大佬偶。。。

实训练习

关卡1菜谱

代码如下：

<!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>
<h1>《糖醋排骨》的制作方法</h1>

<p>
<strong><text>菜品名称：糖醋排骨</text><br>
<text>市场价格：</text></strong><text>26</text><br>
<strong><text>会员价格：</text></strong><text style="color:red">24</text><br>
<strong><text>使用配料：</text></strong><text>排骨、糖、醋</text><br>
<strong><text>菜品类型：</text></strong><text>炒菜</text>
</p>
<strong><em><u><text>做法</text></u></em></strong>
<p>
    1.猪小排洗净，晾干水份备用。<br>
    2.锅内倒少量油，烧热之后，爆香姜片；<br>
    3.放入排骨，一直煸炒到排骨变色后，表面金黄微焦；<br>
    4.此时就可以放入黄金比例中的调料了，顺序是，先放一汤勺料酒，接着两汤勺酱油，三汤勺米醋最后四汤勺白糖，炒匀；<br>
    5.再倒入能没过排骨的开水，调中小火焖20分钟。<br>
    6.20分钟后调入盐，开大火收汁，收到汁浓色亮时，撇入芝麻点綴即可出锅(锅里剩下的姜片丢掉不用，最后大火收计时注意多翻动锅内的排骨，避免烧焦喲! ) 。<br>
    
</p>
<hr>
<text>&copy 2015 阿婆私房菜</text> 
    
</body>
</html>

运行截图：
在这里插入图片描述

关卡2

代码如下：

<!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>
<div>
<h3>楚乔传</h3>
    <div>
        <p>中国大陆第57集/58集（DVD版）<br><br>
            《楚乔传》是由慈文传媒，蜜湾影业.克顿传媒联合出品的女性励志传奇古装剧，由吴锦源执导，嘉纹.杨涛.陈岚编剧，赵丽颖.林更新.窦骁李沁领街主演,邓伦、金士杰特邀出演。王廖霖，牛骏峰，黄梦莹.田小洁，孙宁。金翰.邢昭林. 月、朱圣神、阮圣文.李若嘉.苗苗等联合出演，[1]谈剧改端自潇湘冬儿小说《11处特工皇妃》,讲述了西魏乱世中, -个特立独行的女奴楚乔,在协助建立新政权过程中关于守护。背叛.信仰、爱情的故事，
        </p>
        <img src="img/1.jpg" style="height:200px;width:160px;"><br>
        <a href="#1">第1集</a>&nbsp<a href="#2">第2集</a>&nbsp<a href="#3">第3集</a>&nbsp<a href="#4">第4集</a>&nbsp<a href="
        #5">第5集</a><br><br>
        <strong><text id="1">第一集（分集以TV版为准）</text></strong>
        <p >&nbsp &nbsp 
        </p>
    </div>
</div>
</body>
</html>

运行截图：
在这里插入图片描述
文章中间内容自己写吧，可能是一个实训班级，这个楚乔传相似律高原创发不了，所以只能把中间内容删除了

关卡3

要求：
 掌握HTML列表标签
 掌握HTML表格标签
代码如下：

<!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>
    <text><strong> 软件编程语言</strong></text>
    <ul>
        <li>Google</li>
        <li>baidu</li>
        <li>Bing</li>
        <li>Sogou</li>
    </ul>

    <text><strong> 搜索引擎名</strong></text>
    <ol>
        <li>java</li>
        <li>C++</li>
        <li>Python</li>
        <li>JavaScript</li>
    </ol>
   
    <text><strong> 健康食品</strong></text>
    <dt>
        <dt>水果</dt>
        <dd>苹果</dd>
        <dd>香蕉</dd>
        <dt>蔬菜</dt>
        <dd>西兰花</dd>
        <dd>菠菜</dd>
    </dt>
    <h3 align="center">小说排行榜</h3>
    <table border="1" height="500" width="1000" cellspacing="0" align="center">

    <tr align="center">
   
    <td><strong>序号</strong></td>
    <td><strong>关键词</strong></td>
    
    <td><strong>趋势</strong></td>
    
    <td><strong>今日搜索</strong></td>
    
    <td><strong>最近七日</strong></td>
    
    <td><strong>相关链接</strong></td>
    

    </tr>
    
    <tr align="center">
    
        <td>1</td>
    
    <td>鬼吹灯</td>
    
    <td><img src="img/up.jpg"></td>
    
    <td>356</td>
    
    <td>3560</td>
    
    <td><a href="">贴吧</a>&nbsp;<a href="">图片</a>&nbsp;<a href="">百科</a></td>
    
    </tr>
    
    <tr align="center">
    
  
        <td>1</td>
    
    <td>鬼吹灯</td>
    
    <td><img src="img/down.jpg"></td>
    
    <td>356</td>
    
    <td>3560</td>
    
    <td><a href="">贴吧</a>&nbsp;<a href="">图片</a>&nbsp;<a href="">百科</a></td>
    
    </tr>
    
    <tr align="center">
    
     
        <td>1</td>
    
    <td>鬼吹灯</td>
    
    <td><img src="img/up.jpg"></td>
    
    <td>356</td>
    
    <td>3560</td>
    
    <td><a href="">贴吧</a>&nbsp;<a href="">图片</a>&nbsp;<a href="">百科</a></td>
    
    </tr>
    <tr align="center">
    
     
        <td>1</td>
    
    <td>鬼吹灯</td>
    
    <td>1</td>
    
    <td>356</td>
    
    <td>3560</td>
    
    <td><a href="">贴吧</a>&nbsp;<a href="">图片</a>&nbsp;<a href="">百科</a></td>
    
    </tr>
    <tr align="center">
    
     
        <td>1</td>
    
    <td>鬼吹灯</td>
    
    <td>1</td>
    
    <td>356</td>
    
    <td>3560</td>
    
    <td><a href="">贴吧</a>&nbsp;<a href="">图片</a>&nbsp;<a href="">百科</a></td>
    
    </tr>
    <tr align="center">
    
     
        <td>1</td>
    
    <td>鬼吹灯</td>
    
    <td>1</td>
    
    <td>356</td>
    
    <td>3560</td>
    
    <td><a href="">贴吧</a>&nbsp;<a href="">图片</a>&nbsp;<a href="">百科</a></td>
    
    </tr>
    <tr align="center">
    
     
        <td>1</td>
    
    <td>鬼吹灯</td>
    
    <td>1</td>
    
    <td>356</td>
    
    <td>3560</td>
    
    <td><a href="">贴吧</a>&nbsp;<a href="">图片</a>&nbsp;<a href="">百科</a></td>
    
    </tr>
    </table>
  
</body>
</html>

运行截图：
在这里插入图片描述

关卡4 个人简历

要求：
掌握HTML 表单制作
知识：
<form></form>表单标签
<table></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>关卡3</title>
    <style>
        table td {
            width: 110px;
            height: 40px;
            text-align: center;
            overflow: hidden;
        }

        table td input {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <h2 style="text-align: center;">个人简历</h2>
    <form action="">
        <table border="1" align="center">
            <tr>
                <td>姓名</td>
                <td><input type="text"></td>
                <td>性别</td>
                <td><input type="text"></td>
                <td>出生年月</td>
                <td><input type="text"></td>
                <td rowspan=4><input type="file"></td>
            </tr>
            <tr>
                <td>民族</td>
                <td><input type="text"></td>
                <td>政治面貌</td>
                <td><input type="text"></td>
                <td>身高</td>
                <td><input type="text"></td>

            </tr>
            <tr>
                <td>学制</td>
                <td><input type="text"></td>
                <td>学历</td>
                <td><input type="text"></td>
                <td>户籍</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>专业</td>
                <td><input type="text"></td>
                <td colspan="2">毕业学校</td>
                <td colspan="2"><input type="text"></td>
            </tr>
            <tr>
                <th colspan="7">技能、特长或爱好</th>
            </tr>
            <tr>
                <td>外语等级</td>
                <td colspan="2"><input type="text"></td>
                <td>计算机</td>
                <td colspan="3"><input type="text"></td>
            </tr>
            <tr>
                <td colspan="7">个人履历</td>
            </tr>
            <tr>
                <td>时间</td>
                <td colspan="2">单位</td>
                <td colspan="4">经历</td>
            </tr>
            <tr>
                <td><input type="text"></td>
                <td colspan="2"><input type="text"></td>
                <td colspan="4"><input type="text"></td>
            </tr>
            <tr>
                <td><input type="text"></td>
                <td colspan="2"><input type="text"></td>
                <td colspan="4"><input type="text"></td>
            </tr>
            <tr>
                <td><input type="text"></td>
                <td colspan="2"><input type="text"></td>
                <td colspan="4"><input type="text"></td>
            </tr>
            <tr>
                <td colspan="7">联系方式</td>
            </tr>
            <tr>
                <td>通信地址</td>
                <td colspan="2"><input type="text"></td>
                <td>联系电话</td>
                <td colspan="3"><input type="text"></td>
            </tr>
            <tr>
                <td>E-mail</td>
                <td colspan="2"><input type="text"></td>
                <td>邮编</td>
                <td colspan="3"><input type="text"></td> 
            
          
            </tr>
          
        </table>
    </form>
</body>

</html>

运行截图：
简历
记得点赞关注偶
在这里插入图片描述

张张必须学习
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf
Ajax入门到精通
weixin_47750287的博客
03-08 1994
本文介绍了Ajax的概念，四种发送Ajax请求的方式，三种解决Ajax请求跨域的方案。
Ajax入门到精通全套完整版
不要回答的博客
06-01 354
p1/30 Ajax第四阶段的学习内容介绍 p2/30 全局刷新和局部刷新以及两种刷新方式的对比 p3/30 异步对象【Ajax借助异步对象完成局部刷新】 p4/30 Ajax概念 p5/30 创建异步对象的步骤第一部分【创建异步对象】 p6/30 创建异步对象的步骤第二部分【readyState】 p7/30 创建异步对象的步骤第三部分 p8/30 全局刷新计算BMI创建页面【身体质量指数】 <html> <head> <title>全局
【Ajax】HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors
热门推荐
YK菌的博客
02-23 3万+
文章目录1. Ajax概述1.1 AJAX 简介1.2 XML 简介1.3 AJAX 的特点1.3.1 AJAX 的优点1.3.2 AJAX 的缺点2. 原生AJAX 的基本使用2.0 准备工作2.1 核心对象2.2 使用步骤2.3 使用案例1. GET 请求设置请求参数2. POST请求2.4 解决IE 缓存问题2.5 AJAX 请求状态3. jQuery 中的AJAX3.1 get 请求3.2 post 请求4. 跨域4.1 同源策略4.2 如何解决跨域4.2.1 JSONP4.2.2 CORS 1.
三句话让 AJAX 为我欲罢不能
VectorX's Blog
09-12 777
1、AJAX 简介 2、XML 简介 3、AJAX 的特点 AJAX 的优点 AJAX 的缺点 4、HTTP 协议 请求报文 响应报文 状态码分类表 常见的响应状态码 5、开发准备 安装 Node.js 使用 express 案例前准备 6、AJAX 发送 GET 请求 GET 设置请求行
《Web前端开发从入门到精通》.pdf
10-03
Web前端开发从入门到精通 本资源摘要信息涵盖了Web前端开发的所有知识点，从HTML基础课程到JavaScript高级实战，涵盖了CSS基础课程、jQuery实战、常用库和前端框架、HTML5新功能和高级机制、CSS3新特性详解、实战...
前端开发从入门到精通【第二弹】
07-22
教程名称：前端开发从入门到精通【第二弹】 课程目录：【】DOM ｓｃｒｉｐｔing Web Design with Javaｓｃｒｉｐｔ second edition【】Even Faster Web Sites【高性能网站建设进阶指南】【】High Performance ...
web前端系列 html5入门到精通 视频教程
03-01
web前端系列 html5入门到精通 视频教程，百度云链接 ，永久有效！
Web-前端html+css从入门到精通 164. column分栏布局.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基础。本知识点主要聚焦于“column分栏布局”，这是一种在网页设计中非常常见的布局方式，用于将内容按照一定的列数进行排列，如两栏、三栏或者更多栏。在描述的文件"Web-...
Java Web从入门到精通光盘18-21
11-29
【Java Web从入门到精通光盘18-21】是一个涵盖了Java Web开发基础到进阶的教程资源，旨在帮助初学者系统学习并掌握这一领域。在这个光盘中，你可能会遇到一系列关于Web应用程序开发的知识点，包括但不限于以下内容：...
ajax基础教程和ajax从入门到精通
04-24
ajax基础教程，介绍浏览器历史，各种相关技术点，ajax开发对象等。从入门到精通，对新手很有用。
Ajax从入门到精通
10-09
第1部分: Ajax简介 第2部分: 使用JavaScript和Ajax发出异步请求 第3部分: Ajax中的高级请求和响应 第4部分: 利用DOM进行Web响应
ajax从入门到精通视频
01-20
黑马程序猿ajax从入门到精通视频！！！！！！！！！！！
AJAX技术（从入门到精通）
07-14
AJAX从入门到精通，包括源代码，值得一看！
AJAX从入门到精通
08-24
两本书 一本为AJAX新手快车道（已经加了书签目录） 一本为AJAX开发简略(含续一) 都是PDF格式的 第一本用来入门，第二本用来提高，同时工作的时候可以参考 推荐用foxit reader打开
Ajax从入门到精通（全）
码农研究僧的博客
07-15 1618
前言 异步JavaScript和XML 快速地将增量更新于用户界面，不需刷新整个页面即可回应用户操作 一种独立于 Web 服务器软件的浏览器技术 全局刷新：整个页面被刷新覆盖，传输大量数据 局部刷新：内部被刷新覆盖，内部有发送请求，传输量少 即ajax的核心为局部刷新 ...
js+ajax+jquery+easyui从入门到精通（项目实战）
07-16
1.javascript从入门到精通，为学习ajax打基础；2.ajax技术从零开始学，深入研究ajax的原理及使用，通过一些使用案例讲解；3.easyui从入门到精通课程，详细介绍各种常用控件的使用方法，结合项目模块实战；4.jquery应用：主要讲解对复杂及常用ui界面的设计，利用jquery技术基础，熟练掌握实现各种功能的技巧。
Ajax+jquery从入门到精通2017视频教程
05-06
ajax技术是从事WEB开发的课程，本课程是在js及jsp课程的基础上的提高课，从ajax初级开始讲解，主要包括ajax的xmlhttprequest对象的创建，事件，状态变化，回调函数定义等详细讲解，并包含大量的实战案例；prototype插件的应用；dwr插件的应用；json格式数据，jquery的深入讲解与实战训练，共22个视频教程，PPT课件及上课源代码在购买后可以下载
flask web开发从入门到精通 云盘
最新发布
08-02
《Flask Web开发从入门到精通》是一本介绍如何使用Flask来进行Web开发的书籍。Flask是一个基于Python的轻量级Web框架，它简单易学、灵活且功能强大，适用于各种规模的Web开发项目。 这本书从基础概念开始讲解，详细介绍了Flask的工作原理、核心组件和基本用法。读者可以学习如何搭建一个简单的Flask应用，并通过实例了解路由、模板、表单处理、数据库操作等关键知识点。书中还提供了大量的示例代码和实践项目，帮助读者深入理解Flask的各种功能和技术应用。 同时，《Flask Web开发从入门到精通》也从入门到精通的过程，逐步介绍了如何构建复杂的Web应用。读者可以学习如何优化性能、处理用户认证和授权、实现RESTful API等高级技术。此外，书中还对与其他常用工具如数据库、前端框架的集成等进行了探讨。 云盘是指云存储服务，它通过网络为用户提供存储和备份服务。在网络时代，云盘成为了人们共享和传输文件的重要方式。对于Flask Web开发从入门到精通这样的书籍来说，如果有相关的云盘提供，会方便读者获取书籍的各种资源，如代码示例、实例项目、扩展模块等。 利用云盘存储这些资源，读者可以方便地进行下载、备份和共享。此外，云盘还提供了多种访问方式，可以在不同的设备上随时随地进行访问，方便读者在学习过程中的查阅和使用。 总而言之，《Flask Web开发从入门到精通》是一本全面介绍Flask框架的书籍，通过学习这本书，读者可以掌握Flask的基础知识和高级应用技巧。如果提供相应的云盘服务，将对读者的学习和使用带来更多的便利。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值