本教程版权归小圆和饥人谷所有，转载须说明来源

问答

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

• 有序列表：通常用来表示内容之间的顺序或者是重要性关系，每一个列表都分为多个子项，每一个子项都有相应的编号。
• 无序列表：仅仅用于表示内容之间存在有并列关系，也是分为多个子项，但是子项之前没有相应的编号，只有一个圆黑点用于标识。
• 定义列表：通常用于表示名词或者是概念的定义，每一个子项有两个部分组成，第一部分是名词或者是概念，第二部分是相应的解释和描述。

示例：JS Bin
嵌套：ol>li ; ul>li ; dl>dt+dd

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

设置属性 list-style: none 可去除。

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

• class：在程序中称“类”,CSS中 . 是类选择器的标识，且同一个html网页页面可以无数次的调用相同的class类。当需要给多个选择器统一样式时，可以使用class。
• id：表示着标签的身份，CSS中 # 是id选择器的标识,但是同样ID在页面里只能出现一次，有唯一性。一般用于特殊的样式或者用于js进行DOM操作。

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

• 块级元素：一般作为容器出现，用来组织结构。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。例如：a,i,span,em,img
• 行内元素：也叫内联元素、内嵌元素等；行内元素一般都是基于语义级的基本元素，只能容纳文本或其他内联元素。例如：div,ul,ol,h1-h6,p

区别：

| | 独占一行 | 能设置宽高 | margin,padding值 |
| :------: | :-------: | :--------: |
| 块级元素 | 是 | 是 | 四个方向都可以设置 |
| 行内元素 | 否 | 否 | 上下方向不可设置 |

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

• display: block：指定对象为块元素
• display: inline：指定对象为行内元素
• display: inline-block：指定对象为行内块元素

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

Paste_Image.png

有三个div元素设置了class="wrap"，这样可以方便给多个选择器统一样式；还有三个划分结构的div元素设置了id属性，体现了id属性的唯一性。

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

语义化：用正确的标签做正确的事情。让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的；搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO；使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

细节：

• 尽可能少的使用没有语义的标签，如：div、span。

• 语义不明显，既可以使用p也可以使用div的条件下，尽可能使用p，因为p在默认情况下有上下间距，对兼容特殊终端有利。
• 不要使用纯样式标签，用css代替，如b，i，u，font。
• 需要强调的文本，可以用strong或者em标签，strong默认样式是加粗（不要用b），em默认样式是斜体（不要用i）。
• 使用表格时，标题要用caption，表头用thead，主题用tbody包围，尾部用tfoot包围。表头和一般的单元格要区分开，表头用th，单元格用td。
• 表单域要用fieldset 包围起来，并用legend标签说明用途。
• 每个input标签对应的说明文本都要用label标签，并且通过为input设置id属性，在label标签中设置for=someid来让说明文本和对应的input标签对应起来。

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

form表单:

• 表单用于搜集不同类型的用户输入（搜集用户信息）
• 用户提交表单时向服务器传输数据，从而实现用户与 Web 服务器的交互

input标签：

• 单行文本框<inputtype="text">默认值是 type="text"
• 密码框<inputtype="password"/>
• 单选按钮<inputtype="radio"/>
• 复选框<inputtype="checkbox"/>
• 隐藏域<inputtype="hidden"/>
• 文件上传<inputtype="file"/>

9. post 和 get 方式的区别？

• 安全性：get 方式不够安全，以 url 方式进行提交 post 以请求实体提交，不会显示地址栏，足够安全
• 提交大小限制：get 方式提交的内容大小有限，一个地址栏放不了多少东西，1k 左右；post 大小无限制，可以放大文件（音频、视频、图像。。。）

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

作用是给表单起名，为了便于我们操作 <form name="regFrm"/> 通常我们给表单起名都遵循这么个规则，前面的 reg 是这个表单是干什么的（reg 注册）后面以 Frm 结尾，就是 form 的一 个缩写。

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

<button>提交</button>：只是单纯的能被点击的按钮，点击它什么也不会发生。
<a class="btn" href="#">提交</a>：实际上还是链接，点击后跳回页面顶部。
<input type="submit" value="提交">：语义化的提交按钮，点击后会提交所有input中的输入信息。

12. radio 如何 分组?

通过设置相同的name值进行分组。

13. placeholder 属性有什么作用?

用于设置可描述输入字段预期值的提示信息，该提示会在输入字段为空时显示。

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

隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息（暂存数据），以利于被处理表单的程序所使用。
例如：在编写表单页面的时候加入一行隐藏的内容，尽管隐藏域的数据在页面不显示，但在表单提交后会一起提交到后台。当有人恶意伪造表单的时候，无法伪造隐藏域的内容，后台看不到隐藏域的数剧即可知道数据是伪造的。