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 ...
随机推荐
- sql 查看 锁定的表 或者 未提交 的事务
--查看锁定的 表select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from sy ...
- (转) 关于Oracle EBS邮件服务无法使用的报错
来源http://blog.itpub.net/23850820/viewspace-1060596/ 也可以检查如下网站:http://blog.sina.com.cn/s/blog_5b021b4 ...
- VC6.0 error LNK2001: unresolved external symbol _main（转）
学习VC++时经常会遇到链接错误LNK2001,该错误非常讨厌,因为对于编程者来说,最好改的错误莫过于编译错误,而一般说来发生连接错误时,编译都已通过.产生连接错误的原因非常多,尤其LNK2001错误 ...
- 说说oracle分页的sql语句
说说oracle分页的sql语句,分排序和不排序两种. 当结果集不需要进行排序时,每页显示条数为:rowPerPage,当前页数为:currentPage. 1. 相对来说,这种查询速度会快一些,因为 ...
- linux设备驱动归纳总结（十）：1.udev&misc【转】
本文转载自:http://blog.chinaunix.net/uid-25014876-id-111839.html linux设备驱动归纳总结(十):1.udev&misc xxxxxxx ...
- 【python cookbook】【字符串与文本】15.给字符串中的变量名做插值处理
问题:想创建一个字符串,其中嵌入的变量名称会以变量的字符串值形式替换掉 解决方法:str.format().str.format_map() >>> s = '{name} has ...
- javaWeb 使用 jsp 和 javaBean 实现计算器功能
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- Install MongoDB on Red Hat Enterprise, CentOS, Fedora, or Amazon Linux
Install MongoDB on Red Hat Enterprise, CentOS, Fedora, or Amazon Linux¶ Overview Use this tutorial t ...
- DataGuard主备归档存在gap的处理办法
DataGuard主备之间可能由于网络等原因,造成备库和主库之间的归档日志不一致,这样就产生了gap. 解决gap的步骤: 1.在备库获得gap的详细信息 2.将需要的归档日志从主库拷贝到备库 3.备 ...
- Hive文件格式
hive文件存储格式包括以下几类: 1.TEXTFILE 2.SEQUENCEFILE 3.RCFILE 4.ORCFILE(0.11以后出现) 其中TEXTFILE为默认格式,建表时不指定默认为这个 ...