html入门综合练习

综合练习

通过实际项目练习可以更好地理解和掌握HTML、CSS和JavaScript。以下是几个综合练习项目的建议:

项目1:个人简历网页

创建一个包含以下内容的个人简历网页:

  • 个人简介(姓名、照片、联系方式)
  • 教育背景
  • 工作经验
  • 技能
  • 兴趣爱好

示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #333;
            max-width: 800px;
            margin: auto;
            padding: 20px;
        }
        .header {
            text-align: center;
        }
        .header img {
            border-radius: 50%;
        }
        .section {
            margin-bottom: 20px;
        }
        h2 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>张三</h1>
        <img src="profile.jpg" alt="张三的照片" width="150">
        <p>邮箱: zhangsan@example.com | 电话: 123-456-7890</p>
    </div>
    <div class="section">
        <h2>教育背景</h2>
        <p>某某大学 - 计算机科学学士</p>
    </div>
    <div class="section">
        <h2>工作经验</h2>
        <p>某某公司 - 前端开发工程师</p>
    </div>
    <div class="section">
        <h2>技能</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </div>
    <div class="section">
        <h2>兴趣爱好</h2>
        <p>阅读、编程、旅行</p>
    </div>
</body>
</html>

在这里插入图片描述

项目2:简单博客页面

创建一个包含以下内容的博客页面:

  • 博客标题
  • 多篇文章,每篇文章包括标题、发布日期和内容
  • 侧边栏,包含关于作者的简介和其他链接

示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            background-color: #f0f0f0;
        }
        .content {
            flex: 3;
            padding: 20px;
        }
        .sidebar {
            flex: 1;
            background-color: #fff;
            padding: 20px;
            border-left: 1px solid #ddd;
        }
        h1, h2 {
            color: #0066cc;
        }
        .post {
            margin-bottom: 20px;
        }
        .post h2 {
            margin-bottom: 5px;
        }
        .post p {
            color: #666;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>我的博客</h1>
        <div class="post">
            <h2>文章标题一</h2>
            <p>发布日期: 2024-06-13</p>
            <p>这是文章的内容。</p>
        </div>
        <div class="post">
            <h2>文章标题二</h2>
            <p>发布日期: 2024-06-14</p>
            <p>这是另一篇文章的内容。</p>
        </div>
    </div>
    <div class="sidebar">
        <h2>关于我</h2>
        <p>我是张三,一个热爱编程的前端开发者。</p>
        <h2>链接</h2>
        <ul>
            <li><a href="#link1">链接1</a></li>
            <li><a href="#link2">链接2</a></li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

项目3:交互式表单

创建一个包含以下内容的交互式表单:

  • 用户名输入框
  • 密码输入框
  • 电子邮件输入框
  • 提交按钮
  • 使用JavaScript进行表单验证,确保所有字段都已填写并且电子邮件格式正确

示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>交互式表单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            max-width: 400px;
            margin: auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        input[type="text"], input[type="password"], input[type="email"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #0066cc;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #005bb5;
        }
    </style>
    <script>
        function validateForm() {
            var username = document.forms["myForm"]["username"].value;
            var password = document.forms["myForm"]["password"].value;
            var email = document.forms["myForm"]["email"].value;
            if (username == "" || password == "" || email == "") {
                alert("所有字段都必须填写");
                return false;
            }
            var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
            if (!emailPattern.test(email)) {
                alert("请输入有效的电子邮件地址");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <h1>注册表单</h1>
    <form name="myForm" onsubmit="return validateForm()" action="/submit">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username"><br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password"><br>
        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email"><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

在这里插入图片描述

使用html5处理案例一个人简历

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #333;
            max-width: 800px;
            margin: auto;
            padding: 20px;
        }
        header, section, footer {
            margin-bottom: 20px;
        }
        header {
            text-align: center;
        }
        header img {
            border-radius: 50%;
        }
        h2 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
    <header>
        <h1>张三</h1>
        <img src="profile.jpg" alt="张三的照片" width="150">
        <p>邮箱: zhangsan@example.com | 电话: 123-456-7890</p>
    </header>
    <section>
        <h2>教育背景</h2>
        <p>某某大学 - 计算机科学学士</p>
    </section>
    <section>
        <h2>工作经验</h2>
        <p>某某公司 - 前端开发工程师</p>
    </section>
    <section>
        <h2>技能</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </section>
    <section>
        <h2>兴趣爱好</h2>
        <p>阅读、编程、旅行</p>
    </section>
</body>
</html>

一样的效果
在这里插入图片描述

参考和实践资源

在学习过程中,推荐的资源:

在线教程和文档
  • MDN Web Docs:全面的HTML、CSS和JavaScript文档和教程,是Web开发的权威资源。
  • W3Schools:提供丰富的示例和练习,非常适合初学者。
  • freeCodeCamp:免费的在线编码训练平台,通过做项目和练习学习Web开发。
练习平台
  • CodePen:一个在线代码编辑器,可以编写和分享HTML、CSS和JavaScript代码,查看实时效果。
  • JSFiddle:另一个在线代码编辑器,支持HTML、CSS和JavaScript,可以用于实验和分享代码片段。
实践项目和挑战
  • Frontend Mentor:提供各种Web开发项目和挑战,帮助你通过实际项目提高技能。
  • Hackerrank:提供各种编程挑战,包括JavaScript的专项练习。

逐步提高自己的HTML、CSS和JavaScript技能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/717365.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Excel文件损坏怎么修复?这2个方法要学会

当你的excel文件不可读&#xff0c;或者出现提示“文件已经被损坏&#xff0c;无法打开”&#xff0c;这种情况时&#xff0c;会给我们正常的工作带来很多麻烦&#xff0c;文件损坏打不开怎么办&#xff1f;来看看这2招&#xff0c;详细的图文教程&#xff0c;小白也能轻松恢复…

解禁日大涨,爱玛科技的投资前景值得信任吗?

6月17日&#xff0c;爱玛迎来6.28亿股、金额超190亿元的解禁&#xff0c;占总股本72.91%。不过&#xff0c;爱玛股价在巨量解禁中反而迎来涨势&#xff0c;因为这部分股票中&#xff0c;创始人张剑持有的限售股数量几乎就占了爱玛总股本的七成。某种意义上&#xff0c;市场认为…

国货骄傲精亿内存条颠覆游戏战场,推出超强DDR5 7200玄武系列电竞内存

随着科技的迅猛发展,对高性能电脑的需求不断增长,特别是在电竞领域。认识到这一点,国货知名品牌精亿(JINGYI)推出了其全新一代DDR5 7200 RGB电竞内存条,并命名系列为象征中国上古四大神兽的玄武-系列。这款产品凭借其卓越性能和令人印象深刻的海力士A-DIE颗粒配置,正在迅速成为…

Virtualbox7.0版本安装报错:Invalid installation directory

错误情况 我在安装virtualbox最新版7.0.18时候&#xff0c;因为默认安装在C盘&#xff0c;我改成了E盘&#xff0c;然后就报错 Invalid installation directory The chosen installation directory is invalid, as it does not meet the security requirements. Refer to th…

【乳业巨擘·数字革命先锋】光明乳业:上市公司科技蜕变,搭贝低代码引领未来新纪元

在这个由科技编织的未来世界里&#xff0c;光明乳业股份有限公司以巨人之姿&#xff0c;傲立于乳业之巅&#xff0c;以其无与伦比的胆识与魄力&#xff0c;引领了一场震撼业界的数字化革命。与低代码领域的创新领袖——搭贝的强强联合&#xff0c;不仅标志着光明乳业在数字化转…

I2C总线驱动——ap3216c光感传感器从寄存器手册开始入手的实战版(附思维导图)

文章目录 1.I2C驱动框架简介1.1 I2C总线驱动&#xff08;适配器驱动&#xff09;1.1.1 重要结构体1.1.2 重要函数 1.2 I2C设备驱动1.2.1 重要结构体1.2.2 重要函数 1.3 I2C设备和驱动匹配过程 2.I2C设备驱动编写2.1 确认原理图引脚及pinctrl子系统引脚配置信息2.2 确认设备树I2…

华为数通企业面试笔试实验题

1. 笔试题 1.1 实验拓扑 1.2 实验要求 公司A为小型销售公司,需要实现基本上网功能,蓝色部分为外网线,提供DHCP服务 DnsServer:114.114.114.114 帮助网管排查某一台计算机在某一台交换机的某个端口 2. 操作步骤 配置路由器相关的LAN侧接口IP地址 配置DHCP项,要求有PC1与PC2…

个人学习算法总结的基础crud与算法思想数据结构解释

建议都从简单的crud入手,结合生活理解了结构与操作在去进阶更难的东西,做事有规划有步骤有时间限制这样比较好进步 跳转阅读

xxe漏洞学习

一、什么是xxe漏洞 XXE就是XML外部实体注入&#xff0c;当允许引用外部实体时&#xff0c; XML数据在传输中有可能会被不法分子被修改&#xff0c;如果服务器执行被恶意插入的代码&#xff0c;就可以实现攻击的目的攻击者可以通过构造恶意内容&#xff0c;就可能导致任意文件读…

Java图形用户界面设计的布局管理器

LayoutManager布局管理器 前言一、布局管理器的背景简介 二、FlowLayout构造方法参数说明代码演示AWTSwing 三、BorderLayout布局管理器注意点构造方法代码演示AWT示例一示例二 Swing 四、GridLayout简介构造方法代码示例AWTSwing 五、GridBagLayoutGridBagConstraints APIGrid…

时间同步概念及常见的时间同步协议NTP PTP

一、前言 前面几篇文章介绍了Linux中的各种各样的时间、时钟源以及时间维护的方式&#xff0c;其中在timekeeper等数据结构中&#xff0c;我们当时略过了NTP相关的字段&#xff0c;为了补充这一段内容&#xff0c;从本篇开始会介绍时间同步的基本概念、及常见的时间同步协议&am…

0617_QT3

练习&#xff1a; #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//去掉头部this->setWindowFlag(Qt::FramelessWindowHint);//去掉空白部分this->setA…

YOLOv10项目-服务器上运行

1、前言 2、运行YOLOv10代码流程&#xff08;超详细&#xff09; &#xff08;3&#xff09;根据下面步骤安装&#xff1a; &#xff08;4&#xff09;数据集和其他配置 &#xff08;5&#xff09;测试训练&#xff08;很详细&#xff09; 1、前言 由于一些事情&#xff0…

java文件传输小工具 java17+springboot3+thymeleaf

背景 在和同事工作中经常需要传输文件&#xff0c;但是公网传输太慢&#xff0c;业务方不是计算机专业直接用命令行沟通麻烦。 本小工具通过页面可视化方便用户使用&#xff0c;端口9090&#xff0c;启动默认展示当前登陆本机用户的桌面。 代码开源&#xff1a; https://git…

制作翻页电子版画册攻略:轻松掌握数字创作技巧

​随着科技的飞速发展&#xff0c;数字创作已经成为了一种流行的创作方式。如今&#xff0c;越来越多的人选择将纸质画册转化为翻页电子版画册&#xff0c;以便更好地展示和传播自己的作品。你也想掌握这项技能&#xff0c;但却苦于不知从何入手&#xff1f;接下来教你制作翻页…

Redis-数据结构-跳表详解

Redis概述 Redis-数据结构-跳表详解 跳表&#xff08;Skip List&#xff09;是一种基于并联的链表结构&#xff0c;用于在有序元素序列中快速查找元素的数据结构。 Redis 中广泛使用跳表来实现有序集合&#xff08;Sorted Set&#xff09;这一数据结构。 1.跳表的基本概念和…

怎么做成的文件二维码?扫阅览文件的制作方法

现在用二维码来分享或者查看文件是一种很常用的方式&#xff0c;比如常见的文件内容有简历、资料、作品、压缩包等等。通过将文件生成二维码能够在提升文件传输速度的同时还有利于用户体验的提升&#xff0c;那么如何制作可以长期提供文件预览或者下载的二维码呢&#xff1f; …

python之Bible快速检索器

内容将会持续更新&#xff0c;有错误的地方欢迎指正&#xff0c;谢谢! python之Bible快速检索器 TechX 坚持将创新的科技带给世界&#xff01; 拥有更好的学习体验 —— 不断努力&#xff0c;不断进步&#xff0c;不断探索 TechX —— 心探索、心进取&#xff01; 助力快…

Python基础用法 之 转义字符

将两个字符进⾏转义 表示⼀个特殊的字符 \n ---> 换⾏&#xff0c;回⻋ \t ---> 制表符, tab键 注意&#xff1a; print( end\n)&#xff1a; print() 函数中默认有⼀个 end\n, 所以,每个 print 结束之后, 都会输出⼀ 个换行。 未完待续。

大腾智能正式入驻华为云

5月30日&#xff0c;大腾智能正式入驻华为云云商店。作为一家基于云原生的国产工业软件与数字化协同平台&#xff0c;大腾智能专注于推动企业数字化转型与升级&#xff0c;为企业提供一系列专业、高效的云原生数字化软件及方案。 华为云云商店&#xff0c;作为业界标杆&#xf…