HTML 学习笔记

滚动字幕标签

            属性：bgcolor 背景色

                      width=“500”   //不需要添加px单位

                      direction=“left（默认向左滚动）/right/up/down”

                       scrollamount="2"  //每秒滚动多少像素，也不需要添加单位

                       scrolldelay = “1000”   //滚动延迟，单位是毫秒

                        behavior="alternate(往返滚动)/slide（滚动一次然后靠边停止）/scroll（默认值无限同方向循环滚动）"

                        vspace=“300” //垂直方向距离上边距为300像素

颜色： 十六进制表示最多   color=“#ffffff”     //两个一组，代表红绿蓝，每一组取值0-9,a,b,c,d,e,f

字符编码： ASCII->ANSI(GB2312,JIS)->Unicode->utf-8

                    BIG5  繁体中文

                解决乱码问题：1.编辑器设置 2.meta 字符设置 3.浏览器编码 4.PHP字符集设置 5.Mysql数据库字符集设置

meta 标签： 元信息

                     //  description中的内容通常会有一部分显示在搜索引擎的网页快照中。

Web标准： 结构html, 表现CSS， 行为ECMAscript

                 DTD 文档：strict 严格型， transitional 过渡型， frameset 框架集

img 标签： 属性： src,title, alt, width,height, vspace,hspace,align,border //边框使用： style=“border：5 solid red”

绝对路径： 1. C:\windows\wallpaper.jpg

                 2.file:///C:/User/Administrator/Desktop/i.jpg

                 3.https://www.baidu.com/img/logo.jpg

                 4.          //第一个 斜杠 代表网站根目录

相对路径：1. 目标文件与当前页面在同一目录：  src="1.jpg"

                 2.目标文件所在的文件夹与当前页面在同一目录: src="img/1.jpg"

                 3.目标文件在当前页面的上一级目录： src="../1.jpg"   ,  上两级： src="../../1.jpg"

                 4.目标文件所在的文件夹与当前页面的文件夹在同一目录：  src="../img/1.jpg"

超链接：anchor

            href   hypertext reference

            url  Uniform Resource Locator

            超链接类型： 1.外部链接 https：//

                                2.内部链接

                                3.图片链接（将img 标签嵌套在a标签的内容中）//处理IE中图片链接有边框的方法，在图片属性中添加border=“0”

                                 4.下载链接：将文件打包成 *.rar, *.mp4, *.wmv, *.flv, *.zip, *.iso ,  然后直接在href中添加即可， 当用户点击时，浏览器会自动关联下载工具或使用浏览器自带的下载工具

                                  5.空连接    //点击一次之后链接的颜色变为紫色，同时页面返回最顶部

                                                   //点击之后链接的颜色不会改变，页面不会返回最顶部

                                  6.邮件链接  联系我   //点击之后自动关联电子邮箱工具，默认会打开outlook

                                   7.锚链接    第一步：定义锚点  

                                                    第二步：调用锚点     //跳转到其他页面的锚点位置

            分割线hr标签： 属性： size（1-7，粗细），width（所占宽度），height（所占高度），vspace，hspace

             换行br 标签

            表格标签：  一个table就是一个表格

                              先有行，再有列，列在行中

                                        表格标题

          flash的实例： 将flash 的代码嵌入到网页中即可，注意路径 （）

          表单标签：  

                            属性：name, action,method,enctype

          表单元素： input

                            属性： type="text", name="username", size="20" maxlength="30"

                                      type="password"

                                        type="radio" checked="checked" id="tt"   (male)  //label实现点击文字实现选中

                                         type="image"

                                         type="button"

                                         type="hidden"

type="file"   //上传文件   如果有上传文件，则form标签中的编码类型为：enctype=”multipart/form-data”

                            select  下拉列表

                            属性： name

                                       multiple="multiple"

                                        size="3"   // 只显示3个

                              select中的元素：   option 选项

                                                          上海

                            textarea 文本域

                                属性：name

                                          cols 

                                          rows

          表单提交：input

                          属性： type="submit" value="提交"  name=“submit”

                                     type="reset"  value="重写"

          地图 map: 使用dreamweaver 来实现

CSS尺寸： CSS 外部引入:

http://www.dreamdu.com/style.css"; />

清空默认内外默认边距：*{ margin：0；padding：0；}

使用通配符选择器会遍历页面所有的标签，这样会严重影响性能，所以不推荐使用上边的通配符方式

而是采用以下标准的清空做法：（网址：http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css）

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

                px(相对于屏幕的分辨率)， em（1倍的系统默认字体高度）, %（相对于当前默认值的百分比）

                字体属性：font-family (设置字体，建议使用中文字体的英文名字)， font-size(字体大小)， font-weight（100-900、字体的加粗方式）,font-style(字体样式，italic 斜体)

                文本属性:  color(颜色，用16进制), text-align(文本对齐方式), line-height(行高)，text-indent(), letter-spacing(行距)， text-decoration(下划线，上划线，删除线)

                  padding , margin, border, background(background-color,background-image, background-repeat, background-position, background-attachment)  //精灵图就是使用background-position

                CSS浮动： float： left/right

                                浮动的位置：浮动到包含元素的边界，或具有浮动属性元素的边上。

                                                    浮动元素都是块级元素（行内元素浮动后自动转为块级元素）

                        清除浮动：  

                CSS优先级： 1.当CSS冲突时，采用就近原则。 行内样式>内嵌样式>外部样式

                                    2.行内样式>id>class>标签

                                    3.权重值，特征值

                                            标签：1

                                            类：10

                                            ID：100

                                            Style：1000

                                            ！important  ： 最高优先级

                定位属性：position：   （需要先设置用来配合定位的坐标： left right top bottom）

                                                static  静态，不定位

                                                fixed   固定， 脱离正常的文档流，比普通元素层级高，相对浏览器窗口进行定位

                                                relative 相对，脱离文档流，层级高于普通元素， 相对原来的自己位置， 原来的位置别的元素不能占用

                                                absolute 绝对， 脱离文档流，层级高于普通元素，相对于上一级具有定位属性的元素进行定位，直至body 为止

                                    常用方法： 子绝父相。 外层元素通常设置相对定位，不用坐标；内层元素设置绝对定位，配合坐标定位。

                盒模型： Margin， Border， Padding， Content

                        标准盒模型和IE盒模型的差别： width 和height的计算差别

                        margin的上下合并问题（上下大吃小），左右叠加

                        初始化清除浏览器默认值

                         overflow（溢出）： hidden（超出隐藏）/scroll（滚动条）/auto（自适应）

                        display: block（块显示）/inline（行内显示）/inline-block (双重作用，在一行内显示，又有宽高)/none（不显示）

JS: JavaScript

        JS 编程语言            HTML&CSS 标记语言

        变量： var abc = 1;

        警告信息： alert（）;  document.write(); prompt(); confirm;

        查看数据类型： typeof（变量名称）

        区分大小写，分号结尾。

        数据类型： 数字，字符串，布尔，未定义，空类型，复合类型（数组，对象）

        注释： 单行注释        //内容

                   多行注释        /*内容*/

        运算符： 赋值运算符， 算数运算符，逻辑运算符，位运算符， 运算符优先级

        传值: 赋值传值（数字类型，字符串类型），引用传值

        流程控制：1. 条件语句： ①if(条件) {语句块}

                                               ②if(条件) {语句块} else{语句块}

                                               ③if(条件) {语句块} else if{语句块}

                                               ④switch(变量或者表达式) {case 值1： 语句1；break；...... default: 语句}

                          2.循环语句： 循环的三大组成部分： 循环变量的初始化，循环变量的改变，循环条件的判断

                                               ①var i=1; while(i<100) {循环体；i++}

                                               ②var i=1; do{循环体；i++}while(i<100)

                                               ③for(var i=1;i<100;i++) {循环体}

                         知识点： break: 跳出整个循环，开始执行循环之后的语句

                                       continue：跳出当次的循环，当次循环之后的语句不再执行，然后开始执行下一次循环

        函数：定义： function 函数名(形参1，形参2，...){代码； return 值；}

                  调用：函数名(实参1，实参2， ...)

                   return 可以返回值或者不返回值，可以用于停止函数执行。

                   知识点： 全局变量  局部变量   函数的位置可以任意，因为函数只有在调用时才会执行。

                   系统内部自带的常用函数： isNaN  非数字，返回bool值  

                                                            isfinite 为无穷大， 

                                                            parseInt() 向下取整

                                                            递归函数：函数本身调用函数本身，条件是必须有可以让函数停止调用的条件。

                                                                            function f1(){ f1(); }

       数组：格式： var arr = [10,20,30];  // 定义兼赋值

                        第二种定义： var arr = new Array(10,20,30);

                            下标：0, 1, 2

                数组元素的调用：arr[0]

                 属性：arr.length  //数组长度，即为元素个数

                二维数组：数组的每一个元素仍然是一个一维数组。

                        二维数组元素的调用: arr[0][0]

                数组的排序：即数组中元素按照升序或者降序排列。思路:定义一个临时变量，每一次都将最大或最小的值放在开头或者结尾，原值与临时变量交换。

                数组的方法：arr.concat(arr1);//将arr1的元素添加到arr中

                                    arr.join("字符")；//返回一个字符串，该字符串是arr中的所有元素用“字符”连接起来的。

                                    arr.pop();//删除数组最后一项并返回。

                                    arr.reverse();//把数组的顺序翻转。

 字符串： 定义： var str = "abcdefg";

第二定义：var str = new String("abcdefg");

                字符串方法：str.indexOf("字符")；

                                    str.toUpperCase;

                                    str.toLowerCase;

知识点：属性和方法

            属性：对象.属性名

            方法：对象.方法名()

Math对象： Math.pow(n1,n2);//n1的n2次方

                  Math.abs(n);//n的绝对值

                  Math.round(n);//n的四舍五入值

                  Math.max(n1,n2,...);//最大值

                  Math.min(n1,n2,...);//最小值

                  Math.floor(n);//向下取整

Math.ceil(n);//向上取整

                  Math.random();//获得[0,1)之间的随机数

                  Math.floor(Math.random()*(y+1-x)+x);//获取x~y之间的随机整数

知识点： 特殊字符： \r  换行     \n  回车       \t  制表符

时间日期对象：    创建： var d1 = new Date();//创建当前时间

                                      var d2 = new Date("2017/09/11 21:26:00");//创建指定时间

                                      var d3 = new Date(2017,09,10,21,26,00);//创建指定时间（月份0~11）

                                      var d4 = new Date(13345478456745);//创建毫秒数时间

                            获取： var year = d1.getFullYear();//

var month=d1.getMonth();//获得月份

                                        var date=d1.getDate();//获得日期

                                        var day=d1.getDay();//获得星期

                                        var hours=d1.getHours();//获得小时数

                                        var minute=d1.getMinutes();//获得分钟数

                                        var second=d1.getSecond();//获得秒数

                                       var millisecond=d1.getMilliseconds();//获得毫秒数(0到999)

                                        var timeshijian=d1.getTime();

                            设置：D1.setFullYear(2017);

D1.setMonth(n);

                                     D1.setDate(n);

                                        D1.setHours(n);

                                        D1.setMinutes();

                                        D1.setSeconds();

                                        D1.setMilliSeconds()

对象： 指具体的东西，以js的眼光看所有的标签都是标签对象。

事件： HTML和JS通过事件建立起来联系

鼠标事件：onclick, onmouseover,onmouseout,onbdclick,onmousedown,onmouseup,onmousemove

键盘事件： onkeyDown，onkeyUp,onkeyPress

表单事件： onsubmit，onreset，onfocus(获得焦点)，onblur(失去焦点)

窗口事件： onload, window.onload

Event: 指事件发生时，事件源相关的一些信息。clientX，clientY，event.target

JS控制DOM: 指JS控制改变标签的html属性和CSS 属性

                    ①获取标签

                    ②找到对应的标签属性并赋值

                    ③object.html属性名，   object.style.css属性名

                    知识点：从网页上获得的数据都是字符串。

                                innerHTML，value的区别

                     document.getElementById("ID标签名");

                     document.getElementByTagName("类标签名")

定时器：设置重复性：setInterval("fn()",1000);

一次性：setTimeout("fn()",1000);

              清除定时器：clearInterval(); clearTimeout();

知识点: this：事件源，对象本身

            对象绑定事件：object.onclick=函数名

            删除标签：必须要找到这个对象的上级标签。

DOM: Document Object Model 文档对象模型

官方定义：W3C的DOM，可以使程序或脚本(JS或AS、JScript)，动态的访问或操作文档的内容、结构、样式。

DOM只是一个标准，就是操作网页的标准。而这个标准(模型)在浏览器中，以“对象”的方式实现。

        分类： 核心DOM    HTMLDOM    EventDOM    CSSDOM

        DOM中节点类型： document文档节点    element元素节点    attribute属性节点    text文本节点

        知识点：JS中的事件属性，要全部小写

        Event 对象： e 或者event

BOM：Browser Object Model 浏览器对象模型

Style对象

table表格对象

form表单对象： 属性    方法    事件

    表单提交方法：

input对象

select对象    option对象

WAMP: 默认安装完成，phpMyAdmin的用户名是root，密码为空

PHP:

    注释： HTML注释：

           CSS注释： /* 注释内容 */

           JS注释： // 或  /* 注释内容 */

           PHP注释： // 或 #  或  /* 注释内容 */

    变量：$开头

    数据类型：标准型(字符串，整型，浮点型，布尔型)    复合型（数组，对象）    特殊数据类型（资源，NULL）

        类型判断：var_dump();  //打印输出

                        is_*();// 判断变量是否为某一种类型

                        isset();//判断变量是否设置

                        empty();//检测某一个变量是否为空

        获取表单提交数据：$_GET[]    $_POST[]

        数据类型转换：强制转换    自动转换

        运算符： 算数，字符串，赋值，比较，逻辑，三元

                    运算符优先级

        流程控制： 条件判断: if, if else, if else if

                                        switch--case

                         循环语句： while， for 

        知识点： break 语句： break[n];//跳出n层循环

                      continue语句：continue[n];//中止n层循环

                      拷贝传值：两个变量独立， 字符型，整型，浮点型，NULL，数组

                      引用传值：两个变量指向同一个地址。 对象和资源  ， 强制引用传值：在赋值的变量之前添加&

        数组：分类：枚举数组，关联数组，混合数组，多维数组

                 创建：$arr = array(10,20,...);

                           $arr1 = array("name"=>"张三", 2=>男)；

                            $arr2[0] = "李四"； 

                 相关函数：print_r();    unset();    count();

                                    foreach($arr3 as $value) {}

        函数：语法结构：

                    function 函数名(形参1，形参2，...){功能代码}

                  参数传递： 值传递参数， 引用传递参数

变量作用域：在PHP中，全局变量，不能直接在函数内部使用。

global关键字使用注意

global关键字，只能在函数内部来使用。

global关键字，不能一边声明全局变量，一边赋值。

                                                          global的真正含义，是“引用传地址”，  

    日期函数： date("Y年m月d日 H:i：s")；

              time(); //当前时间戳

数据库：

            Mysql: 登录： 

语法格式：mysql.exe –h主机名–u用户名–p密码

语法：show databases;

create database lan;

drop databaase lan;

show create database lan;//查看当前数据库的默认字符集

alter database lan default charset utf8;//修改数据库的字符集

use lan;

show tables;

create table news();

drop table news;

describe news;

    数据类型：tinyint,smallint,mediumint,int,bigint    

                    float(M,D)        double(M,D)

                    date        time    

                    char(M)    varchat(M)    tinytext    text    longtext

    SQL 语句： 增加记录： insert into table_name(字段1，字段2，...) values(值1，值2，...);

                      删除记录：delete from table_name where

                      修改记录：update table_name set 字段1=新值1，字段2=新值2，... where 

                      查找记录：select * from table_name where

            导入SQL文件到phpAdmin： 注意选择文件的字符集与导入文件的字符集一致，通常选择utf8

    数据库操作的4步：1.登录到mySQL服务器

                                2.选择当前要操作的数据库

                                3.设置请求和返回数据的字符集

                                4.执行SQL语句

处理中文显示乱码的问题：

    1.确保数据库本身的字符编码为utf8 （查看和修改 Show，alter）

    网页本身的字符编码为utf-8（）

编辑器的环境设置字符编码为utf-8（Setting - Preference - Encoding）

PHP请求返回的数据字符集编码为utf8（mysql_query("set names utf8");这一步放在选择数据库之后）

PHP+MySQL数据库编程的步骤

第一步：PHP连接MySQL服务器

第二步：选择当前要操作的数据库

第三步：设置请求或返回的数据的字符集

第四步：执行各种SQL语句。

PHP函数补充：include()    require()    header()

URL统一资源定位符:

http://www.sina.com.cn/index.php?username=yao&userpwd=123456#top

http://  协议名称www.sina.com.cn是网址

?之前是文件名称, ?之后是查询字符串

查询字符串之后是锚点名称   例:#top

PHP函数补充

md5("字符串");

学习源码:   DEDECMS (织梦CMS),   帝国CMS,  discuz!, ecshop

重点: 设计数据表 (基于最终网站的实现方式)

获取地址栏的传递参数 用 GET方法,    id=$_GET['id']

打印基本变量 用 echo

打印结果集/资源/数组 用 dump()

在线HTML 代码编辑器   kindeditor,