A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小石姐姐 于 2018-5-4 10:14 编辑


*Html 和css


什么是HTML

HTML:Hyper Text Markup Language  --- 超文本标记语言.
* 标记语言:指的是通过一组标签的形式描述事物的一门语言.
* 超文本:比普通的文本更强大.
【HTML的字体标签】
<font>标签:HTML中的字体标签
font color="#FF0000" size="1">我是小红!</font><br/>
【HTML的排版标签】*
标题标签:h标签<h1>...<h6>
段落标签:p标签<p>....</p>
字体加粗标签:b标签
<b>黑马训练营</b>
字体斜体标签:i标签
<i>黑马训练营</i>
字体下划线:u标签
黑马训练营
居中标签:<center>标签
<center>内容</center>
<pre>标签:原生标签.
<hr/>标签:横线.
空格        


【HTML的图片标签】

图片标签:<img>
​    * 属性:
​         * src        :图片的来源.
​         * width        :图片的宽度.
​         * height:图片的高度.
​         * alt        :图片找不到显示的内容.
* 如果引入的图片在html文件的上一级路径。
​            *
​        * 如果引入的图片在html文件的下一级路径。
​            *
​        
【HTML的列表标签】
l 有序列表
<ol>
​    <li></li>
</ol>
l 无序列表
<ul>
​    <li></li>
</ul>


【HTML的超链接标签】
HTML的超链接标签:<a>
​    * 属性:
​        * href        :链接的路径
​        * target        :打开的方式
​            * _self        :在自身页面打开
​            * _blank        :新打开一个窗口
​        <ul>
​                        <li>传智播客</li>
​                        <li>百度</li>
​                        <li>网易</li>
​                        <li>百合</li>
​                </ul>
无序列表的属性:
​    * type属性
​        * disc        :实心点.
​        * circle        :空心圆
​        * square :方块.

有序列表的属性:
​    * type属性:
​        * 1        :数字类型
​        * a        :英文类型
​        * i        :罗马字符
​    * start属性:从哪开始

超链接的target属性:
​    * _self
​    * _blank
​    * _parent
【HTML的表格标签】
<table>
<tr>
​    <td></td>
​    <td></td>
</tr>
</table>

属性:
​    width        :表格宽度
​    height        :表格高度
​    border        :边框
​    align        :表格水平位置:
​        * left
​        * center
​        * right
Celling:调空间大小
<td>的属性:
​    * colspan=”列数”
​    * rowspan=”行数”
【HTML的表单标签(*)】
HTML的表单标签:<form>
​     * 常用属性:
​          * action属性:提交的路径.默认提交到当前页面
​          * method属性:请求的方式.GET和POST.默认是GET.              
HTML中表单元素:
:* <input type=”text”>
* 常用属性:
​        * name        :表单元素的名称.必须有name属性,然后后台才可以接收数据.
​        * value        :文本框的默认值.
​        * size        :文本框的长度.
​        * maxlength:文本框输入的最大长度.
​        * readonly:只读文本框.


* <input type=”password”>        :密码框.

​    * 常用属性:
​        * name        :表单元素的名称.必须有name属性,然后后台才可以接收数据.
​        * value        :密码框的默认值.
​        * size        :密码框的长度.
​        * maxlength:密码框输入的最大长度.
​<input type="password" name="password" >
​       * <input type=”radio”>:单选按钮.
​    * 常用的属性:
​        * name        :表单元素的名称.必须有name属性,然后后台才可以接收数据.
​        * value        :单选按钮的默认值.
​        * checked:单选按钮默认被选中
* <input type=”checkbox”>        :复选按钮.
  • 常用的属性:

    • name        :表单元素的名称.必须有name属性,然后后台才可以接收数据.

      • value        :单选按钮的默认值.



* checked:单选按钮默认被选中
* <input type=”button”>                :普通按钮.没有任何功能的按钮.
* <input type=”submit”>                :提交按钮.
* <input type=”reset”>                :重置按钮.
* <input type=”file”>                :文件上传的表单项.
input type="file" name="upond" />    头像
* <input type=”hidden”>:隐藏字段.
* <input type=”image”>               
* <select>        :下拉列表.
* <textarea>文本域.
【HTML的框架标签】
框架标签:<frameset >,标签与body标签是冲突,有frameset就可以没有body.
* 属性:
​    * rows 行
​    * cols 列
使用<frame>标签,frame代表切分的每个部分.
​        <frameset rows="15%,*">
​                <frame  src="top.html" name="top"/>
​                <frameset cols="15%,*">
​                        <frame  src="left.html" name="left"/>
​                        <frame  src="right.html" name="right"/>
​                </frameset>
​        </frameset>
​            
​                       Css
【HTML的块标签】
<div></div>                :默认一个div独占一行.
<span></span>        :默认在同一行.
【CSS的引入的方式】
Ø 行内样式:直接在HTML的元素上使用style属性设置CSS.
<h1 style="color:red;font-size:200px ;">标题</h1>

页面内样式:在HTML的<head>标签中使用<style>标签设置CSS.
​                <style>
​                        h1{
​                                color:blue;
​                                font-size: 40px;
​                        }
​                </style>

外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.  
[td]




css选择器  {
​        Id  .top
​       Class  #top
}
【CSS的浮动】
Float left:向左浮动
Float right 向右浮动
Float none: 默认值 ,元素不浮动
Inherit
Ø 清除浮动:清除浮动效果:使用clear属性进行清除:
   Right
  Left
  Both:在左右俩侧均不允许浮动元素
  None 默认值,允许浮动元素出现在俩侧
【CSS的样式】
background-color 设置背景颜色
background-image 把元素设置为背景
background-attachment:背景图像是否固定或者随着页面的其余部分滚动
background-position:设置背景图像的起始位置
background-repeat:设置背景图像重复
color 设置颜色
direction 设置方向

line-height:设置行高
text-align :对齐文本
text-shadow:设置阴影
font: 对字体进行设置
font-family:设置字体
font-size:设置大小
font-style:设置风格
font-weight:设置粗细
list-style-image:设置列表图像
list-style-type:设置类型
【CSS中的盒子模型】
Ø 内边距:padding.
  padding-top 上边距
padding-right 右边距
padding-bottom 下边距
padding -left 左边距

Ø 边框:border

Ø 外边距:margin
  Margin-top
  Margin-right
  Margin-bottom
  Margin-left
【CSS中的定位】
position属性设置定位:
* relative:相对定位
* absolute:绝对定位
使用另外两个属性:left,top

file:///C:/Users/dell/AppData/Local/Temp/ksohtml/wpsEDE4.tmp.jpg?lastModify=1525333174
Javascript ,Actionscript fiex
Ecmascript:基本的语法
Bom:浏览器对象模型
Dom:文档对象模型

用途:使页面更加丰富,使页面动起来
查阅 w3school  菜鸟

Javascript
【JS的通常开发的步骤】
JS通常都由一个事件触发.
触发一个函数,定义一个函数.
获得操作对象的控制权.
修改要操作的对象的属性或值.

定义函数:
* function 函数名称(){
// 函数体
}

* window.onload = function(){

}
常用事件:onclick 单击事件,ondblclick双击事件,onmouseover, 鼠标放上面onmouseout  鼠标离开,onload 页面加载 ...
一种:页面内直接编写JS代码,JS代码需要使用<script></script>.

二种将JS的代码定义成一个文件引入:
<script src="../js/check.js"></script>

获得页面中的元素:
* document.getElementById(“”);

正则的匹配:
JS中有两种匹配正则的方式:
* 使用String对象中的match方法.
* 使用正则对象中的test方法.


设置定时的方法
file:///C:/Users/dell/AppData/Local/Temp/ksohtml/wps31C3.tmp.jpg?lastModify=1525334486
* 清除定时的方法

file:///C:/Users/dell/AppData/Local/Temp/ksohtml/wps31C4.tmp.jpg?lastModify=1525334486
* alert();                --弹出对话框
* setInterval();
* setTimeout();
* clearInterval();
* clearTimeout();
* confirm();        --弹出一个确认窗口
* prompt();                --弹出一个可输入的对话框
* open();                --打开一个新窗口

Navigator :包含的是浏览器的信息
Ø History:浏览器的历史对象:
History. go(-1)回退上一级浏览器
Location.href :用作页面跳转


【CSS的显示和隐藏的属性】
* display
​    * block:显示元素:
​    * none:隐藏元素:                        
【JS的输出】
* document.getElementById(“”).innerHTML=”HTML的代码”;
* document.write(“”);
* onfocus        :获得焦点.
* onblur        :失去焦点.
* onsubmit        :提交的时候.
onchange        :下拉列表改变事件.
* ondblclick:双击某个元素的事件.
鼠标操作事件:
* onmousemove:鼠标被移动
* onmouseout:鼠标从某元素移开
* onmouseover:鼠标移到某元素上
Onkeyup:某个 键盘按键被松开
【js 隔行换色】
【使用JS获得表格的行数】
* 获得到控制的表格元素:
​    * var tab1 = document.getElementById(“tab1”);
​    * var len = tab1.rows.length;
​                        function changeColor(){
​                                // 获得要操作的对象的控制权:
​                                var tab1 = document.getElementById("tab1");
​                                // 获得表格的所有的行数:
​                                var count = tab1.rows.length;
​                                // 遍历每行:
​                                for(var i = 0;i<count;i++){
​                                        if(i % 2 == 0){
​                                                // 偶数行
​                                                tab1.rows.style.backgroundColor = "#00FF00";
​                                        }else{
​                                                // 奇数行
​                                                tab1.rows.style.backgroundColor = "#00FFFF";
​                                        }
​                                }
​                        }
【DOM的概述】
Ø 什么是DOM
DOM:Document Object Model:文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
Ø DOM的使用:
知道document,element,attribute中的属性和方法
【DOM的常用的操作】
Ø 获得元素:
* document.getElementById();                -- 通过ID获得元素.
* document.getElementsByName();                -- 通过name属性获得元素.
* document.getElementsByTagName();        -- 通过标签名获得元素.
Ø 创建元素:
* document.createElement();                        -- 创建元素
* document.createTextNode();                -- 创建文本
Ø 添加节点:
* element.appendChild();                        -- 在最后添加一个节点.
* element.insertBefore();                        -- 在某个元素之前插入.
Ø 删除节点:
* element.removeChild();                        -- 删除元素
Ø String对象:
* charAt();
* indexOf();
* lastIndexOf();
* split();
* replace();
* substring();
* substr();
parseInt();parseInt(“11”);
parseFloat();* parseFloat(“32.09”);


* 编码和解码的方法:
// 解码
* decodeURI();
* decodeURIComponent();

// 编码
* encodeURI();
* encodeURIComponent();

eval函数:
* 将一段内容当成是JS的代码执行.
//var sss = “alert(‘aaaa’)”;
//eval(sss);

​                        




JQuery
概述:JS的框架(js类库),对原生JS常见的方法和对象进行封装,方便使用
js对象和jquery对象的区别:        jquery就是js中的new Object生成的普通对象        js对象和jquery对象的方法不能共用
js对象和jquery对象的转换        dom -> jquery:$(dom对象)        jquery -> dom
                1. jquery对象[index]
【JQ显示和隐藏】
? JQ的效果操作:
* show();
?        $(#adDiv).show();
?    * 使用一:Jq对象.show();
?    * 使用二:Jq对象.show(“slow”); // slow,normal,fast
?    * 使用三:Jq对象.show(毫秒值); // 1000
?    * 使用四:Jq对象.show(毫秒值,function(){});

* hide();
$(#adDiv).hade();
?    * 使用一:Jq对象.hide();
?    * 使用二:Jq对象.hide(“slow”); // slow,normal,fast
?    * 使用三:Jq对象.hide(毫秒值); // 1000
?    * 使用四:Jq对象.hide(毫秒值,function(){});

* slideDown();        --向下滑动
$("#adDiv").slideDown(2000);  
?    * 使用一:Jq对象.slideDown();
?    * 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
?    * 使用三:Jq对象.slideDown(毫秒值); // 1000
?    * 使用四:Jq对象.slideDown(毫秒值,function(){});

* slideUp();        --向上滑动
?    * 使用一:Jq对象.slideUp();
?    * 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
?    * 使用三:Jq对象.slideUp(毫秒值); // 1000
?    * 使用四:Jq对象.slideUp(毫秒值,function(){});

* fadeIn();                --淡入
$("#adDiv").fadeIn(3000);
?    * 使用一:Jq对象.fadeIn();
?    * 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
?    * 使用三:Jq对象.fadeIn(毫秒值); // 1000
?    * 使用四:Jq对象.fadeIn(毫秒值,function(){});

* fadeOut();        --淡出
?    * 使用一:Jq对象.fadeOut();
?    * 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
?    * 使用三:Jq对象.fadeOut(毫秒值); // 1000
?    * 使用四:Jq对象.fadeOut(毫秒值,function(){});

* animate();        --自定义动画
* toggle();        --单击切换函数
?    * Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...
基本
    #id    //id选择器
    .class   //类选择器
    元素       //元素选择器
    *      //通配符选择器。所有标签
    选择器1,选择器2... //组合(并列)选择器,逗号隔开
层级
    ancestor descendant //ancestor元素后代所有
    parent > child   //parent元素的子元素child
    prev + next   //prev后一个next
    prev ~ siblings  //prev后所有兄弟元素
后代选择器:$("form input") 使用空格
基本过滤
:first
:last
:even   偶数
:odd   奇数
:eq(index)  等于index
:gt(index)  大于index
:lt(index)  小于index
:not(选择器)
内容
:contains(text)  //包含内容的
:empty   //为空的
:has(选择器)   //包含指定的元素的
:parent   //是父亲角色的
可见性
:hidden
:visible
属性
[属性]        含有属性的
[属性="属性值"]
[attribute!=value]
[attribute^=value] 含有attribute属性值以value开头的
[attribute$=value] 含有attribute属性值以value结尾的
[attribute*=value] 含有attribute属性值包含value的
[attrSel1][attrSel2][attrSelN] 并且
子元素
:nth-child(index1开始) 每一个第index子元素的
:first-child    每一个第一个子元素的
:last-child    每一个最后一个子元素的
:only-child    只有一个子元素的
表单
:input  匹配所有表单元素包括select,textarea
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
表单对象属性
:checked  匹配所有选中的单选复选按钮
:selected  匹配所有的列表框下拉菜单选中的
:enabled  可用的
:disabled  不可用的

    BootStrap

bootstrap (web前端css框架) 提供了HTML和css规范
BootStrap可以在那些地方使用:
BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问
【BootStrap的全局CSS】
布局容器:
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid 类用于100%宽度占据全部视口(viewport)的容器
栅格系统:
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局
使用.row样式定义栅格的行.
定义列:.col-lg-n:大屏幕(>=1200px) .col-md-n:中等屏幕 (>=992px) .col-sm-n:平板 (>=768px)  .col-xs-n:手机(<768px)

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马