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-7890p>
    div>
    <div class="section">
        <h2>教育背景h2>
        <p>某某大学 - 计算机科学学士p>
    div>
    <div class="section">
        <h2>工作经验h2>
        <p>某某公司 - 前端开发工程师p>
    div>
    <div class="section">
        <h2>技能h2>
        <ul>
            <li>HTMLli>
            <li>CSSli>
            <li>JavaScriptli>
        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-13p>
            <p>这是文章的内容。p>
        div>
        <div class="post">
            <h2>文章标题二h2>
            <p>发布日期: 2024-06-14p>
            <p>这是另一篇文章的内容。p>
        div>
    div>
    <div class="sidebar">
        <h2>关于我h2>
        <p>我是张三，一个热爱编程的前端开发者。p>
        <h2>链接h2>
        <ul>
            <li><a href="#link1">链接1a>li>
            <li><a href="#link2">链接2a>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-7890p>
    header>
    <section>
        <h2>教育背景h2>
        <p>某某大学 - 计算机科学学士p>
    section>
    <section>
        <h2>工作经验h2>
        <p>某某公司 - 前端开发工程师p>
    section>
    <section>
        <h2>技能h2>
        <ul>
            <li>HTMLli>
            <li>CSSli>
            <li>JavaScriptli>
        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技能。

相关阅读:
VUE3 中实现拖拽和缩放自定义看板 vue-grid-layout
HDFS的垃圾回收机制
 C++多重继承
 计算机毕业设计——校园二手市场
 牛客题目——最长公共子串、最长回文子串、兑换零钱
 解决: 使用html2canvas和print-js打印组件时, 超出高度出现空白页
 北京有什么好的创业孵化器?中移产孵中心助创业
 Spring启动源码分析以及生命周期
 Codeforces Round 827 (Div. 4) D 1e5+双重for循环技巧
 【Vue + Koa 前后端分离项目实战】使用开源框架==＞快速搭建后台管理系统 -- part2 后端新增期刊功能实现
原文地址：https://blog.csdn.net/u010674101/article/details/139751117