HTML
标签
文本标签
1. 元素<font>
2. 属性
1. size
2. color
3. face-字体
标题标签
1. 元素h1-h6
1. 属性
1. align:cencer left right
列表标签
1. ui和ol-li
1. 属性
1. type:disc（默认）：实心圆，circle：空心圆，square：方块
图像标签
1. img
1. 属性
1. src
2. width
3. height
4. alt:悬浮文字
链接
1. a
1. href:
1. <a href="XXX.rar / XXX.zip"></a>
2. <a href="mailto:xxx@xxx.com"></a>
3. <a href="javascript:js脚本"></a>
4. <a href="#"></a>
2. target打开方式
1. _black
2. _self
3. name或id：锚点
表格
1. table
1. 属性
1. border
2. cellspace
3. cellpadding
4. bgcolor
5. with
6. algin
2. tr
1. 属性
1. bgcolor：背景颜色
2. align：定义表格的位置
3. td
1. 属性
1. bgcolor：背景颜色
2. align：定义表格的位置
3. valign:垂直位置
3. width：定义单元格的宽度
4. height：定义单元格的高度
5. colspan：定义单元格横跨的列数
6. rowspan：定义单元格竖跨的行数
表单
1. form
1. 属性
1. action
2. method
3. enctype
2. input
1. 属性
1. type
1. text/password
1. name
2. value
3. maxLength
4. readonly
3. radio/checkedbox
1. name
2. value
3. checked:默认被选中
4. button/reset/submit
1. name
2. value
4. file
1. name
2. value
5. hiddlen
1. name
2. value
2. value
3. name
4. diabled:禁用控制，只能看不能修改
文本域
1. textarea
1. 属性
1. name
2. cols
3. rows
4. readonly
下拉选
1. select
1. 属性
1. name
2. size：默认显示对少
3. multiple:设置对选，没有属性值
label
1. 属性
1. for：与该元素相联系的控件ID值
div/p
1. 属性
1. algin
span
### CSS
###### css概述
可以用来美化html页面
###### 在html页面中引入css样式的方式
(1)通过标签上的style属性引入css样式（案例1）
<div style="font-size:50px;"></div>
(2)通过style标签引入css样式（案例2）
<style>
div{
font-size:50px;
}
</style>
(3)通过链接引入外部的css文件（案例3）
<link rel="stylesheet" href="demo.css"/>
选择器
基本选择器
(1) 标签名(元素名)选择器 格式: 元素名{}, 如: span{}
(2) 类(class)选择器 格式: .类名{ css属性 }, 如: .c1{}
(3) ID选择器 格式: #id值{ css属性 }, 如: #d1{}
扩展选择器
(1)后代选择器 格式: 父选择器 后代选择器{ }
#d1 span{
background-color: #DDA0DD;
font-size: 22px;
}
(2)子元素选择器 格式: 父选择器>子元素选择器{ }
#d1>span{
background-color: #DEB887;
font-size: 16px;
}
(3)分组选择器格式:选择器1,选择器2,选择器3,…选择器n{}
.c1,.c2,#p1 span{
background-color: #F4A460;
}
(4)属性选择器格式: 选择器[属性条件..]{}
*[class]{
border: 2px solid gray;
}
input[type="text"]{
background-color: red;
text-indent: 10px;
}
(5)相邻兄弟选择器格式: 大哥+小弟{ }
(6)伪元素选择器
:link 表示元素未被点击时的状态
:hover 表示光标(鼠标)悬停时的状态(掌握!)
:active 表示元素被点击时的状态
:visited 表示元素被点击之后的状态
外边距/边框/内边距
margin – 外边距
margin: 10px 20px 40px 60px;/*上、右、下、左*/
margin: 20px 10px;/*上下、左右*/
margin: 20px;/*上下左右*/
注意: 垂直外边距合并的现象:
border – 边框
border: 5px solid green;
border-top:5px solid green;
padding – 内边距
padding: 10px 20px 40px 60px;/*上、右、下、左*/
padding: 20px 10px;/*上下、左右*/
padding: 20px;/*四个边距*/
常用的css属性
display属性 -- 设置元素的显示方式
block: 块级元素的默认值
inline: 行内元素的默认值
inline-block: 既具备行内元素的特性(可以同行显示), 也具备块级元素的特性(可以设置宽高)
none: 用来隐藏一个元素, 这种方式的隐藏是真的隐藏了, 元素在原位置不再占用空间
visibility: hidden 这种方式也可以隐藏一个元素, 但是这种隐藏只是元素不显示了, 在原位置仍然占用空间（很少用到
text-align
设置元素中文本水平对齐方式left/right/center/justify:
list列表属性
list-style-type: none/disc/square/circle...
字体属性
font-size：尺寸 font-weight：加粗 font-family：字体 color：颜色
line-height： 行高 text-decoration：下划线
其他
width 设置宽度 height 设置高度
框架标签
frameset – 定义一个框架集
<!-- frameset组织页面结构 -->
<frameset rows="13%, 87%" frameborder="0" framespacing="0">
<frame src="_top.html" noresize="noresize"/>
<frameset cols="14%, 86%" frameborder="0" framespacing="0">
<frame src="_left.html" noresize="noresize"/>
<frame src="_right.html" name="rightFrame" noresize="noresize"/>
</frameset>
</frameset>
JQ
1.jQuery概述
1.1.什么是jQuery
jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 函数库。
1.2.jQuery的优势
可以简化JavaScript代码
可以像css那样获取元素
可以修改css来控制页面效果
可以兼容常用的浏览器
1.3.jQuery版本支持
jQuery分为很多版本, 还分为未压缩版和压缩版, 根据需要选择对应的版本进行下载!
1.x 支持常用的浏览器和IE6+
2.x 支持常用的浏览器和IE9+
3.x 支持常用的浏览器和IE9+
注意: jQuery不兼容老版本. 因为jQuery升级除了会做一些内部优化之外, 还会删除以前的一些代码, 比如删除一些方法. 或者是添加一些新的方法。所以在升级之后， 以前的代码可能会无法执行。
1.4.jQuery引入
jQueyr类库其实就是一个普通的js文件, 和之前在html中引入js文件方式是一样的！！！
2.jQuery语法
2.1.$介绍
$符号等价于jQuery, 是jQuery单词的简写
例如：$()相当于调用jQuery()，该函数会返回一个jQuery对象, 这个jQuery对象中包含零个或多个html元素, 比如: $("div")，可以通过jQuery中提供的方法来操作这些匹配的元素，比如$("div").remove()；
2.2.文档就绪事件所谓的文档就绪事件, 就是在整个html文档加载完之后立即触发, 执行一些操作，格式如下：
$(document).ready(function(){
//xxxx
});
该函数会在整个html文档加载完之后立即执行! 其作用相当于:
window.onload = function(){ //xxx }
其简写形式为:
$(function(){
//xxxx
});
2.3.DOM对象和jQuery对象互相转化
JS对象只能调用JS上提供的属性和方法, 不能调用jQuery提供的属性和方法, 如果非要使用, 必须将JS对象转化成jQuery对象！反之亦然。
2.3.1.dom对象转jQuery对象
var dom = document.getElementById("username");
var $jQuery= $(dom ); // js对象转成jQuery对象
2.3.2.jQuery对象转dom对象:var $jQuery = $("#username");
//方式一:
var dom1 = $jQuery[0]; // jQuery对象转成js对象
//方式二:
var dom2 = $jQuery.get(0); // jQuery对象转成js对象
3.jQuery选择器
3.1.基本选择器
3.1.1.元素名选择器
$("div") – 匹配所有的div元素
3.1.2.class选择器
$(".c1") – 匹配所有class值为c1的元素
$("div.c1") – 匹配所有class值为c1的div元素
3.1.3.id选择器
$("#d1") – 匹配所有id值为d1的元素
$("div#d1") – 匹配所有id值为d1的div元素
3.1.4.*号匹配符
("*") – 匹配所有的元素
3.1.5.多元素选择器
$("div,span,#d1,.c1") – 匹配所有的div/span元素以及id值为d1的元素和class值为c1的元素。。。
3.2.层级选择器
如果想通过DOM元素之间的层次关系来获取特定元素。例如子元素、兄弟元素等。则需要通过层次选择器。
$("div span") – 匹配div下所有的span元素
$("div>span") – 匹配div下所有的span子元素
$("div+span") – 匹配div后面紧邻的span兄弟元素
$("div~span") – 匹配div后面所有的span兄弟元素
3.3.基本过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 ":" 开头
$("div:first") – 匹配所有div中的第一个div元素
$("div:last") – 匹配所有div中的最后一个div元素
$("div:even") – 匹配所有div中索引值为偶数的div元素，0开始
$("div:odd") – 匹配所有div中索引值为奇数的div元素，0开始
$("div:eq(n)") – 匹配所有div中索引值为n的div元素，0开始
$("div:lt(n)") – 匹配所有div中索引值小于n的div元素，0开始
$("div:gt(n)") – 匹配所有div中索引值大于n的div元素，0开始
$("div:not(.one)") – 匹配所有class值不为one的div元素
3.4.内容选择器（
$("div:contians('abc')") – 匹配所有div中包含abc内容的div元素
如: <div>xxxabcxx</div>
$("div:has(p)") – 匹配所有包含p元素的div元素
如: <div><p></p></div>
$("div:empty") – 匹配所有内容为空的div元素
如: <div></div>
$("div:parent") – 匹配所有内容不为空的div元素
如: <div>xxxxx</div>
3.5.可见选择器
$("div:hidden") – 匹配所有隐藏的div元素
$("div:visible") – 匹配所有可见的div元素
3.6.属性选择
$("div[id]") – 匹配所有具有id属性的div元素
$("div[id='d1']") – 匹配所有具有id属性并且值为d1的div元素
$("div[id!='d1']") – 匹配所有id属性值不为d1的div元素
$("div[id^='d1']") – 匹配所有id属性值以d1开头的div元素
$("div[id$='d1']") – 匹配所有id属性值以d1结尾的div元素
3.7.子元素选择器
$("div:nth-child(n)") – n从1开始, 匹配div中第n个子元素。
$("div:first-child") –匹配div中第1个子元素。
$("div:last-child") –匹配div中最后一个子元素。。。
3.8.表单选择器
$(":input") – 匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button。
$(":password") – 匹配所有的密码框
$(":radio") – 匹配所有的单选框
$(":checkbox") – 匹配所有的复选框
$(":checked") – 匹配所有的被选中的单选框/复选框/option
$("input:checked") – 匹配所有的被选中的单选框/复选框
$(":selected") – 匹配所有被选中的option选项
4.文档操作
parent() $("#d1").parent() – 获取id为d1元素的父元素
parents()$("#d1").parents() – 获取id为d1元素的祖先元素
$("#d1").parents("tr") – 获取id为d1元素的tr祖先元素
next()$("div").next() – 获取所匹配元素后面紧邻的兄弟元素
$("div").next("span") – 获取所匹配元素后面紧邻的span兄弟元素
nextAll()$("div").nextAll() – 获取所匹配元素后面所有的兄弟元素
$("div").nextAll("span") – 获取所匹配元素后面所有的span兄弟元素
prev()$("div").prev() – 获取所匹配元素前面紧邻的兄弟元素
$("div").prev("span") – 获取所匹配元素前面紧邻的span兄弟元素
prevAll()$("div").prevAll() – 获取所匹配元素前面所有的兄弟元素
$("div").prevAll("span") – 获取所匹配元素前面所有的span兄弟元素
siblings()$("div").siblings() – 获取所匹配元素前后所有的兄弟元素
$("div").siblings("span") – 获取所匹配元素前后所有的span兄弟元素
append()$("div").append("<span></span>") –为所匹配元素追加一个span子元素
remove()$("div").remove() – 删除所匹配元素
html()$("div").html() – 获取所匹配元素的html内容
$("div").html("xxx") – 为所匹配元素设置html内容
text()$("div").text() – 获取所匹配元素的文本内容
$("div").text("xxx") – 为所匹配元素设置文本内容
attr()$("div").attr("id") – 获取所匹配元素的id属性值
$("div").attr("id", "xx") – 为所匹配元素设置id属性
css$("div").css("width") – 获取所匹配元素的width样式属性值
$("div").css("width", "200px") – 为所匹配元素设置width样式属性
$("div").css({"width":"200px", "color":"red","font-size":"24px" }) ; – 为所匹配元素设置width样式属性
5.事件 click()
$("div").click(function(){}) – 为所匹配元素绑定点击事件
blur()$("input").blur(function(){}) – 为所匹配元素绑定失去输入焦点事件
focus()$("input").focus(function(){}) – 为所匹配元素绑定获得输入焦点事件
change()$("select").change(function(){}) – 为所匹配元素绑定选项切换事件
ready()$(document).ready(function(){}) – 文档就绪事件
其作用相当于: window.onload = function(){}
简写形式为:
$(function(){}) – 在整个文档加载完成后立即执行
6.效果 show()
$("div").show() – 将隐藏元素设置为显示(底层操作的是display);
hide()$("div").show() – 将显示元素设置为隐藏(底层操作的是display);
toggle()$("div").toggle() – 切换元素的可见状态, 如果元素显示则设置为隐藏, 如果元素隐藏则设置为可见.
下一篇：[【基础系列十九】--Oracle](https://mp.csdn.net/mdeditor/103171447)
1299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
