美文网首页程序猿开发笔记程序媛开发笔记达叔的朋友圈们
前端学习之路-CSS介绍,Html介绍,JavaScript介绍

前端学习之路-CSS介绍,Html介绍,JavaScript介绍

作者: 魔王哪吒 | 来源:发表于2018-08-10 05:39 被阅读19次
    标题图

    CSS介绍

    学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用csshtml中呢?

    style属性方式

    利用标签中的style属性来改变显示样式

    <p style="background-color: #FFF000">
     p标签
    </p>
    

    head中加入style标签

    <head>
     <style type=”text/css”>
      p { color: #FFF000;}
     </style>
    </head>
    

    链接方式

    <link rel="stylesheet" type="text/css" href="head.css" media="screen" />
    

    总结CSS

    选择器名称 {
    属性名:属性值;
    …….
    }

    属性与属性之间用 分号 隔开
    属性与属性值用 冒号 连接

    选择器

    1. class选择器
    2. id选择器

    . class
    # id

    Html

    html为超文本标记语言,通过标签来定义的语言,代码不用区分大小写。

    头标签

    <head></head>
    

    <title>:指定浏览器中标题栏显示的内容。
    <meta>:网页的描述信息。

    在标签中常用:

    字体

    <font size=5 color=red>
    

    标题标签:<h1><h2>…..<h6>

    列表

    <dl>
     <dt>名称</dt>
      <dd>Tom</dd>
     <dt>名称</dt>
      <dd>Tom</dd>
    </dl>
    
    <ol> <ul> <li>
    

    图像

    图像标签:<img>
    图像地图:<map>
    

    表格

    表格标签:<table>
    标题<caption> 表头<th> 行<tr> 单元格<td>
    
    <table border="1" width=”100%”>
        <caption>表格标题</caption>
        <tr algin=”center”>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr algin=”center”>
            <td>dashucoding</td>
            <td>10</td>
        </tr>
    </table>
    

    超链接

    超链接<a href=””>
    
    定位标记<a href=”#标记”>
    

    表单

    • 文本框 text
    • 密码框 password
    • 单选框 radio
    • 复选框 checkbox
    • 提交按钮 submit
    • 重置按钮 reset
    • 按钮 button
    • 图像 image

    JavaScript介绍

    JavaScript是基于对象和事件驱动的脚本语言,为html提供信息的动态交互,安全性高,跨平台性强。JS是基于对象,且是弱类型。

    引入:

    <script src=”test.js” type=”text/javascript”></script>
    

    JavaScript脚本代码嵌入到HTML文档中

    <script language="javascript" type="text/javascript">
        document.write("欢迎来到JavaScript世界!");
    </script>
    
    <script language="javascript" src="javascript.js"></script>
    
    <input type="button" name="mybtn" value="伪URL引入" onclick="javascript:alert('鼠标单击!')"> 
    <script language="javascript" type="text/javascript">
    function clickme()
    {
        alert("鼠标单击!");
    }
    </script>
    
    <form name="myform">
       <input type="button" name="mybtn" value="按钮" onclick="clickme()">
    </form>
    

    脚本代码的位置

    1. <head></head>标记对之间放置
    2. <body></body>标记对之间放置

    变量

    变量名以字母或下划线("_")开头
    变量可以包含数字、从 A 至 Z 的大小写字母
    JavaScript区分大小写

    变量的声明和赋值

    定义变量:var name;
    赋值:name = dashucoding;

    常量

    1. 整型
    2. 浮点型
    3. 字符串型
    4. 数据类型
    5. 弱类型,区分大小写

    数值型

    整型、浮点型
    字符串型
    单引号或双引号引起来
    布尔型
    true, false
    Null、undefined

    运算符

    算术运算符

    +、-、 * 、 / 、%、++、--
    

    比较运算符

    ==、!=、>、>=、<、<=
    

    逻辑运算符

    &&、||、!
    

    条件运算符

    ?:
    

    函数

    function  函数名(参数...){
        执行语句;
        return 返回值;
    }
    

    数组

    var arr = new Array();
    
    for(var x=0; x<arr.length; x++){
        alert(arr[x]);
    }
    

    循环语句

    1. for语句
    2. while语句
    3. for…in语句
    4. 中断循环语句
    for(初始化;  条件;  增量){
        语句;
    }
    
    while(条件){                                  
        语句;             
    }
    
    for(变量  in  对象){
        语句;
    }
    

    结语

    • 本文主要讲解 前端学习之路-CSS介绍,Html介绍,JavaScript介绍
    • 下面我将继续对JavaAndroid中的其他知识 深入讲解 ,有兴趣可以继续关注
    • 小礼物走一走 or 点赞
    送❤

    相关文章

      网友评论

        本文标题:前端学习之路-CSS介绍,Html介绍,JavaScript介绍

        本文链接:https://www.haomeiwen.com/subject/zzbhbftx.html