任务7

作者: 饥人谷_吴迪 | 来源:发表于2016-06-14 19:36 被阅读0次

    课程任务

    问答

    • 有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)? 如何嵌套?
      • 分别使用ol ul dl关键字进行引用。


    <ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
    </ol>

    <ul>
    <li>无序列表,用的最多</li>
    <li>无序列表</li>
    </ul>


    <dl>
    <dt>列表头</dt>
    <dd>列表内容</dd>
    <dt>列表头</dt>
    <dd>列表内容</dd>
    </dl>

    现实结果

    Paste_Image.png

    有序列表在需要多一个序号,有顺序的情况用
    无序列表就是各个元素并列,无先后顺序使用
    自定义列表,更灵活一些,可以改一些表头什么的
    ,更有结构

    • 如何去除列表前面的点或者数字?
      li{list-style:none;}
    • class 和 id 有什么区别?什么时候用 class 什么时候用 id?
      1、在CSS文件里书写时,ID加前缀"#";CLASS用"."2、id一个页面只可以使用一次;class可以多次引用。3、ID是一个标签,用于区分不同的结构和内容,就象名字,如果一个屋子有2个人同名,就会出现混淆;class是一个样式,可以套在任何结构和内容上,就象一件衣服;4、从概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。目前的浏览器还都允许用多个相同ID,一般情况下也能正常显示,不过当你需要用JavaScript通过id来控制div时就会出现错误。
    • 块级元素、行内元素是什么?有什么区别?分别对应哪些常用标签?


      Paste_Image.png

    块级元素 比如 div、 ul、 p、 h1…h6、 table、 tr、 ul、 li、 dl、 dt、 form
    行级元素a、 img、 span、 input、 button、 em、 textarea
    http://www.w3cwhy.com/css-html/html-hkmarka.html

    • display: blockdisplay: inlinedisplay: inline-block分别有什么作用?
      简单讲就是[display:inline] 转化成[内联元素]不换行;display:block转换成块元素,换行;[display:inline]-block内联块元素,既不换行又可以使用块元素所拥有的属性,类似于块元素加了浮动效果,但低版本浏览器对这个不支持。

    • 下面代码是做什么的?抄写一遍下面的代码,注意class和id的使用及命名方式

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8"> --utf8编码
      <style>
        .wrap{ --对wrap类的css样式
          width: 900px; --设定宽度
          margin: 0 auto; -- 上中下的宽度一样
        }
      
      </style>
    </head>
    <body>
      <div id="header">
        <div class="wrap">
          <a id="logo" href="#"><img src=""></a> --引用图片,超链接是#
          <ul class="nav">--建立一个无序列表
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
          </ul>
        </div>
     </div>
      <div id="content">
        <div class="wrap">
          <div class="aside">侧边栏</div>--分区块
          <div class="main">中心区块</div>
        </div>
      </div>
    <div id="footer">设定页脚
      <div class="wrap">这里是 footer</div>
    </div>
    </body>
    </html>
    
    • 如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
      语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.
      第一是分块,合理的分层,第二使用合理的标签,第三合理的命名。选择合适的标签,使用合理的代码结构,合理的命名,便于开发者阅读,同时让浏览器便于解析。
    • form表单有什么作用?有哪些常用的input 标签,分别有什么作用?
      form表单用于与后端服务器进行数据传递,并包含全局属性 action,值为URL,规定当提交表单时向何处发送表单数据。
      method,可选择通过“post”方式或“get”方式进行通信。

    input标签有多种type属性 button 定义可点击的按钮,多数用于启动JS
    - text 定义单行文本输入
    - checkbox 定义复选框
    - radio 定义单选圆圈按钮
    - file 用于上传文档
    - reset 重置form中所以输入
    - submit 定义提交按钮,用于提交所以的输入数据
    - password 定义密码输入字段,用户输入的字符会用星号显示

    • hidden 定义隐藏的输入字段 可用于简单效验

    • post 和 get 方式的区别?
      在使用场景上,get 的语义化理解就是在后端上获得数据,类似索引的方式,用比较少的字符来请求后端返回数据;而 post 更像是本地有比较多的数据要上传到后端,要把数据推上去。 他俩最主要的区别是,get用小数据获取大数据,post用于上传较大数据。

    • 在input里,name 有什么作用?
      name是在input标签内的属性,在表单上传的时候,一个input标签会有一个name=value被上传,name属性定义键,value定义键值。

    • <button>提交</button><a class="btn" href="#">提交</a><input type="submit" value="提交">

      • button方式需要JS脚本的支持
      • 使用 超链接a 标签,不提交表单。
      • input type submit 可以正常提交表单有什么区别?
    • radio 如何 分组?
      通过name设置成一个值就分到一个组了。

    • placeholder 属性有什么作用?
      placeholder属性定义text、textarea、password中的提示文字

    • type=hidden隐藏域有什么作用? 举例说明
      密码不显示明文

    相关文章

      网友评论

          本文标题:任务7

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