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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 李迪13524 初级黑马   /  2018-1-17 15:47  /  908 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 小石姐姐 于 2018-1-18 14:54 编辑

html总结


1、HTML的概述
HTML:Hyper Text Markup Language  --- 超文本标记语言.
* 标记语言:指的是通过一组标签的形式描述事物的一门语言.
* 超文本:比普通的文本更强大.
2、HTML的作用
HTML是用来制作页面(静态页面).
3、HTML在那些地方使用
在设计网站的页面的时候都要使用到HTML.
4、HTML的使用、HTML的文件的创建
一个HTML文件,扩展名是.html或者.htm结尾
1.5、HTML的标签结构
根标签<html></html>
<head></head>  html的头标签
<body></body>
1.6、HTML的字体标签
<font>标签:html的字体标签
<font>标签的属性
<font 属性名=“属性值” 属性名=“属性值”></font>
Color属性:字体的颜色
英文单词设置:black,red,green,blue
使用16进制数设置:#FFFFFF,
Size 属性: 字体的大小
Face属性:是什么字体
1.7、HTML的排版标签
标题标签:h标签<h1>到<h6>
<h1>一级标题</h1>
<h2>二级标题</h2>
段落标签:<p></p>
字体加粗标签<b></b>
字体斜体标签<i></i>
字体下化线<u></u>
居中<center></center>
从别的地方复制过来的文字,不被转义就用:<pre></pre>(原生标签)
<hr/>横线
第2 章、网站图片页面显示
2.1、图片标签<img>
属性:    src:图片来源
       Width:图片的宽度
      Height:图片的高度
     Alt:图片找不到显示的内容
第3章 、列表页面的显示
3.1、列表标签(有序列表,无序列表)
有序列表<ol>
<li></li>
</ol>
属性:type:1: 数字字符    a: 英文字符    i:  罗马字符  
Start的属性只对数字有效果(从几开始)
无序列表<ul>
<li></li>
</ul>
属性:type     disc:实心点   circle:空心圆   square:方块


.3.2、HTML的超链接标签<a>
属性:  href :链接的路径
                        Target:打开的方式
Target=”_self”:在自身页面打开
Target=“-blank”:在新打开一个窗口
Target=”_parent”
第4 章:网站首页的显示
4.1、表格标签
<table>
<tr>
    <td></td>
    <td></td>
</tr>
</table>


属性:
    width        :表格宽度
    height        :表格高度
    border        :边框
    align        :表格水平位置:
        * left
        * center
        * right


<td>的属性:
    * colspan=”列数”
    * rowspan=”行数”
4.2、HTML的表单标签(<form>)
HTML的表单标签:<form>
     * 常用属性:
          * action属性:提交的路径.默认提交到当前页面
          * method属性:请求的方式.GET和POST.默认是GET.
              ***** GET方式和POST方式的区别?
                   * GET        :数据会显示到地址栏中.GET方式提交是有大小的限制.
                   * POST        :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
Get和post的区别:
1、数据都展示到地址栏
2、有大小限制
3、get方式数据是在请求行中
Post
1、        数据不会展示在地址栏
2、        数据没有大小限制
3、        Post的数据是在请求体中


HTML中表单元素:
* <input type=”text”>                :文本框.
    * 常用属性:
        * name        :表单元素的名称.必须有name属性,然后后台才可以接收数据.
        * value        :文本框的默认值.
        * size        :文本框的长度.
        * maxlength:文本框输入的最大长度.
        * readonly:只读文本框.
* <input type=”password”>        :密码框.
    * 常用属性:
        * name        :表单元素的名称.必须有name属性,然后后台才可以接收数据.
        * value        :密码框的默认值.
        * size        :密码框的长度.
        * maxlength:密码框输入的最大长度.
        


* <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=”hidden”>                :隐藏字段.
* <input type=”image”>                :图片按钮


* <select>                                        :下拉列表.
* <textarea>                                :文本域.


第5章HTML5的扩展的表单标签
<input type=”email”>     邮箱格式
<input type=”date”>      日期格式
<input type=”number”>   数字格式
<input type=”color”>   颜色格
Day02(div+css)(2018-1-13)
第1 章HTML的框架标签
1.1、        框架结构标签<frameset>
标签与body标签是冲突,有frameset就可以没有body
属性:   rows 横切
                        Cols 竖切
使用<frame>标签  frame代表切分的每个部分
1.2、特殊字符标签
;空格
>   <
<    >
第2章  div+css
2.1Div块标签
<div></div>默认一个div独占一行
<span></span>  默认在同一行
2.2、css:层叠样式表
Css的基本语法
通常包含2个部分:一个选择器,一个声明
* 选择器{属性:属性值;属性:属性值...}
2.3、css的引入样式
        行内样式:直接在HTML的元素上使用style属性设置CSS.
<h1 style="color:red;font-size:200px ;">标题</h1>


        页面内样式:在HTML的<head>标签中使用<style>标签设置CSS.
                <style>
                        h1{
                                color:blue;
                                font-size: 40px;
border:1px soild green;   soild实线,线的颜色是绿色
                        }
                </style>


        外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.  rel="stylesheet"指定是样式表
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
2.4、Css选择器(元素选择器,ID选择器, 类选择器)
        元素选择器:
div{
        border:1px solid blue;
        width:40px;
        height:45px;
}
        ID选择器:
#d1{
        border:2px solid red;
}
        类选择器:
.divClass{
        border:2px solid yellow;
}
2.5、其他选择器(属性选择器、后代选择器、并例选择器、子元素选择器)
属性选择器
<style>
                        input[type="text"]{
                                background-color: red;
                        }
                </style>


后代选择器
div span   查找的是所有div中的所有的span元素.
h1 strong{
   color:red;
}
                <h1>
                        This is <strong>very</strong> <strong>very</strong> important.
                </h1>
               
                <h1>This is
                        <strong>very</strong>
                        <em>really
                                <strong>very</strong>
                        </em>
                                important.
                </h1>


并例选择器
input【type=“text”】,input【type=“password”】{
border:1px
}
子元素选择器
div > span找这个div中的第一层级的span元素.
h1 > strong{
   color:red;
}
                <h1>
                        This is <strong>very</strong> <strong>very</strong> important.
                </h1>
               
                <h1>This is
                        <strong>very</strong>
                        <em>really
                                <strong>very</strong>
                        </em>
                                important.
                </h1>
2.6、display:none和 visibility:hidden的区别
Display消失了但是位置也消失
VISibility 消失了但是位置还占有
2.7、/*这个可以让div自己去根据屏幕的大小去居中显示*/
                                margin: 0 auto;
2.8、placeholder属性提供一种提示(hint),描述输入域所期待的值
<td>用户名:</td>
<td><input type="text" name="username" placeholder="请输入用户名" /></td>
2.9、去除<a>标签的下化线(Text-decoration)
规定添加到文本的修饰     Text-decoration:none 无下化线
3.0超链接的伪类(设置鼠标悬停的炫酷)

/*鼠标移动到连接上*/
                        a:hover {
                                background: red;
                        }
3.1、css样式(字体背景、文本、列表):css的声明
背景:

文本:

字体

列表

Day03javascript(2018-1-15)
第一章、js的概述
1.1、什么是js:
   运行在浏览器的脚本语言

1.2、javascript的组成(ECMAScript、DOM、BOM)

ECMAScript:JavaScript的基本的语法:核心
BOM:Browser Object Model        :浏览器对象模型
DOM:Document Object Model        :文档对象模型
        其他的脚本语言:
JavaScript,ActionScript,Flex
        JS的用途:
使页面更加丰富,使页面动起来!!!


1.3、js基本语法
①        区分大小写

②        弱变量类型语言:(与Java不同)
* Java
   * int i = 3;
   * String s = “abc”;
* JavaScript:
   * var i = 3;
   * var s = “abc”;
③        分号可有可无:

④        变量命名:

1.4、js的数据类型
JS将数据类型分成两类:
* 原始类型:
    * undefined:未定义类型
    * boolean:布尔类型
    * number:数字类型
    * string:字符或字符串.
    * null:空


* 引用类型:
    * 对象类型.对象类型默认值是null.
1.5、js的运算符
        JS中的运算符与Java中基本一致!
JS中有一个 === 全等于.全等于是类型和值都一致的情况下才为true.
1.6、js的语句
        JS中的语句与Java的语句一致!
1.7、js的通常开发的步骤
JS通常都由一个事件触发.
触发一个函数,定义一个函数.
获得操作对象的控制权.
修改要操作的对象的属性或值.


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


* window.onload = function(){


}
常用事件:onclick,ondblclick,onmouseover,onmouseout,onload...
1.8、js的引入方式(2种)
通常两种方式:
一种:页面内直接编写JS代码,JS代码需要使用<script></script>.
二种:将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.
将js的代码定义成一个文件引入:
<script src="../js/check.js"></script>


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


正则的匹配:
JS中有两种匹配正则的方式:
* 使用String对象中的match方法.
* 使用正则对象中的test方法.
1.9、用户名、密码、邮箱的校验
<script type="text/javascript">
                /*通过function关键字来定义函数*/
                function checkForm(){
                        //找到我们想要操作的元素,找元素的动作需要交给DOM对象中docment来去获取
                        var username = document.getElementById("username").value;
                        if(username == ""){
                                alert("对不起,用户名不能为null");
                                /*这个返回值一定要加,因为我们onsubmit的事件就是看这个返回值,默认返回的是true*/
                                return false;
                        }
                        var email = document.getElementById("email").value;
                        /*判断email是否符合正则*/
                        if(!email.match('[0-9]{6,10}')){
                                alert("对不起不符合规则");
                                return false;
                        }
                }
        </script>
        <body>
                <form method="get">
                        <table style="border: 1px solid blue;" align="center" cellspacing="10px">
                                <tr>
                                        <td>用户名:</td>
                                        <td><input type="text" name="username" id="username"></td>
                                </tr>
                                <tr>
                                        <td>密码:</td>
                                        <td><input type="password" name="password" id="password"></td>
                                </tr>
                                <tr>
                                        <td>邮箱:</td>
                                        <td><input type="text" name="email" id="email"></td>
                                </tr>
                                <tr>
                                        <td colspan="2"><input type="submit" value="提交"></td>
                                </tr>
                        </table></form>
2.0、使用js完成图片滚动的效果(使用setinterval和settimeout)
<script type="text/javascript">
                window.onload = function(){
                        var i = 1;
                        /*设置定时*/
                        setInterval(function(){
                                i++;
                                /*需要不断的改变img的src*/
                                /*获取到img*/
                                if(i==3){
                                        i=1;
                                }
                                var img1 = document.getElementById("img1");
                                img1.src = "../img/"+i+".png";
                        },3000);
                }
        </script>
        <body>
                <img id="img1" src="../img/1.png" width="100%" />
        </body>
2.1、HTML的window对象
* setInterval();        :每隔多少毫秒执行某个表达式.
    * setInterval(“change()”,5000);


* setTimeout();                :隔多少毫秒执行一个该表达式.
    * setTimeout(“change()”,5000);
清除定时的方法

2.2、定时弹广告
<script>
        //setTimeout 执行一次之后就不会再出现了,不用清除
                var time;
                window.onload = function() {
                        //先显示图片的方法
                        //页面加载的时候需要设置定时
                        time = window.setInterval("show();", 3000);
                }
                function show() {
                        var im = document.getElementById("imggg");
                        im.style.display = "block";
                        window.clearInterval(time);
                        window.setInterval("hide();", 3000);
                }
                //隐藏广告的方法
                function hide() {
                        var im = document.getElementById("imggg");
                        im.style.display = "none";
                        window.clearInterval(time);
                }
        </script>
        <body>
                <!--图片是隐藏的-->
                <img style="display: none;" id="imggg" src="gg.jpg" width="100%" />
        </body>
2.3、还剩下几秒,跳转到哪个页


<script>
                /*window.onload是页面加载完成后,才会触发,这个时候我们找标签,肯定能够找到
                                 script哪里都可以放,但是我们要知道放在上面和下面的区别
                                */
                var id;
                var i = 4;
                window.onload = function() {
                        //设置一个定时,我们知道每次设置完定时,我们系统会给这个一个唯一的id,这个id用来结束定时用的
                        id = setInterval(function() {
                                //document.getElementById("demo").innerHTML
                                document.getElementById("f").innerHTML = i;
                                if(i == 1) {
                                        //清除定时
                                        clearInterval(id);
                                        //需要跳转到主页
                                        /*跳转的动态方式使用location的href可以完成*/
                                        location.href = "../伪类效果/伪类效果.html";
                                }
                                i--;


                        }, 1000);
                }
                function change() {
                        //document.getElementById("demo").innerHTML
                        document.getElementById("f").innerHTML = i;
                        if(i == 1) {
                                //清除定时
                                clearInterval(id);
                        }
                        i--;
                }
        </script>
        <body>
                还剩下
                <font id="f">5</font>秒,回到主页面;
        </body>


2.4、54321间隔3秒出现
//定时出现54321
                        /*var id = setInterval("change();", 1000);
                        var i = 5;
                        function change() {
                                alert(i);
                                if(i == 0) {
                                        window.clearInterval(id);
                                }
                                i--;
                        }*/


2.5、innerHTML和innerText的区别
innerHTML:获取元素最简单方法
innerText:会将网页标签一起取出
2.6、伪类的效果(onmouseover  onmouseout)
<style type="text/css">
                        div{
                                text-align: center;对齐元素中的文本
                                line-height: 100px;  设置行高
                                margin:10px;外边框
                                width: 100px;
                                height: 100px;
                                background: red;
                                color: white;
                                border-radius: 50px;使用图片来创建边框
                                float: left;浮动
                        }
                </style>
        </head>
        <script type="text/javascript">
                function change1(div1){
                        //document.getElementById("div1").style.background = "green";
                        div1.style.background="green";
                }
                function change2(){
                        //document.getElementById("div1").style.background = "red";
                        div1.style.background="red";
                }
        </script>
        <body>
                <!--需要给每个div设置鼠标悬停和鼠标离开的事件-->
                Onmouseover鼠标指针移动到指定对象上发生
Onmouseout鼠标离开
                <div  id="div1">百度</div>
<div>新浪</div>
                <div>搜狐</div>
                <div>腾讯</div>
        </body>
2.7、点击事件(onclick事件)
<script>
                function chen() {
                        //获取ID为div的控制权
                        var v1 = document.getElementById("div1");
                        v1.innerHTML = document.getElementById("but");
                        //                                v1.innerHTML="我爱小可爱";
                        //                                v1.innerText="点我,出现奇迹";
//                        var but = document.getElementById("but");
//                        var a = but.innerHTML;
//                        v1.innerHTML = a;
                        v1.style.background = "blueviolet";


                }
        </script>


        <body>
                <button id="but">点我,出现奇迹</button>
                <div id="div1"></div>
        </body>
2.8、js中的BOM对象


* alert();                --弹出对话框
* setInterval();
* setTimeout();
* clearInterval();
* clearTimeout();
* confirm();        --弹出一个确认窗口
* prompt();                --弹出一个可输入的对话框
* open();                --打开一个新窗口
        Navigator :包含的是浏览器的信息.

        Screen:用来获得屏幕信息:

        History:浏览器的历史对象:

        Location:包含URL信息的对象

2.9、js事件的总结
* onload        :
* onclick        :
* onsubmit        :
* onfocus        :
* onblur        :
* onchange        :下拉列表改变事件.
* ondblclick:双击某个元素的事件.


键盘操作事件:
* onkeydown        :
* onkeyup        :
* onkeypress:


鼠标操作事件:
* onmousemove:
* onmouseout:
* onmouseover:
* onmousedown
* onmouseup
Day04(2018-1-16)js的高级
第一章js完成注册页面表单提示及校验(js的输出、js的事件)
1.1、js的输出
* document.getElementById(“”).innerHTML=”HTML的代码”;
* document.write(“”);
1.2、js的事件总结
* onfocus        :获得焦点.
* onblur        :失去焦点.
* onsubmit        :提交的时候.
Onload  :页面加载事件
Onclick :点击事件
Onchange:下拉列表改变事件
Ondblclick:双击摸个元素的事件
键盘操作事件:
  Onkeydown:
Onlkeyup:
Onkeypress:
        鼠标操作事件:
         Onmousemove:
         Onmouseout:
         OnMOusedown:
         Onmouseup:
1.3、js完成注册页面表单提示及校验2
<script>
                //有参数的 按钮方法里面需要传参数
                function tip(id, content) {
                        document.getElementById(id).innerHTML = "<font color='red'>"+content+"</font>";
                }
               
                /*无参的方法里面要注意方法名必须不一样,按钮事件触发的事件不需要传参数
                 *
                 * function tip(){
                        document.getElementById("usenamespan").innerHTML= "<font color='red'>用户名必须由数字和字母组成</font>";


                }
                function tipa(){
                        document.getElementById("passwordspan").innerHTML="<font color='red'>密码必须是6 位</font>";
                }*/
                //失去焦点的时候
                function shi(id, Counter) {
                        if(document.getElementById("username").value==""){
                                document.getElementById("usenamespan").innerHTML="<font color='red'>用户名不能为null</font>";
                        }
                }
        </script>
1.4、js获得表格的行数
* 获得到控制的表格元素:
    * var tab1 = document.getElementById(“tab1”);
    * var len = tab1.rows.length;
1.5、js完成后台数据展示隔行换色(js获得表格的行数)
<script>
                window.onload = function() {
                        //获得要操作的对象的控制权
                        var tb1 = document.getElementById("tb1");
                        //遍历每一行
                        for(var i = 1; i < tb1.rows.length; i++) {
                                //判断=1的时候第一行的表头颜色为红色
                                if(i==1){
                                        tb1.rows.style.background ="red";
                                }else{
                                if(i % 2 == 0) {
                                        //偶数行
                                        tb1.rows.style.background = "palevioletred";
                                }else{
                                        //奇数行
                                        tb1.rows.style.background ="darkcyan";
                                }
                        }}
                }
        </script>
1.6、表格中的tbody和 thead标签
function changeColor(){
获取thead中的那一行然后进行改变颜色
var th1 = document.getElementById("th1");
                        th1.style.background = "blue";
                                // 获得操作的表格的控制权:
                                var tab1 = document.getElementById("tab1");
                                // 获得tbody中的所有的行.
                                var len = tab1.tBodies[0].rows.length;
                                for(var i = 0;i< len ;i++){
                                        if(i % 2 == 0){
                                                tab1.tBodies[0].rows.style.backgroundColor = "green";
                                        }else{
                                                tab1.tBodies[0].rows.style.backgroundColor = "gold";
                                        }
                                }
                        }
1.7、js完成复选框的全选的效果
2种方式:
⑴、function getall(){
找到所有的c1
                        var c1=document.getElementsByName("c1");
//遍历所有的c1的checkBox,让其状态和ch的状态一样
                        for (var i=0; i<c1.length;i++) {
                                c1.checked=document.getElementById("ch").checked;
                        }
                }

⑵、function checkAll(){
                                // 获得上面的复选框
                                var selectAll = document.getElementById("selectAll");
                                // 判断这个复选框是否被选中.
                                var ids = document.getElementsByName("ids");
                                if(selectAll.checked == true){
                                        // 上面复选框被选中:获得下面所有的复选框,修改checked属性
                                        for(var i = 0 ;i<ids.length;i++){
                                                ids.checked = true;
                                        }
                                }else{
                                        // 上面复选框没有被选中:获得下面所有的复选框,修改checked属性
                                        for(var i = 0 ;i<ids.length;i++){
                                                ids.checked = false;
                                        }
                                }
                                
                        }
第二章、        js中的DOM
2.1、Dom概述、
DOM:Document Object Model:文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
        DOM的使用:
知道document,element,attribute中的属性和方法
2.2、Document的常用的操作(获得元素)
⑴、获得元素:
* document.getElementById();                -- 通过ID获得元素.
* document.getElementsByName();                -- 通过name属性获得元素.
* document.getElementsByTagName();        -- 通过标签名获得元素.
⑵、创建元素:
* document.createElement();                        -- 创建元素
* document.createTextNode();                -- 创建文本
⑶、添加节点:
* element.appendChild();                        -- 在最后添加一个节点.
* element.insertBefore();                        -- 在某个元素之前插入.
⑷、删除节点
* element.removeChild();                        -- 删除元素
2.3、【使用DOM完成对ul中添加一个li元素】
*我们要找控件可以,但是必须保证页面加载完*/
                window.onload = function(){
                        var u1 = document.getElementById("u1");
                        var lie = document.createElement("li");
                        var txt = document.createTextNode("三亚");
                        lie.appendChild(txt);
                        u1.appendChild(lie);
                }
2.4、二级联动
// 定义数组:二维数组:
                        var arrs = new Array(5);
                        arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");
                        arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");
                        arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施");
                        arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");
                        arrs[4] = new Array("长春市","吉林市","四平市","延边市");
                        
                        function changeCity(value){
                                // 获得到选中的省份的信息.
                                var city = document.getElementById("city");
                                
                                // 清除第二个列表中的内容:
                                for(var i=city.options.length;i>0;i--){
                                        city.options = null;
                                }
                                // city.options.length = 0;
                                
                                // alert(value);
                                for(var i= 0 ;i< arrs.length;i++){
                                        if(value == i){
                                                // 获得所有的市的信息.
                                                for(var j=0;j<arrs.length;j++){
                                                        // alert(arrs[j]);
                                                        // 创建元素:
                                                        var opEl = document.createElement("option");// <option></option>
                                                        // 创建文本节点:
                                                        var textNode = document.createTextNode(arrs[j]);
                                                        // 将文本的内容添加到option元素中.
                                                        opEl.appendChild(textNode);
                                                        // 将option的元素添加到第二个列表中.
                                                        city.appendChild(opEl);
                                                }
                                        }
                                }
                        }
2.5、js的内置对象( Array、boolean、Date、Math、String、)

        ⑴Array:

⑵、Boolean:

⑶、Date:

* http://www.baidu.com?time=new Date().getTime();
⑷、Math对象:

⑸、String对象:
* charAt();
* indexOf();
* lastIndexOf();
* split();
* replace();
* substring();
* substr();
2.6、js的全局函数:

* parseInt();
    * parseInt(“11”);
* parseFloat();
    * parseFloat(“32.09”);


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


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


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


2.6、全局函数设置点击图片的宽度变大
function getman() {
                        var img1 = document.getElementById("im1");
                        var imgw = img1.style.width;
                        console.log(imgw);
                        imgw=parseInt(imgw);
                        
                        img1.style.width = imgw + 10 + "px";
                }
2.7、随机数
<script>
                /*[0,1)*/ //  0-2;  只要整数
                var num = Math.random()*2;
               
                num = Math.round(num);//四舍五入后的值


                alert(num);
        </script>

0 个回复

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