首页 > 代码库 > web前端基础知识总结

web前端基础知识总结

上个寒假总结的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=http://www.mamicode.com/”#name”> 文字链接

(3)、空链接: <a  href=http://www.mamicode.com/”#”> 链接

(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=http://www.mamicode.com/”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载 入时 onm ouseOver鼠标经过时  onMouseOut鼠标移开时 onReset 复位表单时 onSubmit提交表单时 onSlecte 文本域被选中时 onUnload退出载入时 onFocus当光标落在文本框时

 

web前端基础知识总结