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

HTML

This mind map about HTML shares the knowledge of web page styles, tags and attributes. If you are interested, you can take a look.

Edited at 2023-05-27 23:46:10

PlotWizard

Recent works View more works>>

HTML

PlotWizard

Recent works View more works>>

Recommended to you
Outline

Contextos de desarrollo NO FORMALES/INFORMALES
- 2
Ana Martín Moreno
Order-type intelligent hardware product development process
- 11
PlotWizard
Fresh air ventilator product development process and related information
- 9
PlotWizard
New product development process
- 13
PlotWizard
HTML5
- 10
PlotWizard
Personal career planning for students
- 8
- 1
WSjgeRkp
Agile development process
- 5
LoganBennett_045

HTML

Web style

Selector

Tag Selector

Tag name {attribute name: attribute; attribute name: attribute}

Class Selector

.Tag name {attribute name: attribute; attribute name: attribute}

ID selector

#id{Attribute name: attribute; Attribute name: attribute}

<pre class="prettyprint linenums prettyprinted"><code class="language-html"><h1 style="font-size:18px">How to use inline format</h1></code></pre>

Tag name, .class name, #ID｛Union selector｝

Tag name.Class name {Intersection selector}

External tag nameInternal tag name｛Descendant Selector｝

How to introduce CSS styles

Inline styles

Embed styles

<pre class="prettyprint linenums prettyprinted"><code class="language-html"><head><style type="test/css"> h1{Attribute name: attribute;}< /style></head></code></pre>

Import styles

Specifies the relationship between the current document and the linked document. Only stylesheet is applicable to all browsers

subtopic

CSS properties

type

Font type: font-family

Font rendering: text-shadow

Font size: font-size

Font style: font-style

oblique slightly inclined

italictilt

Font weight: font-weight

Font capitalization: font-variant

Font attribute: font

font{style weight size type}

Text decoration style: text-decoration

Underline: underline

Strikethrough: line-through

Color: color

Background

Background color: background-color

Background image: background-image

Background image repetition method: bakeground-repeat

Background image X, Y axis starting position: background-position

Background association: background-attachment:fixed (the background does not scroll with the text)

block

word spacing: word-spacing

Letter spacing: letter-spacing

Vertical alignment with text: vertical-align, text-align

First line indent: text-indent

Display mode: display

Line-height: line-height

Box Model

Define width and height: width,height

Padding top, bottom, left and right: padding-top,right,bottom,left

Margins top, bottom, left and right: margin-top,right,bottom,left

margin:0px auto;Web page centered

Border: border

Border style: style; border thickness: width; border color up, down, left and right

<pre>border-style: dotted, solid, double, dashed; </pre>

Display controls the display and hiding of elements

display:block displays the element as a block-level element, with line breaks before and after

display:inline displays elements as track elements without line breaks

display:none hides the element

float

clearclear float

both clear left and right float

overflow box overflow processing

The visible content will be cropped, and the cropped content will appear outside the box

Hidden content will be cropped and the rest of the content will be invisible

position

velative relative positioning

will appear where it is, allowing the element to move "relative to" its origin

absolute positioning

An element box set to absolute positioning is completely removed from the document flow and positioned relative to its containing block, which may be another element in the document or the initial containing block. The space previously occupied by the element in normal document flow is closed, as if the element did not exist. The element generates a block-level box after positioning, regardless of what type of box it originally generated in the normal flow.

z-index setting level

list

Item number type: list-style-type

Item number image: list-style-image

Item mark position: list-style-position

inside tag displays inside

onside tag is displayed outside

Hyperlink pseudo-class

Hyperlink style when accessed without clicking a:link

Hyperlink style after clicking to visit a:visited

The hyperlink style on which the mouse is hovering a:hover

Hyperlink style when mouse click is not released a:active

Set mouse shape: cursor

Default cursor: default

Hyperlink pointer: pointer

span{cursor:pointer;}

Indicates that the program is busy: wait

Indicates available help: help

Instruction text: text

Tags and attributes

Text between <html> and </html> describing the web page

The text between <head> and </head> is the visible content at the head of the web page

The text between <title> and </title> is the title of the web page

The text between <body> and </body> is the visible page content

Text between <h1> and </h6> is displayed as the title

Text between and is displayed as a paragraph

Line break <hr/> Horizontal line

Text between and and is italic

Text between and is highlighted

<img/> and </img>HTML images are defined through the <img> tag.

<pre><img src="Image address" width="width" height="length" <code>alt="</code><code>Used to define a string of prepared replaceable text for the image"</ code> title="Mouseover to display text"/></pre>

<a> and </a> HTML links are defined using the <a> tag.

·······

Anchor link (jump to specified tag): <a href="#name"></a>

special symbols

Space

> Greater than sign

< Less than sign

www.w3school.com.cn

UTF-8, GB2312, GBK

list

<ul><li> With </li></ul> Unordered List

Attribute type: disc solid circle, square box, circle hollow circle

<ol><li> and </li></ol> ordered list

Attribute type: 1aAIi

<dl><dt><dd> and </dd>Remarks</dt></dl> Definition list

<table> and </table> table tags, lists can be nested inside

<th> and </th> define headers

<tr> and </tr> define table rows

<td> and </td> define the cells of the table

<thead> and </thead> <tbody> and </tbody> <tfoot> and </tfoot>. . .

Properties (horizontal alignment align: left, center, right; absmiddle image center alignment vertical alignment valign: top top alignment, middle center alignment, bottom bottom alignment, baseline alignment)

Merge colspan horizontally, merge rowspan list

<frameset> and </frameset> (written outside the body)

Attributes (define frame horizontal sorting cols="200px,*,100px" vertical sorting rows)

<form> and </form> form tags, form elements can be nested inside

If the form submission is passive (such as a search engine query) and does not contain sensitive information. When you use GET, form data is visible in the page address barIf the form is updating data, or contains sensitive information (such as a password). POST is more secure because the data submitted in the address bar of the page is invisible.

<input type="text"> defines a single-line input field for text input

<input type="password"> defines the password box.

<input type="radio"> defines a radio button.

<pre><input type="radio" name="sex" (the names of the same radio buttons must be consistent) value="female">Female</pre>

<input type="checkbox" name="The names between checkboxes must be consistent"> Define checkbox.

<input type="submit"> defines the button for submit the form.

<input type="reset"> Defines the button to reset the form.

<input type="button"> defines a normal button for the form.

<pre><button type="button" onclick="alert('Hello World!')">Click Me!</button></pre>

<input type="file"> defines the file selection box.

<input type="hidden">hidden field

<select> Define the drop-down list<option> Define the option to be selected</option></select>

<pre><select name="cars" size="Length of each occurrence"> <option value="volvo" selected = "selected" (selected by default)>Volvo</ option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select></pre>

The <textarea> element defines a multi-line input field (textarea)</textarea>

<pre><textarea name="message" rows="10" cols="30"> This is predefined text content </textarea></pre>

The <datalist> element specifies a predefined list of options. <option value="Predefined content"></datalist>

<fieldset field><legend field title>Semantic form</legend></fieldset>

Related forms

<pre id="line1"><label for="<a class="attribute -value">male</a>">Male</label> <input type="<a class="attribute -value">radio</a>" name="<a class="attribute-value">gender</a>" id="<a class="attribute-value">male</a>"/></pre>