您的位置：首页 > Web前端 > HTML

html笔记

2012-08-14 11:18 190 查看

以下内容大部分来自http://www.w3school.com.cn/

Html 概述

1.HTML 元素以开始标签起始 , 以结束标签终止 . 元素内容是开始标签与结束标签之间内容

2. 某些 HTML 元素具有空内容（ empty content ）

3. 空元素在开始标签中进行关闭（以开始标签的结束而结束）

4. 大多数 HTML 元素可拥有属性

5. 对大小写不敏感

6. 注释 :

Html的头部

1.头部格式 : <head>......</head>

2.根据 html 标准 , 仅有几个标签在 html 的头部分是合法的 . 它们是 :<base>, <link>, <meta>, <title>, <style> 和 <script>

3.网页信息标记 :

格式 : <meta ......>
属性 :

向服务器请求,完成浏览所能完成的http功能 : http-equiv = "content-type | expires | keyword | refresh | cache-control"
网页编码 content-type: content = " ....( 一般为 text/html) ; charset = ..."
有效期限 expires: content = " 有效时限 " [ 格式 : 星期日月年时 : 分 : 秒 GMT]
网页关键字 keyword: content = " 关键字 " [ 便于搜索引擎查找分类 ]
自动刷新与跳转 refresh: content = " 秒数 ; url = 跳转地址 "
设置禁用缓存 cache-control: content ="no-cache"
使用时间: page-enter | page-exit: content = "blendtrans(duration= 秒数 )"
设置属性 : name = "author | build | copyright | content-language | description | robots | reply-to | generator"
限制搜索方式 robots: content = "none | noindex | nofollow | index | all"
根据所搭配的属性设置对应的属性值 : content=".... ; ...."
设置编码类型 charset = 编码类型 [编码类型:gb2312(简体中文) | big5(繁体中文) | iso-8859-1(纯英文) | ..]
设置载入页面 url

4.标题 : 格式 : <title>........</title> [ 在游览器标题栏显示 ]

Html 的主体

1.主体格式 : <body>........</body>

2.主体属性 :

背景颜色 :　　 bgcolor = " #000000~ffffff | rgb(0,0,0) | black"
背景图片 :　　 background = " 图形文件路径 "
字体颜色 : 　　 text = " #000000~ffffff | rgb(0,0,0) | black"
背景固定 : 　　 bgproperties = "fixed | scroll"
主体水平开始位置 : 　　 leftmargin = "N"
主体垂直开始位置 : 　　 topmargin = "N"
主体水平结束位置 : 　　 rightmargin = "N"
主体垂直结束位置 : 　　 bottommargin = "N"

3.<body> 元素定义了 HTML 文档的主体

排版设计

1.文字换行 : ...........< br /> [ 当其被 <nobr> 包含时就 ]

2.关闭文字换行 : <nobr>.......</nobr> [ 取消游览器窗口改变而强制文字换行 ]

3.段落 :

格式 : 　　<p>..........</p> [ 在文本后加一个空白行 ]
属性 :　　

水平对齐方式: 　　 align= " right( 默认 ) | left | center "

4.原始文字样式 : <pre>.......</pre> [ 文件在游览所呈现的效果与我们编辑的一样 ]

5.在文字上标注说明 : 格式 : <ruby> 被标注说明的文字 <rt> 说明文字 </rt></ruby>

6.特殊字符 :

空格符 : & nbsp
大于号 : >
小于号 : <
双引号 : "
地址符 : &
乘号 ; ×
加减号 : ±

7.居中对齐 : <center>....</center>

8.定义块引用 : <blockquote>......</blockquote> [ 向左、右缩排空出五个空格 ]

9.标题 :

格式 : <hx>......</hx> [x = 1 ~ 6]
属性 :

对齐方式 :　　 align= " right( 默认 ) | left | center "

10.文字效果 :

1) 粗体 :

<strong>........</strong>
<b>.....</b>

2) 斜体 :

<em>.......</em>
<i>........</i>
<cite>........</cite>

3) 下划线 : <u>.........</u> 或 <ins>......</ins>

4) 删除线 : <strike>........</strike> 或 <s>.....</s> 或 <del>....</del>

5) 文字闪烁 : <blink>........</blink>

6) 大型字体 : <big>.....</big> [ 比原先所设的字体大一级 ]

7) 小型字体 : <small>......</small> [ 比原先所设字体小一级 ]

8) 文字下标 : <sub>....</sub> [ 文字稍向下移 , 且比原先字体小一级 ]

9) 文字上标 : <sup>....</sup> [ 文字稍向上移 , 且比原先字体小一级 ]

10) 预设字形设定 :

格式 : <basefont>
属性 :

大小:　　 size = "1 ~ 7" ( 默认为 3)
字形 : 　　 face = " 字形 "
颜色: 　　 color = "#000000~ffffff | rgb(0,0,0) | black"

11) 更改字型 :

格式 : <font>................</font>
属性 : [ 属性之间用空格隔开 ]

大小:　　 size = "1 ~ 7 "( 默认为 3)
字形 :　　 face = " 字形 "
颜色:　　 color = "#000000~ffffff | rgb(0,0,0) | black"

12) 固定文字宽度 : <tt>......</tt> [ 文字宽度一样 ]

11.特殊字型标签 :

显示专有名词与人名 　　 <dfn>.........</dfn> [ 与字段文字效果无不同 ]
显示计算机输出结果 　　<samp>.....</samp> [ 呈现字体一般大且细 ]
显示代码 　　　　　　 <code>..........</code> [ 与 samp 相同 ]
显示使用者输入文本 　　 <kbd>......</kbd> [ 与 samp 相同 ]
声明变量 　　　　　　 <var>........</var> [ 呈现字体一般细且斜体 ]
显示地址文本 　　　　　 <address>........</address> [ 与 var 相同 ]
显示引文 / 引用 　　 <cite>........</cite> [ 字体为斜体 ]

12.直线制作 :

形式 : <hr>
属性 :

宽度属性 :　　 width = "N | M%" [N 线段表大小 ,M 表线段与窗口比例 ]
对齐方式 : 　　align = " left | center( 默认 ) | right "
直线厚度 : 　　size = "N" [N 为数字 ]
无阴影属性 : 　　noshade [ 无此属性 , 直线看像框框 , 有就像一条线 ]
颜色 : 　　color = "#000000~ffffff | rgb(0,0,0) | black"

13.忽略 html 标记 : <plaintext> [ 使该标记后的 html 标记失去作用 ]

14.不执行 html 标记 : <xmp>.......</xmp> [ 在该标签内所有 html 标记失去作用 ]

15.跑马灯文字 :

格式 : <marquee>.....</marquee>
属性 :

背景颜色 : 　　bgcolor = "#000000~ffffff | rgb(0,0,0) | black"
高度 : 　　height = " N | M%"
宽度 : 　　width = " N | M%"
两侧与网页的水平间隔 : 　　hspace = "N"
两侧与网页的水平间隔 : 　　vspace = "N"
滚动效果 : 　　behavior = "scroll( 默认 ) | alternate | slide"

scrol 一边进一边出
alternate 弹来弹去
slide 碰到边界就停下来

运动方向 : 　　direction = "left | right | up | down"
运动次数 : 　　loop = "N"
移动距离 : 　　scrollamount = "N"
移动间隔时间 : 　　scrolldelay = "N" [ 单位千分之一秒 ]

列表设计

1.菜单列表 :

形式:

列表形式 : <menu>.........</menu>
列表项形式 : <li>........</li>

列表属性 :

符号形式: 　　 type = "disc / circle / square"

2.目录列表:

形式:

列表形式 : <dir>........</dir>
列表项形式 : <li>........</li>

3.符号列表:

形式:

列表形式 : <lh>.........</lh> [列表无 type 属性 ]
列表项形式 : <li>........</li>

特点:

与前两个相比 lh 不向右排缩 , 同时与上下文件间也不空一行

4.无序列表 :

形式:

列表形式 : <ul>.........</ul>
列表项形式 : <li>........</li>

列表属性 :

符号形式 　　 type = "disc / circle / square"

特点:

与一二个个相比 uh 向右排缩 , 更小

5.说明格式列表 :

形式:

列表形式 : <dl>.............</dl>
列表项形式 : <dt>.....</dt>
列表项说明 : <dd>.......</dd>

特点:

一个列表可以有好几个列表项 , 一个列表项可以有好几个列表项说明

6.有序列表 :

形式:

列表形式 : <ol>.......</ol>
列表项形式 : <li>........</li>

列表属性 :

符号样式: 　　type = "1( 数字 ) / a( 小写英文 ) / A( 大写 ) / i( 小写罗马 ) / I( 大写 )"
开始值: 　　start
= "N" [N 为最开始的数值 , 且 N 为数字 ]

7.列表项属性 :

样式 : 　　 type = "1 / a / A / i / I / disc / circle / square"
起始值 : 　　 value = " N " [N 为数字 ]

表格设计

1.表格框 : <table>.......</table> [ 在此间设计表格 ]

2.表格头部 , 主体 , 尾部 :

可以不用这三个 , 如果用了 thead,tbody,tfoot 要按顺序出现
出现次序是 thead, tbody, tfoot
属性 :

水平对齐方式 : align = " right( 默认 ) | left | center "
文本垂直对齐方式 : valign = " top | middle( 默认 ) | bottom "
背景颜色 : bgcolor = "#000000~ffffff | rgb(0,0,0) | black"

3.表格标题 :

格式 : <caption>......</caption>
属性 :

水平对齐方式 : align = " left | right( 默认 ) | center "
垂直对齐方式 : valign= " top | bottom "

4. 定义行 : <tr>.....</tr> [ 要把列定义在行当中 ,<tr><td>....</td><th>....</th></tr>]

5. 定义列 :

形式：

<td>.......</td>
<th>.......</th> [ 与 <td> 相似 , 里面的文本用粗体居中显示 ]

特有属性 :

合并同行表格项 : colspan = "N"
合并同列表格项 : rowspan = "N"
表格的背景图片 : background = " 图片位置 "

6. 表格框属性 :

表格边线厚度 : border = "N"
表格宽度 : width = "N | M%" [N 表表格宽度 ,M 表表格宽与窗口比例 ]
表格高度 : height = "N | M%"
表格项间隔宽度 : cellspacing = "N"
表格项里文本与边框的距离 : cellpadding = "N"
表格背景颜色 : bgcolor = "#000000~ffffff | rgb(0,0,0) | black"
表格的背景图片 : background = " 图片位置 "
表格的边框颜色 : bordercolor = "#000000~ffffff | rgb(0,0,0) | black"
表格暗边框的颜色 : bordercolordark = "#000000~ffffff | rgb(0,0,0) | black"
表格亮边框的颜色 : bordercolorlight = "#000000~ffffff | rgb(0,0,0) | black"
表格外框样式 : flame = " above | below | border | box | hsides | lhs | rhs | void | vsides"

above: 显示上边框
below: 显示下边框
box: 显示上下左右边框
border: 显示上下左右边框
lhs: 显示左边框
rhs 显示右边框
hsides: 显示上下边框
vsides: 显示左右边框
void: 不显示边框

表格内框样式 : rules = " all | cols | rows | none "

cols: 显示列之间边框
rows: 显示行之间边框
all: 显示所有边框
none: 不显示边框

7. 表格项的属性 :

表格项宽度属性 : width = "N"
表格项高度属性 : height = "N"
文本水平对齐方式 : align = " right( 默认 ) | left | center "
文本垂直对齐方式 : valign = " top | middle( 默认 ) | bottom "
表格项内颜色 : bgcolor = "#000000~ffffff | rgb(0,0,0) | black"

框架设计

1.框架建立:[ n1,n2, ... 可以为像素点也可以为百分比]

水平框架: <frameset rows = "n1,n2, ..."><frame ...>....</frameset>
垂直框架: <frameset cols = "n1,n2, ..."><frame ...>....</frameset>

2.框架属性<frameset>:

边框厚度: border = "N"
边框颜色: bordercolor = "#000000~ffffff | rgb(0,0,0) | black"
边框属性: frameborder = "yes | no"

3.框架项<frame>:

内部链接 src = " 链接地址 "
固定框架项大小 noresize(固定)
框架项是否允许滚动条 scrolling = "yes | no | auto(默认)"
内容水平开始位置 marginheight = "N"
内容垂直开始位置 marginwidth = "N"
框架项名 name = "框架项名" [超链接打开指定框架项]

4.内镶框架<iframe>:

格式: <iframe ....></iframe> [将框架镶套到网页任意位置,大小固定]
属性:

对齐方式: align = " right(默认) | left | center"
框架链接内容: src = "链接地址"
框架边框是否可见: frameborder = "0 | 1"
框架高度: height = "N"
框架宽度: width = "N"
设置内容与框架上下边框间距: marginheight = "N"
设置内容与框架左右边框间距: marginwidth = "N"
镶套框架名称: name = "名字"
是否显示滚动条: scrolling = "yes | no | auto(默认)"
设置代替文字: alt = "代替文字内容"

表单设计

1.表单:

格式: <form>.......</form> [允许用户其中输入信息]
属性:

表单传送数据到处理程序的url地址: action = "传送位置"
表单数据的编码方式: enctype = "text/plain | application/x-www-form-urlencoded | multipart/form-data"

text/plain:　　使用纯文本形式编码
application/x-www-form-urlencoded:　　默认的编码方式
multipart/form-data:　　使用mine编码

表单的名称: name = "表单名字"
设置返回信息的显示方式:　　target = _blank | _top | _self(默认) | _parent | _new | 框架名

_blank | _new :　　将链接的内容显示在新开启窗口内
_top:　　将链接的内容显示在同一窗口的上方框架中
_self:　　将返回内容显示在本身所在窗口内
_parent:　　将链接的内容显示在本身所在的主框架中
框架名:　　在网页中找到与框架名相同的框架并在其中打开链接地址
表单的传送方法: method = "get(默认) | post"
get:　　不安全且不能传送非ascii码的字符
Post:　　此表单信息在表单主体中,字符无长度限制,包括iso10646字符集

2.表单项:

-1-表单输入项---------------------------------------------------------

格式: <input>.....</input>
共有属性:

表单项的类型: type = "text | password | radio | checkbox | file | hidden | button | reset | submit | image"
文本text: type="text " name="名称" size="长度" maxlength="最大字符串" value="初值"
密码password : type="password" name="名称" size="长度" maxlength="最大字符串" value="初值"
单选按钮radio : type="radio" name="表单项名称" value="传送内容" checked
多选按钮checkbox : type="checkbox" name="表单项名称" value="传送内容" checked
创建文件file : type="file" name="表单项名称" value="初始值"
表单隐藏域hidden : type="hidden" name="表单项名称" value="传送内容"
按钮button : type="button" name="表单项名称" value="显示文字"
重置按钮reset : type="reset" name="表单项名称" value="显示文字"
提交按钮submit : type="submit" name="表单项名称" value="显示文字"
图像image : type="image" name="表单项名称" scr="图像地址"
设置表单按下tab键时表单项获取焦点顺序: tabindex = "N"

选有属性:

表单项的名称: name = "名称"
表单项的初始值: value = "初始值"
表单项的显示长度: size = "长度"
输入最大字符数: maxlength = "N"
是否按钮被指定: checked

-2-菜单表单项---------------------------------------------------------
菜单栏:

格式: <select>.....</select>
属性:

菜单名: name = "表单项名称"
显示一个或n(n大于4)个: size = "N"
设置菜单为多选: multiple
设置表单获取焦点顺序: tabindex = "N"

菜单项:

格式: <option>......</option>
属性:

选中后传送内容: value = "传送内容"
默认选项: selected

-3-文本表单项---------------------------------------------------------

格式: <textarea ...>....</textarea>

属性:

设置文本域宽度: cols = "N"
设置文本表单项名称: name = "表单项名称"
设置文本域高度: rows = "N"
设置文本自动换行: 　 wrap = " off | virtual | soft | physical | hard "

off :无自动换行
virtual | soft :自动换行,传送时数据只在有输入回车才显示换行
physical | hard: 自动换行,按自动换行效果传送

设置表单获取焦点顺序: tabindex = "N"

-4-按钮表单项---------------------------------------------------------

格式:<button>按钮上的文本显示</button>
属性:

按钮样式: type="button/reset/submit"
按钮名称: name="按钮名称"
禁止使用此按钮: disabled="disabled"
初始值: value="按钮的初始值"

3.标题框:

格式:<fieldset><legend>标题框名</legend>.......</fieldset>
<legend>属性:

水平对齐方式:　　 align= " right(默认) | left | center "
垂直对齐方式: 　　valign = " top(默认) | bottom "

标题框可以框住表单也可以框住表单中几个表单项,标题框名只有一个

链接设计

1.文件路径表示法:

绝对路径: file : /// 磁盘名称 |/ 路径 / 文件名
相对路径: file: /// 部分路径 / 文件名 [以当前所在文件夹为基准]

2.文字超链接格式:

<a href=" 据对路径 | 相对路径 | 万维网地址 | #锚位置 ">.......</a>
<a href="(据对路径 | 相对路径 | 万维网地址)#锚位置 ">.......</a>

3.文字超链接属性:

标明页内锚地址: name = " 锚名称 "
链接在何处显示:　　target = "_blank | _top | _self(默认) | _parent | _new | 框架名"

_blank　　浏览器总在一个新打开、未命名的窗口中载入目标文档
_self　　目标文档载入并显示在相同框架或者窗口中作为源文档
_parent　　当窗口无框架时与_self一样,有则与_top一样
_top　　这个目标使得文档载入包含这个超链接的窗口
_new 　　开启个新视窗显示链接窗口]
框架名　　在网页中找到与框架名相同的框架并在其中打开链接地址]

4.超链接颜色设定:[下述属性是放在<body>标签内的]

未链接过的字体颜色 link = "#000000~ffffff | rgb(0,0,0) | black"
已链接过的字体颜色 vlink = "#000000~ffffff | rgb(0,0,0) | black"
鼠标按在链接上字体颜色 　　alink = "#000000~ffffff | rgb(0,0,0) | black"

5.图形超链接:

单图单链接 <a href=" ..."><img src="...."></a>
单图多链接:

设置图形地图:　　<map name=" 地图名 "><area...><area...>...</map>
设置地图区域:　　<area shape = " circle | rect | poly" coords = "坐标" href = ".....">

rect (矩形):　　coords = X1,Y1,X2,Y2,
circle(圆):　　coords = X1,Y1,r
poly(多边形):　　coords = X1,Y1,X2,Y2...

把地图信息添加到图形上:　　<img src="..." usemap = "#地图名" >

插图 | 影像 | 音乐设计

1.插入图形:

格式 <img src="文件绝对或相对路径" .... >
属性:

图形显示宽度 width = "N | M%"
图形显示高度 height = "N | M%"
图形显示初始的水平位置 hspace = "N"
图形显示初始的垂直位置 vspace = "N"
图形外框的厚度 border = "N"
图形与相邻文字的对齐方式 align = "top | bottom | middle | left | right | texttop | baseline"
游览器图形自动载入功能关闭时,文字取代 alt = " 取代文字 "

2.插入影像:

the one

格式 <embed src = "影像文件地址 | 音乐文件地址">
属性

播放影像文件的宽度 width = "N"
播放影像文件的高度 height = "N"
是否自动播放 autostart = "true | no(默认)"
是否无限循环 loop = "no(默认) | true"
播放多面体时是否隐藏播放器 hidden = "true | false(默认)"

the two

格式 <img dynsrc=" 影像文件地址 ">
属性:

影像宽度 width = "N"
影像高度 height= "N"
循环次数 loop = "N" [N为-1或infinite时为无限次]
二次播放时间 loopdelay = "N" [N为千分之一秒]
播放控制元件是否出现 controls(出现)

3.背景音乐:

格式: <bgsound src="音乐文件地址" .... >
属性:

循环次数loop = "N " [N为infinite表无数次]

Div

作用

通过 div 布局网页, CSS 设置其属性,完全符合内容与表现分离.

div的css属性

float 属性

作用:

对前面的 div 元素设置浮动属性后,当前面的 div 元素留有足够的空白宽度时,后面的 div 元素将自动浮上来,和前面的div元素并列于一行.

注意:

仅对后面紧跟的后面第一个 div 有效

属性值:

left:　　块状元素将向左浮动
right:　　块状元素将向右浮动
none:　　块状元素不会浮动,这也是块状元素的默认值
inherit:　　继承属性,代表继承父容器的属性.

clear属性

作用:

为了避免当某个块状元素由于前一个设置浮动属性而并列时,可设置相应的 clear 属性

属性值:

none:　　默认值为none
left:　　如果上个 div 浮动属性为 left,那么它不浮动上去
right:　　如果上个 div 浮动属性为 right,那么它不浮动上去
both: 无论上个 div 是浮属性是什么,它都不浮动上去

特点

使 n 个 div 并列于一行的前提是,这一行有足够的宽度容纳 n 个 div 的宽度
不过一个 div 标签占据一行,块状元素有一个很重要的 “float” 属性,可以使多个块状元素并列于一行
块状元素（包括div）浮动的范围由其被包含的父容器所决定.