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

创新互联建站是一家专注于成都做网站、成都网站建设、成都外贸网站建设与策划设计,甘孜州网站建设哪家好?创新互联建站做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:甘孜州等地区。甘孜州做网站价格咨询:13518219792
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常用代码之:结构性定义
| 文件类型 | 放在档案的开头与结尾 | |
| 文件主题 | 必须放在「文头」区块内 | |
| 文头 | 描述性资料,像是「主题」 | |
| 文体 | 文件本体 | |
| 标题 | 从1到6,有六层选择 | |
| 标题的对齐 | | |
| 区分 | ||
| 区分的对齐 | ||
| 引文区块 | ||
| 强调 | 通常会以斜体显示 | |
| 特别强调 | 通常会以加粗显示 | |
| 引文 | 通常会以斜体显示 | |
| 码 | 显示原始码之用 | |
| 样本 | ||
| 键盘输入 | ||
| 变数 | ||
| 定义 | 有些浏览器不提供 | |
| 地址 | ||
| 大字 | ||
| 小字 | ||
| 加粗 | ||
| 斜体 | ||
| 底线 | ||
| 删除线 | | |
| 下标 | ||
| 上标 | ||
| 打字机体 | ||
| 预定格式 | ||
| 向中看齐 | 文字与图片都可以 | |
| 闪耀 | 有史以来最被嘲弄的标签 |
HTML常用代码之:常常会遇到的问题
点击关闭窗口
实例
尝试一下 »
请问如何去掉主页右面的滚动条?
实例
尝试一下 »
使用
实例
尝试一下 »
如何在不刷新页面的情况下刷新css?
实例
button{color:#000000;}
尝试一下 »
请问如何让网页自动刷新?
实例
方法一,用refresh
HTML 代码片段如下:
3表示刷新时间
方法二,使用setTimeout控制
function rl(){
document.location.reload()
}
setTimeout(rl,2000)
尝试一下 »
如何让超链接没有下划线
实例
a { text-decoration: none}
尝试一下 »
如何用html实现浏览器上后退按钮的功能?
实例
尝试一下 »
HTML常用代码之:你不一定知道的技巧
实例
IE地址栏前换成自己的图标
可以在收藏夹中显示出你的图标
onselectstart="return false" 取消选取
onpaste="return false" 不准粘贴
oncopy="return false;" 防止复制
oncut="return false;"> 防止剪切
尝试一下 »
永远都会带着框架
实例
if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页
尝试一下 »
防止被人frame.
实例
if (top.location != self.location)top.location=self.location;
尝试一下 »
网页将不能被另存为
实例
尝试一下 »
查看网页源代码
实例
尝试一下 »
删除时确认
实例
function del() {
var msg = "您真的确定要删除吗?\n\n请确认!";
if (confirm(msg)==true){
return true;
}else{
return false;}}
尝试一下 »
网页不会被缓存
实例
或者
尝试一下 »
怎样让表单没有凹凸感?
实例
//滚动条竖条消失 //滚动条横条消失 //两种滚动条都消失尝试一下 »
怎样去掉图片链接点击后,图片周围的虚线?
实例
尝试一下 »
电子邮件处理提交表单
实例
尝试一下 »
在打开的子窗口刷新父窗口的代码里如何写?
实例
window.opener.location.reload()
如何设定打开页面的大小
实例
//打开页面的位置尝试一下 »
在页面中,如何加入不是满铺的背景图片,拉动页面时背景图不动
实例
body {background-image:url(logo.gif);
background-repeat:no-repeat;
background-position:center;
background-attachment: fixed}
尝试一下 »
检查一段字符串是否全由数字组成
实例
function checkNum(str){return str.match(/\\D/) == null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
尝试一下 »
获得一个窗口的大小
实例
document.body.clientWidth;
document.body.clientHeight;
怎么判断是否是字符
实例
if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");
else alert("全是字符");
TEXTAREA自适应文字行数的多少
实例
尝试一下 »
日期减去天数等于第二个日期
实例
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)
选择了哪一个Radio
实例
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
Style.
Barcode
尝试一下 »
脚本永不出错
实例
尝试一下 »
ENTER键可以让光标移到下一个输入框
实例
HTML 特殊符号编码对照表
| 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 |
| Α | Α | Α | Β | Β | Β | Γ | Γ | Γ |
| Δ | Δ | Δ | Ε | Ε | Ε | Ζ | Ζ | Ζ |
| Η | Η | Η | Θ | Θ | Θ | Ι | Ι | Ι |
| Κ | Κ | Κ | Λ | Λ | Λ | Μ | Μ | Μ |
| Ν | Ν | Ν | Ξ | Ξ | Ξ | Ο | Ο | Ο |
| Π | Π | Π | Ρ | Ρ | Ρ | Σ | Σ | Σ |
| Τ | Τ | Τ | Υ | Υ | Υ | Φ | Φ | Φ |
| Χ | Χ | Χ | Ψ | Ψ | Ψ | Ω | Ω | Ω |
| α | α | α | β | β | β | γ | γ | γ |
| δ | δ | δ | ε | ε | ε | ζ | ζ | ζ |
| η | η | η | θ | θ | θ | ι | ι | ι |
| κ | κ | κ | λ | λ | λ | μ | μ | μ |
| ν | ν | ν | ξ | ξ | ξ | ο | ο | ο |
| π | π | π | ρ | ρ | ρ | ς | ς | ς |
| σ | σ | σ | τ | τ | τ | υ | υ | υ |
| φ | φ | φ | χ | χ | χ | ψ | ψ | ψ |
| ω | ω | ω | ϑ | ϑ | ϑ | ϒ | ϒ | ϒ |
| ϖ | ϖ | ϖ | • | • | • | … | … | … |
| ′ | ′ | ′ | ″ | ″ | ″ | ‾ | ‾ | ‾ |
| ⁄ | ⁄ | ⁄ | ℘ | ℘ | ℘ | ℑ | ℑ | ℑ |
| ℜ | ℜ | ℜ | ™ | ™ | ™ | ℵ | ℵ | ℵ |
| ← | ← | ← | ↑ | ↑ | ↑ | → | → | → |
| ↓ | ↓ | ↓ | ↔ | ↔ | ↔ | ↵ | ↵ | ↵ |
| ⇐ | ⇐ | ⇐ | ⇑ | ⇑ | ⇑ | ⇒ | ⇒ | ⇒ |
| ⇓ | ⇓ | ⇓ | ⇔ | ⇔ | ⇔ | ∀ | ∀ | ∀ |
| ∂ | ∂ | ∂ | ∃ | ∃ | ∃ | ∅ | ∅ | ∅ |
| ∇ | ∇ | ∇ | ∈ | ∈ | ∈ | ∉ | ∉ | ∉ |
| ∋ | ∋ | ∋ | ∏ | ∏ | ∏ | ∑ | ∑ | − |
| − | − | − | ∗ | ∗ | ∗ | √ | √ | √ |
| ∝ | ∝ | ∝ | ∞ | ∞ | ∞ | ∠ | ∠ | ∠ |
| ∧ | ∧ | ⊥ | ∨ | ∨ | ⊦ | ∩ | ∩ | ∩ |
| ∪ | ∪ | ∪ | ∫ | ∫ | ∫ | ∴ | ∴ | ∴ |
| ∼ | ∼ | ∼ | ≅ | ≅ | ≅ | ≈ | ≈ | ≅ |
| ≠ | ≠ | ≠ | ≡ | ≡ | ≡ | ≤ | ≤ | ≤ |
| ≥ | ≥ | ≥ | ⊂ | ⊂ | ⊂ | ⊃ | ⊃ | ⊃ |
| ⊄ | ⊄ | ⊄ | ⊆ | ⊆ | ⊆ | ⊇ | ⊇ | ⊇ |
| ⊕ | ⊕ | ⊕ | ⊗ | ⊗ | ⊗ | ⊥ | ⊥ | ⊥ |
| ⋅ | ⋅ | ⋅ | ⌈ | ⌈ | ⌈ | ⌉ | ⌉ | ⌉ |
| ⌊ | ⌊ | ⌊ | ⌋ | ⌋ | ⌋ | ◊ | ◊ | ◊ |
| ♠ | ♠ | ♣ | ♣ | ♥ | ♥ | |||
| ♦ | ♦ | ¡ | ¡ | ¡ | ||||
| ¢ | ¢ | ¢ | £ | £ | £ | ¤ | ¤ | ¤ |
| ¥ | ¥ | ¥ | ¦ | ¦ | ¦ | § | § | § |
| ¨ | ¨ | ¨ | © | © | © | ª | ª | ª |
| « | « | « | ¬ | ¬ | ¬ | | | |
| ® | ® | ® | ¯ | ¯ | ¯ | ° | ° | ° |
| ± | ± | ± | ² | ² | ² | ³ | ³ | ³ |
| ´ | ´ | ´ | µ | µ | µ | " | " | " |
| < | < | < | > | > | > | ' | ' |
网站名称:创新互联HTML教程:HTML+CSS 代码
标题来源:http://www.jxjierui.cn/article/cdohipj.html


咨询
建站咨询
