From b672c74df2d67124ca25fc622a3b36e1c02335a7 Mon Sep 17 00:00:00 2001
From: ChloeXiao0409 <113824239+ChloeXiao0409@users.noreply.github.com>
Date: Wed, 11 Oct 2023 16:37:25 +0800
Subject: [PATCH] HTML Change Collect Signed-off-by: ChloeXiao0409
 <113824239+ChloeXiao0409@users.noreply.github.com>

---
 About.html                 |  16 ++++++
 Chickens.html              | 109 +++++++++++++++++++++++++++++++++++++
 Emmetdemo.html             |  31 +++++++++++
 Forms.html                 |  92 +++++++++++++++++++++++++++++++
 Marathon_Registration.html |  54 ++++++++++++++++++
 Table_demo.html            |  75 +++++++++++++++++++++++++
 example.html               |  14 +++++
 7 files changed, 391 insertions(+)
 create mode 100644 About.html
 create mode 100644 Chickens.html
 create mode 100644 Emmetdemo.html
 create mode 100644 Forms.html
 create mode 100644 Marathon_Registration.html
 create mode 100644 Table_demo.html
 create mode 100644 example.html
diff --git a/About.html b/About.html
new file mode 100644
index 0000000..38c5aa6
--- /dev/null
+++ b/About.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Page</title>
+</head>
+
+<body>
+    <h1>About Me</h1>
+    <p>I am a human!</p>
+    <a href="Chickens.html">Go Home</a>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Chickens.html b/Chickens.html
new file mode 100644
index 0000000..b7a75ff
--- /dev/null
+++ b/Chickens.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <title>No Chicken, only dogs!</title>
+</head>
+
+<body>
+    <nav>
+        <ul>
+            <li><a href="Home">Home</a></li>
+            <li><a href="About.html">About</a></li>
+            <li><a href="Contact">Contact</a></li>
+        </ul>
+    </nav>
+    <main>
+        <a href="Emmetdemo.html">demo to see the quick code.</code></a>
+        <h1>1 &lt; 6 &gt; 4 &hearts;</h1>
+        <h1>Golden Retriever</h1>
+        <hr>
+        <!--ALt attribute wll be read by screenreader-->
+        <div>
+            <a href="http://www.bing.com">I AM A LINK TO BING!</a>
+            <a href="about.html">I AM A LINK TO ABOUT PAGE</a>
+        </div>
+        <p>
+            <b>
+                Golden Retrievers:
+            </b>
+            What's Good About 'Em, What's Bad About 'Em
+            Golden Retriever temperament,
+        <aside> personality, training,behavior, pros and cons, advice, and information,</aside>
+        by Michele Welton, Dog Trainer, Behavioral Consultant,
+        Author of 15 Dog Books <sup>[20]</sup>
+        I like H<sub>2</sub>O.
+        </p>
+        <aside>
+            <p>My Fox</p>
+            <img src="picture/狐狐.jpg" width="200px" alt="The cartoon fox I have drew before">A fox
+        </aside>
+        <p>
+        <div><sup>1</sup>/<sub>2</sub> + 1/2 = 1</div>
+        </p>
+        <a href="">ababab</a>
+
+        <a href="">cbcbcb</a>
+        <p>hdgwbdewxdgni</p>
+
+        <h2>Doggy</h2>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adip
+            isicing elit. Vel doloribus eaque, itaque i
+            usto dolor reprehenderit alias illo a volup
+            tas eum explicabo ipsa, quae molestiae.
+            Minima suscipit ad numquam accusantium c
+            upiditate?Loremfacere eos itaque neque quia ass
+            umenda deserunt.
+        </p>
+        <h2>Type</h2>
+        <h3>Behavior</h3>
+        <h4>Social behavior</h4>
+        <p>
+            Lorem ipsum dolor sit amet consectetur
+            adipisicing elit. Cum, nostrum dolores corrupti quos perspiciatis, dolorem assumenda consequatur
+            voluptatibus
+            quisquam quibusdam atem laudantium odio rerum? Dolores ad nostrum reiciendis similique cupiditate?
+            Rerum ab, voluptates praesentium rem f
+            acilis tenetur ipsam ad voluptatem quam exercitat
+            Ut distinctio nostrum unde at voluptate
+            s vero ducimus? Eum dicta corporis optio o
+            dit cum neque distinctio laudantium quos nemo id
+            ipsum, corrupti natus consequatur to
+            tempora adipisci. Placeat!
+        </p>
+        <h2>Breeds</h2>
+        <ol>
+            <li>Happy
+                <ul>
+                    <li>Great</li>
+                    <li>OK</li>
+                    <li>Not bad</li>
+                </ul>
+            </li>
+            <li>Sad</li>
+            <li>Angry</li>
+        </ol>
+        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.9303e94c9a3dec617e7f08127f50a87d?rik=SAbqxztCz8ZXEA&pid=ImgRaw&r=0"
+            width="200px">
+
+</body>
+
+</html>
+
+
+<!--!+tab-->
+<!DOCTYPE html>
+<html lang=" en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+</main>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Emmetdemo.html b/Emmetdemo.html
new file mode 100644
index 0000000..c539c31
--- /dev/null
+++ b/Emmetdemo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Emmet demo</title>
+</head>
+
+<body>
+    <main>
+        <section>
+            <h1></h1>
+        </section>
+    </main>
+    <h1></h1>
+    <h2></h2>
+    <h2></h2>
+    <ul>
+        <li></li>
+        <li></li>
+        <li></li>
+    </ul>
+    <ol>
+        <li><a href="www.1.com">Click Me</a></li>
+        <li><a href="www.2.com">Click Me</a></li>
+        <li><a href="www.3.com">Click Me</a></li>
+    </ol>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Forms.html b/Forms.html
new file mode 100644
index 0000000..2202af5
--- /dev/null
+++ b/Forms.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Forms Demo</title>
+</head>
+
+<body>
+    <h1>Forms</h1>
+
+    <form action="/tacos">
+        <div>
+            <label for="username">Enter a username:</label>
+            <input id="username" name="username" type="text" placeholder="username">
+        </div>
+        <div>
+            <label for="password">Enter a password:</label>
+            <input id="password" type="password" placeholder="password">
+        </div>
+        <p>
+            <label for="color">Choose a color:</label>
+            <input id="color" type="color">
+        </p>
+        <p>
+            <label for="number">Choose a number:</label>
+            <input id="number" type="number" placeholder="enter a number" min="1" max="10">
+        </p>
+        <button type="submit">Submit</button>
+        <input type="submit" value="Click me!">
+    </form>
+    <form action="https://cn.bing.com/search">
+        <input type="text" name="q">
+        <button>Search Bing</button>
+    </form>
+    <form action="https://www.baidu.com/s">
+        <input type="text" name="wd">
+        <button>Search Baidu</button>
+    </form>
+
+    <h2>More Inputs!</h2>
+    <form action="/bird">
+        <input type="checkbox" name="agree_tos" id="agree" checked>
+        <label for="agree">I agree everthing!</label>
+        <p>
+            <input type="radio" name="size" id="s" value="s">
+            <label for="s">S</label>
+        </p>
+        <p>
+            <input type="radio" name="size" id="m" value="m">
+            <label for="m">M</label>
+        </p>
+        <p>
+            <input type="radio" name="size" id="l" value="l">
+            <label for="l">L</label>
+        </p>
+        <p>
+            <label for="meal">Please select an entree:</label>
+            <select name="meal" id="meal">
+                <option value="">--Please to choose an option--</option>
+                <option value="fish">Fish</option>
+                <option value="steak">Steak</option>
+                <option value="bread">Bread</option>
+        </p>
+        <p>
+            <label for="cheese">Amount of Cheese:</label>
+            <input type="range" name="chesse_level" id="cheese" min="1" max="10" step="4">
+        </p>
+        <p>
+            <label for="Requests">Any Special Requests:</label>
+            <textarea name="additional_message" id="Requests" cols="10" rows="5"
+                placeholder="text anything!"></textarea>
+        </p>
+        <button>Submit</button>
+    </form>
+
+    <h2>Validation Demo</h2>
+    <form action="/dummy">
+        <label for="first">Enter First Name</label>
+        <input type="text" name="first" id="first" required>
+        <p>
+            <label for="username">Username</label>
+            <input type="text" id="username" name="username" minlength="5">
+        </p>
+
+        <button>Submit</button>
+    </form>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Marathon_Registration.html b/Marathon_Registration.html
new file mode 100644
index 0000000..eb65318
--- /dev/null
+++ b/Marathon_Registration.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Marathon Registration Form</title>
+</head>
+
+<body>
+    <h1>Race Registration!</h1>
+    <form action="">
+        <div>
+            <label for="first_name">First Name</label>
+            <input type="text" id="first_name" name="username_firstname" required>
+            <label for="last_name">Last Name</label>
+            <input type="text" id="last_name" name="username_lastname" required>
+        </div>
+        <p>
+            Select a Race:
+        </p>
+        <p>
+            <input type="radio" name="select_race" id="race1" value="Fun Run 5k">
+            <label for="race1">Fun Run 5k</label>
+        </p>
+        <p>
+            <input type="radio" name="select_race" id="race2" value="Half Marathon">
+            <label for="race2">Half Marathon</label>
+        </p>
+        <p>
+            <input type="radio" name="select_race" id="race3" value="Full Marathon">
+            <label for="race3">Full Marathon</label>
+        </p>
+        <p>
+            <label for="Email">Email</label>
+            <input type="email" name="user_email" id="Email" required>
+            <label for="Password">Password</label>
+            <input type="password" name="user_password" id="Password" required>
+        </p>
+        <div>
+            <label for="age">Select Age Group</label>
+            <select id="age" name="age_group">
+                <option value="under 18">under 18</option>
+                <option value="18-30">18 to 30</option>
+                <option value="above 30">above 30</option>
+            </select>
+        </div>
+        <div>
+            <button>Register!</button>
+            <input type="submit" value="Register!">
+    </form>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Table_demo.html b/Table_demo.html
new file mode 100644
index 0000000..6e24b45
--- /dev/null
+++ b/Table_demo.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Heaviest Bird</title>
+</head>
+
+<body>
+    <h1>Heaviest Bird</h1>
+    <table>
+        <thead>
+            <tr>
+                <th>Animal Name</th>
+                <th>Average Weight</th>
+                <th>Flighted</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Ostrich</td>
+                <td>104</td>
+                <td>No</td>
+            </tr>
+            <tr>
+                <td>Somali Ostrich</td>
+                <td>90</td>
+                <td>No</td>
+            </tr>
+            <tr>
+                <td>Wild Turkey</td>
+                <td>13.5</td>
+                <td>Yes</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <h2>V2</h2>
+    <table>
+        <thead>
+            <tr>
+                <th rowspan="2">Animal Name</th>
+                <th colspan="2">Average Mass</th>
+                <th rowspan="2">Flighted</th>
+            </tr>
+            <tr>
+                <th>KG</th>
+                <th>LB</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Ostrich</td>
+                <td>104</td>
+                <td>230</td>
+                <td>No</td>
+            </tr>
+            <tr>
+                <td>Somali Ostrich</td>
+                <td>90</td>
+                <td>200</td>
+                <td>No</td>
+            </tr>
+            <tr>
+                <td>Wild Turkey</td>
+                <td>13.5</td>
+                <td>29.8</td>
+                <td>Yes</td>
+            </tr>
+        </tbody>
+    </table>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/example.html b/example.html
new file mode 100644
index 0000000..a421355
--- /dev/null
+++ b/example.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+
+</body>
+
+</html>
\ No newline at end of file

Animal Name	Average Mass		Flighted
Animal Name	KG	LB	Flighted
Ostrich	104	230	No
Somali Ostrich	90	200	No
Wild Turkey	13.5	29.8	Yes