前端基础（问答4）
keywords：三种列表，语义化，class与id，行内元素（inline elements），块级元素（block elements），display，表单，post与get，input，button。
-
有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
列表.PNG
嵌套是使列表变得更为强大的一种能力，每一个列表都有可能放置在另一个列表当中，并可以连续嵌套。但在嵌套时要注意语义化使用。最常用的嵌套是有序列表的嵌套和无序列表的嵌套，以及相互间的嵌套。
嵌套列表的窍门是：无论什么时候，都要注意每一个列表和列表项在哪里开始，又将在哪里结束。唯一能放在<ul>和<ol>标签内的是<li>标签，能放在<li>标签里面的是<ol>和<ul>标签。
嵌套列表.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的使用及命名方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task7</title>
<style type="text/css">
.wrap{
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>侧边栏</div>
<div>中心区块</div>
</div>
</div>
<div id="footer">
<div class="wrap">这里是footer</div>
</div>
</body>
</html>
从结构上看：利用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命名时，注意标签或者名称符合所希望达成的效果。比如<p>表示段落，<h1>表示标题，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：隐藏域，用户看不到，用于暂存数据或安全性校验。
-
post 和 get 方式的区别？
get和post都可以用于向服务器提交数据，但各自又有不同的特点：
1、安全性：get提交的数据会直接显示在url上，post不会；
2、数据大小：get提交的数据收到url限制，post不受url限制,受服务器限制；
因此，get常用于向指定资源请求数据，post常用于向指定资源提交要被处理的数据。
-
在input里，name 有什么作用？
input的name属性用于定义input元素的名称。单选时，要保证各单选的name相同。
-
<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？
提交.PNG
-
radio 如何 分组?
将隶属于同一组的radio赋予相同的name。
单选分组.PNG
-
placeholder 属性有什么作用?
placeholder可以为input的文本框等显示默认的文本提示。
placeholder.PNG
-
type=hidden隐藏域有什么作用? 举例说明
在input中使用type=hidden，隐藏的信息用户不可见，，但表单会将隐藏文本发送至服务器。
隐藏域
