HTML 1、一套规则，浏览器认识的规则。 2、开发者： 学习Html规则 开发后台程序： - 写Html文件（充当模板的作用） ****** - 数据库获取数据，然后替换到html文件的指定位置（Web框架） 3、本地测试 - 找到文件路径，直接浏览器打开（单个文件测试时，无需使用socket服务端） - pycharm打开测试 4、编写Html文件 - doctype对应关系 <!--对于不同的浏览器有自己的编码规范，<!DOCTYPE html>默认是统一的规范,否则显示的页面由于对应关系不同，会错位--> - html标签，标签内部可以写属性 ====> 只能有一个，<html lang="en"> </html>==>html标签，lang="en"叫html标签的属性。 - 注释： <!-- 注释的内容 --> 5、标签分类 - 自闭合标签 只写了一个<meta>标签，没有</meta>标签，自己就闭合了。 例如：<meta charset="UTF-8"> - 主动闭合标签 例如：<title>老男孩</title> 6、 - <meta -> 编码，跳转，刷新，关键字，描述，IE兼容 6.1 编码：<meta charset="UTF-8"> 6.2 跳转：<meta http-equiv="Refresh" Content="5" Url="http://baidu.com" /> 5秒钟后跳转至baidu.com 6.3 刷新：<meta http-equiv="Refresh" Content="30"> 该页面默认30秒刷新一次 6.4 关键字：<meta name="keywords" content="星际2，红警"> 6.5 描述： <meta name="description" content="汽车之家为您提供最新汽车报价。" /> 6.6 兼容：<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" /> - title标签 ,网站的标题 - <link /> 搞图标，欠 - <style />欠 - <script> 欠 7、body标签 - 图标， > < - p标签，段落 <p></p> - br，换行 <br /> ======== 小总结 ===== 所有标签分为： 标签之间可以嵌套 标签存在的意义：通过 css操作、js操作可以方便定位到哪个标签的值。 ps:chorme审查元素的使用 - 定位 - 查看样式 - h系列 :标题字体大小，从h1到h6，h1最大，h6最小。 <h1></h1> - - span ：白板，横着输出。属于行内标签； <span></span> - input系列 + form标签 input type='text' - name属性，value="赵凡" input type='password' - name属性，value="赵凡" input type='submit' - value='提交' 提交按钮，表单 input type='button' - value='登录' 按钮 input type='radio' - 单选框 value，checked="checked"，name属性（name相同则互斥） input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据） input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data" input type='rest' - 重置 <textarea >默认值</textarea> - name属性 select标签 - name,内部option value, 提交到后台，size，multiple - a标签 - 跳转 - 锚 href='#某个标签的ID' 标签的ID不允许重复 - img src alt title - 列表 ul li ol li dl dt dd - 表格 table thead tr th tbody tr td colspan = '' rowspan = '' - label 用于点击文件，使得关联的标签获取光标 <label for="username">用户名：</label> <input id="username" type="text" name="user" /> - fieldset legend - 20个标签 -html中的注释 <!-- 注释 --> CSS在标签上设置style属性： background-color: #2459a2; height: 48px; ...编写css样式： 1. 标签的style属性 2. 写在head里面 style标签中写样式 - id选择区 #i1{ background-color: #2459a2; height: 48px; } <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style> #i1 { background-color: #2459a2; height: 48px; } .c1,.c2{ background-color: red; height: 48px; } .c1 div{ background-color: green; height: 48px; } .c3[name='xiaofeng'] { width: 100px; height: 100px; }</style></head><body><div id="i1">id标签不能重复</div> <!--id不能重复 --><div class="c1">class标签可以复用</div> <!-- class标签可以重复,最常用的一种方式 --><span class="c2">组合选择器 <div>层级选择器，关联syle里的c1中的div样式</div></span><input class="c3" type="text" name="xiaofeng"></body></html>- class选择器 ****** .名称{ ... } <标签 class='名称'> </标签>- 标签选择器 div{ ... } 所有div设置上此样式- 层级选择器（空格） 重点，必须掌握 .c1 .c2 div{ }- 组合选择器（逗号） 重点，必须掌握 #c1,.c2,div{ }- 属性选择器 重点，必须掌握 对选择到的标签再通过属性再进行一次筛选 .c1[n='alex']{ width:100px; height:200px; } PS: - 优先级，标签上style优先，编写顺序，就近原则2.5 css样式也可以写在单独文件中1)创建一个stylesheet文件，文件名字叫commons.css，内容为style里的内容，如#i1 {background-color: #2459a2;height: 48px;}.c1,.c2{background-color: red;height: 48px;}.c1 div{background-color: green;height: 48px;}.c3[name='xiaofeng'] {width: 100px;height: 100px;}2)在html中<head>标签中写入 <link rel="stylesheet" href="commons.css" /> 即可调用commons.css文件里的标签样式。 3、css中的注释 /* */4、边框 - 宽度，样式，颜色 (border: 4px dotted red;) -关于样式 solid：实线 dotted：虚线 - border-left5、基础样式 height， 高度 百分比 width， 宽度 像素，百分比 text-align:ceter, 水平方向居中 line-height，垂直方向根据标签height的高度居中，且水平方向也居中。 重点掌握 color、 字体颜色 font-size、 字体大小 font-weight 字体加粗6、float 漂浮 让标签漂起来，比如让两个块级标签可以实现同一行里左右飘浮，使块级标签也可以堆叠。因为块级标签默认是占一行。 例： <div style="width: 20%; height: 100px;border: 5px dotted blue;float: left"></div> <div style="width: 70%; height: 100px;border: 5px dotted darkorchid;float: left"></div> 老子管不住： <div style="clear: both;"></div> 7、display display: none; -- 让标签消失display: inline; 将块级标签变成内连(行内)标签 例： <div style="background: red;display: inline" >块级标签</div> display: block; 将内连(行内)标签变成块级标签 例： <span style="background: green;display: block">内连标签</span>display: inline-block; 使行内标签可以设置高度和宽度，默认行内标签无法设置高度，宽度，边距。 例： <span style="height:50px;width: 100px;background: green;display: block;border:2px solid red;display:inline-block">内连标签</span> 具有inline,默认自己有多少占多少 具有block，可以设置无法设置高度，宽度，padding margin 小结：行内标签：无法设置高度，宽度，padding margin块级标签：可以设置高度，宽度，padding margin 8、边距padding：内边距 padding-top:10px;距离当前div标签的顶部边框的距离是10像素margin：外边距 margin-top:10px; 当前div标签距离顶部10像素； margin(0,auto) 设置对象上下间距为0，左右自动。 事例：返回顶部<body> <div style="height: 50000px"> <div onclick="GoTop()" style="height: 100px;width: 100px;position: fixed;bottom: 20px;right: 20px;background: cadetblue ;font-size:29px;color: crimson ">返回顶部</div> </div></body><script> function GoTop(){ document.body.scrollTop = 0; }</script>9 position position: fixed; <: ;: ;: ;: ;: ;: ;:;: >返回顶部</> position: absolute; 父标签里定义一个position:relative;子标签里定义一个position:absolute; 子标签就会相对父标签定位。 bottom:20px; right: 20px; margin-top: 50px; 10 background background-image:url('img/1.gif') background-repeat:repeat-x; background-repeat:repeat-y; background-repeat:no-repeat; background-position-x:0; background-position-y:-20px; background-position:0 -20px;11 hover 选择鼠标指针浮动在其上的元素，并设置其样式：a:hover{ background-color:yellow;}12 overflow 如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。13 z-index 层级。设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。数值最大的，在顶层。14 opacity设置元素的不透明级别，规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 三、JavaScript：(独立的编程语言，跟java半毛钱关系也没有。浏览器就自带js代码的解释器)3.1 js代码书写方法和位置：法一：以代码形式存在html里的head中，但是不够灵活<head> <meta charset="UTF-8"> <title>Title</title> <style> /* css 代码*/ </style> <script> //javascript代码 </script></head>法二：js代码以文件的形式存放，html里调用这个文件<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="commons.css" > <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="commons.js"></script></head>法三： 临时书写，可以在浏览器终端的console里小结： 一般js都不放在head里，为了提高网页的打开效率和友好度，通常会把js的<scripts>js代码</scripts>放在<body>html代码</body>下面 3.2 js注释： 当行注释 //内容 多行注释 /* 内容*/ 3.3 js基本语法： 3.4变量： python中： name = "xiaoming" js中： name = "xiaoming" #全局变量 var name = "xiaoming" #局部变量，切记，使用过程中变量一般都要加上var 3.5 基本数据类型：详见： 注意： null、undefinednull是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。 undefined是一个特殊值，表示变量未定义。 3.5.1 数字JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。转换：parseInt(..) 将某值转换成数字，不成功则NaNparseFloat(..) 将某值转换成浮点数，不成功则NaN特殊值： NaN，非数字。可使用 isNaN(num) 来判断。Infinity，无穷大。可使用 isFinite(num) 来判断。更多数值计算：3.5.2字符串字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。常见功能：obj.length 获取当前字符串长度obj.trim() 移除空白obj.trimLeft() 移除左面obj.trimRight)obj.charAt(n) 返回字符串中的第n个字符,n是索引位置obj.concat(value, ...) 拼接obj.indexOf(substring,start) 子序列位置，比如字符串索引位置obj.lastIndexOf(substring,start) 子序列位置obj.substring(from, to) 根据索引获取子序列,from是开始位置，to结束位置obj.slice(start, end) 切片obj.toLowerCase() 大写obj.toUpperCase() 小写obj.split(delimiter, limit) 分割obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项， $数字：匹配的第n个组内容； $&：当前匹配的内容； $`：位于匹配子串左侧的文本； $'：位于匹配子串右侧的文本 $$：直接量$符号 3.5。3 数组JavaScript中的数组类似于Python中的列表常见功能obj.length 数组的大小 obj.push(ele) 尾部追加元素obj.pop() 尾部获取一个元素obj.unshift(ele) 头部插入元素obj.shift() 头部移除元素obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素 obj.splice(n,0,val) 指定位置插入元素 obj.splice(n,1,val) 指定位置替换元素 obj.splice(n,1) 指定位置删除元素obj.slice( ) 切片obj.reverse( ) 反转obj.join(sep) 将数组元素连接起来以构建一个字符串obj.concat(val,..) 连接数组obj.sort( ) 对数组元素进行排序3.5.4 字典a={'k1':'v1','k2':'v2'}执行a[k1]，值为v13.5.5 布尔值布尔类型仅包含真假，与Python不同的是其首字母小写。== 比较值相等!= 不等于=== 比较值和类型相等!=== 不等于|| 或&& 且 3.6 For循环此种方法循环的是元素的索引<script> a=[11,22,33,44] for (item in a){ console.log(a[item]); } b={'k1':'v1','k2':'v2'} for (item in b){ console.log(b[item]) }</script> 3.7 条件语句语法：if(条件){}else if(条件){}else if(条件){}else{}条件符号： == 只要值相同就相等 != === 不仅要比对值，类型也要相等才会相等 !== || 或，相当于python里的or && 且，相当于python里的and 函数的定义： function func(){ ... } 4、Dom详看：http://www.cnblogs.com/wupeiqi/articles/5643298.html 4.1 找标签4.1.1直接找 $('#id') $('.c1').siblings()document.getElementById 根据ID获取一个标签document.getElementsByName 根据name属性获取多个标签(获取的是列表)document.getElementsByClassName 根据class属性获取标签集合document.getElementsByTagName 根据标签名获取标签集合 直接查找 var obj = document.getElementById('i1') 间接查找 文件内容操作： innerText 仅文本 innerHTML 全内容 value input value获取当前标签中的值 select 获取选中的value值（selectedIndex） textarea value获取当前标签中的值 搜索框的示例4.1.2 间接找先找到一个标签，然后根据这个标签去找其他标签；例如var tag = document.getElementById('i1') //先找到id=i1的标签var content = tag.parentElement //然后找i1的父标签 parentElement // 父节点标签元素children // 所有子标签firstElementChild // 第一个子标签元素lastElementChild // 最后一个子标签元素nextElementtSibling // 下一个兄弟标签元素previousElementSibling // 上一个兄弟标签元素parentNode // 父节点childNodes // 所有子节点firstChild // 第一个子节点lastChild // 最后一个子节点nextSibling // 下一个兄弟节点previousSibling // 上一个兄弟节点4.2 操作：4.2.1 内容var tag = document.getElementById('i1') //先找到id=i1的标签var content = tag.innerText //获取i1标签的文本内容innerText 文本outerTextinnerHTML HTML全内容innerHTML value 值 input value获取当前标签中的值 select 获取选中的value值（selectedIndex） textarea value获取当前标签中的值 4.2.2 样式操作： className classList classList.add classList.remove obj.style.fontSize = '16px'; obj.style.backgroundColor = 'red'; obj.style.color = "red" 4.2.3 属性操作 attributes // 获取所有标签属性setAttribute(key,value) // 设置标签属性getAttribute(key) // 获取指定标签属性removeAttribute /*var atr = document.createAttribute("class");atr.nodeValue="democlass";document.getElementById('n1').setAttributeNode(atr);*/ innerText checkbox: checked className classList 4.2.4 创建标签，并添加到HTML中： a. 字符串形式 b. 对象的方式 document.createElement('div') 4.2.5 提交表单 任何标签通过DOM都可提交表单 document.geElementById('form').submit()4.2.6 其他： console.log() alert var v = confirm(信息) v:true false location.href location.href = "" # 重定向，跳转 location.reload() # 页面刷新 location.href = location.href < === > location.reload() var o1 = setInterval(function(){}, 5000) clearInterval(o1); var o2 = setTimeout(function(){}, 50000); clearTimeout(o2); var obj = setInterval(function(){ }, 5000) clearInterval(obj); 事件： onclick，onblur，onfocus 行为 样式 结构 相分离的页面？ js css html 绑定事件两种方式： a. 直接标签绑定 onclick='xxx()' onfocus <div onclick='函数(123)'></div> <script> 。。。。 </script> b. 先获取Dom对象，然后进行绑定 document.getElementById('xx').onclick document.getElementById('xx').onfocus this，当前触发事件的标签 a. 第一种绑定方式 <input id='i1' type='button' onclick='ClickOn(this)'> function ClickOn(self){ // self 当前点击的标签 } b. 第二种绑定方式 <input id='i1' type='button' > document.getElementById('i1').onclick = function(){ // this 代指当前点击的标签 } 作用域示例： var myTrs = document.getElementsByTagName("tr"); var len = myTrs.length; for(var i=0;i<len;i++){ // i=0,i=1,i=2 myTrs[i].onmouseover = function(){ this.style.backgroundColor = "red"; }; } 4.2.7 定时器 书写方法：setInterval('函数()', 4000) 事例 <script> function f1(){ console.log(1); } //创建一个定时器,5000是毫秒，相当于5秒执行一个alert命令，弹出一个框，内容是123 setInterval("alert(123)",5000); </script> 4.2.8 其他： alert() console.log() 4.3 搜索框的示例操作： 样式操作： className classList classList.add classList.remove obj.style.fontSize = '16px'; obj.style.backgroundColor = 'red'; obj.style.color = "red" 属性操作： attributes getAttribute removeAttribute 创建标签，并添加到HTML中： a. 字符串形式 b. 对象的方式 document.createElement('div') 提交表单 任何标签通过DOM都可提交表单 document.geElementById('form').submit() 其他： console.log() alert var v = confirm(信息) v:true false location.href location.href = "" # 重定向，跳转 location.reload() # 页面刷新 location.href = location.href < === > location.reload() var o1 = setInterval(function(){}, 5000) clearInterval(o1); var o2 = setTimeout(function(){}, 50000); clearTimeout(o2); var obj = setInterval(function(){ }, 5000) clearInterval(obj); 5 实战<body> <div id="i1">欢迎领导莅临指导</div></body><script> function func(){ //根据id获取标签的内容，定义局部变量 var tag = document.getElementById('i1'); //获取标签内部的内容 var content = tag.innerText; var f = content.charAt(0); var l = content.substring(1,content.length); var new_content = l +f ; tag.innerText = new_content; } //创建一个定时器 setInterval("func()",500);</script> 6、for循环 for(var item in [11,22,33]){ console.log(item); continue; } var arra = [11,22,32,3] for(var i=0;i<arra.lenght;i=i+1){ break; } while(条件){ }7、条件语句 if(){ }else if(){ }else{ } == === name='3'; switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; }8. 函数 function func(arg){ return arg+1 } var result = func(1) console.log(result); 普通函数： function func(){ } 匿名函数： function func(arg){ return arg+1 } setInterval("func()", 5000); setInterval(function(){ console.log(123); },5000) 自执行函数(创建函数并且自动执行)： function func(arg){ console.log(arg); } // func(1) (function(arg){ console.log(arg); })(1)注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。9、序列化 JSON.stringify() 将对象转换为字符串 JSON.parse() 将字符串转换为对象类型10、转义 客户端（cookie） =》 服务器端 将数据经过转义后，保存在cookie11、eval python: val = eval(表达式) exec(执行代码) JavaScript: eval12、时间 Date类 var d = new Date() d.getXXX 获取 d.setXXX 设置13、作用域 ================================ 1. 以函数作为作用域 （let）================================ 其他语言： 以代码块作为作用域 public void Func(){ if(1==1){ string name = 'Java'; } console.writeline(name); } Func() // 报错 Python： 以函数作为作用域 情况一： def func(): if 1==1: name = 'alex' print(name) func() // 成功 情况二： def func(): if 1==1: name = 'alex' print(name) func() print(name) // 报错 JavaScript: 以函数作为作用域 function func(){ if(1==1){ var name = 'alex'; } console.log(name); } func() ================================ 2. 函数的作用域在函数未被调用之前，已经创建 ================================ function func(){ if(1==1){ var name = 'alex'; } console.log(name); } ================= 3. 函数的作用域存在作用域链，并且也是在被调用之前创建 ================== 示例一： xo = "alex"; function func(){ // var xo = 'eric'; function inner(){ // var xo = 'tony'; console.log(xo); } inner() } func() 示例二： xo = "alex"; function func(){ var xo = 'eric'; function inner(){ console.log(xo); } return inner; } var ret = func() ret() 示例三： xo = "alex"; function func(){ var xo = 'eric'; function inner(){ console.log(xo); } var xo = 'tony'; return inner; } var ret = func() ret() ================= 4. 函数内局部变量 声明提前 ================== function func(){ console.log(xxoo); } func(); // 程序直接报错 function func(){ console.log(xxoo); var xxoo = 'alex'; } 解释过程中：var xxoo; func(); // undefined14、JavaScript面向对象 JavaScript面向对象 function foo(){ var xo = 'alex'; } foo() function Foo(n){ this.name = n; this.sayName = function(){ console.log(this.name); } } var obj1 = new Foo('we'); obj1.name obj1.sayName() var obj2 = new Foo('wee'); obj2.name obj2.sayName() ==============》 a. this代指对象(python self) b. 创建对象时, new 函数() Python的面向对象： class Foo: def __init__(self,name): self.name = name def sayName(self): print(self.name) obj1 = Foo('we') obj2 = Foo('wee') 原型： function Foo(n){ this.name = n; } # Foo的原型 Foo.prototype = { 'sayName': function(){ console.log(this.name) } } obj1 = new Foo('we'); obj1.sayName() obj2 = new Foo('wee'); 小结：CSS重要的标签 position background text-align margin padding font-size z-index over-flow :hover opacity float (clear:both) line-height border color display 补充：页面布局主站— <div class='pg-header'> <div style='width:980px;margin:0 auto;'> 内容自动居中 </div> </div> <div class='pg-content'></div> <div class='pg-footer'></div>后台管理布局：position: fiexd -- 永远固定在窗口的某个位置 relative -- 单独无意义 absolute -- 第一次定位，可以在指定位置，滚轮滚动时，不在了。。。。 a. 左侧菜单跟随滚动条b. 左侧以及上不不动 ****** jQuery
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦