标签:热键 center repeat-x disable ie8 image iframe 阴影 相对
上个寒假总结的web前端的一些知识点给大家分享一下
1、<html>和</html> 标签限定了文档的开始和结束点。
属性:
(1) dir: 文本的显示方向,默认是从左向右
(2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文
(3) version:定义创作文档的HTML的标准版本
2、<head></head>用于封装位于文档头部的其他标签
属性:
(1) dir:文本的显示方向
(2) Lang:语言信息
(3) Profile:提供了与当前文件相关联的文档数据的URL
可放在<head>标签中的标签为
(1) <base>:标注当前文档的URL的全称
属性:
Href:指定文档的基础URL地址(<body>中的相对地址都是以此基地址为基础)
Target:定义打开页面的窗口
属性值:
_parent:在上一级窗口中打开
_blank:在新一窗口中打开
_self:在本窗口中打开
_top:在浏览器的整个窗口中打开
(2) <basefont>:设定基准的字体,字号和颜色
属性:
Face:设置字体(如黑体,楷体等)
Size:设置大小(属性值从1——7,从小到大)
Color;字体颜色(值为十六进制颜色)
(3) <title>:设定显示在浏览器左上方的标题内容
属性:
Dir:文本的显示方向
Lang:语言信息
(4) <meta>:有关文档本身的元素信息
属性:
http-equiv: 生成http标题域,取值与content的属性值相同
属性值:
Refresh 为自动刷新,在content里设定刷新时间,content里也可以跟上刷新的URL,实现页面跳转;
content-type 在content里用charset设置内码语系 如charset=gb2312;
Expires 定义网页有效期,在content里的格式为星期,日 月 年 时 分 秒 GMT,用英文和数字
Page-enter 进入网页时的效果
Page-exit 退出网页时的效果
在content中对应的值为:
0:盒状收缩 1:盒状展开 2:圆形收缩 3:圆形展开
4:向上擦除 5:向下擦除 6:向左擦除 7:向右擦除
8:垂直百叶窗 9:水平百叶窗 10:横向棋盘式 11:纵向棋盘式
12:溶解 13:左右向中部收缩 14:中部向左右展开 15:上下向总中部收缩
16:中部向上下展开 17:梯状左下展开 18:梯状左上展开 19:梯状右下展开
20:梯状右上展开 21:随机水平线 22:随机垂直线 23:随机
Name:如果元数据是以关键字/取值出现的话,那么name的值就是其关键字
属性值:
Keywords 在content里定义关键字;
Discription 为定意描述,在content里定义描述内容;
Author 在content里描述作者;
Content: 关键字/取值的内容
(5) <style>:设定有关CSS层叠样式表的内容
(6) <link>:设定外部文件的链接
(7) <script>:设定文件脚本的内容
3、<body></body>界定了文档的主题
属性:
(1)、text: 页面文字的颜色
(2)、bgcolor: 页面背景的颜色(用十六进制的颜色表示)
(3)、background: 页面的背景图像(所需的是图片的URL)
(4)、bgproperties: 页面的背景图片是否固定(其只有一个值fixed,设为Fixed后图像不会随着滚动条的滚动而动)
(5)、link: 页面默认的链接颜色
(6)、alink: 鼠标正在单击时的链接颜色
(7)、vlink: 访问过后的链接颜色
上面三个控制的是标签<a></a>中的颜色
(8)、topmargin: 页面的上边距
(9)、leftmargin: 页面的左边距
4、 定义空格 <!--被注释掉的内容-->
5、文字标记
(1)、<hn>(n=1~6)标记标题字
属性:
Dir:文字方向
Lang:语言信息
Align:对齐方式
属性值:
Left:左对齐(默认)
Right:右对齐
Center:居中
Class:用一个名称来标记标题,标记名称指向在外部定义的样式表
Id:为段落设置一个标记,将来可以在一个超链接中明确的引用这个标记,以便作为样式表的选择器
Style:创建标题内容的内联样式
Title:给标题加上一个说明性的文字
(2)、<font>标记普通字
属性:
Face:字体 size: 字号 color:颜色
(3)、<b>或<strong> 粗体
(4)、<i>,<em>,<cite> 斜体
(5)、<sup> 上标
(6)、<sub> 下标
(7)、<big> 大字号
(8)、<small> 小字号
(9)、<u> 下划线
(10)、<s> 删除线
(11)、<address> 显示地址如Email
6、段落标记
(1)、<p> 表示一个段落的开始
属性:dir lang align class id style title
(2)、<br> 换行 <nobr>
属性:class id style title
(3)、<div>分块文字
属性:dir lang align class id style title nowrap(强制不换行)
(4)、<span> 行内样式定义
属性: dir lang align class id style title
(5)、<center> 水平居中显示
属性: dir lang class id style title
(6)、<blockquote> 块引用
属性: dir lang class id style title
7、下划线
<hr> 插入水平分割线
属性:dir lang class id style align size noshade width color
8、列表
(1)、 <ul>无序列表,用<li>来罗列项目
属性:dir lang class id style title compact(紧凑无需列表)type(项目符号类型)
Type的属性值:disc:实心原点 circle:空心原点 square:实心方形
(2)、<ol>定义一个有序列表
属性:dir lang class id style title compact start(数字起始值)
Type的属性值:1,A,a,i,|
(3)、目录列表<dir>,无序列表的一种特殊形式
属性: dir lang class id style title
(4)、定义列表<dl>
基本用法: <dl>
<dt>名词</dt> <dd>解释</dd>
</dl>
属性:dir lang class id style title compact
(5)、菜单列表<menu>,用于表示简短的列表
属性:dir lang class id style title
9、插入图片
<img> 插入图片标签
属性:
Src:图像的源文件路径 Alt:文字提示(图像不显示时) width、hight:宽度、高度 border:边框
Vspace:垂直间距 hspace:水平间距 dynsrc:设定avi文件的播放 loop:设定avi播放次数
Loopdelay:设定avi播放延迟 start:设定avi文件的播放方 lowsrc:设定低分辨率图片 usemap:映像地图
Dir lang class id align style title
Align的属性值极其说明:
Top:文字的中线在图片的上方 middle:文字的中线位于图片的中部
Bottom:文字的中线位于图片的底部 left:图片在文字左侧
Right:图片在文字的右侧 absbottom:文字的底线位于图片的底部
Absmiddle:文字的底线位于图片的中部 baseline:英文文字基准线对齐
Texttop:英文文字上边线对齐
10、插入超链接
(1)、标签<a></a>为超链接标签
属性:
Href:指定链接地址 name:给链接命名 target:指定链接打开窗口 accesskey:链接热键
Dir lang align class id style title charset rel:指定从原文档到目标文档的关系
Rev:指定从目标文档到源文档的关系 type tabindex:对新窗口中的对象重新排序
URL格式:
http://进入万维网站点 ftp://进入文件传输服务器 news://启动新闻讨论组 telnet://启动telnet方式
Gopher://访问gopher服务器 mailto://启动邮件(href=”mailto://sdut@qq.com? Subject=给我来信”)
(2)、书签链接,试用于页面太长时,避免翻页,格式如下
<a name=”name”> 文字 </a> <a href=”#name”> 文字链接 </a>
(3)、空链接: <a href=”#”> 链接 </a>
(4)、脚本链接:<a href = “javascript:.....”> 文字链接 </a>
(5)、制作图像映射:在同一图像上嵌入不同的链接,创建图像映射的方式是通过<img>标签的usemap属性再结合<map> 以及<area>标签来实现的,<a>或<area>标签包含在<map>标签内
<map>的属性:
name 给链接命名 dir lang id class style title
<area>的属性:
Href alt accesskey target dir lang id class style title tabindex shape(图像映射区域的形状) coords(图像对光标敏感区域的坐标)
Shape的属性值:
Rect 矩形区域 circle 椭圆形区域 poly 多边形区域
事例:
<img usemap=”#map” src=”URL” hight=”” width = “” border = “”>
<map name = “map”>
<area shape = “rect” coords = “100,23,56,90” href = “URL”>
<area shape = ...............................................................................>
</map>
11、插入多媒体
(1)、插入声音标签<bgsound>
属性: src (声音文件路径) loop 循环次数
(2)、<embed>标签可以在网页中加入MP3音乐,电影,swf动画等多媒体文件
属性: src loop autostart width hight hidden(是否隐藏内嵌播放器) dir lang class id style align title type(嵌入多媒体类型)
Hidden 和 autostart 的属性值有true和no
当嵌入flash动画时还有以下属性:
Quality 动画的播放质量 puginspage 播放插件所在位置 wmode 动画播放时的窗口模式
(3)、制作滚动字幕标签<marquee></marquee>
属性: align behavior(滚动方式) bgcolor class direction(滚动方向) width hight Hspace vspace
Style loop scrollamount(滚动速度) scrolldelay(滚动延迟)
Direction的属性值:up down left right
Behavior 的属性值: scroll(循环往复《默认》) slide(只走一次滚动) alternate(交替进行滚动)
Scrollamount后跟数字越小越慢,scrolldelay后跟毫秒,vspace和hspace 定义字幕与周围文字的距离
12、其他嵌入
(1)、<object>标签用于往文档中嵌入对象
属性:classid(指定包含对象的位置) archive(URL列表) border codebase(提供一个可选的插件URL)hight
Width data(指定需要对象处理的数据文件) hspace vspace name type tabindex dir lang align class id style title
(2)、<applet>标签用来插入applet小程序
属性: code (指定浏览器运行的Java类小程序的名称) codebase hight width hspace vspace name type class alt id title style align
(3)、<param>标签为把包含他的<object>或<applet>提供参数
属性:type name id value
13、表单:
表单由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成,所有的这些都放在<form>中
(1)、<form>
属性: dir lang align class id style title name method(定义表单结果从浏览器传输到服务 器的方法一般有post 和get 两种方法) action(用来定义表单处理程序(asp,CGI等)的位置(相对或绝对)) enctype(设置表单编码方式) target(表单返回显示方式)
Enctype的属性值: text/plain(以纯文本形式传送) application/x-www-urlencoded(默认编码方式) multipart/form-data 使用mine 编码
(2)、表单输入标签<input>
属性: dir lang class id alt name align style title type accesskey value size src accept(文件上传的MIME表列)checked(已选中) disabled(禁止某个元素输入)maxlength(最大字符数)
Type的属性值:text 文字域 password密码域 file 文件域 checkbox复选框 radio单选框 button 普通按钮 submit 提交按钮reset 重置按钮 hidden隐藏域 image 图像提交按钮
(3)、多行文字域<textarea>
属性:dir lang class id style title name accesskey disabled tabindex rows(行数) cols(列数) wrap(多行文字域的换行)
Wrap的属性值:virtual 虚拟换行 physical 物理换行 off 不换行
(4)、<select>下拉菜单和下拉列表标签,把标记条目放在<option>标签中
属性:dir lang class id style title name disabled(禁用某个列表) size tabindex multiple(列表中的多选项目)
14、表格
(1)、定义表格<table>
属性:dir lang class id style title name bgcolor background bordercolor bordercolorlight bordercolordark border height width cellpadding(单元格边距) cellspacing(单元格间距) nowrap frame(表格边框的可见方式) rules(行列之间边的可见方式) summary(整个表格的概要描述)
Frame的属性值:
Above 显示上边框 below显示下边框 border 边框全显示 hside显示上下边框 vside显示左右边框 lhs显示右边框 rhs显示左边框 void 显示
Rules的属性值:
All 显示所有内部边框 cols仅显示列边框 groups显示位于行列间的边框 none不显示内部边框 rows仅显示行边框
(2)、定义行<tr>
属性:dir lang class id style title bgcolor background bordercolorlight bordercolordark valign(表格行的垂直对齐方式)
(3)、定义列<td>,<th>为定义表头
属性:dir lang class id style title bgcolor background bordercolorlight bordercolordark valign width height abbr(单元格的缩写) axis(用逗号分割目录名列表) rowspan(单元格跨行个数)
Colspan(单元格跨列个数) headers(标题单元格的列表) nowrap(禁止换行) scope(指定单元格提供信息)
(4)、表格标题内容<caption>
属性:dir lang class align id style title valign
15、框架主要分为两部分:一个是框架集,另一个是框架
(1)、<frameset>框架集,仅是一个框架的集合
属性:class id style title rows cols bordercolor frameborder framespacing(框架集间距)
(2)、定义框架<frame>
属性:class id style title bordercolor frameborder name noresize(禁止调整边框大小) src(框架源文件)
Marginwidth(框架边缘宽度) marginheight(框架边缘高度)
Frameborder的属性值:yes 出现边框 no 不出现边框
(3)、<iframe>定义内联框架,在文档中定义一个独立的矩形区域,有独立的滚动条和边框
属性:class id style title frameborder name src marginwidth marginheight align height width scrolling(是否允许出现滚动条)
Scrolling的属性值:yes 出现 no不出现 auto自动出现滚动条
16、样式表
(1)、内联样式表:只需在标签内含一个上style属性,style属性后在跟一系列属性和属性值即可。
事例:<标签 style = “属性:属性值”>
(2)、文档样式表用<style>标签表示
属性:dir lang title media(文档要使用的媒介类型) type(样式类型)
级联样式表type的属性值都是text/css,javascript使用的样式表都是text/javascript
Media的属性值:screen 计算机显示屏(默认) tv(电视) projection 剧场 handheld(PDA和手提电话) print 打印 all所有媒体
(3)、外部样式表:用<link>标签来实现
属性:dir title lang target type class id style charset href media rel rev
(4)/样式表语法
(a)、HTML重新定义标签样式表语法:
exp: td{color:red;font-size:8pt}
(b)、类样式表:能够在文档样式表或外部样式表中为同一个元素创建不同的样式,在文档后面通过设置class属性 来选择特定的样式。
例子: .bg {background-image: url(路径);}
<body class = ”bg”>
17、样式表的属性
(1)、字体属性: font-family 用一个指定的字体名 font-size 字体显示的大小 font-style 字体显示的样式 font-weight 定义字体的粗细 font-variant 设置英文大小写转换 font 组合设置字体属性
Font-style的属性值:normal 正常值 italic 斜体 oblique 扁斜体
Font-weight的属性值: normal 正常值 bold 粗体 bolder 在加粗 lighter 变细 100—900 共有100到900个级别数越大越粗
Font-variant的属性值:normal 正常 small-caps 将小写转换为大写
Font组合时的顺序:样式,粗细,大小
(2)、颜色和背景属性:
Color 颜色 background-color 背景颜色 background-image 背景图片 background-repeat 背景图片如何重复
Background-position 设置背景图片水平和垂直的位置 background 组合设置背景属性
属性值:
Background-repeat:repeat 平铺 repeat-x X方向上平铺 repeat-y Y方向上平铺 no-repeat不平铺
Background-position: value 以百分比(x%.y%)或绝对值的形式(x.y)来确定背景图像的位置 top 居顶
Center 居中 bottom居底 left 居左 right居右
Background可以任意组合以上的属性值
(3)、文本属性:
Letter-spacing 定义一个附加在字符间的间隔数量 word-spacing单词间的间隔数量 text-index文字的首行缩进
Text-align 文本对齐方式 line-height行高间隔 text-transform控制英文文字大小写 text-decoration文字修饰
属性值:
Letter-spacing: normal 正常值 长度单位 如2em
Word-spacing : normal 正常值 长度单位
Text-decoration:underline 加下划线 overline 加上划线 line-through 加删除线 blink闪烁文字,只使用于 netscape浏览器 none默认值
Text-align:left 左对齐 right右对齐 center居中 justify两端对齐
Text-index:后跟长度单位如2em
Text-transform: capitalize将每个单词首字母大写 uppercase 将每个都转换为大写 lowercase 转换为小写 none
(4)、边框属性:
Border-color 边框颜色 border-style 边框样式 border-width边框宽度 border-top-color 上边框颜色
Border-left-color 左边框颜色 border-right-color 右边框颜色 border-bottom-color 底边框颜色 border-top-style border-left-style border-right-style border-bottom-style border-top-width border-left-width
Border-right-width border-bottom-width border 组合设置 border-top(right/left/right/bottom)
属性值:
Border-style:none 无边框 dotted 边框由点组成 dash 边框由短线组成 solid边框是视线 double双线
Groove 立体沟槽 ridge 边框成脊形 inset 边框内嵌一个立体边框 outset边框外嵌一个立体边框
(5)、方框属性:
Float 让文字环绕在元素四周 clear指定在某一元素的某一边是否允许有环绕的文字和对象 clip限定只显示裁切 出来的区域 width设定对象的宽度 height设定对象的高度 padding设定边框和内容间的距离 margin 元素里 浏览器的距离 overflow 当本层内容容纳不下时的处理方式 position 设置对象位置 z-index决定层的先后顺序和覆盖关系
属性值:
Float: none left right
Overflow: visible无论层的大小,内容都会显示出来 hidden 隐藏超出层的内容 scroll 不管是否超 出都会添加滚动条 auto 只有超出时才会有滚动条
(6)、列表属性:
List-style-type 设定引导列表的项目类型 list-style-image 选择图像作为项目的引导符号 list-style-position 决定列表项目所缩进的程度
属性值:
List-style-type: disc 在文本行前加实心圆 circle 加空心圆 square 加实心方块 decimal 加阿拉伯数字
Lower-roman 小写罗马数字 upper-roman 大写罗马数字 lower-alpha 小写字母 upper-alpha 大写字母 none 不显示任何符号
List-style-image:的属性值为URL(图片路径)
List-style-position: outside 列表贴近左侧边框 inside 列表缩进
(7)、滤镜属性:基本语法 filter: 滤镜 (参数)
Alpha 透明的层次效果 blur 快速移动的模糊效果 chroma 特定颜色的透明效果 dropshadow阴影效果
Fliph 水平翻转效果 flipv 垂直翻转效果 glow 边缘光晕效果 gray灰度效果 invert 颜色亮度值翻转
Mask遮罩效果 shadow渐变阴影效果 wave波浪效果 xray X射线效果
(8)、鼠标滤镜:用法---------cursor: value
Value的值: hand 手型 crosshair 交叉十字 text 文本选择符号 wait沙漏装 default 默认形状 help 问号
N(W、S、E)-resize 向北(西、南、东)的箭头
18、在页面中加入Javascript脚本
(1)、用标签<script>实现
属性: charset编码脚本程序的字符集 language 脚本语言 src 包含脚本程序的URL type脚本类型
(2)、js内在事件:onBlur光标离开文本框时 onChange 当文本框的内容给被改变是时 onClick单击时 onLoad载 入时 onMouseOver鼠标经过时 onMouseOut鼠标移开时 onReset 复位表单时 onSubmit提交表单时 onSlecte 文本域被选中时 onUnload退出载入时 onFocus当光标落在文本框时
标签:热键 center repeat-x disable ie8 image iframe 阴影 相对
原文地址:http://www.cnblogs.com/yulei126/p/6783328.html