HTML 指超文本标签语言。
包括:一.基本标签;二.常用标签;三.表单<form></form>;四.表格<table></table>
一.基本标签
1.格式标签:(模型:word工具条)
<font></font>字体
a.face属性
b.size属性
c.color属性
<b></b>加粗
<i></i>倾斜
<u></u>下划线
</br>换行
2:内容标签:(模型:新闻)
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>标题,分别对应不同的大小
<p></p>段落
<ul></ul><ol></ol><li></li>有序列表和无序列表
<div></div>默认占一行
<span></span>区域
二.常用标签
<a></a>超链接
href属性:超链接目标地址
超链接文字
target属性:_black新页面打开;_self当前页面打开
<img/>图片
src图片路径
width,height等 图片大小
<a><img/></a>图片超链接
三.表单<form></form>
表单元素:id;name;action;method
表单成员
文本类:
<input type="text"/>文本框
<input type="password"/>密码文本框
<textarea></textarea>多行文本框
<input type="hidden"/>隐藏文本框
按钮类:
<input type="submit"/>提交按钮
<input type="reset"/>重置按钮
<input type="button"/>按钮
<input type="image"/>图片按钮
选择类:
<input type="radio">单选按钮
<input type="chekbox">复选按钮
<select></select>选择按钮:包含<option></option>选项
<input type="file">文件上传按钮
四.表格<table></table>
<table></table>表格
常见属性:width宽;border边框;cellpadding单元格与内容之间的距离cellspacing单元格与单元格之间的距离
背景属性:background-各类属性;gbcolor背景色
对 齐:align水平对齐.center居中;left居左;right居右;
<tr></tr>表格中的行
常见属性:只有height高
背景属性:同<table><table/>背景属性
对 齐:除了水平对齐(同<table><table/>align属性),还有valign竖直对齐--top顶端对齐;middle中间对齐;bottom底对齐;
<td></td>表格行中的列
常见属性:weight;height
背景属性:同<table><table/>背景属性
对 齐:同<tr></tr对齐>
合 并:rowspan合并行(后面加数字);colspan合并列(后面加数字)
关于HTML5:http://www.w3school.com.cn/html5/html_5_intro.asp
使用HTML5可以方便的在网页中加入音频和视频等,不在需要flash插件.但是由于现阶段发展目前浏览器所支持的HTML5音频和视频格式十分有限.
如果需要使用到HTML5可以去http://www.w3school.com.cn/查看详细教程
CSS样式表
样式表主要用来提升我们的工作效率
一.样式表的分类
内联样式表:写在HTML标签中,用style=""属性操作,特点是明确.只对当前标签起作用,然后却造成代码等冗余,增加工作量
内嵌样式表:写在HTML<head></head>标签中,对整个页面起作用,统一界面风格
外部样式表:单独的.css文件,需要附加到HTML文件中去,样式表统一管理
二.选择器
基本选择器:
标签选择器:标签名{样式操作}
class选择器:.class名{样式操作}
id选择器:#id名{样式操作}
三个标签的优先级id>class>标签
复合选择器:复合选择器是在基本选择器的基础上进一步的优化和筛选
并列关系:用逗号隔开,如选择器1,选择器2--表示同时筛选出选择器1和选择器2的内容
后代关系:用空格隔开,如选择器1 选择器2--表示筛选出选择器1里面后代是选择器2所选的内容
class筛选:标签名.class名--对前者进行筛选,中间不能加空格
三.属性
前景与背景:
前景:
文字:font-family;font-size;font-weight;font-stye;text-decoration
对齐:text-align,vertical-align
行:line-height(行距),text-indent(首行缩进)
背景:
背景色:background-color
背景图:
background-image:url()
background-repeat布局方式,no-repeat不重复;repeat重复;repeat-x横向重复;repeat-y纵向重复
backround-position图片位置top,right,bottom,background-attachment规定图片是否随文字滚动
边框边界:
边框:border-width粗细,border-style样式,border-color颜色,分别对应top上,right右,bottom下,left左
外边距:margin上,右,下,左;margin:auto布局居中
内边距:padding上,右,下,左
列表与方框:
列表:list-style-type:列表样式;list-style-position:列表位置;list-style-image:列表头显示的图片
方框:width,height;display,overflow(内容超出会设置)
注意:span默认对width,height没有效果,需要配合display:inline;div默认对宽和高起作用,但如果他的display:inline,则width和height也不起作用
格式与布局:
流式布局:float:left/right;clear:both
定位布局:position:fixed固定位置/absolute绝对位置/relative:top,right,bottom,left相对位置
关于CSS3:http://www.w3school.com.cn/css3/index.asp
CSS 用于控制网页的样式和布局。
CSS3 是最新的 CSS 标准。
同样由于技术发展等因素.很多CSS3中新出先的功能大部分浏览器还不支持
JavaScript浏览器脚本
JavaScript 是世界上最流行的脚本语言。
JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。
JavaScript 被设计为向 HTML 页面增加交互性。
许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。
一.基本语法
数据类型:整型,小数,字符串,日期,布尔,数组;每种数据类型之间的转换时通过parseInt(),parseFloat()方法进行,isNaN()这不是一个数字,等于true表示不是数字
变量:这里变量全部是var 变量名=值得方式 进行赋值取值等操作.不再是单个的类型名统一用var表示
运算符:同C#
语句:同C#
数组:var[]数组名=new arry()定义数组,var[下标]取值
函数:函数定义function 函数名(变量名){}
二.DOM操作
window对象:
alert():一个按钮的对话框
confirm():两个按钮的对话框
open():打开一个窗口
close():关闭窗口
setTimeout(code,delay):经过delay毫秒后执行code
setInterval(code,delay):间隔delay毫秒执行code
history对象:forward();back();go(n)--正数是前进n,负数是返回n
location对象:reload()--重新加载页面;href--设置页面的地址
document对象:
找元素:
getElementById()根据Id找;
getElementsByName()根据name名找,返回集合
getElementsByTagName()根据标签名找,返回集合
操作元素:
操作属性:1.获得属性getArrtribute("属性名");2.设置属性:setArrtribute("属性名","属性值");3.移除属性:removeArrtribute("属性名")--属性参考本文CSS样式表中的属性
操作样式:1.操作内联样式(style)取值,赋值;2.操作className取值,赋值
操作内容:1.表单元素--value取值,赋值;2.非标单元素--innerHTML,innerText取值赋值
操作相关元素:
找到元素:1.找父元素--parentNode;2.找子元素--children;3.找同辈元素-nextsibling下一个元素,previoussibling上一个元素
操作元素:1.创建document.createElement("标签名");2.复制cloneNode();3.添加appendNode();4.删除removeNode();5.替换replaceNode()
事件:onclick点击事件;ondbclick双击事件;onmouseover鼠标移上去;onmouseout鼠标移走;onfocus得到焦点事件;onblur失去焦点事件
JQuery
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
一、语法的基本结构：
第一步：导入JQuery脚本包。
第二步：写JQuery的ready事件
$(document).ready(function(){
//在这里面写代码。
});
注意：
1.JQuery的触发时机。
2.非侵入性的编码方式。
3.链式结构的编码方式。
4.集合式操作。操作选择器选择出来的一组对象。
二、具体语法
（一）找到元素
选择器的种类：同样式表（CSS3.0）
第一类：基本选择器--可参照本文CSS样式表中的选择器的内容,也可点击查看更详细的介绍
1.最最基本的：标签，ID选择器，class选择器
2.组合选择器：空格（后代），逗号，标签名.class，> (子级选择器)
第二类： 过虑选择器
1.基本过滤（按照HTML标记的书写顺序来过滤）
:first - 第一个
:last - 最后一个
:eq(索引号) - 任意一个
:lt(索引号) - 大于某个索引号
:gt(索引号) - 小于某个索引号
:odd - 奇数个
:even - 偶数个
:not(选择器) - 排除
2.属性过滤
[属性名] - 选择拥有这个属性的元素
[属性名=值] - 找属性名是某个值的
[属性名!=值]
[属性名*=值] - 属性值中包含某个值
[属性名^=值] 属性值是以..开头
[属性名$=值] 属性值是...结尾
3.内容过滤
:has(选择器) - 开始与结束标记之间是否包含某类子元素，如果包含，就选择出来。
:contains(字符串) - 开始与结束标记之间是否包含某段文字，如何包含就选择出来。
（二）DOM操作--同本文JavaScript中的DOM操作,点击查看更详细的介绍
1.操作元素本身:操作属性，操作样式，操作内容
2.操作相关元素:
找相关元素：父、子、兄弟、前、后;
操作相关元素：添加、复制、删除、替换
（三）事件与动画
（四）Ajax异步通信
(未完待续....)