您的位置：首页 > Web前端 > JQuery

Html Css Javascripe jQuery 速成经验 support by Mr song 第五周作业

2016-04-03 21:22 309 查看

我是学软件工程的一名本科学子，最近开始接触网页设计制作。由于时间限制我不得不在较短的时间内，掌握这一体系的主体核心部分。

　　　其中老师（20年的编程经验）给予的速成教学让我受益匪浅。这里我再献丑再总结部分个人心得，希望对大家有所帮助。

　

　第一点：Html Css Javascripe jQuery这4种语言是写在同一个文本里面，并不是要分成几个模块。他们都是共同为了网页视图的呈现和功能的实现；

　　

第二点：

1.Html:网页编程的主干框架，承担着网页上的几乎所有数据的载入；

　　

　　　通过标签的形式，输入不同属性数据；

主要形式： <标签名A> 注入的内容：包含文字，图片.... </标签名A> 标签一般成对出现，标签可以进行嵌套



主要的三个部分

<html>

　　　　<head> </head> 

<body> </body> 

</html>

<body>中的主要标签 <h>标题 <p>段落结束自动空行 <br/>换行 单个标签 <div>一个逻辑部分 <table>表格 <a>链接 <input>表单

2.css：控制html内容的显示样式：入字体大小，颜色，字体加粗

　　　　css分为三种类型：按优先级别来

内联式>嵌入式>外部式

　　　　内联式：置于<body>中一些的标签的开始标签里面。 <body> <p style="color:red;font-size:12px";>输入的数据</p> </body>

嵌入式：置于<head>中<head> <style type="text/css"> p{color:red;font-size:12px} </style> </head>

　　　　外部式：<head><link href="style.css" rel="styleheet" type="text/css"/> </head>然后新建一个文本名为style.css p{color:red;font-size:12px}

选择器{ 样式 } 

3.html 、css核心：DIV加css布局

盒子模型：网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

保持网页中元素在不同版本的浏览器中呈现出相同的大小，需要根据情况对DIV的样式进行划分；

Html的元素类型可以分为三类：块级元素可以定义所占据的空间宽高，非块级元素不可以

　　　　　　块级元素：div p h1~h6 等

　　　　非块级元素：ing span li 等

行内块级：

文档流：1.正常文档流：从左到右，从上到下（可用性小）；

　　　　　　　 2.浮动文档流： float：left 向左浮动 right 向右浮动；（由正常流转到浮动流后必须切回到正常流，不然后面的逻辑部分都将进行浮动定位）

　　　　　　　 3.绝对流：

　　　　　　　　　　　　绝对定位：由离自己最近的有定位能力的父类的块内左上角进行定位（含有position关键字），找不到则以body为父类

　　　　　　　　　　　相对定位：（从原本位置偏移，原本位子做参考点）

　　　　　　　　　　　　//有position的div便具有相对定位

4.Javascript（js）：一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，不需要编译

　　　　　　　　分为三部分：

　　　　　　　　 ECMAscript(语法）

　　　　　　　　 BOM（浏览器对象模型）

　　　　　　　　 DOM(文档对象模型） DOM是BOM的子集

　　　　　　　　核心特征：基于对象 window.alert（a）对象.方法（参数）；

　　　　　　　　放在html文件中使用时需要调用<script> </script>

例子1：

　　　　　　　　<script>

　　　　　　　　var a=1; 

　　　　　　　　window.alert(a); 

　　　　　　　　document.write(a); 

</script>

　　　　

　　　　例子2：

　　　　　　　　javascript与css交互：

　　　　　　　　<h1 id="hh">

　　　　　　　　　　　　Hello world!

　　　　　　　　</h1>

　　　　　　　　<script>

　　　　　　　　　　var a=1;

　　　　　　　　　　var hhh=document.getElementById("hh");

　　　　　　　　　　var s=hhh.style.color="#ff000"; 

　　　　　　　　</script>

　　　　　　　　</script>

　　　　　　例子3：

　　　　　　　　定时器：window.setInterval(函数，毫秒数值)

　　　　　　事件驱动：document.onclick()
　　　　　　　　定义类：function class1（）{ 实现操作 }

4.jQuery:最为流行的Javascrip框架

　　使用时需要下载jQuery库文件，

　　显著特点：选择器$("# ").html();

入口函数：　　$(function(){})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航