What common HTML code do programmers have to know?


May 03, 2021 12:29 HTML


Table of contents


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.


HTML-CSS code

Text settings

font-size 字号大小
font-style 字体格式
font-weight 字体粗细
color 文本颜色

Tip: Be careful to use web security colors.

Hyperlink settings

text-decoration 参数
underline 为文字加下划线
overline 为文字加上划线
line-through 为文字加删除线
blink 使文字闪烁
none 不显示上述任何效果

Background

background-color 设置背景色
背景图片 background-image: url(URL) URL就是背景图片的存放路径,none表示无。
背景图片重复 background-repeat: 参数
参数取值范围
no-repeat 不重复平铺背景图片
repeat-x 使图片只在水平方向上平铺
repeat-y 使图片只在垂直方向上平铺 如果不指定背景图片重复属性,浏览器默认的是背景图片向水平和垂直两个方向平铺
背景图片固定 background-attachment: 参数
参数取值范围 fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动 scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动
Block
单词间距 word-spacing
字母间距 letter-spacing
文本对齐 text-align
参数的取值 left:左对齐
right:右对齐
justify:相对左右两端对齐
垂直对齐 vertical-align
参数 top:顶对齐
bottom:底对齐
text-top:相对文本顶对齐
text-bottom:相对文本底对齐
baseline:基准线对齐
middle:中心对齐
sub:以下标的形式显示
super:以上标的形式显示
文本缩进 text-indent: 缩进距离
显示样式 display block:块级元素,在对象前后都换行
inline:在对象前后都不换行
list-item:在对象前后都换行,增加了项目符号
none:无显示



Box

height 高度
width 宽度
padding 内边距
margin 外边距
float(浮动) 可以让块级元素在一行中排列,例如横向菜单。
clear 清除浮动

Border

样式 border style none:无边框
dotted:边框为点线
dashed:边框为长短线
solid:边框为实线
double:边框为双线
宽度 border width
颜色 border color

List

list-style-type 列表样式 不同浏览器的列表符可能不相同,可能会影响到网页,所以网页中的列表大多都是由背景图片显示

Mouse

cursor 鼠标形状参数 style="cursor:hand"      手形
style="cursor:crosshair"   十字形
style="cursor:text"      文本形
style="cursor:wait"      沙漏形
style="cursor:move"     十字箭头形:
style="cursor:help"      问号形
style="cursor:e-resize"    右箭头形
style="cursor:n-resize"    上箭头形
style="cursor:nw-resize"   左上箭头形
style="cursor:w-resize"    左箭头形
style="cursor:s-resize"    下箭头形
style="cursor:se-resize"   右下箭头形
style="cursor:sw-resize"   左下箭头形


HTML Common Code: Structural Definitions

文件类型 放在档案的开头与结尾 <html></html>
文件主题 必须放在「文头」区块内 <title></title>
文头 描述性资料,像是「主题」 <head></head>
文体 文件本体 <body></body>
标题 从1到6,有六层选择 <h?></h?>
标题的对齐 <h? align=left|center|right></h?>
区分 <div></div>
区分的对齐 <div align=left|right|center|justify></div>
引文区块 <blockquote></blockquote>
强调 通常会以斜体显示 <em></em>
特别强调 通常会以加粗显示 <strong></strong>
引文 通常会以斜体显示 <cite></cite>
显示原始码之用 <code></code>
样本 <samp></samp>
键盘输入 <kbd></kbd>
变数 <var></var>
定义 有些浏览器不提供 <dfn></dfn>
地址 <address></address>
大字 <big></big>
小字 <small></small>
加粗 <b></b>
斜体 <I></I>
底线 <u></u>
删除线 <s></s>
下标 <sub></sub>
上标 <sup></sup>
打字机体 <tt></tt>
预定格式 <pre></pre>
向中看齐 文字与图片都可以 <center></center>
闪耀 有史以来最被嘲弄的标签 <blink></blink>



HTML common code: Problems that are often encountered

Click to close the window

<a href="javascript.:top.window.close();">点击关闭窗口</a>!

Try it out . . .

How do I remove the scroll bar on the right side of the home page?

<body scroll="no">

<body style="overflow-y:hidden">


Try it out . . .

Join the Flash file in HTML using the element

<object width="300" height="300" data="helloworld.swf" >


Try it out . . .

How do I refresh css without refreshing the page?

<style>

button{color:#000000;}

</style>

<button onclick=document.styleSheets[0].rules[0].style.color='red'>点击按钮直接修改style标签里button选择符使按钮改为  红色</button>


Try it out . . .

How do I make a web page refresh automatically?

方法一,用refresh

HTML 代码片段如下:

<head>

<meta. http-equiv="refresh" content="3">

</head>

3表示刷新时间

方法二,使用setTimeout控制

<img src=/logo.gif>

<script>

function rl(){

document.location.reload()

}

setTimeout(rl,2000)

</SCRIPT>


Try it out . . .

How to make hyperlinks underlined

<style>

a { text-decoration: none}

</style>


Try it out . . .

How do I use html to implement the back button on my browser?

<a href="java script:history.go(-1)">点击后退</a>

Try it out . . .



HTML Common Code: Tips You Don't Necessarily Know

<link rel="Shortcut Icon"href="favicon.icon"> IE地址栏前换成自己的图标

<link rel="Bookmark"href="favicon.icon"> 可以在收藏夹中显示出你的图标

<inputstyle="ime-mode:disabled"> 关闭输入法

<body  oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键

onselectstart="return false" 取消选取

onpaste="return false" 不准粘贴

oncopy="return false;" 防止复制

oncut="return false;"> 防止剪切


Try it out . . .

Always carry a frame

<script language="JavaScript">

if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页

</script>


Try it out . . .

Prevent people from being framed.

<script>

if (top.location != self.location)top.location=self.location;

</script>


Try it out . . .

Web pages will not be saved

<noscript><iframe src=*.html></iframe></noscript>

Try it out . . .

View the source code for the web page

<input type=button value=查看网页源代码 onclick="window.location = "view-source:"+"http://www.w3cschool.cn"">

Try it out . . .

Confirm when deleted

<a href="" onclick="javascript:return del();">删除</a>

<script>

function del() {

var msg = "您真的确定要删除吗?\n\n请确认!";

if (confirm(msg)==true){

return true;

}else{

return false;}}

</script>

Try it out . . .

Web pages are not cached

<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">


Try it out . . .

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"> //两种滚动条都消失


Try it out . . .

How do I remove a dashed line around a picture after clicking on a picture link?

<a href="#" onFocus="this.blur()">

<img src="logo.jpg"border=0></a>


Try it out . . .

E-mail processes the submission form

<form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">

<input type=submit>

</form>


Try it out . . .

How do I write in the code that refreshes the parent window in an open child window?

window.opener.location.reload()

How to set the size of the open page

<body onload="top.resizeTo(300,200);">

<body onload="top.moveBy(300,200);">    //打开页面的位置


Try it out . . .

In the page, how to add a background picture that is not full, pull the page when the background picture does not move

body {background-image:url(logo.gif);

background-repeat:no-repeat;

background-position:center;

background-attachment: fixed}


Try it out . . .

Check that a string consists entirely of numbers

<script>

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

</script>


Try it out . . .

Get the size of a window

document.body.clientWidth;

document.body.clientHeight;

How to tell if it's a character

if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");

else alert("全是字符");


The number of TEXTAREA adaptive text lines

<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">

</textarea>


Try it out . . .

The date minus the number of days is equal to the second date

<script. language=Javascript>

function cc(dd,dadd)

{

//可以加上错误处理

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 1000

a = new Date(a)

alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日")

} cc("12/23/2002",2)

</script>


Which Radio was chosen

<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>


Try it out . . .

The script never goes wrong

<SCRIPT>

<Hide function killErrors(){return true;} window.onerror = killErrors;>

</SCRIPT>


Try it out . . .

The ENTER key moves the cursor to the next input box

<input onkeydown="if(event.keyCode==13)event.keyCode=9">



HTML special symbol encoding control table

Special symbols Name the entity Heteth coding Special symbols Name the entity Heteth coding Special symbols Name the entity Heteth coding
Alpha &Alpha; &#913; Beta &Beta; &#914; Gamma &Gamma; &#915;
&Delta; &#916; Ε &Epsilon; &#917; Ζ &Zeta; &#918;
Η &Eta; &#919; Theta &Theta; &#920; I &Iota; &#921;
K &Kappa; &#922; L &Lambda; &#923; M &Mu; &#924;
N &Nu; &#925; I'm not going &Xi; &#926; The &Omicron; &#927;
P &Pi; &#928; R &Rho; &#929; S &Sigma; &#931;
T &Tau; &#932; Y &Upsilon; &#933; F &Phi; &#934;
X &Chi; &#935; Y &Psi; &#936; Oh &Omega; &#937;
A &alpha; &#945; B &beta; &#946; C &gamma; &#947;
D &delta; &#948; E &epsilon; &#949; G &zeta; &#950;
the &eta; &#951; I &theta; &#952; I &iota; &#953;
Mr. President, i &kappa; &#954; L &lambda; &#955; M &mu; &#956;
ν &nu; &#957; ξ &xi; &#958; ο &omicron; &#959;
π &pi; &#960; ρ &rho; &#961; ς &sigmaf; &#962;
σ &sigma; &#963; τ &tau; &#964; υ &upsilon; &#965;
φ &phi; &#966; χ &chi; &#967; ψ &psi; &#968;
ω &omega; &#969; ϑ &thetasym; &#977; ϒ &upsih; &#978;
ϖ &piv; &#982; &bull; &#8226; &hellip; &#8230;
&prime; &#8242; &Prime; &#8243; &oline; &#8254;
&frasl; &#8260; &weierp; &#8472; &image; &#8465;
&real; &#8476; &trade; &#8482; &alefsym; &#8501;
&larr; &#8592; &uarr; &#8593; &rarr; &#8594;
&darr; &#8595; &harr; &#8596; &crarr; &#8629;
&lArr; &#8656; &uArr; &#8657; &rArr; &#8658;
&dArr; &#8659; &hArr; &#8660; &forall; &#8704;
&part; &#8706; &exist; &#8707; &empty; &#8709;
&nabla; &#8711; &isin; &#8712; &notin; &#8713;
&ni; &#8715; &prod; &#8719; &sum; &#8722;
&minus; &#8722; &lowast; &#8727; &radic; &#8730;
&prop; &#8733; &infin; &#8734; &ang; &#8736;
&and; &#8869; &or; &#8870; &cap; &#8745;
&cup; &#8746; &int; &#8747; &there4; &#8756;
&sim; &#8764; &cong; &#8773; &asymp; &#8773;
&ne; &#8800; &equiv; &#8801; &le; &#8804;
&ge; &#8805; &sub; &#8834; &sup; &#8835;
&nsub; &#8836; &sube; &#8838; &supe; &#8839;
&oplus; &#8853; &otimes; &#8855; &perp; &#8869;
&sdot; &#8901; &lceil; &#8968; &rceil; &#8969;
&lfloor; &#8970; &rfloor; &#8971; &loz; &#9674;
&spades; &#9824; &clubs; &#9827; &hearts; &#9829;
&diams; &#9830; &nbsp; &#160; ¡ &iexcl; &#161;
¢ &cent; &#162; £ &pound; &#163; ¤ &curren; &#164;
¥ &yen; &#165; ¦ &brvbar; &#166; § &sect; &#167;
¨ &uml; &#168; © &copy; &#169; ª &ordf; &#170;
« &laquo; &#171; ¬ &not; &#172; ­ &shy; &#173;
® &reg; &#174; ¯ &macr; &#175; ° &deg; &#176;
± &plusmn; &#177; ² &sup2; &#178; ³ &sup3; &#179;
´ &acute; &#180; µ &micro; &#181 " &quot; &#34;
< &lt; &#60; > &gt; &#62; ' &#39;