【石家庄校区】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>
            
            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>