HTML Tutorial
HTML XHTML
HTML Media
HTML Advanced
HTML, the Hypertext Markup Language , is one of the most widely used languages and the main language that composes a web page. In today's time when HTML5 is gorgeously occupying the entire Internet, if you want to catch the attention of browsers through web pages, it is not enough to just follow the old ways. Programmers need to master some common HTML codes that must be known, because only familiarity and mastery Commonly used HTML code, programmers can be smooth and beautiful when writing web pages, impress and retain web browsers with delicate thinking and creative details.
| font-size | font size |
| font-style | font format |
| font-weight | font weight |
| color | text color |
Tip: Be careful to use web-safe colors.
| text-decoration | parameter |
| underline | underline text |
| overline | underline text |
| line-through | strikethrough text |
| blink | make text blink |
| none | Does not show any of the above effects |
background
| background-color | set background color | |
| Background picture | background-image: url(URL) | The URL is the storage path of the background image, and none means none. |
| Background image repeat | background-repeat: parameter | |
| parameter value range | ||
| no-repeat | Tile background images without repeating | |
| repeat-x | Make the image tile only horizontally | |
| repeat-y | Make the image tile only vertically | If you do not specify the background image repeat attribute, the browser defaults to the background image to be tiled horizontally and vertically |
| background image fixed | background-attachment: parameter | |
| parameter value range | fixed: When the web page is scrolled, the background image is fixed relative to the browser window | scroll: When the web page is scrolled, the background image is scrolled together with respect to the browser window. |
| word spacing | word-spacing | |
| letter spacing | letter-spacing | |
| text alignment | text-align | |
| the value of the parameter | left: left-aligned
right: right-aligned justify: aligned relative to the left and right ends |
|
| vertical alignment | vertical-align | |
| parameter | top: top alignment
bottom: bottom alignment text-top: relative text top alignment text-bottom: relative text bottom alignment baseline: baseline alignment middle: center alignment sub: display in the form of subscript super: display in the form of superscript |
|
| text indent | text-indent: indent distance | |
| display style | display | block: block-level element, wraps before and after the object
inline: does not wrap before and after the object list-item: wraps before and after the object, adds bullets none: no display |
| height | high |
| width | width |
| padding | padding |
| margin | Margin |
| float | Block-level elements can be arranged in a row, such as a horizontal menu. |
| clear | clear float |
| style | border style | none: no border
dotted: border is dotted line dashed: border is long and short line solid: border is solid line double: border is double line |
| width | border width | |
| color | border color |
| list-style-type | list style | The list characters of different browsers may be different, which may affect the web page, so most of the lists in the web page are displayed by background images |
| cursor | mouse shape parameters | style="cursor:hand" hand
style="cursor:crosshair" cross style="cursor:text" text style="cursor:wait" hourglass style="cursor:move" cross arrow: style="cursor :help" question mark style="cursor:e-resize" right arrow style="cursor:n-resize" up arrow style="cursor:nw-resize" upper left arrow style="cursor:w-resize" Left arrow style="cursor:s-resize" Down arrow style="cursor:se-resize" Right down arrow style="cursor:sw-resize" Left down arrow |
| file type | at the beginning and end of the file | <html></html> |
| file theme | Must be placed in the "Header" block | <title></title> |
| text header | Descriptive data, such as "theme" | <head></head> |
| style | file ontology | <body></body> |
| title | From 1 to 6, there are six layers to choose from | <h?></h?> |
| title alignment | <h?align=left|center|right></h?> | |
| distinguish | <div></div> | |
| differentiated alignment | <div align=left|right|center|justify></div> | |
| Citation block | <blockquote></blockquote> | |
| emphasize | Usually in italics | <em></em> |
| With particular emphasis on | Usually shown in bold | <strong></strong> |
| Citation | Usually in italics | <cite></cite> |
| code | show source code | <code></code> |
| sample | <samp></samp> | |
| keyboard input | <kbd></kbd> | |
| variable | <var></var> | |
| definition | Some browsers do not provide | <dfn></dfn> |
| address | <address></address> | |
| big characters | <big></big> | |
| small print | <small></small> | |
| bold | <b></b> | |
| italic | <I></I> | |
| bottom line | <u></u> | |
| strikethrough | <s></s> | |
| subscript | <sub></sub> | |
| superscript | <sup></sup> | |
| Typewriter | <tt></tt> | |
| predetermined format | <pre></pre> | |
| look in the middle | Both text and pictures | <center></center> |
| shine | The most mocked hashtag of all time | <blink></blink> |
<a href = "javascript.:top.window.close();">Click to close the window</a>!
<body scroll = "no"> <body style = " overflow - y : hidden ">
<object width = "300" height = "300" data = "helloworld.swf" >
<style> button { color :# 000000 ;} </style> <button onclick = document . styleSheets [ 0 ]. rules [ 0 ]. style . color = 'red'>Click the button to directly modify the button selector in the style tag to make the button red</button>
Method 1, use refresh The HTML code snippet is as follows: <head> < meta . http - equiv = "refresh" content = "3" > </ head > 3 means refresh time Method 2, use setTimeout to control < img src =/ logo . gif > <script> function rl (){ document . location . reload () } setTimeout ( rl , 2000 ) </ SCRIPT >
<style> a { text - decoration : none } </style>
<a href = "javascript:history.go(-1)">click back</a>
<link rel = "Shortcut Icon" href = "favicon.icon"> Replace the IE address bar with its own icon <link rel = "Bookmark" href = "favicon.icon"> Can show your icon in favorites <inputstyle= "ime-mode:disabled"> close input method <body oncontextmenu = " window . event . returnValue = false " will completely block the right mouse button onselectstart = " return false " unselect onpaste = " return false " do not paste oncopy = " return false ; " prevent copying oncut = " return false ; " > prevent shearing
<script language = "JavaScript"> if ( window == top ) top . location . href = "frames.htm" ; //frames.htm is the frame page </script>
<script> if ( top . location != self . location ) top . location = self . location ; </script>
<noscript><iframe src = *.html></iframe></noscript>
<input type = button value = view page source code onclick = " window . location = " view-source : "+" http : // www . iditect . com "" >
<a href = "" onclick = " javascript : return del (); " >delete</a> <script> function del () { var msg = "Are you sure you want to delete?\n\nPlease confirm!" ; if ( confirm ( msg )== true ){ return true ; } else { return false ;}} </script>
<META.HTTP -EQUIV = "pragma" CONTENT = "no-cache" > <META.HTTP -EQUIV = "Cache-Control" CONTENT = "no-cache, must-revalidate"> <META. HTTP-EQUIV = "expires" CONTENT = "Wed, 26 Feb 1997 08:21:57 GMT"> or<META.HTTP -EQUIV = "expires" CONTENT = "0">
How to make the form not bumpy?
<input type = text style = " border : 1 solid #000000 " > <input type = text style = " border - left : none ; border - right : none ; border - top : none ; border - bottom : 1 solid #000000 " ></textarea> <body style = " overflow : scroll ; overflow - y : hidden ">//The vertical scroll bar disappears <body style = " overflow : scroll ; overflow - x : hidden ">//The scroll bar horizontal bar disappears <body scroll = "no">// Both scroll bars disappear
<a href = "# " onFocus = " this.blur ( ) " > <img src = "logo.jpg" border = 0></a>
<form.name = "form1" method = "post" action = " mailt****@***.com" enctype = "text/plain" > <input type = submit> </form>
window.opener.location.reload ( ) _ _ _ _ _
<body onload = " top.resizeTo ( 300 , 200 ) ; " _> <body onload = " top.moveBy ( 300 , 200 ) ; " _> // open the location of the page
body { background - image : url ( logo . gif ); background - repeat : no - repeat ; background - position : center ; background - attachment : fixed }
<script>function checkNum ( str ){ return str . match ( /\\D/ ) == null } alert ( checkNum ( "1232142141" )) alert ( checkNum ( "123214214a1" )) </script>
document . body . clientWidth ; document . body . clientHeight ;
if ( /[^/x00-/xff]/ g . test ( s )) alert ( "contains Chinese characters" ); else alert ( "all characters" );
<textarea rows = 1 name = s1 cols = 27 onpropertychange = " this . style . posHeight = this . scrollHeight " > </textarea>
<script.language = Javascript _ > function cc ( dd , dadd ) { // can add error handling var a = new Date(dd) a = a.valueOf() a = a - dadd * 24 * 60 * 60 * 1000 a = new Date(a) alert(a.getFullYear() + "year" + (a.getMonth() +1) + "month" + a.getDate() + "day") } cc("12/23/2002",2) </script>
<script> function checkme () for each ob in radio1 if ob . checked then window . alert ob . value next end function </script><body> <input name = "radio1" type = "radio" value = "style" checked >Style. <input name = "radio1" type = "radio" value = "barcode" >Barcode <input type = "button" value = "check" nclick = "checkme()" > </body>
<SCRIPT> < Hide function killErrors (){ return true ; } window .onerror = killErrors ;> </SCRIPT>
<input onkeydown = " if ( event . keyCode == 13 ) event . keyCode = 9 ">
| special symbols | named entity | decimal encoding | special symbols | named entity | decimal encoding | special symbols | named entity | decimal encoding |
| Alpha | Α | Α | Beta | Β | Β | Γ | Γ | Γ |
| Δ | Δ | Δ | E | Ε | Ε | Z | Ζ | Ζ |
| Η | Η | Η | Θ | Θ | Θ | Ι | Ι | Ι |
| K | Κ | Κ | Λ | Λ | Λ | Μ | Μ | Μ |
| N | Ν | Ν | Ξ | Ξ | Ξ | Ο | Ο | Ο |
| Π | Π | Π | P | Ρ | Ρ | Σ | Σ | Σ |
| Τ | Τ | Τ | Υ | Υ | Υ | Φ | Φ | Φ |
| X | Χ | Χ | Ψ | Ψ | Ψ | Ω | Ω | Ω |
| alpha | α | α | beta | β | β | γ | γ | γ |
| δ | δ | δ | ε | ε | ε | ζ | ζ | ζ |
| n | η | η | θ | θ | θ | ι | ι | ι |
| κ | κ | κ | λ | λ | λ | μ | μ | μ |
| n | ν | ν | ξ | ξ | ξ | ο | ο | ο |
| pi | π | π | ρ | ρ | ρ | ς | ς | ς |
| σ | σ | σ | τ | τ | τ | υ | υ | υ |
| φ | φ | φ | χ | χ | χ | ψ | ψ | ψ |
| ω | ω | ω | ϑ | ϑ | ϑ | ϒ | ϒ | ϒ |
| ϖ | ϖ | ϖ | • | • | • | … | … | … |
| ' | ′ | ′ | " | ″ | ″ | ‾ | ‾ | ‾ |
| ⁄ | ⁄ | ⁄ | ℘ | ℘ | ℘ | ℑ | ℑ | ℑ |
| ℜ | ℜ | ℜ | ™ | ™ | ™ | ℵ | ℵ | ℵ |
| ← | ← | ← | ↑ | ↑ | ↑ | → | → | → |
| ↓ | ↓ | ↓ | ↔ | ↔ | ↔ | ↵ | ↵ | ↵ |
| ⇐ | ⇐ | ⇐ | ⇑ | ⇑ | ⇑ | ⇒ | ⇒ | ⇒ |
| ⇓ | ⇓ | ⇓ | ⇔ | ⇔ | ⇔ | ∀ | ∀ | ∀ |
| ∂ | ∂ | ∂ | ∃ | ∃ | ∃ | ∅ | ∅ | ∅ |
| ∇ | ∇ | ∇ | ∈ | ∈ | ∈ | ∉ | ∉ | ∉ |
| ∋ | ∋ | ∋ | ∏ | ∏ | ∏ | ∑ | ∑ | − |
| − | − | − | ∗ | ∗ | ∗ | √ | √ | √ |
| ∝ | ∝ | ∝ | ∞ | ∞ | ∞ | ∠ | ∠ | ∠ |
| ∧ | ∧ | ⊥ | ∨ | ∨ | ⊦ | ∩ | ∩ | ∩ |
| ∪ | ∪ | ∪ | ∫ | ∫ | ∫ | ∴ | ∴ | ∴ |
| ∼ | ∼ | ∼ | ≅ | ≅ | ≅ | ≈ | ≈ | ≅ |
| ≠ | ≠ | ≠ | ≡ | ≡ | ≡ | ≤ | ≤ | ≤ |
| ≥ | ≥ | ≥ | ⊂ | ⊂ | ⊂ | ⊃ | ⊃ | ⊃ |
| ⊄ | ⊄ | ⊄ | ⊆ | ⊆ | ⊆ | ⊇ | ⊇ | ⊇ |
| ⊕ | ⊕ | ⊕ | ⊗ | ⊗ | ⊗ | ⊥ | ⊥ | ⊥ |
| ⋅ | ⋅ | ⋅ | ⌈ | ⌈ | ⌈ | ⌉ | ⌉ | ⌉ |
| ⌊ | ⌊ | ⌊ | ⌋ | ⌋ | ⌋ | ◊ | ◊ | ◊ |
| ♠ | ♠ | ♠ | ♣ | ♣ | ♣ | ♥ | ♥ | ♥ |
| ♦ | ♦ | ♦ | |   | ¡ | ¡ | ¡ | |
| ¢ | ¢ | ¢ | £ | £ | £ | ¤ | ¤ | ¤ |
| ¥ | ¥ | ¥ | ¦ | ¦ | ¦ | § | § | § |
| ¨ | ¨ | ¨ | © | © | © | ª | ª | ª |
| « | « | « | ¬ | ¬ | ¬ | | ­ | ­ |
| ® | ® | ® | ¯ | ¯ | ¯ | ° | ° | ° |
| ± | ± | ± | ² | ² | ² | ³ | ³ | ³ |
| ´ | ´ | ´ | µ | µ | µ | " | " | " |
| < | < | < | > | > | > | ' | ' |