HTML 学习笔记和作业

Lucky ＆powerful

已于 2024-07-20 01:40:51 修改

阅读量232

点赞数 2

分类专栏： Web 文章标签： html 前端

于 2024-07-18 22:35:19 首次发布

本文链接：https://blog.csdn.net/zkj000000/article/details/140534882

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML 学习笔记和作业

文章目录

HTML 学习笔记和作业
Readme
一、HTML 学习笔记和作业练习
二、CSS 链接
三、JS 链接
四、React 链接
五、Vue 链接
总结

Readme

HTML 学习
自食用
欢迎指正

一、HTML 学习笔记和作业练习

1、 HTML学习笔记

（1）安装插件

Live Server
在这里插入图片描述
Auto Rename Tag

设置自动格式化
点击settings，然后输入format，然后勾选上Format On Save。

（2）查询MDN

MDN查询手册

2、 Homework All

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acwing</title>
    <meta name="description" content="本课程为AcWing工程课系列——Level-3 一篇《Web应用课》，讲解Web相关知识。">
    <meta name="keywords" content="acwing,web,html">
    <link rel="icon" href="/image/icon.jpg">
</head>

<body>
    <h1>web_hw1</h1>
    <div>
        写head的部分
    </div>

    <h1>web_hw2</h1>
    <h2>春江花月夜</h2>
    <h5>张若虚</h5>
    <p>
        春江潮水连海平，海上明月共潮生。<br>
        滟滟随波千万里，何处春江无月明。<br>
        江流宛转绕芳甸，月照花林皆似霰；<br>
        空里流霜不觉飞，汀上白沙看不见。<br>
        江天一色无纤尘，皎皎空中孤月轮。<br>
        江畔何人初见月？江月何年初照人？<br>
        人生代代无穷已，江月年年望相似。<br>
    </p>
    <hr>

    <pre>
            int main() {
                int a, b;
                scanf("%d %d", &a, &b);
                printf("%d %d\n", a, b);
                return 0;
            }
        </pre>

    <div><i>春眠不觉晓</i><b>处处闻啼鸟</b><del>夜来风雨声</del><ins>花落知多少</ins></div>

    <h1>Web_hw3</h1>
    <img width="200" src="static/image/icon.jpg" alt="这是一张网页图片">

    <h1>web_hw4</h1>
    <h2>这里面是可以播放的资源，如果一个可以播放就播放一个，否则播放后一个。</h2>
    <audio controls>
        <source src="/static/audio/elegence.mp3" type="audio/mpeg" alt="优雅音乐">
    </audio>

    <h2>这里面是可以播放的资源，如果一个可以播放就播放一个，否则播放后一个。</h2>
    <video width="300" src="/static/video/rain.mp4" controls alt="雨视频">下雨的视频</video>

    <h1>web_hw5</h1>
    <a href="https://www.csdn.net/">CSDN</a>
    <a href="/about.html">About</a>
    <a target="_blank" href="https://www.acwing.com"><img width="50px" src="static/image/icon.jpg" alt="logo"></a>

    <h1>web_hw6</h1>

    <br>
    <div>required 是被要求必须填写的意思
        action 到Login.html
    </div>
    <form action="/login.html">
        <label for="username">用户名</label>
        <input required placeholder="用户名" type="text" name="username" , id="username" minlength="3" maxlength="15">

        <br>
        <label for="email">邮箱</label>
        <input required placeholder="邮箱" type="email" name="email" id="email">

        <br>
        <label for="age">年龄</label>
        <input placeholder="年龄" type="number" name="age" id="age">

        <br>
        <label for="password">密码</label>
        <input placeholder="密码" type="password" name="password" id="password">

        <br>
        <label for="resume">个人简介</label>
        <textarea name="resume" id="resume" placeholder="个人简介"></textarea>

        <br>

        <label for="lang">语言</label>
        <select name="lang" id="lang">
            <option value="Cpp">C++</option>
            <option value="Java">java</option>
            <option value="Python">python</option>
        </select>


        <br>
        <button type="submit">提交</button>

        <h1>web_hw7</h1>

        <ol>
            <li>第一讲</li>

            <li>第二讲
                <ul>
                    <li>第一小节</li>
                    <li>第二小节</li>
                    <li>第三小节</li>
                </ul>
            </li>

            <li>
                第三讲
                <ol>
                    <li>第一小节</li>
                    <li>第二小节</li>
                    <li>第三小节</li>
                </ol>


            </li>



        </ol>




        <h1>web_hw8</h1>

        <table>
            <caption>成绩单</caption>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>数学</th>
                    <th>语文</th>
                    <th>英语</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Alice</td>
                    <td>100</td>
                    <td>99</td>
                    <td>98</td>
                </tr>

                <tr>
                    <td>Bob</td>
                    <td>99</td>
                    <td>98</td>
                    <td>97</td>
                </tr>

            </tbody>




        </table>


        <br>
        <h1>web_hw9</h1>
        <header>
            <h3>我的收藏夹</h3>
        </header>
        <hr>
        <section>
            <h4>图片</h4>
            <figure>
                <img width="100px" src="/static/image/icon.jpg" alt="icon">
            </figure>
            <figcaption>icon</figcaption>

        </section>
        <hr>

        <section>
            <h4>古诗</h4>
            <article>
                <h5>春晓</h5>
                <p>
                    春棉不觉晓<br>
                    处处闻啼鸟<br>
                    夜来风雨声<br>
                    花落知多少<br>
                </p>
            </article>
            <article>
                <h5>咏柳</h5>
                <p>
                    碧玉妆成一树高<br>
                    万条垂下绿丝绦<br>
                    不知细叶谁裁出<br>
                    二月春风似剪刀<br>

                </p>
            </article>
        </section>
        <hr>

        <footer>
            &copy;2018-2024 zkj 版权所有
        </footer>




        <br>
        <h1>web_hw10</h1>
        &copy;&lt;web&gt; 版权所有


    </form>



</body>

</html>