【嘉兴东臣php】HTML+CSS+JS基础学习笔记
【嘉兴东臣php】HTML+CSS+JS基础学习笔记
烧肉啊 发表于2年前
【嘉兴东臣php】HTML+CSS+JS基础学习笔记
  • 发表于 2年前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 【HTML】 【CSS】 【JS】

<!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)
×
烧肉啊
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: