程序员必须知道的html常用代码有很多,其中最基本的就是html标签。html标签是用来描述文档内容的,它们可以让浏览器正确地显示文档内容。常用的html标签包括:
<h1> <h2> <h3> <h4> <h5> <h6> // 标题标签 <p> // 段落标签 <div> // 块元素标签 <span> // 行内元素标签 <ul> <ol> <li>程序员必须知道的HTML常用代码有哪些?
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..cn"">
删除时确认
实例
<a href="" onclick="javascript:return del();">删除</a>
<script>
function del() {
var msg = "您真的确定要删除吗?nn请确认!";
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 特殊符号编码对照表
特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α Α Α Β Β Β Γ Γ Γ Δ Δ Δ Ε Ε Ε Ζ Ζ Ζ Η Η Η Θ Θ Θ Ι Ι Ι Κ Κ Κ Λ Λ Λ Μ Μ Μ Ν Ν Ν Ξ Ξ Ξ Ο Ο Ο Π Π Π Ρ Ρ Ρ Σ Σ Σ Τ Τ Τ Υ Υ Υ Φ Φ Φ Χ Χ Χ Ψ Ψ Ψ Ω Ω Ω α α α β β β γ γ γ δ δ δ ε ε ε ζ ζ ζ η η η θ θ θ ι ι ι κ κ κ λ λ λ μ μ μ ν ν ν ξ ξ ξ ο ο ο π π π ρ ρ ρ ς ς ς σ σ σ τ τ τ υ υ υ φ φ φ χ χ χ ψ ψ ψ ω ω ω ϑ ϑ ϑ ϒ ϒ ϒ ϖ ϖ ϖ • • • … … … ′ ′ ′ ″ ″ ″ ‾ ‾ ‾ ⁄ ⁄ ⁄ ℘ ℘ ℘ ℑ ℑ ℑ ℜ ℜ ℜ ™ ™ ™ ℵ ℵ ℵ ← ← ← ↑ ↑ ↑ → → → ↓ ↓ ↓ ↔ ↔ ↔ ↵ ↵ ↵ ⇐ ⇐ ⇐ ⇑ ⇑ ⇑ ⇒ ⇒ ⇒ ⇓ ⇓ ⇓ ⇔ ⇔ ⇔ ∀ ∀ ∀ ∂ ∂ ∂ ∃ ∃ ∃ ∅ ∅ ∅ ∇ ∇ ∇ ∈ ∈ ∈ ∉ ∉ ∉ ∋ ∋ ∋ ∏ ∏ ∏ ∑ ∑ − − − − ∗ ∗ ∗ √ √ √ ∝ ∝ ∝ ∞ ∞ ∞ ∠ ∠ ∠ ∧ ∧ ⊥ ∨ ∨ ⊦ ∩ ∩ ∩ ∪ ∪ ∪ ∫ ∫ ∫ ∴ ∴ ∴ ∼ ∼ ∼ ≅ ≅ ≅ ≈ ≈ ≅ ≠ ≠ ≠ ≡ ≡ ≡ ≤ ≤ ≤ ≥ ≥ ≥ ⊂ ⊂ ⊂ ⊃ ⊃ ⊃ ⊄ ⊄ ⊄ ⊆ ⊆ ⊆ ⊇ ⊇ ⊇ ⊕ ⊕ ⊕ ⊗ ⊗ ⊗ ⊥ ⊥ ⊥ ⋅ ⋅ ⋅ ⌈ ⌈ ⌈ ⌉ ⌉ ⌉ ⌊ ⌊ ⌊ ⌋ ⌋ ⌋ ◊ ◊ ◊ ♠ ♠ ♠ ♣ ♣ ♣ ♥ ♥ ♥ ♦ ♦ ♦   ¡ ¡ ¡ ¢ ¢ ¢ £ £ £ ¤ ¤ ¤ ¥ ¥ ¥ ¦ ¦ ¦ § § § ¨ ¨ ¨ © © © ª ª ª « « « ¬ ¬ ¬ ­ ­ ® ® ® ¯ ¯ ¯ ° ° ° ± ± ± ² ² ² ³ ³ ³ ´ ´ ´ µ µ µ " " " < < < > > > " '
JavaScript 使 HTML 页面更具动态性和交互性实例!DOCTYPE htmlhtmlbodyh1我的第一段 JavaScript/h1button type="button"onclick=...
HTML 教程导读- (HTML5标准)HTML(英语:Hyper Text Markup Language,简称:HTML )也叫作超文本标记语言,是一种使用结构化 ...
AJAX Database 实例 AJAX 可用来与数据库进行动态通信。AJAX 数据库实例 下面的例子将演示网页如何通过 AJAX 从数据库读取信息:...
Ajax 数据库操作为了清楚的说明使用 Ajax 从数据库中存取信息有多么容易,我们要构建一个 MySQL 查询,然后把结果显示在 ajax.ht...
AJAX ASP/PHP 实例AJAX 用于创造动态性更强的应用程序。ASP:即Active Server Pages,是MicroSoft公司开发的服务器端脚本环...
AJAX面试问题下面列出了常见的AJAX面试问题和答案。1、什么是AJAX?AJAX代表异步JavaScript和XML。它是一组用于异步显示数据...
FreeRTOS(读作"free-arr-toss")是一个嵌入式系统使用的开源实时操作系统。FreeRTOS被设计为“小巧,简单,和易用”,能支持许多...