javaweb基础_html

web基础部分

1.html超文本标记语言

1.1注意：

不是编程语言，是标记语言

语法：  HTML文件的扩展名是.html或者是.htm
HTML文件是由头和体组成
HTML标签是不区分大小写
html标签是可以嵌套的（重要的）

1.2基本标签:

段落标签（自动换行）

<font>字体标签，size属性（1~7,数字越大字越大）
<hr>下划线
<br/>换行
<b>粗体
<i>斜体
<img/>图片标签（可以是动态图片，必须有alt值）
<a>链接

html是弱标记语言,  标签随便怎么写,都没有问题, 只是无法达到预期的效果

1.3

表格标签

<tr>和<td>标签:定义行和列
colspan:合并列合并
rowspan:行合并
！合并行或者列后，记得删除多余的。colspan='2',合并两列。          
<thead>和<th>标签一起使用做表头效果（th元素内部的文本通常会呈现为居中的粗体文本）

示例：  <table border="1px">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
</table>

1.4 表单标签

a.属性：

    1.action="url",设置表单数据提交到url，或发送到url

    2.method属性有两个值“get”和“post”,
    get方式会把input中的数据键值对的方式附加到URL上
    post方式会将数据打包，安全性好！

b.<input>输入域

    属性：
    type类型
    button：空白按钮
    text:文本框
    submit：提交按钮（系统设置了提交事件）
    password:密码域
    checkbox：复选框
    radio:单选
    hidden：隐藏字段
    file：文件
    image:图片按钮
    email：h5中的


c.<textarea>
    定义文本域 (一个多行的输入控件)

d.<select>
    定义一个选择列表（下拉菜单）
    option：下拉菜单的条目

1.5<framset>框架标签
    frameset：框架集合
    frame:框架
    cols:列的比例（百分比）
    rows:行的比例

！注意：框架标签不能和body一起使用

2.css层叠样式表

2.1作用：
主要用来类似于刷墙,美化我们的页面.
将html页面内容和样式进行了分离,让文档看起来更清晰
提高了代码复用

2.2三种引入样式：
行内样式:
    <div style="color: red;">111111</div>

内部样式:

    <style>  #ID的名称{ 属性名称:属性的值; 属性名称2: 属性的值2; } </style>

外部引入样式:
    注意在新建的css文件中,不需要定义style标签
    <link href=  rel=  />
    ！注意；必须写rel，指定当前文档与被链接文档之间的关系。

2.3属性：
    显示属性：display：none block inline
    浮动属性：float:
    清除浮动：clear：left right both

2.4选择器：
    a.基本选择器：

    id选择器（#id）;类选择器（.class）;元素选择器（标签）

b.属性选择器：
    语法：基本选择器[属性=‘属性值’]{css}

c.层级选择器：
    语法：父级选择器 子级选择器 .....

d.伪元素选择器：
    a标签的伪元素选择器
    语法：
    静止状态a:link{css属性}
    悬浮状态a:hover{css属性}
    触发状态a:active{css属性}
    完成状态a:visited{css属性}

e.选择器分组：
    选择器1，选择器2...,被分组的选择器就可以分享相同的声明

f.选择器的优先级：
    行类样式 > ID选择器　＞　类选择器 > 元素选择器  （精确度越高,优先级越大）
    类选择器在class中声明的顺序根本不重要, 重要的是谁先被引入到html中; 就近原则



2.5盒子模型：
    border:边框
    margin：外边距
    padding：内边距
    可以有单边的：margin-top，border-bottom

整个盒子的宽度=element.width + 左右padding + 左右margin + 左右border

注意事项
link标签引入css 必须写rel，指定当前文档与被链接文档之间的关系。不然引入失败

3.JavaScript

3.1作用：
    检查,让我们的网页动起来,增加与用户的交互。

3.2引入：
    <script src="../js/index.js"></script>

3.3对象:
    number,boolean，array,math,regexp,string,date
    定义变量全用var

3.4函数：
    声明方式：
        普通方式：function name(参数){}
        匿名方式：function(参数){}
        变量方式：var name=new Function(参数){} ； ！注意：F大写
    函数的参数：
        (1)形参没有var去修饰
        (2)形参和实参个数不一定相等
        (3)arguments对象 是个数组 会将传递的实参进行封装
        function fn(a,b,c){
        //var sum = a+b+c;
        //alert(sum);
        //arguments是个数组 会将传递的实参进行封装
        for(var i=0;i<arguments.length;i++){
        alert(arguments[i]);
        }
        }
        fn(1,2,4,8);
    返回值
        (1)在定义函数的时候不必表明是否具有返回值
        (2)返回值仅仅通过return关键字就可以了 return后的代码不执行

3.5 全局函数：
    返回值
    (1)在定义函数的时候不必表明是否具有返回值
    (2)返回值仅仅通过return关键字就可以了 return后的代码不执行
function fn(a,b){
return a+b;
//alert("xxxx");
}
alert(fn(2,3));

3.6 js的全局函数：

    (2)强制转换
    Number()
    String()
    Boolean()
    (3)转成数字
    parseInt()
    parseFloat()
    (4)eval()方法
    将字符串当作脚本进行解析运行
    //var str = "var a=2;var b=3;alert(a+b)";
    //eval(str);
    function print(str){
    eval(str);
    }
    print("自定义逻辑");

3.7 事件：
    常用事件：onclick:点击事件
    onchange:域内容被改变的事件
    onfoucus:获得焦点的事件
    onblur:失去焦点的事件
    onmouseover:鼠标悬浮的事件
    onmouseout:鼠标离开的事件
    onload:加载完毕的事件

3.8this关键字
    this经过事件的函数进行传递的是html标签对象
    <input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
    <script type="text/javascript">
    function fn(obj){
    alert(obj.name);
    }
    </script>

3.9操作dom树

理解文档对象模型：
    html文件加载到内存之后会形成一颗dom树，根据这些节点对象，
    可以利用脚本代码动态修改（增删改查）

常用方法：
    getElementById() 返回对拥有指定 id 的第一个对象的引用。
    getElementsByName() 返回带有指定名称的对象集合。
    getElementsByTagName() 返回带有指定标签名的对象集合。
    element.innerHTML 设置或返回元素的内容。
    element.appendChild() 向元素添加新的子节点，作为最后一个子节点。
    element.removeChild() 从元素中移除子节点。

3.10操作bom

    open方法：
    window.open("url地址");
    open("../jsCore/demo10.html");

定时器：
    setTimeout(函数,毫秒值);
    clearTimeout(定时器的名称);
    setInterval(函数,毫秒值);
    clearInterval(定时器的名称)
    (2)location
    location.href="url地址";
    (3)history
    back();上一页
    forward();下一页

    go();

选择器：跟css选择器类似，记住常用的就行了

注意事项

4.jQuery

4.1作用：
它封装了很多效果，事件，能够大大的提高我们的开发效率

将我们的页面和Js分离出来

引入：和js的引入一样

4.2选择器：

基本选择器：$("基本选择器")，标签，类，id
层级选择器：
A  B ，获得A元素内部所有的B后代元素。（爷孙）
A > B ，获得A元素内部所有的B子元素。（父子）
A + B ，获得A元素后面的第一个兄弟B。（兄弟）
A ~ B ，获得A元素后面的所有的兄弟B。（兄弟）

4.3过滤：

 过滤选择器格式 “：关键字”

基本过滤器：
:first, 第一个
:last,最后一个
:eq(index) ，获得指定索引
:gt(index) 大于
:lt(index) 小于
:even 偶数，从 0 开始计数。例如：查找表格的1、3、5...行（即索引值0、2、4...）
:odd 奇数
:not(selector) 去除所有与给定选择器匹配的元素

可见性过滤[掌握]

:hidden隐藏。特指 <xxx style="display:none;"> 
获得 <input type="hidden">
:visible可见

属性选择器【掌握】

[属性名]   获得指定的属性名的元素
[属性名=值] 获得属性名 等于 指定值的 的元素【1】
[属性名!=值]获得属性名 不等于 指定值的 的元素
[as1][as2][as3].... 复合选择器，多个条件同时成立。
类似 where ...and...and【2】

[属性名^=值]获得以属性值 开头 的元素
[属性名$=值]获得以属性值 结尾 的元素
[属性名*=值]获得 含有属性值  的元素

4.4 js和jq对象的转换

1.将dom对象 转换 jQuery对象
// * 语法：$(dom对象)

2.将 jQuery对象 转换 dom对象

jQuery对象内部使用【数组】存放所有的数据，可以数组的下标获取（索引）
jQuery提供函数 get() 转换成dom对象

注意事项

4.5文档处理(增删改查)

a. 内部插入【掌握】
A.append(B)  将B插入到A的内部后面（之后的串联操作，操作A）
<A>
....
<B></B>
<A>
A.prepend(B) 将B插入到A的内部前面
<A>
<B></B>
....
<A>
--------------------------------------------
A.appendTo(B) 将A插入到B的内部后面 （之后的串联操作，操作A）
A.prependTo(B) 将A插入到B的内部前面

b. 外部插入【掌握】

A.after(B)  , 将B插入到A后面（同级）
<A></A>
<B></B>
A.before(B) ，将B插入到A前面
<B></B>
<A></A>
-----------------------------------
A.insertAfter(B) , 将A插入到B后面（同级）
<B></B>
<A></A>
A.insertBefore(B) 将A插入到B前面
<A></A>
<B></B>

c. 删除[掌握]

empty()  清空标签体
remove() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都会被移除
detach() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都保留

绑定数据
data(name) 获得
data(name,value) 设置


d. 复制
clone() 克隆
even ：指示事件处理函数是否会被复制。V1.5以上版本默认值是：false


e. 替换

A.replaceWith(B) ，使用A将B替换掉
A.replaceAll(B) ，使用B将A替换掉


f. 包裹
A.wrap(B) ，使用B将每一个A进行包裹（多个B）
<B><A></A></B>
<B><A></A></B>

A.wrapAll(B) ，使用B将所有A进行包裹（一个B）
<B>
<A></A>
<A></A>
</B>

A.wrapInner(B) ,使用B将每一个A的标签体包裹。
<A><B>。。。</B></A>
<A><B>。。。</B></A>

A.unwrap() ，将A的父元素删除，自己留着

5.bootstrap

作用：利用bootstrap中已经定义好的样式，提高效率。
目标：理解bootstrap中的栅格布局，学会使用
bootstrap官网：http://www.bootcss.com