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

2024-02-25 开发教程 HTML 入门教程 匿名 11

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: 缩进距离
显示样式displayblock:块级元素,在对象前后都换行
inline:在对象前后都不换行
list-item:在对象前后都换行,增加了项目符号
none:无显示

方框

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

边框

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

列表

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

鼠标

cursor鼠标形状参数 手形
十字形
文本形
沙漏形
十字箭头形:
问号形
右箭头形
上箭头形
左上箭头形
左箭头形
下箭头形
右下箭头形
左下箭头形

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;