Html Css Javascripe jQuery 速成经验 support by Mr song <根据自己所掌握的会修改更新> 第五周作业

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

   其中老师(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:最为

        

时间: 2024-09-30 06:11:49

Html Css Javascripe jQuery 速成经验 support by Mr song <根据自己所掌握的会修改更新> 第五周作业的相关文章

【css】jquery.pngFix.js解决透明问题

/** * -------------------------------------------------------------------- * jQuery-Plugin "pngFix" * Version: 1.2, 09.03.2009 * by Andreas Eberhard, [email protected] * http://jquery.andreaseberhard.de/ * * Copyright (c) 2007 Andreas Eberhard *

区域及分离、Js压缩、css、jquery扩展

后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱佛脚.深圳最近的天气反常,许多人感冒了,我也成为其中之一,大家注意身体... 这一篇,我来简单的讲一下接下来项目中会用到的一些杂七杂八的技术. 区域及分离 在15.ASP.NET MVC入门到精通——MVC-路由中,我已经简要说明了区域的分离.

先学习Emmet(zend coding)然后引发css 或者jquery选择器的思考

1.使用VS或者其他编辑器开发HTML快速编码.使用emmet这种简单易用的语法无疑是最快捷的 首先来看这段代码记住这个基本上emmet就会用了,记住光标放到表达式的尾部按下tab键 1 <!-- 2 html:5 3 1. E 代表HTML标签. 4 2. E#id 代表id属性. 5 3. E.class 代表class属性. 6 4. E[attr=foo] 代表某一个特定属性. 7 5. E{foo} 代表标签包含的内容是foo. 8 6. E>N 代表N是E的子元素. 9 7. E+

动态加载js和css的jquery plugin

一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. Java代码   //how to use the function below: //$.include('file/ajaxa.js');$.include('file/ajaxa.css'); //or $.includePath  = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files 

JavaScript ,Css and Jquery In OpenERP 7.0

From: http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html Hi fellows,                Here i'm showing how can you use  JavaScript ,Css and Jquery In OpenERP 7.0.There is one cool feature added in openERP 7.0 in which yo

基于Animate.css的jQuery动画特效插件

janimate是一款非常实用的基于Animate.css的jQuery动画特效插件.该动画特效插件允许你在jQuery代码中操纵Animate.css的66种动画效果.通过该插件可以简化Animate.css的使用,非常方便. 使用这个插件可以通过jQuery选择器来选择你想要进行动画的元素,然后调用jAnimate()或jAnimateOnce()方法,并传入你想要执行动画效果的名称即可. 效果演示:http://www.htmleaf.com/Demo/201504121666.html

使用CSS和jQuery实现tab页

使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" hre

css选择器jquery选择器异同

css选择器用$("")包起来就成了jQuery选择器   CSS选择器 jQuery选择器 ID选择器 #myID $('#myID') 类选择器 .myclass $('.myclass') 标签选择器 p $('p') 层次选择器 div > strong $('div>strong') css称为伪类选择器jQuery称之为过滤选择器 p:nth-child(1) $('p:nth-child(1)') CSS选择器的效率(从上至下): id选择器(#myid)类选

用jquery实现隐藏列表表单的显示关闭切换以及Ajax方式修改提交对应的那一行的修改内容。

请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 先给大家看看图片效果,大家不要直接复制代码,这样是运行不了的,因为你们数据库和我的不一样,但是你们可以自己读读这个代码,找找对自己有用的,当然我的方法也不是最好的希望大家可以给点意见,感激不尽. (1)点击修改图标 (2)填写修改内容 (3)点击确定修改 jquery与css代码: <style type="text