HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础
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当光标落在文本框时
