HTML simple learning record

Article catalogue

HTML simple learning record

brief introduction

HTML5 (Hypertext Markup Language) is the abbreviation of Hyper Text Markup Language 5. Hypertext includes text, pictures, audio, video, animation and so on

Basic structure of HTML

<body>And < / body >, which are called open tags and closed tags respectively. The tags presented separately (empty elements), such as < HR / > means to use / to close empty elements

  • DOCTYPE statement: tell the browser what specification we want to use
  • < title > label
  • < meta > general search engine description

Web page basic label

  • Title label: < H1 > primary label < / H1 >, < H2 > secondary label < / H2 >
  • Paragraph label: < p ></p>
  • Line feed label: < br / >
  • Horizontal line label: < HR / >
  • Font style label:
    Bold: < strong > I love you < / strong >
    Italics: < EM > I love you</em>
  • Notes and special symbols:
    Note: <-- Notes -- >
    Special symbols:
    Spaces: & nbsp;
    Greater than sign: & gt;
    Less than sign: & lt;
    Copyright symbol: & copy;
  • Special symbol memory mode:
    Start with "&" and start with ";" At the end, special symbols can be previewed with "& + one letter":

Image label

<img src="path" alt="text" title="text" width="x" height="y" />

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Image label</title>

<img src="../resource/image/1.jpg" alt="head portrait" title="Hover text" >


Of which:

  • "... /" refers to the parent directory
  • src and alt are required items, others are optional

Link label

Hyperlink Tags: < a ></a>

<a href="path" target="Target window position">Link text or image</a>

Of which:
href is required

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">

<a href=" com" target="_ Blank "> Click me to jump to Baidu in the new window</a>
<a href=" com" target="_ Self "> Click me to jump to Baidu in the current window</a>

<!--Avatar hyperlink-->
<a href="">
    <img src="../resource/image/1.jpg" alt="head portrait" title="Hover text" >


Of which:

  • target="_blank" means to jump to the page in a new window; target="_self" means to jump to the page in the current window


Anchor link

Click to jump to the top

Of which:

  • The name attribute has been eliminated (< a name = "top" > Top < / a >), and the top attribute is currently popular (< a top = "top" > Top < / a >)
    Anchor links can be used to jump to the specified location on the page

Functional links

E.g. email link:

<a href="mailto:e-mail address">Click to contact me</a>

Inline and block elements

  • Block element
    Regardless of the content, this element has a single line (p, h1-h6...)
  • Inline element
    The width of the content extension. The left and right are elements in the line, which can be arranged in one line (A. strong. EM...)


List is a form of displaying information resources. It can make the information structured and organized, and show it in the form of list, so that visitors can get the corresponding information more quickly
Classification of lists:

  • Ordered list:

    1. Java
    2. python
    3. C/C++
  • Unordered list

    • Java
    • python
    • C/C++
  • Custom list



Simple, universal and stable structure
Basic structure:

  • Cell

  • that 's ok

  • column

  • enjambment

  • Cross column

    Form learning

Of which:

  • < Table > < / Table >: create a table
  • < tr > < / TR >: create row
  • <td>< / td >: create column
  • colspan: cross line
  • rowspan: span columns

Video and audio


<video src="Video resource path" controls autoplay></video>

audio frequency

<audio src="Audio resource path" controls autoplay></video>

Of which:

  • controls: control options to set video playback
  • Autoplay: autoplay

Simple layout of pages

Yuan Su Ming



The content of the header area (for a page or an area in a page)


Mark the content of the foot area (for the entire page or an area of the page)


A separate area in a web page


Independent article content


Related content or application (commonly used in sidebar)


Navigation auxiliary content

iframe inline framework

<iframe src="path" name="mainFrame"></iframe>

Form syntax

Of which:

  • action: the location where the form is submitted. It can be a website or a request processing address
  • Method: post, get submission method
    get submission can see the submitted information in the url, which is efficient but not safe
    The submitted information cannot be seen in the url. It is relatively safe. It is also used to transfer large files

Form element format




Specifies the type of the element. Text, password, checkbox, radio, submit, reset, file, hidden, image and button. The default is text


Specifies the name of the form element


The initial value of the element. You must specify a value when type is radio


Specifies the initial width of the form element. When the type is text or password, the size of the form element is in characters. For other types, the width is in pixels


The maximum number of characters entered when type is text or password


When the type is radio or checkbox, specify whether the button is selected


value: Value of radio box
name: Representation group 
	<input type="radio" value="boy" name="sex"/>male
	<input type="radio" value="girl" name="sex"/>female


<input type="checkbox"   ...>


  • input type = "button": normal button
  • input type = "image": image button
  • input type = "submit": Submit button
  • input type = "reset": reset button (empty form)

Drop down box

<!-- selected Default selection-->
<select name="...">
	<option value="Value of option">1</option>
	<option value="Value of option">2</option>
	<option value="The value of the option" selected>3</option>
	<option value="Value of option">4</option>

Text field

<textarea name="..." cols="10" rows="50">Text content</textarea>

File domain

<input type="file" name="...">

Mail verification

<input type="email" name="...">

Verification is relatively elementary

url validation

<input type="url" name="...">

Verification is relatively elementary

Digital Verification

<input type="number" name="..." max="100" min="0" step="1">

Slider (volume)

<input type="range" name="..." max="100" min="0" step="2">

Search box

<input type="search" name="...">

Application of forms

  • Hidden domain
    For example:


  • read-only
    For example:


  • Disable
    For example:

    Gender: male and female

Primary validation of forms


  • Reduce server pressure
  • Ensure safety

Common methods:

  • placeholder
  • required
  • pattern

Keywords: Front-end html Interview

Added by _SAi_ on Sat, 26 Feb 2022 08:27:34 +0200