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 ...
随机推荐
- 夺命雷公狗—angularjs—16—angularjs里面的缓存
强大的angularjs也给我们预留了一套他的缓存机智,这样在某个程度上来说还是可以做到减轻一点服务器压力的.... <!DOCTYPE html> <html lang=" ...
- SQL 中常见的系统存储过程
-- 来源于网络 -- 更详细的介结参考联机帮助文档 xp_cmdshell --*执行DOS各种命令,结果以文本行返回. xp_fixeddrives --*查询各磁盘/分区可用空间 xp_logi ...
- [php]表单和验证
<?php /* 表单的作用: 通过表单 发布和收集 信息. 对html表单进行编码 只是有效接受用户输入的必要操作的(一部分), 必须由[服务器端]组件来处理 一 标头函数(header()) ...
- Oracle的导入导出
写批处理文件的基础知识 http://blog.chinaunix.net/uid-20672257-id-3056546.html http://wenku.baidu.com/view/db9c5 ...
- 继承（引用~析构~virtual）
[1]程序1 #include <iostream> using namespace std; class Base { private: int m_nBase; public: Bas ...
- android 学习随笔九(网络：简单新闻客户端实现)
1.简单新闻客户端 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xm ...
- 【python cookbook】【数据结构与算法】6.在字典中将键映射到多个值上
问题:一个能将键(key)映射到多个值的字典(即所谓的一键多值字典[multidict]) 解决方案:如果想让键映射到多值,需要将这多个值保持到另一个容器如列表或集合中: >>> d ...
- oracle 自定义聚合函数(MAX_O3_8HOUR_ND) 计算最大的臭氧8小时滑动平均值
create or replace function MAX_O3_8HOUR_ND(value NUMBER) return NUMBER parallel_enable aggregate usi ...
- IE6不支持CSS的属性选择器
input[type="text"] { width: 50px; } 测试IE6不生效,而IE7以上浏览器则没问题
- OpenCV学习 物体检测 人脸识别 填充颜色
介绍 OpenCV是开源计算机视觉和机器学习库.包含成千上万优化过的算法.项目地址:http://opencv.org/about.html.官方文档:http://docs.opencv.org/m ...