任务七

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

答：

QQ截图20160921191242.png

语义上的区别：有序列表有编号（比如默认的1，2......）来排列列表项目的内容；无序列表有粗体实心黑圆圈来排列列表项目，自定义列表分为列表项目和项目描述；
在列表有明显的顺序的情况下使用有序列表，在列表项目并列的情况下试用无序列表，比如网站的导航条，自定义列表与无序列表用法差不多，但会比无序列表便捷一点。
嵌套：

QQ截图20160921194131.png

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

答：使用list-style:none去除。

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

答：class定义一类元素，而id定义独一无二的元素，id的优先级要高于class。一个html的头、内容和尾部这些独特的用id，同类元素用class，尽量少用id。

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

答：块级元素占用的是一整行，而行内元素占用的是它自身内容的宽度，块级元素不能同行排列，而行内元素是一并排列的；行内元素设置宽高对它自身没有影响，而块级元素可以设置宽高，块级元素可以设置padding和margin，而padding-top、padding-bottom、margin-top和margin-bottom对其没有影响。

Paste_Image.png

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

答：display:block定义元素为块级元素；display:inline定义元素为行内元素；display:inline-block定义元素为行内块元素，可以使元素定义margin，width等，又可以使元素不换行。

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

QQ截图20160921214210.png

这个代码做了一个最基本的网页布局，值得注意的是｛width:900px;margin:0 auto;｝这段代码表示当宽度大于900px时，左右则根据宽度自适应相同值实现居中，当小于900px时，会出现滑条，且块内元素紧贴浏览器边框。

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

答：语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。在平时写代码时要注意命名以及大小写，还要注意标签的合理使用等。

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

答：form表单将用户提交的数据交到后台；
<imput type="text">用于文本输入的单行输入字段（默认只有20字符）；
<input type="password">用于输入密码；
<input type="radio">用于创建单选按钮；
<input type="checkbox">用于创建复选框,加入checked会默认选取哪个；
<input type="hidden">隐藏域，用于隐藏数据，可作为缓存以及校验；
<textarea>文本域，用于写入多行文本；
<select><option>定义下拉列表，加上selected可以默认选取哪个；

9.post 和 get 方式的区别？####

答：1.数据提交方式不同，get提交的数据会出现在url中，而post是看不见的；2.get用于提交少量数据，而post用于提交大量数据；3.get最多提交1K的数据，post理论上没限制，受服务器控制；4.get提交的数据在浏览器记录里看的到，安全性不好。

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

答：name 属性规定 input 元素的名称，name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

11.<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？####

答：<button> 标签定义一个按钮,在 button 元素内部，你可以放置内容，比如文本或图像，这是该元素与使用 input 元素创建的按钮之间的不同之处。但是如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值；<a class="btn" href="#">提交</a>这是链接，点上去会转到相应的页面，没有提交数据；<input type="submit" value="提交"> 可以将表单的数据提交给后台。

12.radio 如何 分组?####

答：radio中name相同的可以实现单选，且要给value值。

13.placeholder 属性有什么作用?####

答：placeholder属性可描述提供输入字段预期值的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

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

答：隐藏域用户看不到，可以用作缓存数据和安全校验
下图的secret极为隐藏域。

Paste_Image.png