前端基础（问答4）

---

keywords：三种列表，语义化，class与id，行内元素（inline elements），块级元素（block elements），display，表单，post与get，input，button。

---

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

列表.PNG

嵌套是使列表变得更为强大的一种能力，每一个列表都有可能放置在另一个列表当中，并可以连续嵌套。但在嵌套时要注意语义化使用。最常用的嵌套是有序列表的嵌套和无序列表的嵌套，以及相互间的嵌套。

嵌套列表的窍门是：无论什么时候，都要注意每一个列表和列表项在哪里开始，又将在哪里结束。唯一能放在

和
标签内的是
1. 标签，能放在
2. 标签里面的是
   和
   标签。
   
   嵌套列表.PNG

   参考：
   W3C Rcommendation-lists
   Creating Lists

   ---

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

   
   清除列表前面的点或者数字.PNG

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

   class是类，表示某一类事物；而id像身份证，具有唯一性。

   两者都能用来选择元素，不同的是：一个类名可以重复使用，而一个id在同一页面只能使用一次。如果元素内容可以纳入同一类，则应使用class，而不是id。

   另外id可以给a链接设置锚点，使页面跳转到指定位置。

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

   块级元素（block element）：
   1、正文单独占据一行；
   2、左右不能出现其他元素；
   3、可以自定义宽高；
   4、可以包含行内元素和其他块级元素；
   行内元素（inline element）：
   1、只占据必要的内容宽度；
   2、左右可以存在其他元素；
   3、不能自定义宽高；
   4、只能包含数据和其他行内元素。

   常用块级元素：div、blockquote、h1-h6、ul、ol、dl、p、table、form等
   常用行内元素：span、em、b、strong、a、img、button、input等

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

   display规定元素应该生成的框的类型。
   display:block，元素将显示为块级元素，元素前后将有换行符，具有块级元素特性。
   display:inline,元素将被显示为行内元素，元素前后没有换行符，具有行内元素特性。
   display:inline-block,元素被显示为行内块元素，与一般行内元素不同的是，元素可以自定义宽高。

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

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

   从结构上看：利用div分成三大块：header、content、footer（命名语义化原则）。在div大块的容器内，布置div小容器，并用class标识，方便应用css。
   从内容上看：header包含a链接、ul无序列表；content包含两个div内容；
   footer包含一个div内容。
   从样式上看：对header、content、footer三块定义宽度900px，并利用margin: 0 auto 使块水平居中。

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

   语义化即在使用标签或者对class、id命名时，注意标签或者名称符合所希望达成的效果。比如

   表示段落，

   表示标题，class=‘header’表示头部。

   尽管从样式上来看，利用其它标签能够达到同样的功能，但为了使代码更易于维护、可读性更强，要注重标签与所想达成的效果想匹配。

   在书写代码的过程中，为了高效维护代码、增强代码可读性，明晰代码结构，需要注意细节：

   1、代码统一小写；
   2、不要忘记doctype声明；
   3、对于属性的值，使用双引号，而不是单引号；
   4、在写样式时，不要让多个属性在同一行，最好每个属性各占一行；
   5、嵌套元素，应该缩进一次；
   

   附两份编码规范，以备学习之用：
   前端代码规范 及 最佳实践
   编码规范 by @mdo

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

   form表单用于用户输入信息，并将信息提交服务器。

   input的输入类型由type属性定义，常用输入类型如下有:

   1、text：创建文本框；
   2、password：创建密码框，星号显示；
   3、radio（单选）：创建单选；
   4、checkbox（多选）：创建多选；
   5、submit（提交）：创建提交按钮；
   6、textarea：文本域，用于输入多行文本；
   7、hidden：隐藏域，用户看不到，用于暂存数据或安全性校验。
   

   参考：
   HTML 标签的 type 属性

   • post 和 get 方式的区别？

   get和post都可以用于向服务器提交数据，但各自又有不同的特点：
   1、安全性：get提交的数据会直接显示在url上，post不会；
   2、数据大小：get提交的数据收到url限制，post不受url限制,受服务器限制；

   因此，get常用于向指定资源请求数据，post常用于向指定资源提交要被处理的数据。

   • 在input里，name 有什么作用？

   input的name属性用于定义input元素的名称。单选时，要保证各单选的name相同。

   • 提交、提交、三者有什么区别？

   

   提交.PNG

   • radio 如何 分组?

   将隶属于同一组的radio赋予相同的name。

   

   单选分组.PNG

   • placeholder 属性有什么作用?

   placeholder可以为input的文本框等显示默认的文本提示。

   

   placeholder.PNG

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

   在input中使用type=hidden，隐藏的信息用户不可见，，但表单会将隐藏文本发送至服务器。

   

   隐藏域