HTML系列(HTMl+CSS+JavaScript+Jquery)--un
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异步通信
(未完待续....)
HTML系列(HTMl+CSS+JavaScript+Jquery)--un的更多相关文章
- 前端~HTML~CSS~JavaScript~JQuery~Vue
HTML CSS JavaScript DOM文档操作 jQuery实例 Vue
- HTML,CSS,Javascript,JQuery
HTML 一套浏览器认识的规则 标签 1.<head></head> 2.<title></title> 3.<body></body ...
- selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治疗selenium各种定位不到，点击不了的并发症）
跟你说,你总是靠那个firebug,chrome的F12啥的右击复制xpath绝对总有一天踩着地雷炸的你死活定位不到,这个时候就需要自己学会动手写xpath,人脑总比电脑聪明,开始把xpath语法给我 ...
- 在线运行Javascript,Jquery,HTML,CSS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...
- jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
- JavaScript ,Css and Jquery In OpenERP 7.0
From: http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html Hi fellows, ...
- 区域及分离、Js压缩、css、jquery扩展
后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...
- 大量Javascript/JQuery学习教程电子书合集
［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
随机推荐
- 关于设置oracle中系统编号SYSID自动编号的问题；
http://liye9801.blog.163.com/blog/static/601970320086210039591/ 如何在oracle里设置自动编号列 2008-07-21 12:00:3 ...
- html5，表格与框架综合布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- [CrunchBang]Linux系统下必要的中文字体
sudo apt-get install ttf-droid ttf-wqy-zenhei xfonts-wqy ttf-wqy-microhei ttf-arphic-ukai ttf-arphic ...
- NOIP201401珠心算测验
珠心算测验 问题描述] 珠心算是一种通过在脑中模拟算盘变化来完成快速运算的一种计算技术.珠心算训练,既能够开发智力,又能够为日常生活带来很多便利,因而在很多学校得到普及. 某学校的珠心算老师采用 ...
- sql创建删除修改表的基本操作
1 建立表格 在建立好数据库以后,就可以根据储存资料的需求,使用SQL叙述建立所有需要的表格(table).建立表格的设定非常多,以建立"world.city"表格来说,它的叙述会 ...
- python时间处理函数
所有日期.时间的api都在datetime模块内. 1. 日期输出格式化 datetime => string import datetime now = datetime.datetime.n ...
- innodb double write buffer
两次写是innodb的一个重要特性,目的是为了保证在异常down机或者没电的情况下,保证数据的安全可靠.一次是往内存的double write buffer中写,一次是在刷共享表空间的连续128个页. ...
- Swoole 遇上 PHP会是怎样的结果呢
一直想写点Swoole的东西,毕竟它重新定义了php,却一直不知道怎么下手写 Swoole涉及的知识点非常多,互为表里,每次想写都发现根本理不出一个头绪 Swoole是一个php的扩展,它的核心目的就 ...
- wordpress网站被挂马以及防御方法
wordpress本身的安全性是非常的高的,一般不会被轻易的破解,被挂马,但是我们也不能够过度迷信wordpress的安全性,凡是连接上互联网的服务器和电脑,都存在被破解的风险性.所以我们在日常维护自 ...
- SURF
推荐:http://www.cnblogs.com/tornadomeet/archive/2012/08/17/2644903.html SURF-Speeded Up Robust Feature ...