美文网首页
学习前端之伊始

学习前端之伊始

作者: iOS_July | 来源:发表于2018-11-12 08:35 被阅读7次
  • 什么也不多说,先上段码吧:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>这是一个网页title</title>
    </head>
    <body>
        这是网页body
        <div style="width: 100px;height: 30px;background: red;">
            测试背景颜色
        </div>
        
        <div onclick="this.style.width='1000px';this.style.height='1000px'" style="width: 500px;height: 500px;background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541942197789&di=b2b641be795f361d92cbb4b84572884e&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F1b4c510fd9f9d72a5f992033df2a2834349bbb1a.jpg);">
            测试背景图片(超链),响应点击事件
            <!-- 这是注释信息 -->
        </div>
    </body>
</html>

初衷?
没有什么初衷,如果硬要加一个的话,就当是多捡一枚硬币吧~

初步了解了什么是HTML

知道了CSS样式表的作用

明白了javaScript是用来写事件的


不华丽的分割线


HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
CSS:
  • CSS出现的位置 : 行间、内部、外部.样式表
行间样式表:给单独的标签添加样式

语法:<div style="width:100px"></div>

缺点:不利于修改
内部样式表:样式表写在一个html文件里

语法:把样式写在一对<style></style>标签当中,这个标签对是放在html页面里面的

缺点:内部样式表的作用域只存在当前的页面

EX:
<style>
            div{
                width: 100px;
                height: 200px;
                background: pink;
            }
</style>
外部样式表:把样式写在一个单独的文件里,用到的时候用地址把它引进来就可以了

语法:创建css文件

EX:
CSS-->
div{
    width: 100px;
    height: 200px;
    background: #f00;
}

HTML-->
<head>
        <link rel="stylesheet" href="helloWoldCss.css" />
</head>

不华丽的分割线


补一句:结构、行为、样式 相分离

相关文章

  • 学习前端之伊始

    什么也不多说,先上段码吧: 初衷?没有什么初衷,如果硬要加一个的话,就当是多捡一枚硬币吧~ 初步了解了什么是HTM...

  • 2019-06-14

    我的前端学习之路 最近在闲暇之余在学习前端开发 前端学习之第一步:下载webstorm,开...

  • 2020校招前端面经

    1、时间伊始 转眼就快毕业了,同时想着,从以往的学习硬件转到现在学习前端,已经有一段时间了,而且最近稍有空闲,...

  • 晨之伊始#4 晨之伊始

    11点35,晨搀扶着伊慢慢向小区走去,依旧是漫无目的地谈话,偶尔能听见女孩的笑声。直到伊在小区门口突然停了下来。 ...

  • Android webview-tips

    webview优化 Android学习之 WebView使用小结 Android 各个版本WebView 移动前端...

  • 前端学习之总结

    在正式学习前端之前,看了一些关于此方面的简书文章,受益匪浅 这些都是宏观讲解 从宏观上,讲解了前端的知识。如作用、...

  • 前端学习之jQuery

    选择器 基本选择器 层级选择器(重点)、基本过滤选择器 筛选选择器 使用jQuery操作DOM 样式操作 样式属性...

  • 前端学习之 Ajax

    PHP基础 header header() 用来向客户端(浏览器)发送报头 PHP 表单 PHP_GET数据获取在...

  • 前端学习之AngularJS

    AngularJS是一款由Google公司开发维护的前端MVC框架,其克服了HTML在构建应用上的诸多不足,从而降...

  • 前端学习之CSS

    CSS的使用 CSS三大特性 继承性: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性 层叠性...

网友评论

      本文标题:学习前端之伊始

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