我是学软件工程的一名本科学子,最近开始接触网页设计制作。由于时间限制我不得不在较短的时间内,掌握这一体系的主体核心部分。
其中老师(20年的编程经验)给予的速成教学让我受益匪浅。这里我再献丑再总结部分个人心得,希望对大家有所帮助。
第一点:Html Css Javascripe jQuery这4种语言是写在同一个文本里面,并不是要分成几个模块。他们都是共同为了网页视图的呈现和功能的实现;
第二点:
1.Html:网页编程的主干框架,承担着网页上的几乎所有数据的载入;
通过标签的形式,输入不同属性数据;
主要形式: <标签名A> 注入的内容:包含文字,图片.... </标签名A> 标签一般成对出现,标签可以进行嵌套
<!-- 注释 -->
主要的三个部分
<html>
<head> </head> <!--一般来说,只有6个标签能放在<head>标签内: ① <title>;② <meta>;③ <link>;④ <style>;⑤ <script>⑥ <base> -->
<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}
选择器{ 样式 } <!--选择器包含 body ,p,span-->
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); <!--调用一个提示框 *****window********是顶层对象可以省略-->
document.write(a); <!--在浏览器中显示"1"-->
</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"; <!--显示的Hello world会有其他颜色-->
</script>
</script>
例子3:
定时器:window.setInterval(函数,毫秒数值)
事件驱动:document.onclick()
定义类:function class1(){ 实现操作 }
4.jQuery:最为