mobile wallpaper 1mobile wallpaper 2mobile wallpaper 3mobile wallpaper 4
Profile Image of the Author
dreaife
Announcement
welcome to my blog
Tags
544 words
3 minutes
Learning HTML
2022-07-15
FRONTEND
web
/
html
/
language

HTML Learning#

MDN Official Documentation

1. Structure#

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


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Web应用课</title>
</head>


<body>
    <h1>第一讲</h1>
</body>


</html>
  • <html>

The top-level element of an HTML document

  • <head>

Specifies configuration information related to the document (metadata), including the document’s title, linked styles, and scripts.

  • <body>

Represents the content of the document. document.body

  • <title>

Document title.

  • <meta>

Represents metadata information that cannot be represented by other HTML meta-related elements (one of <base>, <link>, <script>, <style> or <title>).

charset

<meta charset="UTF-8">

  • name / content
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Practice page">
<meta name="keywords" content="test">
  • icon

<link rel="icon" href="images/icon.png">

  • Multi-line comments
<!--
  注释测试
-->

2. Text Tags#

  • <div>

A generic block-level container for flow content; without CSS, it has no effect on the content or layout. Block-level, ends with a newline.

eg.<h1> <p> <pre> <ul> <ol> <table>

  • <span>

A generic inline container for phrasing content, with no specific semantic meaning. It can be used to group elements to achieve a styling intent (by using class or id attributes), or these elements share common attributes.

eg.<i> <b> <del> <ins> <td> <a>

  • <h1>

Heading tags <h1>-<h6>

  • <p>

Paragraphs; whitespace and line breaks are collapsed.

  • <pre>

Represents preformatted text. The text inside is usually displayed respecting the original formatting, in a monospaced font, and whitespace characters (like spaces and line breaks) are preserved.

&lt; == < &gt; == >

  • <br>

Line break.

  • &nbsp; == Non-breaking space

  • <hr>

Horizontal rule

  • <i>

Italic

  • <b> | <strong>

Bold

  • <del>

Strikethrough

  • <ins>

Underline

  • <mark>

Highlight

3. Images#

<img width="100px" src="/image/mountain.jpg" alt="大山">
  • src

The image file path

  • alt

The text description of the image, optional

  • height

Height, in CSS pixels

  • width

Width, in CSS pixels

4. Audio and Video#

  • Audio

<audio>

Play a single audio

<audio
    controls
    src="/audios/bgm.mp3">
        Playback failed
</audio>
  • Play multiple audio sources
<audio controls>
    <source src="/audios/sound1" type="audio/mpeg"/>
    <source src="/audios/sound2" type="audio/mpeg"/>
</audio>
  • Video

<video>

<video controls width="500">


    <source src="/videos/video1.mp4" type="video/mp4">


    <source src="/videos/video2.mp4" type="video/mp4">


    播放失败
</video>

<a href="<https://dreaife.cc>" target="_blank">dreaife</a>

Click to open in a new page target="_blank"

6. Forms#

form

  • <input>
<form>
    <label for="aaa">AAA</label>
    <input type="text" name="AaA" id="aaa" placeholder="fdalflaf">
    <button type="submit">提交</button>
</form>

type=""

  • text

Create a basic single-line text input

  • number

Enter a number, reject non-numeric input, and provide stepper arrows

  • email

Enter or edit an email address

  • password

Enter a password; the text is obscured so it cannot be read, typically replaced with symbols like asterisks (“*”) or bullets (“•”)

  • radio

Rendered as small circular options; the selected one is active, similar to a checkbox

Mutually exclusive for the same name

Common attributes include：

name id maxlength minlength required placeholder(when the form control is empty, the placeholder text)

  • action Redirects after submission.
  • <textarea>
  • <select> & <option>
<label for="lang">语言</label>
<select name="lang" id="lang">
  <option value="">select...</option>
  <option value="cpp">cpp</option>
</select>

7. Lists#

  • <ul>

Unordered list

  • ol

Ordered list

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>


<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>
  • <dl> <dt> <dd>
<dl>
    <dt>Name</dt>
    <dd>Godzilla</dd>
    <dt>Born</dt>
    <dd>1952</dd>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
    <dt>Color</dt>
    <dd>Green</dd>
    <dd>Orange</dd>
</dl>

<dt> not tab

<dd> add a tab

8. Tables#

<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>
  • table
  • thead
  • tbody
  • tr
  • th
  • td
  • caption

9. Semantic Elements#

  • header

Used to display introductory content, typically containing a set of introductory or auxiliary navigation utility elements.

  • nav

Represents a section of a page whose purpose is to provide navigation links within the current document or other documents.

  • section

Represents a standalone section of content contained within an HTML document.

  • figure

A figure referenced in the main text, such as an image, illustration, diagram, code snippet, etc.; when this portion is moved to an appendix or another page, it does not affect the main content.

  • figcaption

The caption/title for the associated image, describing the other data within its parent

element.

  • article

Represents a self-contained composition in a document, page, application, or site, intended to be independently distributable or reusable.

  • aside

Represents a part of the page that is related to the rest of the content but can be considered separate from that content and could be removed without affecting the rest of the page.

  • footer

Represents the footer for the nearest section or root element. A footer typically contains the author, copyright data, or links related to the document.

<header>
        <h3>我的收藏夹</h3>
    </header>
    <section>
        <h4>图片</h4>
        <figure>
            <img width="100" src="/images/logo.png" alt="logo">
            <figcaption>logo</figcaption>
        </figure>
    </section>
    <section>
        <h4>古诗</h4>
        <article>
            <h5>春晓</h5>
            <p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。</p>
        </article>
    </section>
    <footer>
        &copy;2018-2022 Me 版权所有
    </footer>

10. Special Symbols#

HTML Source CodeDisplay ResultDescription
&lt;<Less-than sign or display character
&gt;>Greater-than sign or display character
&amp;&Used to display other special characters
&quot;”Quotation mark
&reg;®Registered
&copy;©Copyright
&trade;™Trademark
&nbsp;Non-breaking space
Share

If this article helped you, please share it with others!

Learning HTML
https://dreaife.tokyo/en/posts/html-learning-guide/
Author
dreaife
Published at
2022-07-15
License
CC BY-NC-SA 4.0

Some information may be outdated

Algorithm Study: Prefix Sum, Difference Array, and Two Pointers
Core Java Study Day 02
Related Posts Smart
1
Core Java Study Day 02
cs-base This article mainly discusses core Java topics including the basic concepts of object-oriented programming, class definition and usage, operations on predefined classes such as LocalDate, construction and encapsulation of custom classes, static methods and fields, package management, creation and use of JAR files, and techniques for writing documentation comments. It emphasizes important design practices such as data encapsulation, initialization, and class design principles.
2
Core Java Study Day 01
cs-base This article mainly introduces core Java topics including an overview of Java, environment setup, basic program structure, data types, variables, operators, string processing, input and output, flow control, and array usage. It emphasizes Java simplicity, object-oriented features, and cross-platform capabilities, and also lists key terms such as JDK and JRE with detailed explanations.
3
Learning JavaScript
FRONTEND JavaScript is a dynamic, weakly typed interpreted language with characteristics such as being lightweight, cross-platform, and event-driven. Core concepts include variables and data types, control flow, functions, and asynchronous programming. JavaScript can run in browsers and Node.js, and supports many data types and operations such as objects, arrays, destructuring assignment, and modularization. Asynchronous programming uses callbacks, Promise, and async/await to handle tasks.
4
Angular-based Anime Showcase Website + Login/Registration (Cognito)
FRONTEND This project is an Angular-based web application for displaying and searching anime on Bangumi, with Cognito for user authentication. It supports automatic deployment to GitHub Pages using GitHub Actions for automated build and deployment. The main tech stack includes Angular 16, TypeScript, HTML, and CSS, and the project includes features such as login, registration, search, and an anime calendar.
5
Getting Started with TypeScript
FRONTEND TypeScript basics include the type system, interfaces, classes, decorators, and more. It supports many primitive types such as number, string, and boolean, and also provides features such as type annotations, generics, union types, and type aliases. Decorators are used to apply metadata to classes and methods, while modules and namespaces help organize code.
Random Posts Random
1
missing-semester-class01
prog-side 2023-01-11
2
Java AQS
cs-base 2024-02-03
3
Core Java Study Day 02
cs-base 2022-07-14
4
Getting Started with Elasticsearch
middle-side 2023-08-13
5
Getting Started with VSCode Plugin Development
plugin 2025-03-13
萌ICP备20261996号
© 2026 dreaife. All Rights Reserved. / RSS / Atom / Sitemap
Powered by Astro & Mizuki  Version 9.0

Table of Contents