文档章节

【嘉兴东臣php】HTML+CSS+JS基础学习笔记

烧肉啊
 烧肉啊
发布于 2015/12/13 20:58
字数 2103
阅读 13
收藏 0
点赞 0
评论 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<HTML>

元素和标签的区别

元素是对HTML中所有文本文件的统称;标签是例如<input></input>这种有闭合需要的文本,<br/>这种也是标签。总的来说,所有标签都是HTML元素,HTML元素包含除标签外的HTML文本。所有元素标签必须准守闭合规则。

HTML组成

HTML能构建web页面的布局,它有固定的框架,即申明,<title/>,<head/>,<body/>。这体现了其严谨性。HTML也是开放的,因为基础框架搭建好了,其内部的布局是自定义的。

 学习HTML的见解

个人感觉想要设计出好的界面,必须学会标签的嵌套。想对于CSS样式设计,JavaScript脚本语言,标签的灵活运用更是HTML的精髓,当然把三者结合起来才能设计出近完美的web页面,缺一不可。

标签特性

例如标签有头有尾<input><input/>,如果不在标签内部添加内容还可以这样写<input/>。

标签内部还可以有很多的属性,Type,Id,Class,value等等。

简单介绍,Type=""是写标签的样式内容,还有一些这个标签才有的属性的。Id和Class在CSS中介绍

value这个属性不是所有标签都有用,例如input,button这种标签才有用。

HTML的标签注重层层嵌套,并且在运用标签之前我们应该了解每个标签的特性,每个属性的特性。

元素还分行内元素和行外元素,区别在于行内元素不能设置长宽,有的行外元素会引起换行。

前言:在html、css、Javascript中注意代码书写工整,命名的时候

注意形式可以采用_下划线如niws_inpyt或者驼峰inisMadad,书

写标签的时候最好把结尾也一起写了如<input></input>

<Head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

CSS的主要作用是给元素设置样式,让web页面更好看。

为什么在CSS中设置样式就可以体现在元素上呢?

CSS样式有三种写法

(一)可以直接在标签内部写

(二)写在Head中,然后给标签添加Id,Class,在head中用Id选择器,Class选择器,选择这个标签,把样式写在选择器中

(三)写在外部文件中,同样给标签添加标签,在外部文件引用。 标签内部的Id,Class如上面所说,是给选择器提供选择特征用的。

    在外部引用要在Head中写

    <link type="text/css" rel="stylesheet" href="xxx.css" />  xxx是路径

如果样式些在标签内就可以直接用,如果写在head和外部文件中通过选择器元素就可以引用CSS样式。

    我用到的属性如下:

    body{

        padding:0px;

        margin:0px;

    }

    body是小标签之王,一般要写上面这个在css中,不要问为什么。

    float  浮动    float:top;   float:right ; float:bottom; float:left; 上右下左浮动  

    为什么是上右下左呢?没有为什么

    margin 外边距   margin-top:0px;      margin-right:0px;   margin-bottom:0px;   margin-left:0px;

     上右下左是因为如果不表明方向 如  margin;1px 2px 3px 4px;  默认方向就是 上 右 下 左

    padding  内边距     同上

    width:宽;  宽可以用px   也可以用百分比%

    height: 高;

    display:none;隐藏标签

    display:标签成块,可以将行内元素设置成行外元素

    display:inline;设置标签成为行内元素;

    text-decoration:none;  取除下划线

    background-color:背景颜色

    background-image:背景图片

    background-position: 切图片

    background-repeat:背景图片不重复

    background-attachment;fixed不滚动,scroll滚动

    border:边框

    border:1px solid #FFF;边框设置

    font-size:字体宽度

    font-weight:字体粗细

    字体颜色直接用color

    position:relative;相对定位     相对于

    position:absolute;绝对定位

    opacity:0.5;透明度

    z-index:1层次设置   和   定位一起用   数值越高叠在越前面

    clear:both;  如果想要换行就清除

    overflow:hidden;   如果标签的内容溢出了,是否清除溢出部分

    此处省略3000字。。

</style>

<script type="text/Javascript">

Javascript是页面脚本语言,主要的作用是让元素动起来,不仅仅局限于展现样式。

JS通过在标签中设置相关的js属性来调用js函数。例如:在标签中写<input onclick="某某()">onclick属性,调用某某()  函数,注意:别忘记写()。

Javascript一般写在Head中,或者直接外部引用。外部引用要在head中写

<script src="xxx.js" type="text/Javascript"></script>xxx是路径

JS不同于其他语言,它同意用var声明变量,用const声明常量

JS运算有五种运算符

    (一)算术运算符:+(加)

                                 -(减)

                                 *(乘)

                                 /(除)

                                ++(自增)

                                注意: i=5,  a=i++  结果 a=5  i=6 i先赋值给a  然后再自增;

                                         i=5, a=++i  结果 a=6 i=6  i先自增,再赋值给a;

                                --(自减    机制和自增一样)

                                 %(取余) 

    (二)赋值运算符:= (例子:a=5 右边的量把值赋给左边的量)

                                +=(例子:a+=5 即a=a+5)

                                 -=(a - = 5 即a=a-5)

                                 *=( a*=5 即 a=a*5)

                                 /=(a/=5即 a=a/5)

                                 %=(a%=5即a=a%5)

    (三)比较运算符:比较运算符的结果只有两种  true   false

                                ==(a==5 a等于5)

                                !=(a!=5 a不等于5)

                                >(a>5  a大于5)

                                <(a<5  a小于5)

                                >=(a>=5   a大于等于5)

                                 <=(a<=5  a小于等于5)

    (四)逻辑运算符:  逻辑运算符中 零和false是一样的。运算顺序都是从左到右

                                 && 与(a&&b 满足这个运算符的条件是a和b都为true,否则就为false)

                                   || 或 (a||b 满足这个运算符的条件是a或者b为true,就为false,a和b都为false才为false )

                                 ! 取反(a=5,b=5    !(a==b)为false;a=3,b=5   !(a==b ) 为true)

    (五)条件运算符   (  a ; b  ?  c  )  运算机制:  a的运算满足b则为b,否则等于c

                                注意:(a;b?)、(a;?c)、(a;?)(;b?c)、(;?c)、(;?)都是对的

JS条件判断

    (一)

        if(){    }    else{    }     判断机制是如果满足if括号中的条件就执行if后面{}中运算,否则就执行else后面{}中的运算

    (二) if(){    }

                    else if(){   }

                            else {     }

                                             判断机制是如果满足if括号中的条件就执行if后面的{ }中的运算,再判断是否满足第二个if ()中的运算,都不满足才执行第二个else中的运算。注意 这种条件判断机制中德if是平级的

    (三)

            do{

                        }

                while()

                    判断机制是先在do中判断,如果不符合do中的条件就跳出这个循环,如果符合再在while中运算,

    (四)

                while{()

            do{     }

                    先做一次判断,再判断,如果不符合条件就跳出这个循环

    (五)

        switch(表达式)

                {

        case  值 :   语句 break;

        case  值 :   语句 break;

        case  值 :   语句 break;

        case  值 :   语句 contiue;

        case  值 :   语句 break;

        case  值 :   语句 break;

        default :n break;

                 }

        判断机制:表达式的值等于某个case后面的值时,执行这个case的语句 ,如果后面是break表示直接退出这个判断条件语句,contiue表示跳过这个语句,按顺序执行下面的语句,default表示如果case的值没一个满足表达式的,就默认执行default语句,然后跳出。

        .innerHTML    作用是把js运算结果显示在web的特定位置中

<script>

<Head>

<body>

body中写标签(元素)。

目前认识的标签如下:

    <table> 定义表格

        <tr>表行

        <th></th>表头

        <td></td>表元素

        </tr>

    </table>

tr  td   th  都必须写在table中。

    <input/> 多功能标签      type属性的不同就是不同的标签 

    botton   按钮标签    submit   提交标签   text    输入标签    ckeckbox多选  radio单选    还有很多,不一一写

    <div></div> div是块元素,会带自动换行光环,想要其不换行就添加inline属性,这样还不如用<span>标签,相当于不换行的<div/>标签。

    <a></a>文字标签,默认有下划线,想要消除就添加属性text-decoration=none属性。a标签一般用于超链接,因为它自带超链接属性 href="xxx"       xxx是路径

    <label></label>文本标签,没下划线,我也分不清a标签和label除了下划线还有什么其他区别 

</body>

</HTML>

 

 

 

© 著作权归作者所有

共有 人打赏支持
烧肉啊
粉丝 0
博文 15
码字总数 11317
作品 0
丽水
读《PHP和MySQL Web开发》

【第一部分】PHP基础与入门 1、PHP学习笔记1:基础知识快速浏览 http://my.oschina.net/bluefly/blog/472673 2、PHP学习笔记2:文件 http://my.oschina.net/bluefly/blog/477601 3、PHP学习笔...

slyso ⋅ 2015/07/14 ⋅ 0

非技术问题,前辈们,帮忙解惑,感激不尽

我是一个大三的学生,明年四月份左右就要开始找实习了。 我之前做过一些正规项目主要有: 我用c#.net做过wp上的两个软件,参加过微软创新杯,后台是webservice,但是比赛结果不佳;还做过桌面...

GatsW ⋅ 2013/11/03 ⋅ 37

分享35本关于PHP的学习书籍(免费下载)

分享35本关于PHP的学习书籍(免费下载) 1、PHP面向对象编程 2、PHP与MVC开发模式 3、PHP面向对象教程(强力推荐) 4、Smarty php模板引擎 5、phpmysqlwebdbs 6、PHP和MySQLWEB开发部分3 7、P...

邓剑彬 ⋅ 2012/12/01 ⋅ 4

【嘉兴东臣php】JS BOM和DOM学习周总结

一.集合 打印数组的两种方法: (未知长度) var list= [2,4,6,8,10]; for(var i=0;i<list.length;i++){ console.log(list[i]); } (超出数组长度,数组值为undefined) var list= [2,4,6,8...

林酥奇奥 ⋅ 2015/12/19 ⋅ 0

php, 不使用模板引擎,如何实现前端和后端协作?

看了一会smarty感觉有点难度,php,不使用模板引擎。 如何实现前端和后端协作?我想把后端的代码先写好,然后再来写前端的工作html+css+js。

Helloall ⋅ 2014/08/03 ⋅ 18

请问一个web开发的问题,请指点~

如何让前端html+css+js开发和后端php+pgsql开发结合起来???这两者要如何结合起来?新学,对这个有点模糊,请各位前辈指点。~

Helloall ⋅ 2014/08/03 ⋅ 2

Spring.NET学习笔记——目录(原)

目录 前言 Spring.NET学习笔记——前言 第一阶段:控制反转与依赖注入IoC&DI Spring.NET学习笔记1——控制反转(基础篇) Level 200 Spring.NET学习笔记2——环境搭建(基础篇) Level 200 Sprin...

长平狐 ⋅ 2012/06/11 ⋅ 1

【ZZ】Python(三):Karrigell与Python Web

听闻:Google内部只使用C/C++,Java和Python三种语言,足以见得Python在未来的发展前景。此前两篇关于Python的学习笔记分别介绍了一些基本知识和爬网页的相关技巧,这一篇着重介绍学习Pytho...

学徒1986 ⋅ 2013/07/29 ⋅ 0

Mini 容器学习目录

Mini 容器学习笔记1——环境搭建(基础篇) Mini 容器学习笔记2——组件元数据(基础篇) Mini 容器学习笔记3——组件的注册(基础篇) Mini 容器学习笔记4——组件的生命周期(应用篇) Mini 容器学...

netcasewqs ⋅ 2011/08/26 ⋅ 0

重新回归

有好长时间不来这儿,也没有发博客了,不知道自己在忙什么。 学习历程:PHP -- C# 最后两者都放弃,去提高自己的字,练了一段时间也没有坚持下来。 我一直坚持下来的事情有两件:一个是锻炼身...

cysky ⋅ 2016/11/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 50分钟前 ⋅ 0

VS2015配置并运行汇编(一步一步照图做)【vs2017的链接在最后】

前言 我是上学期学的汇编,因为有vs又不想用课上教的麻烦的dosbox以及masm32,但是一直没找到高亮插件和能调试的(难在运行不了而找不到答案上,出现的错误在最后放出,还请先达们不吝指点)...

simpower ⋅ 今天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 今天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 今天 ⋅ 0

你真的明白RPC 吗?一起来探究 RPC 的实质

你真的明白RPC 吗?一起来探究 RPC 的实质 不论你是科班出身还是半路转行,这么优秀的你一定上过小学语文,那么对扩句和缩句你一定不陌生。缩句就是去除各种修饰提炼出一句话的核心,而不失基...

AI9o後 ⋅ 今天 ⋅ 0

z-index设置失效?

今天碰到了一个问题,就是在给li设置提示框的时候,有用到遮罩效果,本来想把对应的出现在最顶层,可是不管将li设置的z-index值设为多大,li都没有出现在遮罩层之上。 我在网上查了z-index设...

IrisHunag ⋅ 今天 ⋅ 0

CyclicBarrier、CountDownLatch以及Semaphore使用及其原理分析

CyclicBarrier、CountDownLatch以及Semaphore是Java并发包中几个常用的并发组件,这几个组件特点是功能相识很容易混淆。首先我们分别介绍这几个组件的功能然后再通过实例分析和源码分析其中设...

申文波 ⋅ 今天 ⋅ 0

Java对象的序列化与反序列化

Java对象的序列化与反序列化

Cobbage ⋅ 今天 ⋅ 0

Sqoop

1.Sqoop: 《=》 SQL to Hadoop 背景 1)场景:数据在RDBMS中,我们如何使用Hive或者Hadoop来进行数据分析呢? 1) RDBMS ==> Hadoop(广义) 2) Hadoop ==> RDBMS 2)原来可以通过MapReduce I...

GordonNemo ⋅ 今天 ⋅ 0

全量构建和增量构建的区别

1.全量构建每次更新时都需要更新整个数据集,增量构建只对需要更新的时间范围进行更新,所以计算量会较小。 2.全量构建查询时不需要合并不同Segment,增量构建查询时需要合并不同Segment的结...

无精疯 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部