一般属性 class属性 -- 用于链接一个样式与HTML元素
示例 <div class="dreamdu1">连接div标签与dreamdu1样式<div>
<div class="dreamdu12px dreamdublack dreamdubold">使用空格分开多个样式连接div标签<div>
div.dreamdu12px
{font-size: 12px;}
div.dreamdublack
{color: black;}
div.dreamdubold
{font-weight: bold;}
id属性 -- 用于唯一标识一个元素
你可能有以下几种原因使用到id属性
?
?
?
? 你想链接到一个页面的指定位置. 你要在某个HTML元素上使用特定的css样式. 你要为每个HTML元素使用script(比如javascript) 你要区分两个相同的HTML元素.
示例 <div id="dreamdu1">使用dreamdu1和dreamdu2来区分两个div标签<div>
<div id="dreamdu2">使用dreamdu1和dreamdu2来区分两个div标签<div>
说明
? 与id属性相同的属性是name,此属性可以使用在HTML4的文档中,新的web标准已经抛弃了此属性.
? id属性在整个页面与CSS样式表中一定要是唯一的,在整个网站中最好也是唯一的.
title 属性 -- 为链接、图像、表单等HTML元素提供描述性的信息
示例
<a href="/xhtml/" title="HTML与XHTML入门教程">XHTML学习</a>
<img src="/images/javascript_alert.png" alt="alert对话框" title="alert对话框图示" />
说明 ? 通常用于为图像、链接或按钮增加描述性的文字，提供额外的信息(HTML中的多数标签都具有title属性),比如可以通过title属性详细介绍要链接到的页面的内容
? title属性可以使用在除了base、basefont、head、html、meta、param、script、title之外的所有标签中
? 当为HTML标签定义title属性时，多数浏览器会将title属性的值作为悬浮的提示信息显示。 ? 一些可以发音的浏览器，甚至可以说出"title"里的内容
? title属性并不是必须的，只是为标签增加额外的描述性文字
事件属性 UI events
?
?
?
?
?
?
?
? ?
? onclick (Script) ondblclick (Script) onmousedown (Script) onmouseup (Script) onmouseover (Script) onmousemove (Script) onmouseout (Script) onkeypress (Script) onkeydown (Script) onkeyup (Script)
style 属性 -- 用于定义HTML标签所使用的样式
示例
<p style="font-size: 12px;color: #000;">使用css</p>
说明
?
? 加载CSS的过程中,最好避免style属性的使用,此属性已经被w3c抛弃,将来的HTML版本加载CSS的过程中,最好使用class属性(或id属性),这是标准的方法. 中可能移除此属性.
<table summary="html table" border="0">
标签<table>是表格标签.使用border属性,定义没有边框的表格.使用summary属性
定义表格的简短描述
定义文字颜色color:red;
<head>
<style type="text/css" media="all">
p
{ color:red; }
</style>
</head>
<body>
<p>color就代表颜色,我们使用红色 red 为文字颜色.</p>
</body>
</html>
背景颜色background-color:blue;
<html>
<head>
<style type="text/css" media="all">
body
{background-color:blue; }
</style>
</head>
<body>
<p>background-color就代表网页的背景颜色,我们使用蓝色 blue 为网页背景.</p> </body>
</html>
链接到百度
<p>链接到<a href="/" target="_blank">百度</a></p>
点击图片链接
<p>链接到<a href="/" target="_blank"><img src="/img/baidu_logo.gif" /></a></p>
Summary对表格进行简短的描述
无序列表
<ul>
<li>www</li>
<li>dreamdu</li>
<li>com</li>
</ul>
strong 标签 -- 重点强调标签
? 使用正确的方法定义粗体文字,CSS font-weight 属性
Em标签--斜体
? 使用正确的方法定义斜体文字,CSS font-style 属性
< 可以显示 < 小于号 > 可以显示 > 大于号
可以使用 表示是一个空格。
链接
? 属性.
Common -- 一般属性
o -- 代表一个链接的快捷键访问方式 o
<a href="/xhtml/" accesskey="h">(按住Alt键)点击键盘上的h按钮，再按回车(IE)就可以直接链接到HTML教程.</a>
o
o
o
o
o charset -- 指定了链接到的页面所使用的编码方式,比如UTF-8 coords -- 使用图像地图的时候可以使用此属性定义链接的区域,通常是使用x,y坐标 href -- 代表一个链接源(就是链接到什么地方) hreflang -- 指出了链接到的页面所使用的语言编码 rel -- 代表文档与链接到的内容(href所指的内容)的关系
<link rel="stylesheet" href="/style.css" type="text/css">
rel与rev具有互补的作用,rel指定了向前链接的关系,rev指定了反向链接的关系.
-- 代表文档与链接到的内容(href所指的内容)的关系
o shape -- 使用图像地图的时候可以使用shape指定链接区域
o tabindex -- 代表使用"tab"键,遍历链接的顺序 o <a href="/xhtml/" tabindex="1">1</a>
<a href="/css/" tabindex="3">3</a>
<a href="/ " tabindex="2">2</a>
<!--连续按 "Tab",可以改变焦点的位置.遍历的顺序是1-2-3.-->
o target -- 用来指出哪个窗口或框架应该被此链接打开
_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
一个对应的框架页的名称 -- 在对应框架页中打开
o title -- 代表链接的附加提示信息
<a href="/xhtml/" title="HTML与XHTML入门教程">XHTML学习</a>
<img src="/images/javascript_alert.png" alt="alert对话框" title="alert对话框图示" />
o type -- 代表链接的MIME类型
链接到指定位置（所谓指定位置的链接，就是直接链接到文档中一个定义好的位置。） <h2 id="top">页面上部</h2>
<a href="#bottom">链接到页面下部</a>
<a href="#top">链接到页面上部</a>
<h2 id="bottom">页面下部</h2> 邮件链接
<p><a href="/javascript/object_math/#syntax" id="bottom">链接到网址</a></p> 图像链接
<a href="/" title="baidu"> <img src="/img/logo.gif" /> </a>
标签 -- 代表HTML图像
o o o
o
o -- 一般属性 （class,id,title: 图片的提示文字,当鼠标停留到图片上时,会提示相关文字） alt -- 代表图像的替代文字 src -- 代表一个图像源(就是图像的位置) height -- 代表一个图像的高度 width -- 代表一个图像的宽度 标签 -- 代表HTML自定义列表 标签 -- 代表HTML自定义列表项目 标签 -- 代表HTML自定义列表描述
<dl>
<dt>www</dt>
<dd>World Wide Web的缩写.</dd> <dt>dreamdu</dt>
<dd>梦之都.</dd>
<dd>www的:).</dd>
<dt>com</dt>
<dt>com.cn</dt>
<dt>cn</dt>
<dd>这都是域名的后缀.</dd> </dl>
显示：
梦之都 HTML教程,HTML dl 标签示例.
www
World Wide Web的缩写.
dreamdu
梦之都.
www的:).
com
com.cn
cn
这都是域名的后缀.
标签 -- 代表HTML导航列表
<nl>
<label>梦之都</label>
<li href="#introduction">介绍</li>
<li>
<nl>
<label>网址(/)</label> <li href="#http">http://</li>
<li href="#www">www</li>
<li href="#dreamdu">dreamdu</li>
<li href="#com">com</li>
</nl>
</li>
<li href="#html">html教程</li>
<li href="#css">css教程</li>
</nl>
梦之都
? 介绍
? 网址(/)
? http://
? www
? dreamdu
? com
? html教程
? css教程
嵌套列表
<ul>
<li>www.</li>
<li>dreamdu
<dl>
<dt>dream</dt>
<dd>梦</dd>
<dt>du</dt>
<dd>实现你的梦想</dd>
</dl>
</li>
<li>.com</li>
</ul>
Table标签---th表头
o o o
o o o Common -- 一般属性 summary -- 代表表格的摘要说明 width -- 代表表格的宽度 border -- 代表表格边框(此属性应该使用CSS实现) cellspacing -- 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现) cellpadding -- 代表内容填充的宽度(此属性应该使用CSS实现)
tr标签
Common -- 一般属性
o align -- 代表行的水平对齐方式(left(左对齐) | center(居中对
齐) |right(右对齐) | justify)(此属性应该使用CSS实现)
o valign -- 代表行的垂直对齐方式(top(顶部对齐) | middle(中部
对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该
使用CSS实现) o th标签
-- 一般属性
o abbr -- 代表表头的简写
o axis -- 对单元格在概念上分类
o -- 一行跨越多列
o headers -- 连接表格的数据与表头
o -- 一列跨越多行
o scope -- 定义行或列的表头
? scope -- 通过此属性可以定义行或列的表头
? 取值
col -- 定义列表头
row -- 定义行表头
<tr>
<th> </th>
<th abbr="com domain" scope="col">.com域名的数量</th> <th abbr="cn domain" scope="col">.cn域名的数量</th> <th abbr="net domain" scope="col">.net域名的数量</th> </tr>
<tr>
<th abbr="2003s" scope="row">2003</th>
<td>1000</td>
<td>2000</td>
<td>3000</td></tr> o
align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现) o -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐)
| bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现) o td标签
? 属性
o o o
o o o o o o -- 一般属性 abbr -- 代表表头的简写 axis -- 对单元格在概念上分类 colspan -- 一行跨越多列 headers -- 连接表格的数据与表头 -- 一列跨越多行 scope -- 定义行或列的表头 align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现) valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐)
| bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现) 标签
? 属性
Common -- 一般属性
o -- 定义一个colgroup跨越的列数,默认值为1 o col标签是单独出现的,<col />
? 属性
Common -- 一般属性
o span -- 定义一个col跨越的列数,默认值为1 o <style type="text/css">
.yellow
{
color: #CCCC33;
font-size:36px;
}
.blue
{
color: #3399CC;
font-size:12px;
}
</style>
<colgroup>
<col />
<col class="yellow" />
<col />
<col span="2" class="blue" />
</colgroup>
body
{
background-image:url('html_table.png');
}
Css文本
letter-spacing -- 定义文本中字母的间距(中文为文字的间距)
正值为增大距离,负值为缩小距离.
定义了字与字之间的距离.
? 是控制字与字之间空格的宽度. ?
梦之都 CSS教程,letter-spacing示例,All i have to do, is learn CSS.(仔细看是字母之间的距离,不是空格本身的宽度,参考word-spacing属性示例.)
梦之都 CSS教程,letter-spacing示例,All i have to do, is learn CSS.
normal: 正常(主要是根据用户所使用的浏览器等设备)
o <length>: 长度表示法 o
text-decoration -- 定义文本是否有划线以及划线的方式
o [underline || overline || line-through || blink]: 四个值中
的一个或多个
underline: 定义有下划线的文本
? overline: 定义有上划线的文本
? line-through: 定义直线穿过文本
? blink: 定义闪烁的文本 ?
text-transform -- 定义文本的大小写状态,此属性对中文无意义 ? 取值:capitalize | uppercase | lowercase | none | inherit
o capitalize: 首字母大写
o uppercase: 大写
o lowercase: 小写
o none: 正常无变化
text-align -- 定义文本的对齐方式
? 取值: left | right | center | justify
o left: 左对齐
o right: 右对齐
o center: 居中
o justify: 对齐每行的文字 text-indent -- 定义文本首行的缩进(在首行文字之前插入指定的长度) 正值向后缩,负值向前进.
? 取值: <length> | <percentage> | inherit
o <length>: 长度表示法
o <percentage>: 百分比表示法
white-space -- 空格内元素的显示方式
取值: normal | pre | nowrap | pre-wrap | pre-line | inherit
o
o
o o
o normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行) pre: 保持HTML源代码的空格与换行,等同与pre标签 nowrap: 强制文本在一行,除非遇到 pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行 pre-line: 同pre属性,但是遇到连续空格会被看作一个空格
border:1px solid green;
font-family -- 定义使用的字体
? 取值: [[ <family-name> | <generic-family> ] [<family-name>|
<generic-family>]* ] | inherit
o [[ <family-name> | <generic-family> ] [<family-name>|
<generic-family>]* ]:字体名
? : 一系列字体名称
? : 一般性字体名称,取
值:serif,sans-serif,cursive,fantasy,monospace
p
{
} font-family:"宋体",Arial;
Css border-top-width属性 定义上边框的宽度
CSS border-right-width 属性
CSS border-bottom-width 属性
CSS border-left-width 属性 font-size -- 定义字体的大小
font-style -- 定义字体显示的方式
? 取值: normal | italic | oblique | inherit
o normal: 正常
o italic: 斜体
o oblique: 斜体
font-weight -- 定义字体的粗细
o
o
o
o
o normal:正常,等同于 400 bold:粗体,等同于 700 bolder:更粗 lighter:更细 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900:字体粗
细的绝对值