May 03, 2021 HTML
2. HTML Common Code: Structural Definitions
3. HTML common code: Problems that are often encountered
HTML, or hyper text markup language, is one of the most widely used languages and is the main language that make up a Web page. I n today's HTML5 gorgeous occupation of the entire Internet, if you want to catch the eye of visitors through the web erratic is not possible, program apes need to master some must know the common HTML code, because only familiar with the commonly used HTML code, program apes in the writing of web pages can be smooth and beautiful, with delicate thinking and creative details to impress and retain web visitors.
| font-size | Font size |
| font-style | font format |
| font-weight | Font thick |
| color | Text color |
Tip: Be careful to use web security colors.
| text-decoration | parameter |
| underline | Culture with text |
| overline | To the text |
| line-through | Clearing a deletion for text |
| blink | Text flashes |
| none | Do 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, NONE is not. |
| Background picture repeat | Background-repeat: parameter | |
| Parameter range | ||
| no-repeat | Do not repeat tile background pictures | |
| repeat-x | Make the picture only in the horizontal direction | |
| repeat-y | Make the picture only in the vertical direction | If the background image repeat property is not specified, the browser default is the background image to the horizontal and vertical two directions. |
| Background picture fixation | Background-attachment: parameter | |
| Parameter range | Fixed: When the web is scrolling, the background image is fixed with respect to the window of the browser. | Scroll: When the web is scrolling, the background image is scrolling together relative to the browser window. |
| Word spacing | word-spacing | |
| Alphabet spacing | letter-spacing | |
| Text alignment | text-align | |
| Value of parameters |
Left: left alignment
Right: right alignment Justify: Aligned with respect to the left and right ends |
|
| Vertical alignment | vertical-align | |
| parameter |
TOP:
Bottom: TEXT-top: relative text top alignment TEXT-BOTTOM: Right relative to the bottom of the text Baseline: baseline alignment Middle: Center is aligned SUB: Show below SUPER: Displayed above the form |
|
| Text indent | Text-Indent: Regeneration Distance | |
| Display style | display |
Block: Block-level elements, wrap before and after the object
Inline: Do not change in front of the object List-item: Putting in the object before and after, adding the project symbol None: No display |
| height | high |
| width | width |
| padding | Inner margin |
| margin | Outer distance |
| Float (floating) | Block-level elements can be arranged in a row, such as a horizontal menu. |
| clear | Clear floating |
| style | border style |
None: Borderless
Dotted: Border as a bit Dashed: Border is long shortline Solid: Border is a solid line Double: Border is double line |
| width | border width | |
| colour | border color |
| list-style-type | List style | The list of different browsers may not be the same, may affect the web, so many of the lists in the web page are displayed by the background image |
| 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 Shaped: Style = "CURSOR: Help" Question mark Style = "CURSOR: E-Resize" right arrow STYLE = "CURSOR: N-Resize" on arrow shaped Style = "cursor: nw-resize" left up arrow shaped Style = "Cursor: W-Resize" left arrow Style = "cursor: s-resize" down the arrow Style = "cursor: se-resize" right down arrow shaped Style = "cursor: sw-resize" left left arrow shaped |
| file type | Place the beginning of the file and end | <html></html> |
| File topic | Must be placed in the "Wenhe" block | <title></title> |
| Writing | Descriptive information, like "theme" | <head></head> |
| Stylistic | File body | <body></body> |
| title | From 1 to 6, there are six layers of choice | <h?></h?> |
| Title | <h? align=left|center|right></h?> | |
| distinguish | <div></div> | |
| Distinguished alignment | <div align=left|right|center|justify></div> | |
| Citation block | <blockquote></blockquote> | |
| emphasize | Usually displayed in a bevel | <em></em> |
| With particular emphasis on | Usually displayed with bold | <strong></strong> |
| Quit | Usually displayed in a bevel | <cite></cite> |
| code | Show the original 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 word | <big></big> | |
| Small word | <small></small> | |
| Bold | <b></b> | |
| Bevel | <I></I> | |
| Bottom line | <u></u> | |
| Delete line | <s></s> | |
| Subscript | <sub></sub> | |
| Laid | <sup></sup> | |
| Typhoon | <tt></tt> | |
| Predetermined format | <pre></pre> | |
| In the middle | Text and pictures can | <center></center> |
| shine | The most mocked label ever | <blink></blink> |
<style>
button{color:#000000;}
</style>
<button onclick=document.styleSheets[0].rules[0].style.color='red'>点击按钮直接修改style标签里button选择符使按钮改为 红色</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 control
<img src=/logo.gif>
<script>
function rl(){
document.location.reload()
}
setTimeout(rl,2000)
</SCRIPT>
<link rel="Shortcut Icon"href="favicon.icon"> IE地址栏前换成自己的图标
<link rel="Bookmark"href="favicon.icon"> 可以在收藏夹中显示出你的图标
<inputstyle="ime-mode:disabled"> 关闭输入法
<body onContextMenu = "Window.Event.ReturnValue = false" will be thoroughly shielded
OnselectStart = "Return FALSE" Cancel Pickup
OnPaste = "Return False" is not allowed to paste
ONCOPY = "Return False;" Prevent Copy
ONCUT = "Return False;"> Prevent shear
<script language="JavaScript">
IF (window == TOP) Top.Location.href = "frames.htm"; //frames.htm is the framework page
</script>
<a href="" onclick="javascript:return del();">删除</a>
<script>
function del() {
VAR MSG = "Do you really have to delete? \ n \ n Please 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">
或者<META. HTTP-EQUIV="expires"CONTENT="0">
How do I make a form feel bump-like?
<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"> //滚动条竖条消失
<body style="overflow:scroll;overflow-x:hidden"> //滚动条横条消失
<body scroll="no"> //两种滚动条都消失
<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);"> //打开页面的位置
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 (/[1x00-/xff]/g.test(s)) ALERT ("With 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 an 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 | Name the entity | Heteth coding | Special symbols | Name the entity | Heteth coding | Special symbols | Name the entity | Heteth coding |
| Alpha | Α | Α | Beta | Β | Β | Gamma | Γ | Γ |
| flood | Δ | Δ | Ε | Ε | Ε | Ζ | Ζ | Ζ |
| Η | Η | Η | Theta | Θ | Θ | I | Ι | Ι |
| K | Κ | Κ | L | Λ | Λ | M | Μ | Μ |
| N | Ν | Ν | I'm not going | Ξ | Ξ | The | Ο | Ο |
| P | Π | Π | R | Ρ | Ρ | S | Σ | Σ |
| T | Τ | Τ | Y | Υ | Υ | F | Φ | Φ |
| X | Χ | Χ | Y | Ψ | Ψ | Oh | Ω | Ω |
| A | α | α | B | β | β | C | γ | γ |
| D | δ | δ | E | ε | ε | G | ζ | ζ |
| the | η | η | I | θ | θ | I | ι | ι |
| Mr. President, i | κ | κ | L | λ | λ | M | μ | μ |
| ν | ν | ν | ξ | ξ | ξ | ο | ο | ο |
| π | π | π | ρ | ρ | ρ | ς | ς | ς |
| σ | σ | σ | τ | τ | τ | υ | υ | υ |
| φ | φ | φ | χ | χ | χ | ψ | ψ | ψ |
| ω | ω | ω | ϑ | ϑ | ϑ | ϒ | ϒ | ϒ |
| ϖ | ϖ | ϖ | • | • | • | … | … | … |
| ′ | ′ | ′ | ″ | ″ | ″ | ‾ | ‾ | ‾ |
| ⁄ | ⁄ | ⁄ | ℘ | ℘ | ℘ | ℑ | ℑ | ℑ |
| ℜ | ℜ | ℜ | ™ | ™ | ™ | ℵ | ℵ | ℵ |
| ← | ← | ← | ↑ | ↑ | ↑ | → | → | → |
| ↓ | ↓ | ↓ | ↔ | ↔ | ↔ | ↵ | ↵ | ↵ |
| ⇐ | ⇐ | ⇐ | ⇑ | ⇑ | ⇑ | ⇒ | ⇒ | ⇒ |
| ⇓ | ⇓ | ⇓ | ⇔ | ⇔ | ⇔ | ∀ | ∀ | ∀ |
| ∂ | ∂ | ∂ | ∃ | ∃ | ∃ | ∅ | ∅ | ∅ |
| ∇ | ∇ | ∇ | ∈ | ∈ | ∈ | ∉ | ∉ | ∉ |
| ∋ | ∋ | ∋ | ∏ | ∏ | ∏ | ∑ | ∑ | − |
| − | − | − | ∗ | ∗ | ∗ | √ | √ | √ |
| ∝ | ∝ | ∝ | ∞ | ∞ | ∞ | ∠ | ∠ | ∠ |
| ∧ | ∧ | ⊥ | ∨ | ∨ | ⊦ | ∩ | ∩ | ∩ |
| ∪ | ∪ | ∪ | ∫ | ∫ | ∫ | ∴ | ∴ | ∴ |
| ∼ | ∼ | ∼ | ≅ | ≅ | ≅ | ≈ | ≈ | ≅ |
| ≠ | ≠ | ≠ | ≡ | ≡ | ≡ | ≤ | ≤ | ≤ |
| ≥ | ≥ | ≥ | ⊂ | ⊂ | ⊂ | ⊃ | ⊃ | ⊃ |
| ⊄ | ⊄ | ⊄ | ⊆ | ⊆ | ⊆ | ⊇ | ⊇ | ⊇ |
| ⊕ | ⊕ | ⊕ | ⊗ | ⊗ | ⊗ | ⊥ | ⊥ | ⊥ |
| ⋅ | ⋅ | ⋅ | ⌈ | ⌈ | ⌈ | ⌉ | ⌉ | ⌉ |
| ⌊ | ⌊ | ⌊ | ⌋ | ⌋ | ⌋ | ◊ | ◊ | ◊ |
| ♠ | ♠ | ♠ | ♣ | ♣ | ♣ | ♥ | ♥ | ♥ |
| ♦ | ♦ | ♦ | |   | ¡ | ¡ | ¡ | |
| ¢ | ¢ | ¢ | £ | £ | £ | ¤ | ¤ | ¤ |
| ¥ | ¥ | ¥ | ¦ | ¦ | ¦ | § | § | § |
| ¨ | ¨ | ¨ | © | © | © | ª | ª | ª |
| « | « | « | ¬ | ¬ | ¬ | | ­ | ­ |
| ® | ® | ® | ¯ | ¯ | ¯ | ° | ° | ° |
| ± | ± | ± | ² | ² | ² | ³ | ³ | ³ |
| ´ | ´ | ´ | µ | µ | µ | " | " | " |
| < | < | < | > | > | > | ' | ' |