HTML5速成

HTML5速成（Crash Course For Beginners）。教程视频地址：HTML速成。

准备

浏览器：Google Chrome（多浏览器测试）
编辑器：Visual Studio Code

另外，代码平台：CodePen。

什么是HTML

Hyper Text Markup Language（超文本标记语言）。
不是编程语言。
作用：告诉浏览器如何构造网页。

HTML基本概念

HTML Element。
Tag。
Opening Tag：<p>。
Closing Tag：</p>。
Content，填充文本。

所有的HTML Tag查询网址：HTML Element。

HTML基本文件组成

基本结构

<!DOCTYPE html># 用于解释文档的类型
<html>
<head>
    <title>This is a page</title>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph</p>
    <p>This is paragraph</p>
</body>
</html>

注：VScode快捷键，alt+shift+Down Arrow快速复制当前行。

注释：。

每个Heading之间会有空白，每段之间也有空白。

内联元素和块级元素

Inline and Block Level Element。

块级元素

在页面以块的形式展现
出现在新的一行
占全部宽度（如果不用CSS去设置，会占浏览器页面的全部宽度）

比如<div>,<h1>-<h6>,<p>。

内联元素

通常在块级元素内
不会导致文本换行
只占必要的部分宽度

比如<a>,<img>,<em>,<strong>。

`<a></a>`

<a href="https://google.com">Lorem</a>

attribute的概念，属性。全局，局部。被写在起始的Tag上。

特定标签属性查询网址：局部特定属性。全局属性查询：全局属性。

注：多个属性用空格隔开；target="_blank"属性。

快捷键：ctrl+/插入注释。

列表

<ul># 无序列表
    <li></li># 列表内容list item
<ul>

<ol># 有序列表
    <li></li># 列表内容list item
<ol>

表格

<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tbody>
</table>

上述结果很难看，因为没有用CSS去修饰。

表单

Forms。

<br>line breaker。
<hr>horizontal line。

<!-- Forms -->
        <form action="form.js" method="POST">
            <div>
                <label>First Name</label>
                <input type="text" name="firstname" placeholder="Enter First Name">
            </div>
            <div>
                <label>Last Name</label>
                <input type="text" name="lastname" placeholder="Enter Last Name">
            </div>
            <div>
                <label>Email</label>
                <input type="email" name="email" placeholder="Enter Email">
            </div>
            <!-- Submit -->
            <input type="submit" name="submit" value="Submit">

            <div style="margin-top: 1000px;"></div>
        </form>

按钮：<button>This is a Button</button>。

图片：<img style="width:100vw" src="https://i1.hdslb.com/bfs/face/b8a480b0f74935ca3146975f6591346d888669e3.png@360w_360h.webp" alt="LongMao">。其中alt属性是当找不到图片时所显示的文字。

引用

<!-- Quatation -->
        <blockquote>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor aut, quaerat, eaque voluptatum, quo explicabo est excepturi architecto reiciendis commodi nostrum. Sed, modi esse voluptatum quisquam totam maiores mollitia optio?
        </blockquote>

        <p><abbr title="Massachusettes Institute of Technology">MIT</abbr>is a prestigious collage</p>

        <p><cite>MIT is a prestigious collage</cite>by DasAuto</p>

完整代码

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Crash Course For Beginner</title>
    </head>
    <body>
        <!-- Heading-->>
        <h1>Heading One</h1>
        <h2>Heading One</h2>
        <h3>Heading One</h3>
        <h4>Heading One</h4>
        <h5>Heading One</h5>
        <h6>Heading One</h6>
        <!-- Paragraph -->
        <p>Lorem ipsum <strong>dolor sit amet consectetur</strong>, adipisicing elit. Quibusdam soluta at maxime temporibus, nesciunt iure sapiente est tempora beatae, autem nisi impedit assumenda rem, commodi esse similique pariatur ullam? Sint.</p>
        <p><em>Lorem ipsum dolor</em>, sit <a href="https://google.com" target="_blanck">amet</a> consectetur adipisicing elit. Earum illum magni placeat blanditiis dicta fugit id consequuntur necessitatibus, voluptates velit aliquam rerum facere at tempore dolorem esse a corrupti sint quod, ipsa qui debitis nesciunt atque. Voluptas placeat quo quia enim. Ipsum beatae quidem excepturi quibusdam repudiandae similique eum qui molestiae repellendus, ut dicta, corrupti cum. Exercitationem dolor consequuntur id error quisquam, quas accusantium esse quam maiores quasi cumque dolore minus amet libero voluptas fugit mollitia earum a praesentium adipisci nam qui aliquid? Aperiam, obcaecati. Perferendis impedit, quidem, ipsum doloribus ducimus corrupti voluptatum illum tempora deserunt consequuntur omnis, ex eius?</p>
        
        <!-- List -->
        <ul>
            <li>List Item1</li>
            <li>List Item2</li>
        </ul>

        <ol>
            <li>List Item1</li>
            <li>List Item2</li>
        </ol>

        <!-- Table -->
        <table>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Age</th>
                    <th>Email</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <th>W</th>
                    <th>D</th>
                    <th>18</th>
                    <th>12@gmail.com</th>
                </tr>
                <tr>
                    <th>W</th>
                    <th>D</th>
                    <th>18</th>
                    <th>12@gmail.com</th>
                </tr>
                <tr>
                    <th>W</th>
                    <th>D</th>
                    <th>18</th>
                    <th>12@gmail.com</th>
                </tr>
            </tbody>
        </table>

        <br>
        <br>
        <hr>
        <br>

        <!-- Forms -->
        <form action="form.js" method="POST">
            <div>
                <label>First Name</label>
                <input type="text" name="firstname" placeholder="Enter First Name">
            </div>
            <div>
                <label>Last Name</label>
                <input type="text" name="lastname" placeholder="Enter Last Name">
            </div>
            <div>
                <label>Email</label>
                <input type="email" name="email" placeholder="Enter Email">
            </div>
            <!-- Submit -->
            <input type="submit" name="submit" value="Submit">

            <div style="margin-top: 1000px;"></div>
        </form>

        <!-- Image -->
        <img style="width:100vw" src="https://i1.hdslb.com/bfs/face/b8a480b0f74935ca3146975f6591346d888669e3.png@360w_360h.webp" alt="LongMao">
        <!-- Button -->
        <button>This is a Button</button>

        <!-- Quatation -->
        <blockquote>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor aut, quaerat, eaque voluptatum, quo explicabo est excepturi architecto reiciendis commodi nostrum. Sed, modi esse voluptatum quisquam totam maiores mollitia optio?
        </blockquote>

        <p><abbr title="Massachusettes Institute of Technology">MIT</abbr>is a prestigious collage</p>

        <p><cite>MIT is a prestigious collage</cite>by DasAuto</p>

    </body>
</html>