HTML5 学习-CSDN博客

本文链接：https://blog.csdn.net/m0_45400399/article/details/128546434

该文演示了HTML的基本结构，包括标题(h1-h6)、段落、内联元素如<strong>和<em>，列表(无序和有序)，表格，表单元素如<input>和<button>，以及图像和引用的使用。同时提到了CSS的简单应用，如图像大小调整。

摘要由CSDN通过智能技术生成

知识自查：https://developer.mozilla.org/en-US/docs/Web/HTML

网课：https://www.bilibili.com/video/BV1vs411M7aT/?spm_id_from=333.999.0.0

浏览器：Google Chrome，Mozilla Firefox，Edge

编译器：vscode，CodePen（在线IDE）

学习Code：

<!DOCTYPE html>
<html>
    <head>
        <title>HTML DEMO</title>
    </head>
    <body>
        <!-- Headings 标题-->
        <h1>Heading one</h1>
        <h2>Heading one</h2>
        <h3>Heading one</h3>
        <h4>Heading one</h4>
        <h5>Heading one</h5>
        <h6>Heading one</h6>

        <!-- paragragh 段落-->
        <!--块级元素，内联元素-->
        <p>
            Lorem ipsum dolor sit <strong>amet consectetur adipisicing</strong> elit. Hic magnam et <a href="https://codepen.io/pen/">dolorem</a> totam <a href="https://codepen.io/pen/"target="_blank">repellat</a> est perspiciatis reprehenderit, ea veritatis quam aliquid facilis alias quia dolore numquam doloribus ullam non. Similique?
        </p>
        <p>
            Lorem ipsum dolor sit <em>amet consectetur</em>, adipisicing elit. Fugit, repellendus!
        </p>
        <!-- ctrl+? 快捷注释 -->

        <!-- lists 列表-->
        <!-- 无序 -->
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ul>
        <!-- 有序 -->
        <ol>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ol>

        <!-- Tables  表格-->
        <table>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Age</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Eero</td>
                    <td>Dai</td>
                    <td>99</td>
                    <td>abc@abc.com</td>
                </tr>
                <!-- ...... -->
                <tr>
                    <td>Eero</td>
                    <td>Dai</td>
                    <td>99</td>
                    <td>abc@abc.com</td>
                </tr>
                <tr>
                    <td>Eero</td>
                    <td>Dai</td>
                    <td>99</td>
                    <td>abc@abc.com</td>
                </tr>
            </tbody>
        </table>

        <!-- 不太好的空行处理方法，用CSS处理更好 -->
        <br>
        <br>
        <hr>
        <br>

        <!-- Forms 表单 -->
        <form action="form.js"method="POST">
            <div>
                <label>First Name</label>
                <input type="text"name="first name"placeholder="Enter First Name">
            </div>
            <!-- ...... -->
            <div>
                <label>Last Name</label>
                <input type="text"name="last name"placeholder="Enter Last Name">
            </div>
            <div>
                <label>Email</label>
                <input type="email"name="email"placeholder="Enter email">
            </div>
            <!-- 一个提交按钮 -->
            <input type="submit"name="submit"value="Submit">
        </form>

        <br>
        <!-- Buttom 只显示无触发，因为html不处理逻辑问题 -->
        <button>This is a Button</button>

        <!-- image,乱入CSS处理图片大小 -->
        <img style="width:100vw" src="img\pic.jpg" alt="This is a img Tag">

        <!-- Quotation 引用-->
        <blockquote>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam fuga doloribus architecto perferendis, tenetur itaque necessitatibus sapiente corrupti. At dolorum sed dolor quidem voluptatum qui neque consectetur expedita aspernatur facilis?
        </blockquote>

        <p><cite>Massachusetts Institute of Technology</cite> by DasAuto</p>

        <!-- 鼠标悬停注释 -->
        <p><abbr title="Massachusetts Institute of Technology">MIT</abbr> is a prestigious collage</p>


        <!-- CSS部分内容乱入，多出空行好进行观察 -->
        <div style="margin-top:1000px"></div>
    </body>
</html>

附：高清图片来源