首页 > 代码库 > 静态HTML总结
静态HTML总结
第一章
<META>标签:
<meta http-equiv=”Content-Type” Content=”text/html;charset=gb2312”>------避免乱码
Bgcolor:背景颜色 background:背景图
六级标题:<H1>到<H6> 依次递减
<FONT>标签:
属性:face----字体类型
Size----字体大小
Color---颜色
特殊符号:
大于:>
小于:<
空格:
引号:"
版权号:©
行的控制标签:
<p>(</p>)------段落标签(结束标签为可选)
<br>--------换行标签(没有结束标签)
<IMG>标签:
<img src=http://www.mamicode.com/”路径” alt=”提示文字内容” 宽度 高度>
属性:
Align:------图片和当前文字的对齐方式(top--顶端 bottom--底部 middle—中部 left—左对齐 right—右对齐)
<HR>标签:水平分隔线
列表:
无序列表:<UL type=”类型”>
<LI></LI>
</UL>
-------type属性值:circle空心圆环 disc实心圆点(默认的) square正方形
有序列表:<OL type=”类型”>
<LI></LI>
</OL>
--------type属性值:1、a、A、i、I
<A>标签:超链接
链接到其他页面: <a href=http://www.mamicode.com/”路径”>
链接到本页面:
<a name=”marker”>fghgg</a>-----创建锚标记
<a href=http://www.mamicode.com/”#marker”>fghgg-----使用它
电子邮件链接:
<a href=”mailto: 网址”></a>
<MARQUEE>标签:滚动条
<marquee scrolldelay=”100” direction=”up” onm ouseover=”this.stop()” onm ouseout=”this.start()”>
-----scolldelay---滚动延迟时间 direction----滚动方向:up、down、left、right
onm ouseover---当鼠标停在上面的时候触发
onm ouseOut----当鼠标离开的时候触发
第二章
跨行跨列:
Rowspan----跨行
Colspan-----跨列
设置填充、间距属性
Cellpadding----文字与边框的距离
Cellspacing----表格内边框间距
第三章
<FORM>标签:
<form name=”form1” method=”post” action=”地址/processform(表单的处理程序)”>
表单提交方式:post get(不安全)
表单元素:(要在<input>标签中使用)
文本框:text
密码框:password
单选按钮:radio
复选框:checkbox
列表框:select和option来实现
按钮:button---普通按钮 submit---提交按钮 reset---重置按钮
多行文本:textarea (用cols和rows分别来设置他的宽度和高度)
框架:<frameset>(框架集)
<frameset>
<frame name=”” src=http://www.mamicode.com/”该位置要放的网页” scrolling=”no”(是否显示滚动条) noresize(禁止改变框架窗口的大小) >
</frameset>
实现框架页面的链接
设计好框架集页面,为每个框架窗口定义好名称
<.frame name=”rightframe” src=http://www.mamicode.com/”right.html”>
设置导航栏中的超链接的target目标窗口属性,使其值为框架窗口的名字
< a href=http://www.mamicode.com/”right.html” target=”rightframe”>
4个特殊的窗口:
Target可以取4个值---------_blank (新启一个窗口打开链接)
_self (在同一个窗口打开(默认值))
_parent (在上一级窗口打开)
_top (在整个浏览器窗口打开)
CSS样式表
样式表的结构:
<style type=”text/css”>
选择器
属性:属性值;
}
</style>
常用的样式属性:
文本属性:font-size 字体大小
Font-family 类型
Font-style 字体
Color 颜色
Text-align 对齐方式
背景属性::
Background-color 背景颜色
Background-image 背景图片
Background-repeat repeat(铺满) no-repeat(不平铺) repeat-x(水平方向平铺) repeat-y(垂直方向平铺)
方框属性:
边界属性:margin-top 上边距
Margin-right 右边据
Margin-left 左边距
Margin-bottom 下边距
边框属性:border-style 边框样式
Border-color 颜色
Border-width 边框宽度
填充属性:padding-top 与上边框的距离
Padding-right 与右边框的距离
Padding-left 与左边框的距离
Padding-bottom 与下边框的距离
特殊样式:
A:link{} 未被访问的链接样式
A:visited{} 已被访问过的链接样式
A:hover{} 鼠标悬浮在链接上时的样式
A:active{} 鼠标正在按下时链接文字的样式
样式表的3类应用方式:
内嵌样式表
行内样式
外部样式(要用LINK链接标签)
<link rel=”sylesheet(外部样式表)” type=”text/css” hret=”引入的样式文件” >
静态HTML总结