程序员必须知道的HTML常用代码有哪些?

2022-03-28 16:10 更新

HTML 即超文本标记语言,是目前应用最为广泛的语言之一,是组成一个网页的主要语言。在现今这个 HTML5 华丽丽地占领了整个互联网的时候,如果想要通过网页抓住浏览者的眼球光靠因循守旧是不行的,程序猿们需要掌握一些必须知道的 HTML 常用代码,因为只有熟悉掌握了常用的 HTML 代码,程序猿们在编写网页的时候才可以做到流畅美观,用细腻的思维和创意的细节效果打动并留住网页浏览者。


HTML+CSS 代码

文本设置

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

提示:注意使用网页安全色.

超链接设置 

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

背景 

 background-color  设置背景色  
 背景图片  background-image: url(URL)  URL就是背景图片的存放路径,none表示无。
 背景图片重复  background-repeat: 参数  
 参数取值范围    
 no-repeat  不重复平铺背景图片  
 repeat-x  使图片只在水平方向上平铺  
 repeat-y  使图片只在垂直方向上平铺  如果不指定背景图片重复属性,浏览器默认的是背景图片向水平和垂直两个方向平铺
 背景图片固定  background-attachment: 参数  
 参数取值范围  fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动  scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动
区块
 单词间距    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:无显示



方框

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

边框

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

列表

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

鼠标

 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常用代码之:结构性定义

 文件类型  放在档案的开头与结尾 <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常用代码之:常常会遇到的问题

点击关闭窗口

实例

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

尝试一下 »

请问如何去掉主页右面的滚动条?

实例

<body scroll="no"> 

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


尝试一下 »

使用<object> 元素在 HTML 加入 Flash 文件

实例

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


尝试一下 »

如何在不刷新页面的情况下刷新css?

实例

<style> 

button{color:#000000;} 

</style> 

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


尝试一下 »

请问如何让网页自动刷新?

实例

 方法一,用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>


尝试一下 »

如何让超链接没有下划线

实例

<style> 

a { text-decoration: none} 

 </style>


尝试一下 »

如何用html实现浏览器上后退按钮的功能? 

实例

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

尝试一下 »



HTML常用代码之:你不一定知道的技巧

实例

<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;"> 防止剪切


尝试一下 »

永远都会带着框架 

实例

<script language="JavaScript">

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

</script>


尝试一下 »

 防止被人frame.

实例

<script>

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

</script>


尝试一下 »

 网页将不能被另存为

实例

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

尝试一下 »

 查看网页源代码

实例

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

尝试一下 »

删除时确认

实例

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

<script> 

function del() {

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

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


尝试一下 »

怎样让表单没有凹凸感?

实例

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


尝试一下 »

怎样去掉图片链接点击后,图片周围的虚线?

实例

<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);">    //打开页面的位置


尝试一下 »

在页面中,如何加入不是满铺的背景图片,拉动页面时背景图不动

实例

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("含有汉字"); 

else alert("全是字符");


TEXTAREA自适应文字行数的多少

实例

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

</textarea>


尝试一下 »

 日期减去天数等于第二个日期

实例

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


 选择了哪一个Radio

实例

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


尝试一下 »

ENTER键可以让光标移到下一个输入框

实例

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



HTML 特殊符号编码对照表

特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码
Α &Alpha; &#913; Β &Beta; &#914; Γ &Gamma; &#915;
Δ &Delta; &#916; Ε &Epsilon; &#917; Ζ &Zeta; &#918;
Η &Eta; &#919; Θ &Theta; &#920; Ι &Iota; &#921;
Κ &Kappa; &#922; Λ &Lambda; &#923; Μ &Mu; &#924;
Ν &Nu; &#925; Ξ &Xi; &#926; Ο &Omicron; &#927;
Π &Pi; &#928; Ρ &Rho; &#929; Σ &Sigma; &#931;
Τ &Tau; &#932; Υ &Upsilon; &#933; Φ &Phi; &#934;
Χ &Chi; &#935; Ψ &Psi; &#936; Ω &Omega; &#937;
α &alpha; &#945; β &beta; &#946; γ &gamma; &#947;
δ &delta; &#948; ε &epsilon; &#949; ζ &zeta; &#950;
η &eta; &#951; θ &theta; &#952; ι &iota; &#953;
κ &kappa; &#954; λ &lambda; &#955; μ &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;






以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号