HTML 笔记大全.doc

《HTML 笔记大全.doc》由会员分享，可在线阅读，更多相关《HTML 笔记大全.doc（30页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、如有侵权，请联系网站删除，仅供学习与交流1.2.3.4.5.6. HTML 笔记大全【精品文档】第 30 页7. HTML的简介HTML: 超文本标记语言，网页语言。超文本标记语言：超出文本的范畴。标记：HTML所有操作都是通过标签实现的。标签就是标记。HTML的后缀.htm 或者.html 。HTML规范：开始结束。成对出现。特殊的标签单个出现换行。内容：1.设置相关内容 标题 2.显示在页面上的内容 3.标签成对出现 4.标签不区分大小写。 5.有些标签没有结束标签，在标签内结束，水平线。HTML的核心思想（*）网页很多数据，不同的数据需要显示的效果不一样，这个时候需要使用标签把要操作的数

2、据（包装起来），通过修改标签的属性值实现标签数据样式的变化。一个标签相当于一个容器，想要修改容器内的样式，只需要改变容器的属性值，就可以实现容器内数据的样式变化。HTML最常用的标签8. 文字标签和注释标签*文字标签：修改文字的样式- 属性 size:文字的大小范围1-7 超出默认为7。 color：文字颜色 两种表示：1.英文单词：red green 。 2.使用16进制表示#ffffff *注释标签： 。9. 标题标签，水平线标签和特殊字符标题标签：大小依次变小自动换行水平线标签： 属性：*Size:水平线粗细 *Color:颜色代码换2行。特殊字符: :> 空格：  &

3、: &10. 列表标签 展示效果 传智播客 传智播客 财务部 财务部 学工部 学工部 人事部 人事部 *:表示列表范围 *:表示上层内容*:表示下层内容*:表示下层内容*:有序列表的范围 属性type:设置排序方式 1（默认）a i。 *在ol标签里面具体内容代码：财务部学工部人事部*:有序列表的范围属性type: 实心圆circle 空心圆disc 实心方块square ,默认disc5、 图像标签（*）-src:图片的路径-width:图片的宽度 height：图片的高度 alt：图片上显示的文字。6、 路径的介绍*绝对路径 ： 完整的路径。*相对路径： 一个文件相对于类外一个文件

4、的位置。*html文件和图片在同一个路径下，直接把名字写在路径下。*图片在html下一层的路径， 把后面的路径拿过来用。*图片在html上一层的路径， ./加上图片的名字。././ 表示上2层路径。7、 案例联系*原样输出标签8、 超链接标签（*）*链接资源 顶部 href: 链接的资源的地址，里面的如果是空链接时”#”表示。 target:设置目标打开的方式，默认在当前页打开。 _blank : 在新的页面打开。 _self : 在当前页面打开。*定位资源 *如果想定位资源：定义一个位置顶部*回到这个位置回到顶部9、 表格标签（*重要的很*）表格的范围属性：border=”1” border

5、color=”blue” cellspacing=”0”width=”40”height=”40”.border:表格线 bordercolor:表格线颜色 cellspacing:单元格之间的距离。表示行 在行标签的里面表示行里面的单元格在tr和td标签下属性：显示方式 align: left center right*表格实现居中加粗标签*表格标题写着table里面*表格标题标签 * 表示几行。 * 表示每行的单元格。表格技巧：先数有几行有几行就有几个，在数每行有多少个单元格。*合并单元格跨行:rowspan=”几行”跨列:colspan=”几列”10、表单标签表示定义一个表单的范围* f

6、orm里面的属性 *action=”路径”数据跳到页面。*method=”请求的方式”有以下2种。1. get和post,默认是get。2. get请求携带提交数据，安全性低，数据大小有限制。Post相反。*enctype:做文件上传需要设置这个属性。*输入项：可以输入内容和选择内容的部分。必须加一个name 属性。必须有一个value属性值-大部分的输入项使用*普通输入项：*密码输入项：*单选输入项：*文件输入项： 上传用。- 在里面加属性：name=”-Name属性值一定要一样*实现默认选项 checked=”checked”放在想选择的属性上。*多选输入项：- 在里面加属性：name=”

7、-Name属性值一定要一样-必须有一个value属性值。必须加一个name 属性。*下拉输入项（不是在input标签里面的）。 1992 selected=”selected” * 选项 1993 1993*实现默认选项 selected=” selected”放在想选择的属性上*文本域*隐藏项（代码中有而在页面上不会显示）*提交按钮 ? 输入项name的值=输入的值*参数类似于key=value形式.*图片提交按钮：*重置按钮(回到输入项的初始状态)*普通按钮11、 案例：使用表单来实现注册页面。-使用表格实现页面效果。-超链接不想要她有结果 href=”#”-如果表格里面的单元格没有内容，

8、使用空格作为占位符&nasp;-使用图片提交表单。12、 html中其他的常用标签的使用b：加粗s：删除线u：下划线i：斜体pre:原样输出sub:下标sup:上标div:自动换行显示块span:不会自动换行在一行显示块p:段落标签比br标签多换一行。13、 html的头标签的使用*html两部分组成head和body*在head里面的标签是头标签*title:表示游览器显示的内容。*meta:设置页面上的一些内容。*content:内容的意思。refresh:刷新 后面3表示内容刷新的时间为3秒.*base标签：设置超链接的基本设置*link标签：引入外部文件*明天css，可以使用link标

9、签引入css文件。14、 框架标签的使用*-row:按照行进行划分 *-cols:按照列划分*frameset cols=”80,*”*-具体显示的页面-*使用框架标签的时候，不能写在body里面，使用框架标签，需要把body去掉。例子： /把页面划分成上下2部分 /上面页面 /把下面页面划分成左右2部分。 /左边页面 /右边页面 *如果在左边的页面设置超链接，让内容显示在右边的页面中n 设置超链接里面的属性，target值成名称n 超链接115、a 标签的扩展 - 百度是网络资源 -当a标签里面访问网路资源的时候，必须要家一个协议 http:表示一个网路的公共协议。 -如果加上http协议之

10、后，自动识别访问资源是一个网络资源。 - 当浏览器里面找到相关协议，首先看这个协议是不是公共协议http。 - 如果不是公共协议，回去本地电脑支持这个协议的应用程序。1、 css的简介 * css:层叠样式表 * 层叠：一层一层的* 样式表：很多属性和属性值*使页面显示效果更加好*css将页面内容和显示样式进行分离，提高了显示功能。2、css和html的结合方式（4种结合方式） *.在每个html标签上面都有一个属性 style，把css和html结合在一起。 - -*.使用html的一个标签实现标签，写在里面。* css代码; * div background-color:blue; col

11、or:red; *.在style标签里面使用语句（在某些浏览器下不起作用） import url (css文件路径)；-第一步，创建一个css文件 improt url (div.css); *.使用头标签link，引入外部css文件第一步，创建一个css文件-*第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式。*优先级（一般情况）由上到下，由外到内，优先级由低到高。* 后加载的优先级高。* 格式 选择器名称 属性名:属性值;属性名:属性值;.3、 css的基本选择器（3种）*要对哪个标签里面的数据进行操作 A:标签选择器 *使用标签名作为选择器的名称 div backgrou

12、nd-color:gray; color:white;B:class选择器 *每个html标签都有一个属性class -aaaaa .haha Background-color:orange; C:id选择器*每个html标签上面都有一个属性id-bbbbbbb-#hehe Background-color:#333300; * 优先级 Styleid选择器Class选择器标签选择器4、 css的扩展选择器*关联选择器* wwwwwwwww*设置div标签里面的P标签，嵌套标签里面的样式*div p Background-color: green; *组合选择器 *111111111 2222

13、22222222 *把div和p标签设置成相同的样式，把不同的标签设置相同的样式 *div,p Background-color:orange; *伪元素选择器*css 里面提供了一些定义好的样式，可以拿过来使用* 比如超链接 *超链接的状态 原始状态 鼠标放上去的状态 点击 点击之后 :link :hover :action :visited 记忆的方法： lv ha 5、 css的盒子模型* 在进行布局前需要把数据封装到一块一块的区域内（div）(1) 边框Border :2px solid blue; / 粗细 虚线 蓝色border:统一设置上border-top下border-bot

14、tom左border-left右border-right(2) 内边距Padding:20px;padding:统一设置上padding -top下padding -bottom左padding -left右padding -right(3) 外边距Margin:20pxmargin:统一设置上margin -top下margin -bottom左margin -left右margin -right6、 css的布局的漂浮（了解）float: *属性值Left: 文本流向对象的右边。Right:文本流向对象的左边。7、 css的布局的定位（了解） position: *属性值 absolute

15、: * 将对象从分档流中拖出。 * 可以是top、bottom 等属性进行定位。relative: * 不会将对象从分档流中拖出。 * 可以是top、bottom 等属性进行定位。8、 案例 图文 混排案例* 图片和文字在一起显示9、 案例 图像签名* 在图片上面显示文字1、 javascript的简介 *是基于对象和事件驱动的语言，应用于客户端。 -基于对象： *提供好了很多对象，可以直接拿过来使用。 -事件驱动： *html做网站静态效果，javascript动态效果。 -客户端：专门指的是浏览器。 * js的特点 1.交互性 信息的动态交互。 2.安全性-js不能访问本地磁盘的文件。 3

16、.跨平台性-只能支持js的浏览器，都可以运行。*javascript和java的区别1. java是sun公司，现在是oracle；Js是网景公司。2. Javascript是基于对象的，java是面向对象的3. Java是强类型语言，js是弱类型语言。4. Javascript只需解析就可以执行，而java需要编译和解译才能执行。Js的组成（3部分） *ECMAScript: ECMA:欧洲计算机协会 制定的js语法和语句。 *Bom： 浏览器对象模型。 *Dom: 文档对象模型。2、 js和html的结合方式（2种） * 第一种：使用一个标签js代码； * 第二种：使用script标签，引

17、入一个外部js文件 *创建一个js文件，写js代码 - 。3、 js的原始类型和声明变量* java的基本数据类型 byte short int long float double char Boolean*定义变量都使用关键字var*js的原始类型有（5个）-string:字符串 * var str=”adc”;-number:数字类型 *var m=123;-boolean:true 和false * var flag=ture;-null *var data=new Data();*获取对象的引用，null表示对象引用为空，所有的对象的引用也是object .-undifined *定义

18、一个变量，没有赋值。var aa; * typeof(); 查看当前变量的数据类型。4、 js的语句-java里面的语句*if判断 * switch语句 *for while do-while5、 js的运算符*+= : x+=y; =x=x+y;*js里面不区分整数和小数。var j=123;alert(j/1000*1000);/ j/1000*1000 在java里面得到结果为0./ j/1000*1000 123/1000*1000=123*字符串的相加和相减的操作 var str=”123”; / alert(str+1); / 在java和js相同结果都是4561. alert(s

19、tr-1); / js执行的是正常运算 122.l 提示：NaN：表示不是一个数字*Boolean类型也可以操作 *如果设置成true，相当于这个值是1. *如果设置成false，相当于这个值是0.*=和=的区别：* 做判断时* = :比较的只是数值。* = :比较的是数值和类型。*/*引入知识-直接向页面输出的语句（可以把内容显示在页面上）*document.write(“aaaa”);document.write(“”);*可以向页面输出变量，固定值和html代码。6、 js 的数组*定义方式（3种） -第一种：var arr=1,2,3; var arr=1,4,ture; -第二种：使

20、用内置对象Array var arr1=new Array (5); /定义一个数组，长度为5. arr10=”1”; -第三种：使用内置对象Array var arr2=new Array(3,4,5); /定义一个数组，数组里面元素3 4 5 . *数组里面有一个属性 Length:获取数组的长度。 *数组可以存放不同的数据类型的数据。7、js的函数 *js里定义函数方法有三种方式 *函数的参数列表里面，不需要写var，直接写参数名称第一种方式： *使用到一个关键字function *function 方法名（参数列表） 方法体; 返回值可有可无 /使用第一种方式创建函数 function

21、 test() alert(“qqqq”); /调用方法 /test(); / 定义一个有参数的方法 实现2个数的相加 function add1(a,b) var sum=a+b;alert(sum); add1( 2,3 );/ 有返回值的效果 function add2 (a,b,c) var sum1=a+b+c; return sum1; aler (add2(3,4,5); 第二种方式： *匿名函数 var add= function(参数列表) 方法体和返回值; * 代码 / var add3=function(m,n) aler (m+n); / 调用方法 add (5,6);

22、8、 js的全局变量和局部变量 *全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用 *在放外部使用，在方法内部使用，在另外一个script标签中使用 * 局部变量：在方法内部定义一个变量，只能在方法内部使用 -游览器 自带调试工具F12. 9、script标签放的位置 *建议把script 标签放到后面。10丶js的重载*什么是重载？ 方法名相同，参数列表不同 Js 是否有重载？1、 js的String对象* 创建String对象 * var str=”abc”; *方法和属性（文档） *属性length:字符串的长度 *方法(1) 与html相关的方法-bol

23、d():加粗-fontcolor():设置字符串的颜色-fontsize():设置字体的大小-link():将字符串显示成超链接 *str4.link(“hello.html”) -sub() sup: 下标和上标 (2) 与java相似的方法 -concat():连接字符串 var str1=”abc”;var str2=”dfg”; document.write(str1.concat(str2);-charAt():返回值指定指定的位置的字符串*var str3=”sdsadad”;doucument.write(str3.charAt(20); /字符位置不存在，返回空字符串 -ind

24、exof(): 返回字符串位置 * var str4=”sfdsasd”; document.write(str4.indexof(“w”); /字符不存在，返回值为-1。split ():切分字符串，成数组*var str5=”a-b-c-d”; var arr1 =str5.split(“-”);doucument .write(“length:”+arr1.length); -replace(): 替换字符串 * 传递2个参数： -第一个参数是原始数据 -要替换成的字符 *var str6=”abcd”; document.write(str6); document.write(“”);

25、 document.write(str6.replace(“a”,”Q”); -substr()和substring() *var str7=”sadasfasdaf”; /document.write(str7.substr(5,5); / 从第五个开始，向后截取五个字符。 *从第几个开始，向后截取几位 document.write(“”);document.write(“str7.substring(3,5)”); /从第几位开始到第几位结束。3,5） *从第几位开始，到第几位结束，但是不包含最后那一位。2、 js的Array对象 *创建数组（3种）-var arr1=1,2,3;-var

26、 arr2= new Array(3); /长度为3-var arr3=new Array（1，2，3）; /数组中的元素是1 2 3 *属性：length:查看数组的长度 *方法 -contat 方法: 数组的连接 *var arr11=1,2,3; var arr12=4,5,6; doucument.write(arr11.concat(arr12);- join(): 根据指定的字符串分割数组- *var arr13=new Array(3);- arr130=”a”;- arr131=”b”;- arr132=”c”;- document.write(arr13);- documen

27、t.write(“)”;- document.write(arr13.join(“-”); -push():向数组末尾添加元素，返回数组的新的长度 *如果添加的是一个数组，这个时候把数组当作一个整体字符串加进去。 */ push方法 var arr14=new Array(3); arr140=”tom”; arr141=”luck”; arr142=”jack”; document.write(“old array:”+arr14);document.write (“”);document.write(“old length:”+arr14.length);document.write (“

28、”);document.write(new length: +arr14.push(“zhangsan”);document.write (“”);document.write(“new array:”+arr14); var arr15=“aaa”,”bbb”,”ccc” ;var arr16=“www”,”qqq”;document.write(“old array:”+arr15);document.write (“”);document.write(“old lenth:”+arr15.length);document.write (“”);document.write(“new le

29、ngth:”+arr15.push(arr16);document.write (“”);document.write (“new array:”+arr15);for(var i=0;iarr15.length;i+) alert(arr15i)- pop ():白哦是 删除最后一个元素，返回删除的那个元素 *var arr17=“zhangsan”,”lisi”,”wangwu”,”zhaoliu”; doucument.write(“old array:”+arr17); doucument.write(“”); doucument.write(“return:”arr17.pop();

30、 doucument.write(“”); doucument.write(“new array:”+arr17); -reverse():跌倒数组中的元素顺序*var arr18=“zhangsan”,”lisi”,”wangwu”,”zhaoliu”;doucument.write(“old array:”+arr18);doucument.write(“”);doucument.write(“new array:”+arr18.reverse();*js 里面获取当前时间 var data=new Data(); / 获取当前时间 var date=new Data() doucumen

31、t.write (data); /转换成习惯的格式 doucument.write(“”); document.write (data.toLocaleString();* 获取当前年的方法 getFullYear(); 得到当前的年 *document.write(“year:”+data.getFullYear();* 获取当前年的方法 getMonth();得到当前月 *返回的是0-11月，如果想得到准确的值，加1 * var data1= data.getMonth()+1; document.write(“month:”+data1);* 获取当前星期的方法 getDay(): 星期，返回的是（06）* 获取当前日的方法 getData(): 得到当前的天 1-31 * document.write(“day:”+data.getDate();*获取当前小时 getHours(): 获取小时 * document.write(“hour:”+data.getHours();*获取当前分钟 getMinutes(): 获取分钟* document.write(“minute:”