美文网首页
任务6作业

任务6作业

作者: 饥人谷_醉眼天涯 | 来源:发表于2017-08-31 10:50 被阅读0次
    1、CSS的全称是什么?

    Cascading Style Sheets 层叠样式表

    2、CSS有几种引入方式? link 和@import 有什么区别?

    3 种 内联样式 内部样样式 外部样式
    区别:@import 放在任何的样式里面 它是css语法,加载比较慢,不建议使用
    而link 是html 标签 可以放在<html></html> 这对标签里的任何位置

    3、以下这几种文件路径分别用在什么地方,代表什么意思?
    • css/a.css
      相对于当前HTML所在位置的css文件路径。
    • ./css/a.css
      和css/a.css 是一个意思,因为./ 就代表当前的意思。
    • b.css
      和HTML文件和b.css文件处于平行位置,也可以说,它们的父级文件夹是同一个文件夹。
    • ../imgs/a.png
      ../ 代表是上一级。也就是说从当前这个文件先回到上一级,然后进入imgs目录,再找到a.png
    • /Users/hunger/project/css/a.css
      绝对路径,在本地的时候可以用,如果上传服务器的话,那么是不可以的。而且名字太长。
    • /static/css/a.css
      代表主域名下的css,如果开启服务器为http://localhost:8080
      那么就是http://localhost:8080/static/css/a.css.而此时如果你
      正好在开启服务器的目录下有static文件夹下里有css文件夹,同时
      css文件夹下有a.css。那么就不会出错。
    • http://cdn.jirengu.com/kejian1/8-1.png
      比如是我在html文件里写![](https://img.haomeiwen.com/i7634882/f09b649c7759b7bb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 表示我在我写的这个页面里展示了这个图片。就是等同于图片链接。
    4、如果我想在js.jirengu.com上展示一个图片,需要怎么操作?

    如果是本地图片,那么你就需要先上传到图床,比如七牛,然后会自动的给你生成一个图片外链。
    复制图片外链,放在img标签的src属性里就可以。
    如果是网上图片,只要把图片链接,复制,同样放在img标签的src属性里就可以了。

    5、列出5条以上html和 css 的书写规范

    (1)语法不区分大小写,但建议统一使用小写
    (2)不使用内联的style属性定义样式
    (3)id 和class使用有意义的单词,分隔符建议使用-
    (4)有可能就是用缩写
    (5)属性值是0的省略单位
    (6)块内容缩进
    (7) 属性名冒号后面添加一个空格

    6、截图介绍 chrome 开发者工具的功能区

    按 f12 打开

    点击Network

    一般调试一些ajax接口的时候有用


    Network.png

    Name 下为所有请求
    header 请求文件的头部 可以看到我们向接口传递的那些数据。
    response 后台给我们的那些东西,一般是字符串,json格式的字符串preview 在这个下面我们看到的是 json格式的字符串被解析为json格式

    点击element
    Element.png

    如果想要修改页面上的某个元素可以直接在此区域进行修改,直接点击想要修改的元素,然后右键-->检查


    Gmai.png
    飞机.png

    将原本的Gmail 改成了飞机。
    在右边的style区 可以添加样式


    Style.png
    blue.png
    飞机blue.png
    点击 console
    Console.png

    可以看到网站的一些信息。比如有没有错误
    以及网站的console.log的一些内容。同时可以查看网站js的全局变量
    自己也可以在控制台运行js代码。原因是你的代码就是全局作用域里的
    而,控制台就是全局作用域。

    点击 souce区

    这里主要用来调试,先打个断点,然后刷新


    source.png

    可以看到变量值


    scope.png
    这里是可以进行单步调试。
    调试.png
    点击application

    就主要查看Cookie。


    application.png

    相关文章

      网友评论

          本文标题:任务6作业

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