任务7-HTML4

1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下 使用哪种（重要）？如何嵌套？

创建一个HTML列表有三种方式，有序列表、无序列表和自定义列表，效果如下：

HMLT列表.png

三者区别：

• 有序列表（ordered list）
  ，在列表项（list item）
  1. 有逻辑顺序的情况下使用。
  2. 无序列表（unordered list）
     ，在列表项
     • 表示并列关系的情况下使用。
     • 自定义列表（definition list）

       ，列表下每一项有一个定义术语

       和一个定义描述

       ，在你需要解释列表里的内容时使用。

     嵌套：
     把一个元素放在另外一个元素中称为"嵌套"，在列表中，可以把一个

     或者
     作为某个
     • 的内容，这样就在列表中嵌套了另一个列表。
       效果如下：
       
       

       嵌套.png

       2.如何去除列表前面的点或者数字？

       直接定义li的css为list-style-type：none即可。
       效果如图：

       

       消除列表前面的点或者数字.png

       3.class 和 id 有什么区别？什么时候用 class 什么时候用 id？

       class和id的区别：

       • 对于html而言，id的属性值是唯一的，class的属性值是可以多次出现的。举个列子，class就好像一个俱乐部，一个俱乐部里面有很多人，一个人也可以参加很多俱乐部，而id就好像一个人的身份证号，这个号码是你独有的。

       id还具备一个锚点功能，给链接设置一个锚点，页面就能跳转到锚点位置。

       • 对于CSS而言，id和class都是选择器，不同的地方在于权重不同，id的优先级高于class。

       什么时候用class什么时候用id：

       在绝对确定这个元素只会出现一次的情况下，应该使用ID。如果以后可能需要相似的元素，就使用类。

       4.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？

       • 块级（block）元素，总是会在新行上显示，就好像将内容分块；行内（inline）元素，和其他元素都在一行上。
       • 块级元素，能容纳其他块元素或内联元素；行内元素，只能容纳文本或者其他行内元素。
       • 块级元素中宽高和内外边距都可以设置的；行内元素设置宽高是无效的，它本身内容的宽度就决定了它的宽高，不能手动设置，行内元素的左右margin和padding是有效的，上下的margin和padding是不占据空间的，但是设置边框能看见。

       效果如下：

       
       
       

       块级元素和内联元素区别.png

       常用的块级元素：div、p、h1~h6t、table、tr、ul、li、dl、dt、form等
       常用的行内元素：a、span、img、input、button、em、textarea等

       5.display: block、display: inline、display: inline-block分别有什么作用?

       display:block：把元素显示为块级元素，具有块级元素的特性。
       display： inline：把元素显示为行内元素，具有行内元素的特性。
       display: inline-block： 把元素显示为行内块元素，除了具备有行内元素的特性外，还可以设置宽高以及内外边距了。
       IE8以下不支持该标签。

       6.下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式。

       
       
       
           
           
       
       
           
       
               
       
                   
                   
       
                       
       导航1
                       
       导航2
                       
       导航3
                   
               
           
           
       
               
       
                   
       侧边栏
                   
       中心区域
               
           
           
       
               
       
                   这里是footer
               
           
       
       
       

       这段代码将将页面分为了3大块，每一块使用id命名，分别为头部，内容和底部。头部区里有导航栏，内容区里有侧边栏和中心区域，底部区有footer。这些内容都归于同一个类：wrap，在这个类中定义了宽度和外边距，使页面保持水平居中。
       整段代码合理地使用id和class命名各个区域，结构一目了然，可读性强。

       7.如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节？

       • hmlt语义化就是根据你想要表达的效果正确合理的使用标签，css语义化就是在使用class或者id命名的时候，命名的结果能表达你的意图。
         语义化能让你的页面结构更清晰，代码更加便于阅读和维护。

       -平时写代码的时候要注意统一你的命名风管和大小写的规则，命名的时候如果有多个单词组成，要使用“-”符号链接。

       8.form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

       from标签用于为用户于创建HTML表单，用户可以在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息，表单就能向服务器传输这些信息数据。

       属性	值	描述
       accept-charset	charset-list	规定服务器可处理的表单数据字符集。
       action	URL	规定当提交表单时向何处发送表单数据。
       autocomplete（H5新增）	on off	规定是否启用表单的自动完成功能。
       enctype	见说明	规定在发送表单数据之前如何对其进行编码。
       method	get post	规定用于发送 form-data 的 HTTP 方法。
       name	form_name	规定表单的名称。
       novalidate（H5新增）	novalidate	如果使用该属性，则提交表单时不进行验证。
       target	_blank _self _parent _top framename	规定在何处打开 action URL。

       说明
       enctype 属性可能的值：

       • application/x-www-form-urlencoded
       • multipart/form-data
       • text/plain

       input常用标签：

       • 文本域，type="text"，用于输入文本。

       
          
       
            姓名：
          
       
       

       

       文本域.png
       • 密码域，type="password"，用于输入密码

       
         
       
              密码：
       
       
       

       

       密码域.png
       • 单选按钮，input type="radio"，相同的name值分成一组，成为单选状态。

       
         
       
             男
              女    
       
       
       

       

       单选按钮.png
       • 复选框，input type="checkbox"，checked属性表示默认选中

       
       
              爱好：dota2
                   旅游
              
       
       

       

       复选框.png
       • type="textarea"，多文本域，用于输入多行文本。

       
         
       
             评论：
        
       
       

       

       文本域.png
       • 下拉列表,selected表示默认选中。

       
         
       
             
             Value
             Saab
             Fiat
             Audi
             
        
       
       

       

       下拉列表.png
       • 隐藏域，input type="hidden"，用户看不到显示效果，但是表单确实存在，依旧可以向服务器发送数据，可用于安全性校验。
       • 提交按钮，type="submit"，把form所有数据打包发送给后端服务器。
       

       提交按钮.png

       9.post 和 get 方式的区别？

       参考w3c上面的解释method 属性

       • get方法适合发送数据大小不超过1kb的小表单，而且传输性能更好，而对于有很多字段或者很长文本域的表单来说，就应该采用post方法。
       • 如果考虑安全性，建议使用post方法。get方法会将表单数据直接放在URL上，还可以从浏览器的日志文件中进行摘录。而post方法没有安全方面的漏洞。
       • 如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 GET 方法，因为该方法允许把表单这样的参数包括进来作为 URL 的一部分。而另一方面，使用 POST 样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统 标签的内容.

       另外还找到一些关于post和get之间区别的博客，比如浅谈post和get的区别，不过现阶段很难理解，日后使用起来再好好研究。

       10.在input里，name 有什么作用？

       name 属性规定 input 元素的名称，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
       另外在单选按钮中，相同的name值分成一组，成为单选状态。

       11.提交提交、三者有什么区别？

       提交:创建一个提交按钮，需要绑定一些JS事件点击才会有反应。
       提交,这是一个class为btn的链接。
       ，创建一个提交按钮，把form所有数据打包发送给后端服务器。

       12.radio 如何 分组?

       通过设置name值，name值相同，表示一组，可以实现单选。

       
             男
              女    
       
       

       

       单选按钮.png

       13.placeholder 属性有什么作用?

       placeholder用来显示在输入框提示的信息。

        姓名：
       

       

       placeholder属性.png

       14.type=hidden隐藏域有什么作用? 举例说明

       

       hidden.png
       
       从图中可以看，用户是看不到 type=hidden这一行的。
       但是点击提交按钮后在后台是可以看到 value=aaaaa的数据已经发送了。
       

       后台数据.png
       
       

       所以隐藏域可以用在某些安全校验上。

       ---

       本文版权归饥人谷_任磊和饥人谷所有，转载请注明来源。