HTML 学习笔记

HTML 注释

HTML 标签分类(按照功能): 文本的修饰,文字排版,图片,链接,表格,列表,表单,框架 ,语音,视频

font 标签中的属性: color, size (1-7,默认是3),face(字体)http://tool.oschina.net/

body 标签中的属性:text(文字颜色),bgcolor(背景色),background(背景图),bgproperties(背景图固定),

文本修饰标记: , ,加粗,斜体,强调斜体,下划线,中间删除线,下划线,中间删除线,上标,下标

保留格式,主要是空格和换行以及符号等,

块: p, h1-h6, pre, div, li,

行内:font, b, em, i, b, strong, del

字符实体: 空格, 尖括号,货币符号,版权符号,注册商标,申请中的商标

列表: 有序ol, 无序ul,自定义dl

           

                       


  1.            

                         


    •            

                         

                         


      滚动字幕标签

                  属性: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, 

    • ©著作权归作者所有,转载或内容合作请联系作者
      • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
        沈念sama阅读 211,884评论 6 492
      • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
        沈念sama阅读 90,347评论 3 385
      • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
        开封第一讲书人阅读 157,435评论 0 348
      • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
        开封第一讲书人阅读 56,509评论 1 284
      • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
        茶点故事阅读 65,611评论 6 386
      • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
        开封第一讲书人阅读 49,837评论 1 290
      • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
        沈念sama阅读 38,987评论 3 408
      • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
        开封第一讲书人阅读 37,730评论 0 267
      • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
        沈念sama阅读 44,194评论 1 303
      • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
        茶点故事阅读 36,525评论 2 327
      • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
        茶点故事阅读 38,664评论 1 340
      • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
        沈念sama阅读 34,334评论 4 330
      • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
        茶点故事阅读 39,944评论 3 313
      • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
        开封第一讲书人阅读 30,764评论 0 21
      • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
        开封第一讲书人阅读 31,997评论 1 266
      • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
        沈念sama阅读 46,389评论 2 360
      • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
        茶点故事阅读 43,554评论 2 349

      推荐阅读更多精彩内容

      • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
        阿啊阿吖丁阅读 3,872评论 0 0
      • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
        墨荀阅读 2,332评论 0 7
      • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
        悟名先生阅读 4,131评论 0 13
      • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
        RickCole阅读 5,106评论 0 21
      • 女人的高贵,不仅仅来源于外貌,更来源于内在的素养。 歌德说:“外貌只能炫耀一时,真美方能百世不殒。” 如果你感觉一...
        阿果悠悠阅读 1,021评论 2 4