Wondershare EdrawMind
MindMap Gallery HTML
- 15
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
- Recommended to you
- Outline
HTML
Web style<br>
Selector
Tag Selector<br>
Tag name {attribute name: attribute; attribute name: attribute}<br>
Class Selector<br>
.Tag name {attribute name: attribute; attribute name: attribute}<br>
ID selector<br>
#id{Attribute name: attribute; Attribute name: attribute}<br>
<pre class="prettyprint linenums prettyprinted"><code class="language-html"><span class="tag"><h1 style="font-size:18px">How to use inline format</h1>< /span></code></pre>
<span style="font-family: 'Wawati SC';">Tag name, .class name, #ID</span><span style="font-family: 'Wawati SC';"><span style=" font-family:Wawati SC">｛</span>Union selector</span><span style="font-family:Wawati SC">｝</span>
<span style="font-family:Wawati SC">Tag name.Class name {Intersection selector}</span>
<span style="font-family: 'Wawati SC';">External tag nameInternal tag name</span><span style="font-family: 'Wawati SC';"><span style="font-family :Wawati SC">｛</span>Descendant Selector</span><span style="font-family:Wawati SC">｝</span>
How to introduce CSS styles<br>
Inline styles<br>
Embed styles<br>
<pre class="prettyprint linenums prettyprinted"><code class="language-html"><span class="tag"><head><style type="test/css"> h1{Attribute name: attribute;}< /style></head></span></code></pre>
Import styles<br>
<link href="Style file name" type="Format of text/css link file" rel="stylesheet" external style sheet of the document/><br>
Specifies the relationship between the current document and the linked document. Only stylesheet is applicable to all browsers
subtopic
CSS properties<br>
type
Font type: font-family<br>
Font rendering: text-shadow<br>
Font size: font-size<br>
Font style: font-style<br>
oblique slightly inclined<br>
italictilt<br>
Font weight: font-weight<br>
Font capitalization: font-variant<br>
Font attribute: font
font{style weight size type}<br>
Text decoration style: text-decoration<br>
Underline: underline<br>
Strikethrough: line-through<br>
Color: color<br>
Background<br>
Background color: background-color<br>
Background image: background-image<br>
Background image repetition method: bakeground-repeat<br>
Background image X, Y axis starting position: background-position<br>
Background association: background-attachment:fixed (the background does not scroll with the text)<br>
block
word spacing: word-spacing
Letter spacing: letter-spacing<br>
Vertical alignment with text: vertical-align, text-align<br>
First line indent: text-indent<br>
Display mode: display<br>
Line-height: line-height
Box Model<br>
Define width and height: width,height<br>
Padding top, bottom, left and right: padding-top,right,bottom,left<br>
Margins top, bottom, left and right: margin-top,right,bottom,left<br>
margin:0px auto;Web page centered<br>
Border: border<br>
Border style: style; border thickness: width; border color up, down, left and right<br>
<pre>border-style: dotted, solid, double, dashed; </pre>
Display controls the display and hiding of elements<br>
display:block displays the element as a block-level element, with line breaks before and after<br>
display:inline displays elements as track elements without line breaks<br>
display:none hides the element<br>
float<br>
float<br>
clearclear float<br>
both clear left and right float<br>
overflow box overflow processing<br>
The visible content will be cropped, and the cropped content will appear outside the box<br>
Hidden content will be cropped and the rest of the content will be invisible<br>
position
position
velative relative positioning<br>
will appear where it is, allowing the element to move "relative to" its origin
absolute positioning<br>
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<br>
list
Item number type: list-style-type<br>
Item number image: list-style-image<br>
Item mark position: list-style-position<br>
inside tag displays inside<br>
onside tag is displayed outside<br>
Hyperlink pseudo-class<br>
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<br>
Default cursor: default<br>
Hyperlink pointer: pointer<br>
span{cursor:pointer;}
Indicates that the program is busy: wait<br>
Indicates available help: help<br>
Instruction text: text
Tags and attributes<br>
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<br>
The text between <title> and </title> is the title of the web page<br>
The text between <body> and </body> is the visible page content
Text between <h1> and </h6> is displayed as the title
Text between <p> and </p> is displayed as a paragraph
<br/> Line break <hr/> Horizontal line<br>
Text between <em> and </em> <i> and </i> is italic<br>
Text between <strong> and </strong> is highlighted<br>
<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><p name="name"></p>
special symbols
Space<br>
> Greater than sign
< Less than sign
© Copyright symbol©
www.w3school.com.cn
<meta> and </meta> define encoding format<br>
UTF-8, GB2312, GBK<br>
<meta charset="UTF-8"></meta><br>
<link> and </link> are used to introduce CSS styles<br>
list
<ul><li> With </li></ul> Unordered List<br>
Attribute type: disc solid circle, square box, circle hollow circle<br>
<ol><li> and </li></ol> ordered list<br>
Attribute type: 1aAIi<br>
<dl><dt><dd> and </dd>Remarks</dt></dl> Definition list<br>
<table> and </table> table tags, lists can be nested inside<br>
<th> and </th> define headers<br>
<tr> and </tr> define table rows<br>
<td> and </td> define the cells of the table<br>
<thead> and </thead> <tbody> and </tbody> <tfoot> and </tfoot>. . .
Properties (horizontal alignment align: left, center, right; absmiddle image center alignment<br> vertical alignment valign: top top alignment, middle center alignment, bottom bottom alignment, baseline alignment)
<table border="1" cellspadding="The spacing between cells and content" cellspacing="The direct spacing between cells''"></table>
Merge colspan horizontally, merge rowspan list<br>
<frameset> and </frameset> (written outside the body)
Attributes (define frame horizontal sorting cols="200px,*,100px" vertical sorting rows)<br>
<frame src="Other web page address" name="Name, easy to jump"/>
<iframe> and </iframe>
<form> and </form> form tags, form elements can be nested inside<br>
<pre><form action="Submitted website" method="GET or POST"></pre>
<p>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 bar</p><p>If 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. </p>
<input name="Element name" type="Type" value="Value" size="Display width" maxlength="Character length" checked="Whether it is selected" disabled="disabled" readonly="readonly read only"> <br>
<em><input type="text"></em> defines a single-line input field for <em>text input</em>
<pre><input type="text" name="lastname"></pre>
<em><input type="password"></em> defines the <em>password box</em>.
<pre><input type="password" name="lastname"></pre>
<em><input type="radio"></em> defines a <em>radio button</em>.
<pre><input type="radio" name="sex" (the names of the same radio buttons must be consistent) value="female">Female</pre>
<em><input type="checkbox" name="The names between checkboxes must be consistent"></em> Define <em>checkbox</em>.
<em><input type="submit"></em> defines the button for <em></em><em>submit</em> the form.
<em><input type="reset"></em> Defines the button to <em></em><em>reset</em> the form.
<em><input type="button"></em> defines a normal button for the <em></em><em></em> form.
<pre><button type="button" onclick="alert('Hello World!')">Click Me!</button></pre>
<em><input type="file"></em> defines the <em></em><em>file selection box</em>.
<input type="hidden">hidden field<br>
<em><select></em> Define the <em>drop-down list</em><em><em><option></em> Define the option to be selected</option></select></em>
<pre><select name="cars" size="Length of each occurrence"><br><option value="volvo"<em></em> selected = "selected" (selected by default)>Volvo</ option><br><option value="saab">Saab</option><br><option value="fiat">Fiat</option><br><option value="audi">Audi</option> <br></select></pre>
The <em><textarea></em> element defines a multi-line input field (<em>textarea</em>)</textarea>
<pre><textarea name="message" rows="10" cols="30"><br>This is predefined text content<br></textarea></pre>
The <em><datalist></em> element specifies a predefined list of options. <option value="Predefined content"></datalist>
<datalist id="browsers"><br> <option value="Internet Explorer"><br> <option value="Firefox"><br> <option value="Chrome"><br> <option value=" Opera"><br> <option value="Safari"><br></datalist>
<fieldset field><legend field title>Semantic form</legend></fieldset><br>
Related forms<br>
<pre id="line1"><span><<span class="start-tag">label</span> <span class="attribute-name">for</span>="<a class="attribute -value">male</a>"></span><span>Male</span><span></<span class="end-tag">label</span>></span><span ><br></span><span><<span class="start-tag">input</span> <span class="attribute-name">type</span>="<a class="attribute -value">radio</a>" <span class="attribute-name">name</span>="<a class="attribute-value">gender</a>" <span class="attribute- name">id</span>="<a class="attribute-value">male</a>"<span>/</span>></span></pre>