当前位置： 首页 > news >正文

html入门综合练习

news 文章来源：https://blog.csdn.net/u010674101/article/details/139751117 2024/10/30 15:32:33

综合练习

通过实际项目练习可以更好地理解和掌握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技能。

相关文章：

html入门综合练习

综合练习 通过实际项目练习可以更好地理解和掌握HTML、CSS和JavaScript。以下是几个综合练习项目的建议&#xff1a; 项目1&#xff1a;个人简历网页 创建一个包含以下内容的个人简历网页&#xff1a; 个人简介&#xff08;姓名、照片、联系方式&#xff09;教育背景工作经…...

编程日记 2024/6/18 7:21:19

函数模板的具体化

函数模板优点是通用性&#xff0c;可以解决某个方面的普遍性问题&#xff0c;但是这个世界上的事情不是绝对的&#xff0c;有普遍的&#xff0c;就有绝对的。举个栗子&#xff1a; #include <iostream> using namespace std; template <typename T> void Swap(T &…...

编程日记 2024/6/18 7:20:18

【Linux 内存管理】

文章目录 1. 为什么要有虚拟内存呢&#xff1f;&#x1f50d; 1. 为什么要有虚拟内存呢&#xff1f;&#x1f50d;...

编程日记 2024/6/18 7:19:17

AJAX 数据库

AJAX 数据库 1. 引言 AJAX（Asynchronous JavaScript and XML）是一种流行的网络开发技术，它允许网页在不重新加载整个页面的情况下与服务器交换数据和更新部分网页内容。AJAX技术与数据库的结合，为现代网络应用提供了更加丰富和动态的用户体验。本文将探讨AJAX如何与数据库…...

编程日记 2024/6/18 7:16:14

力扣719.找出第K小的数对距离

力扣719.找出第K小的数对距离 二分答案 朴素版 双指针遍历数组 超过界限break auto check [&](int mid) -> bool{int res0;for(int i0;i<n-1;i)for(int ji1;j<n;j){if(nums[j] - nums[i] > mid) break;elseif(res > k) return true;}return false;};优…...

编程日记 2024/6/18 7:15:13

富格林：掌握可信出金交易策略

富格林认为&#xff0c;黄金市场是起起落落&#xff0c;似乎机遇无处不在&#xff0c;但很少有人能真正抓住机遇。黄金可以做多也可以做空&#xff0c;做空主要是为了从黄金价格波动的价差中获利。只有采用正规可信的操作技巧&#xff0c;才能实现顺利获利出金&#xff0c;减少…...

编程日记 2024/6/18 7:14:12

HCS-华为云Stack-容器网络

HCS-华为云Stack-容器网络 容器隧道overlay VPC网络...

编程日记 2024/6/18 7:12:10

【CSS in Depth2精译】1.1 层叠

CSS 本质上就是声明规则&#xff0c;并让这些特定的规则在各种情况下生效。一个类添加到某个元素上&#xff0c;则应用这个类包含的这一些样式&#xff1b;元素 X 是元素 Y 的一个子节点&#xff0c;则应用另一些样式。浏览器于是根据这些规则&#xff0c;判定所有样式生效的具…...

编程日记 2024/6/18 7:11:09

【读博日记】拓扑结构（待修正）

Topology 拓扑学 内容来源于互联网&#xff0c;还在甄别中——20240617 拓扑结构指把实体抽象成与其形状大小无关的点&#xff0c;把连接实体的线路抽象成线&#xff0c;再研究这些电线之间的关系。 所谓相似的拓扑结构&#xff1a; 例如一个圆环变成正方形、长方形、三角形…...

编程日记 2024/6/18 7:09:06

QT 中setVisible()和setEnabled()的区别

setVisible(bool)和setEnabled(true)在PyQt&#xff08;以及其他类似的图形用户界面框架&#xff09;中分别用于控制控件的可见性和可用性&#xff0c;它们之间的主要区别如下&#xff1a; setVisible(bool) 功能&#xff1a;这个函数用于设置QWidget控件的可见状态。参数&am…...

编程日记 2024/6/18 7:08:05

速度（velocity）、加速度（acceleration）、急动度（jerk）和弹跳度（snap）傻傻分不清楚？

...

编程日记 2024/6/18 7:06:03

【YashanDB知识库】PHP使用ODBC使用数据库绑定参数功能异常

【问题分类】驱动使用 【关键字】ODBC、驱动使用、PHP 【问题描述】 PHP使用PDO_ODBC连接yashan数据库&#xff0c;使用绑定参数获取数据时&#xff0c;客户现场出现报错 本地复现未出现异常报错&#xff0c;但是无法正确获取数据。 【问题原因分析】开启ODBC报错日志后&am…...

编程日记 2024/6/18 7:05:02

初级篇-Docker容器知识

Docker容器 容器主要是解决跨平台、跨服务运行环境的问题 容器将运行业务应用所需要的东西进行打包&#xff0c;包括依赖项、配置、脚本、二进制文件等。在容器中运行镜像&#xff0c;不用担心不同环境下运行不一致的问题。 容器本质上是一个特殊的进程&#xff0c;将资源、…...

编程日记 2024/6/18 7:03:00

【抽代复习笔记】19-群（十三）：奇偶置换、循环置换的几个定理及例题

定义&#xff1a; ①在Sn中&#xff0c;能够表示为奇数多个对换乘积的置换称为“奇置换”&#xff0c;能够表示为偶数多个对换乘积的置换称为“偶置换”&#xff1b; ②所有偶置换的集合记为An。 例1&#xff1a;&#xff08;1&#xff09;计算S1和S2中奇、偶置换的数目&…...

编程日记 2024/6/18 7:01:59

RT-Thread简介及启动流程分析

阅读引言&#xff1a; 最近在学习RT-Thread的内部机制&#xff0c;觉得这个启动流程和一些底层原理还是挺重要的&#xff0c; 所以写下此文。 目录 1&#xff0c; RT-Thread简介 2&#xff0c;RT-Thread任务的几种状态 3&#xff0c; 学习资源推荐 4&#xff0c; 启动流程分…...

编程日记 2024/6/18 7:00:57

MCU嵌入式AI开发笔记-视频笔记同步更新

MCU嵌入式AI开发笔记 抖音B站等站点笔记视频同步更新 01嵌入式AI大的方向 STM32跑神经网络 http://news.eeworld.com.cn/mp/EEWorld/a134877.jspx 为什么可以在STM32上面跑神经网络？简而言之就是使用STM32CubeMX中的X-Cube-AI扩展包将当前比较热门的AI框架进行C代码的转化，…...

编程日记 2024/6/18 6:57:53

DoIP——step2：车辆发现

文章目录 前言一、IP地址配置1.1 AutoIP1.2 DHCP1.3 DoIP实体的IP地址配置流程二、车辆发现车辆声明报文内容如下：前言 完成诊断设备到车辆的物理连接并通过激活线使能诊断连接后边缘节点将会将连接状态传递至应用层，在开始车辆发现过程之前，需要先进行各自的IP地址配置，获…...

编程日记 2024/6/18 6:56:52

【动态规划】0-1背包问题

【动态规划】0-1背包问题 题目:现在有四个物品&#xff0c;背包总容量为8&#xff0c;背包最多能装入价值为多少的物品? 我的图解 表格a【i】【j】表示的是容量为j的背包装入前i个物品的最大价值。 拿a【1】【1】来说&#xff0c;它的值就是背包容量为1&#xff0c;只考虑…...

编程日记 2024/6/18 6:55:51

WordPress 高级缓存插件 W3 Total Cache Pro 详细配置教程

说起来有关 WordPress 缓存插件明月已经发表过不少文章了，但有关 W3 Total Cache Pro 这个 WordPress 高级缓存插件除了早期【网站缓存插件 W3 Total Cache，适合自己的才是最好的！】一文后就很少再提及了，最近因为明月另一个网站【玉满斋】因为某些性能上的需要准备更换缓存…...

编程日记 2024/6/18 6:51:48

每日一题——Python实现PAT乙级1012 数字分类（举一反三+思想解读+逐步优化）五千字好文

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 代码优点 代码缺点 时间复杂度 空间复杂度 代码改进建议 我要更强 哲…...

编程日记 2024/6/18 6:50:47

Unity2D游戏制作入门 | 13 ( 之人物三段攻击 )

上期链接&#xff1a;Unity2D游戏制作入门 | 12(之人物受伤和死亡的逻辑动画)-CSDN博客 上期我们聊了人物的受伤和死亡的逻辑和动画&#xff0c;我们主要学习了事件的执行&#xff0c;即我们在人物受伤时可能会触发很多的事件&#xff0c;比如触发人物受伤的动画以及播放音乐等…...

编程日记 2024/6/18 6:49:45

DAY04 HTMLCSS

文章目录 一 表单(1) 数字控件(2) 颜色控件(3) 日期控件(4) 月份控件(5) 星期控件(6) 搜索控件(7) 范围控件 二 浮动框架三 结构化标签四 CSS1 CSS概述2 CSS的编写位置1. inline style 行内样式2. inner style 内部样式3. outer style 外部样式4. 小结 3 CSS选择器1. 通用选择器…...

编程日记 2024/6/18 6:48:44

Linux_理解程序地址空间和页表

目录 1、进程地址空间示意图 2、验证进程地址空间的结构 3、验证进程地址空间是虚拟地址 4、页表-虚拟地址与物理地址 5、什么是进程地址空间 6、进程地址空间和页表的存在意义 6.1 原因一&#xff08;效率性&#xff09; 6.2 原因二&#xff08;安全性&#xff09; …...

编程日记 2024/6/18 6:46:42

NAND闪存市场彻底复苏

在全球内存市场逐渐走出阴霾、迎来复苏曙光之际&#xff0c;日本存储巨头铠侠&#xff08;Kioxia&#xff09;凭借敏锐的市场洞察力和及时的战略调整&#xff0c;成功实现了从生产紧缩到全面复苏的华丽转身。这一转变不仅彰显了企业在逆境中的生存智慧&#xff0c;也为全球半导…...

编程日记 2024/6/18 6:44:40

过拟合与正则化

Location Beijing 过拟合 对于一个模型 A A A&#xff0c;解向量空间为 θ \theta θ&#xff0c;误差函数用式1表示 J ( θ ) J a c c [ y θ ( x ) − y ] 2 (1) J(\theta)J_{acc}[y_\theta(x)-y]^2\tag{1} J(θ)Jacc​[yθ​(x)−y]2(1) 首先我们考虑用模型 A A A拟合下…...

编程日记 2024/6/18 6:43:39

VMware挂载NAS存储异常处理

问题概述 由于非法关机或恢复&#xff0c;NFS存储可能会出现以下问题&#xff1a; 数据存储处于挂起状态或无法正常识别。虚拟机的配置文件或虚拟磁盘仍然注册在异常数据存储上。系统误认为有虚拟机在使用该数据存储。 问题对策 下面是详细的排查步骤和解决对策&#xff1a…...

编程日记 2024/6/18 6:41:36

Redis 7.x 系列【4】命令手册

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 说明2. 命令手册2.1 Generic2.2 数据类型2.2.1 String2.2.2 Hash2.2.3 List2.2.4 S…...

编程日记 2024/6/18 6:40:35

走进Elasticsearch

什么是ES 是一个分布式、RESTful风格的搜索和数据分析引擎 中文参考文档&#xff1a; 《Elasticsearch中文文档》 | Elasticsearch 技术论坛 elasticSearch官网&#xff1a; Functions and Operators | Elasticsearch Guide [7.11] | Elastic查询方式 Kibana查询&#xff08;原…...

编程日记 2024/6/18 6:39:34

QT TCP服务器和客户端示例程序

下面是一个简单的 Qt TCP 服务器和客户端示例&#xff0c;演示了如何使用 vSetDriver、vSetListener 和 vTcpServerStart 函数。假设 vSetDriver 和 vSetListener 是你定义的自定义函数。 TCP 服务器部分 tcpserver.h #ifndef TCPSERVER_H #define TCPSERVER_H#include <QT…...

编程日记 2024/6/18 6:36:31

Xlua三方库Android编译出错解决办法

Xlua三方库Android编译出错解决办法 最近听老师的热更教程&#xff0c;讲到xlua编译android平台会报错&#xff0c;也是看了老师的博客&#xff0c;按照方法去解决&#xff0c;然而问题并没有解决。应该是因为代码更新或者版本不一样&#xff0c;在此简单记录一下解决过程。 参…...

编程日记 2024/6/18 6:34:28

童装网站建设/网红推广

1. 优化你的MySQL查询缓存在MySQL服务器上进行查询&#xff0c;可以启用高速查询缓存。让数据库引擎在后台悄悄的处理是提高性能的最有效方法之一。当同一个查询被执行多次时&#xff0c;如果结果是从缓存中提取&#xff0c;那是相当快的。但主要的问题是&#xff0c;它是那么容…...

编程日记 2024/10/30 11:44:03

福清做网站/搜索引擎优化的概念是什么

设计一个Windows应用程序&#xff0c;在该程序中首先构造中学生、大学生等派生类&#xff0c;当输入相关数据&#xff0c;单击不同的按钮(“小学生”“中学生”“大学生”)将分别创建不同的学生对象&#xff0c;并输入当前的学生总人数&#xff0c;该学生的姓名学生类型和平均成…...

编程日记 2024/10/30 10:09:00

手动修改目录wordpress/淘宝网站的推广与优化

1.问题背景 opencv 官方手册 文档 练习题 使用轨迹栏创建颜色和画笔半径可调的Paint应用程序。有关绘制的信息&#xff0c;请参阅有关鼠标处 理的先前教程。 2.代码部分 另外一个官方demo留下的作业&#xff0c;代码难以精美&#xff0c;请理解。 import numpy as np impor…...

编程日记 2024/10/29 23:15:21

各种类型网站建设/百度指数分析官网

匿名用户 1级 2016-08-28 回答 PHP 的优点&#xff1a; 1.语言比较简单&#xff0c;PHP 是非常随意的一种语言。写起来容易让你把精力放在你要做的事情上&#xff0c;而不是各种语法规则等等。 2.各种功能模块齐全&#xff0c;这里分两部分&#xff1a; 1.网页下载&#xff1a;…...

编程日记 2024/10/29 22:09:34

wordpress自带播放器/百度网址大全网站大全

文章目录crond简介系统调度任务用户调度任务crontab在linux系统中定时任务由cron&#xff08;服务名crond&#xff09;这个系统服务来控制&#xff0c;是默认开启的。以下是在ubuntu操作系统上进行的。 crond简介 crond 是linux下用来周期性的执行某种任务或等待处理某些事件…...

编程日记 2024/10/29 21:53:14

worldpress做网站/百度竞价开户费用

系统安装初步之如何让原来跑DOS的机器也同时跑Linux(转)假如您想把Linux装在原来属於DOS的机器里, 您第一件事就要确定DOS是否占用您硬碟的全部, 假如是的话(大部分情况正是如此), 您就就必须重新分割硬碟。与硬碟相关的一个名词非常重要, 本书从头到尾几乎都有用到这观念 -- 分…...

编程日记 2024/10/29 20:29:40