Features
Features:

Product Tour >

Edraw AI >

Paid Plans:

Individuals >

Business >

Eduaction >
Resources
Blog

History

How-tos & Tips

Discovery

Biography

Business Analysis

Examples

AI concept Map

Free AI Mind Map Generator

Onenote Mind Map

Bcg Matrix Examples

Nike Marketing Strategy

Unilever SWOT Analysis

Make Mind Maps in Google Docs

Guide

FAQs

What's New

Resource Center
Templates
All Templates

Brain Storming Templates

Strategy and Planning Templates

Project Management Templates

Product Management Templates

Human Resources Templates

Agile Workflow Templates

Marketing Templates

Education Templates

Fun and Games Templates

User Gallery
Download
Pricing
Enterprise

MindMap Gallery Front-end HTMLl MDN document learning outline

Front-end HTMLl MDN document learning outline

This is an outline that I studied on MDN and compiled based on my understanding. The content is comprehensive, including basic concepts, basic structure, text layout, word processing, hyperlinks, embedded multimedia, etc. It is for students’ study reference only.

Edited at 2019-09-01 09:54:48

PlotWizard

Recent works View more works>>

Front-end HTMLl MDN document learning outline

PlotWizard

Recent works View more works>>

Recommended to you
Outline

HTML

basic concept

markup language

html5

xml

basic component

element

regular elements

Label (case insensitive)

start tag

end tag

content

Attributes

effect

Attributes contain additional information about the element that does not appear in the actual content

Classification

According to value type

value attribute

What must be included

1. There is a space between the element and the attribute (if there are one or more existing attributes, there is a space between the previous attribute.) 2. The attribute is followed by an "=" symbol. 3. There is an attribute value, enclosed by a pair of quotation marks " ".

e.g.

Example

Boolean properties

Contents included (compared to regular)

1. Same as above 2. There can only be attribute values with the same attribute name. 3. Attribute values are usually omitted

e.g.

Example

According to semantics

Semantic elements

Such as <p>, <h1>, etc.

no semantic elements

<span>......</span>, <div>......</div>, <i></> (semantic in H5), <b></>

According to format

block-level elements

e.g.

<div>

inline elements

e.g.

<span>

<a>

According to scope

global properties

element properties

According to inheritance

Inherited properties

non-inherited properties

(HTML5) Data attributes - custom data

e.g.

empty element

start tag

e.g.

Nested elements

e.g.

<p>My cat has a<strong>temper</strong>:)</p>

Special character input (escape characters)

Comment

Note

Custom icon

Basic architecture

Web page structure

<!DOCTYPE html>

Declare document type

root element

All content that is included in the HTML page but does not want to be displayed in the HTML

<meta>

metadata

name specifies the type of meta element; indicates what type of information is included

content specifies the actual metadata content

e.g.

Web page title

Contains all content, text, images, audio, games, etc. displayed on the page

Leave blank

Focus on readability and aesthetics

Document structure

<header> Header <nav> navigation bar <main> main content <article>, <section> and other contents <aside> sidebar, often nested in <main> <footer> footer

newline

<br>

divider

<hr>

Typesetting

title

A total of six levels of titles

paragraph

<p> tags cannot contain block elements

list

disorder

Attributes

type

orderly

Attributes

type

value

definition list

Format

List nesting

Optimize structure

Best Practices

Purpose

word processing

decorate

superscript and subscript

Superscript: <sup></sup> Subscript: <sub></sub>

strikethrough

emphasize

Semantic

no semantics

the difference

斜体、加粗、变小、下划线

效果：语义： <em> 斜体着重点和重读点 <i> 斜体原：无现：技术术语、外文短语或是小说中人物的思想活动等 <strong> 粗体重要性 <b> 粗体无（推荐在css中使用加粗） <small> 字体变小版权、声明之类的小字内容 <big> 字体变大无 <mark> 高亮上下文相关性 <>

<em>和<i>、<strong>和<b>、<u>等区别？

Insert wire

Center text

<center></> Not recommended

abbreviation

<abbr title="">...acronym...</abbr>

e.g.

Quote

effect reference

semantic reference

block quote

<blockquote cite="">...Citation content...</blockquote>

Visual references

Inline quotes

<q cite="">...Citation content...<q>

Mark contact details

Mark programming code

preformatted

Mark date and time

Function: Make the computer recognize the date and time

Element datetime basic format

Hyperlink

URL (Uniform Resource Locator Uniform Resource Locator)

Point to current directory

Point to subdirectory

Point to parent directory

"../../folder/folder/file"

Absolute URLs and relative URLs

Use relative links whenever possible

reason

<a href="">...text, images, etc...</a>

Common properties

title prompt when mouse hovers

target=""

Linked document fragments

method

Return to the top of the same document

The link can be directly #

Links to different documents

to the linked document

Assign id attribute

eg: <h2 id="mark">title</2>

Tag names are custom but consistent

to the document being manipulated

Use the hash symbol # to point to it

eg: <a href="Linked document.html# tag">......</a>

Link to the same document

It is also completed using the id tag and # tag.

Download link

method

Just add the download link directly

Add the download attribute to provide a default save file name

Email address

How to directly click on the link to open the email client and send it

mailto:link

Additional information (subject, cc, body)

Embed multimedia

picture

General pictures

<img>

Attributes

(Required attribute) src="path"

(Description displayed when the image cannot be loaded normally) alt="image description"

(Mouseover description) title=""

(size)width="" height=""

How to match pictures and texts

<figure>Picture</figure> and <figcaption>Text</figcaption>

CSS

method

Vector pictures

concept

SVG

How to add to web page

<img>

Example

Cross-browser support

in html

srcset attribute

in CSS

Example

Introduce SVG code (SVG inline)

Example

Advantages and Disadvantages

Embed using <iframe>

Example

shortcoming

Adaptive images

Resolution switching

Different sizes

srcset, sizes

Example

parse

Same size, different resolution

srcset, x syntax

Example

focus switch

<picture...</picture>

Example

Reasons why CSS and JavaScript cannot be used

Debugging method

Chrome's own developer tools - responsive design view

new image format

Use <picture>...</> to reject unsupported types

Example

video

Single format addition

Attributes

src=""

controls

content between tags

Provide access processing that does not support the <video> tag

Multiple format support

Example

Other properties

Audio

Single format addition

Same as <video>

Multiple format support

Same as <video>

Other properties

No <width>, <height>, <poster> attributes

subtitle text

<track> tag link WebVTT format text

Other embedding technologies

Attributes

allowfullscreen, frameborder, src, width, height, sandbox

content between tags

Same as above

Universal embedding tool for embedding multiple types of external content, including JAVA applets and plug-in technologies such as Flash and PDF

Make a table

fundamental element

<table>...</> table root element

<caption>...</> title, placed under <table>

<th>...</> header table header

Attributes

colspan="number of columns" merge columns

rowspan="number of rows" merge rows

<td>...</> cell table data

Attribute (same as <th>)

<tr>...</> row table row

<col> and <colgroup> column group operations

Example

Semantic structuring

element

<thead>...</> header

<tbody>...</> Text

<tfoot>...</> Footer

effect

Example

Several ideas for drawing different tables

Basic type

multi-column type

Other types: consistent ideas, reference exercises (planetary table)

Table nesting

Improving accessibility for people with visual and hearing impairments

Add attribute scope in <th>

scope="col" or scope="row" indicates columns or rows

scope="colgroup" or scope="rowgroup" is used in multi-level headers

id and headers mark everything

<th>Add unique id

<td>Add headers containing all IDs of the slave, separated by spaces

Combining CSS to create table styles

Make a form

concept

interactive tools

design

See the website for design concepts

fundamental element

<form>...</> form root element

Attributes

action

method

<label>...</> text label

Attributes

for="ID"

Widget linking <label> and id=ID

effect

Generally do not use multiple tags and multiple identical IDs at the same time

Reason: Screen readers get confused

<input> Interaction means

Attributes

type=""

Single line text box

text

attribute multiple

password

tel

URL

Selected items

Single choice

radio

Multiple options

checkbox

button

other

number

range

time picker

color

file selector

Hide content

image button

value="Enter default value and submit return value"

placeholder="The underlying secret word is used to prompt content"

readonly read only

name="data block name" (the data block is associated with the server)

list="LIST"

<textarea>...</> multi-line text box

Attributes

cols

rows

wrap?

Note: Only text content is accepted, any content put in will be pure text content

<select>...</> selection box

radio select box

Multiple choice selection box

attributemultiple

<datalist>...</> Alternatives

<datalist>...<option></>,,,</>; <input> add list attribute

Compatibility fallback

Example

<button>...</> button

Attributes

type=""

submit submit

reset reset

button customization

Progress bars and instrument bars

<fieldset>...</> and <legend>...</> generalizers?

effect

Example

Common properties

Custom controls

CSS beautify the form

Compatibility list

Advanced form design

Send form data?

HTML send form

<form>attribute

action="URL" defines where to send data

method defines the sending method

GET method

effect?

POST method

the difference

Retrieve data on the server side

Send File

enctype attribute

Send a form using JavaScript

Form data validation

Built-in form data validation

required attribute

Regular expression verification

pattern attribute

Custom error message

JavaScript validation form

Compatibility with older browser issues

debug

Online Tools W3C

Quoting CSS and JavaScript

CSS

Method: <link>

Attributes

rel="stylesheet" indicates the style sheet of the document

href="" contains the path to the style sheet file

href:Hypertext Reference (hypertext reference), used to establish the relationship between this tag and external resources src:Source (source), used to replace this element

Note: often placed at the head of the document

JavaScript

Method: <script>......</script>

Attributes

src=""

Note: It is not necessary to place it at the head of the document. It is better to place it at the end of the document (before </body>).