常见的块状元素与内联元素.doc

常见的块状元素与内联元素
块状元素
内联元素
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是CSS layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 有序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 无序列表
a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量 

Html标签html,head,body
标签的基本特点：成对，嵌套关系，属性(属性名=属性值)
body的bgColor属性：背景色（bgcolor="red/#ff0000"）
head中的标签 title 和meta
title 表示标题
meta <meta http-equiv="content-Type" content="text/html;charset=gb2312">
h1~h6 标题，h1最大
属性：align{left|right|center}
P 段落
属性：align{left|right|center}
font 字体标签
size:字体大小，最大为7，最小-7，符号表示相对大小，例如+3表示6号字
color：颜色
face：字体名称
pre 与格式化标签，保持代码原有格式输出
属性：align{left|right|center}
img 图像标签
src:文件路径，有相对和绝对路径
alt：替换文字
align：文字相对这图片的对齐（垂直方向）{top|middle|bottom}
height,width:尺寸
a 超链接
name:命名锚记
href:链接目标，有相对和绝对之分
href="mailto:....":邮件链接
href="#..."：锚链接
target:打开目标，也就是在哪个窗口打开新的页面
{_self|_top|_parent|_blank|框架名称}
hr 水平线
size:线宽，或者粗细，等同于其他标签的height
width：线的宽度，注意没有height属性
color：颜色
ul，ol，li：列表
ul 无序列表
type：列表类型{circle|square|disc}
ol 有序列表
type：列表类型{1,a,A,i,I}
marquee 滚动标签
direction：滚动方向{up,down,left,right}
scrollamount:滚动的跨度，每次滚动的距离
scrolldelay:滚动演示，每次滚动的时间间隔
br 换行

table表示表格本身
属性
align：表格自身的对齐方式，而不是里面内容的对齐方式{left,center,right}
height,width
border
background
bgcolor
cellpadding:单元格边框和内容间距
cellspacing:单元格之间的距离
tr
属性：
bgcolor
background
td
属性：
除了常规的背景，尺寸，对齐等属性
rowspan：跨越行（合并行）
colspan：跨越列（合并列）

<table><tr><td>1</td><td colspan="2">2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td><td>7</td></tr></table>

form 表单标签，表示一个要提交数据的表单
属性：
name：名称
action：提交的目的地址
method：{get|post}(三个方面有区别：长度限制，安全性，效率)

input type="text" 表示文本框
属性:
name:提交数据的名称
value：默认值
size：文本框显示出来的宽度
maxlength：可以填入最多的字符个数
readonly：是否为只读

input type="password" 表示密码框
属性：
同文本框

input type="radio" 单选按钮
name
value
checked：是否默认被选中
注意：如果要实现单选的效果，name属性必须一致，也就是说所有name相同的单选按钮只能选中其中一个

input type="checkbox" 复选框
同单选按钮的属性

input type="button" 普通按钮
value：代表要显示到按钮上的文字，等同winforms中的text属性
input type="submit" 提交按钮
属性同普通按钮
input type="reset" 重置按钮，所有数据恢复到初始值状态
属性同普通按钮
textarea 多行文本框
属性
cols：显示的宽度，以字符为单位
rows：显示的高度，以字符为单位
name：通所有表单元素
value：没有改属性！！！！他的value写在标签内部
<textarea cols="50" rows="6" name="copyRight">请仔细阅读本说明</textarea>
select 代表下拉列表
option标签对表示下拉列表中的项
属性：
value：不会显示到选项中，要显示的内容写在option标签内部
<option value="1">第一学期</option>
name:没有那么属性，多个哦option共用一个select标签的name
selected:默认选中的选项
name：

frameset 框架集
cols：列的拆分标准（cols="100,30%,*"）
rows：行的拆分标准

frame 框架
scrolling：是否出现滚动条
noresize：是否可以调整大小

样式表的分类和语法
行内样式：<标签 style="样式名1：样式值1；样式名2：样式值2；....."></标签>
内嵌:<style type="text/css">
选择器代码
</style>
外部：在css文件中写上选择器代码
导入的语法：
1、<link href="文件名" rel="stylesheet" type="text/css">
2、<style type="text/css">
@import url(文件名);
</style>
选择器
标签选择器（HTML选择器）
定义语法
P{样式名：样式值;
.....
}
使用：被动选择，所有p标签的样式都被修改
类选择器
定义语法：
.class1{
样式名：样式值;
.....
}
使用：标签的class属性来引用：<p class="class1"></p>
id选择器
定义语法：
#ID1{
样式名：样式值;
.....
}
使用：标签的ID属性来引用：<p class="ID1"></p>
伪类选择器
超链接的特殊状态下的样式规则
a:hover 鼠标悬停
a:link 未访问
a:active 选中
a:visited 已访问
常用样式
字体修饰
font-size:记得写单位
font-family:字体名称
font-style:斜体
text-align:对齐{left|center|right}
color:
text-decoration:{underline|none}
背景
background-color:背景色
background-image:背景图(url(文件名))
background-repeat:背景平铺方式(no-repeat:不平铺repeat-x:水平方向平铺repeat-y：垂直方向平铺)
方框
边框
border-style
border-width
border-color

边界
margin-top
margin-left
....

填充
padding-top
padding-rigSTB

常用的css命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner

(三)id的命名:
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
（2）字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }