问答

---

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

答：

• 有序列表应用于有排列顺序的项目，适用于某些需要数字排列的排版项目等。ol里嵌套li，li里也能再嵌套新的ol。
• 无序列表应用于并列的项目类型，例如网页导航，产品大全等。ul里嵌套li，li里也能再嵌套新的ul。
• 自定义列表更倾向于HTML的语义化，有列表头dt标签，有dd列表内容标签，适用于某些特定的项目类型，这些语义化的标签便于开发者阅读，同时让浏览器的爬虫和机器很好地解析。dl嵌套dt和dd，dt下能包含多个dd。

 <ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

<ul>
      <li>无序列表</li>
      <li>无序列表</li>
      <li>无序列表</li>
      <li>无序列表</li>
</ul>

<dl>
      <dt>列表头</dt>
      <dd>列表内容</dd>
      <dd>列表内容</dd>
      <dd>列表内容</dd>
      <dt>列表头</dt>
      <dd>列表内容</dd>
      <dd>列表内容</dd>
      <dd>列表内容</dd>
  </dl>

• 相关示例代码

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

答：

• 通过给li标签加入list-style:none样式来去除。
• 相关示例代码

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

答：

• class是可以重复使用的某个类名，而id是独一无二的存在。id在样式的优先级上高于class，同一个元素可以添加多个class。
• 在网页的布局中，对于某块单独区域并且不会重复使用，可以选择id类名，比如页头区域、内容区域、页脚区域。对于重复性使用的模块，可以用class类名。

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

答：

• 行内元素的占用空间是它自身的内容宽度，块级元素占用一整行。行内元素可以并排显示，并且可以利用行高来撑开占用空间。
• 块级元素：
  div p h1-h6 table tr ul li dt dd dl form
• 行内元素：
  a span img input button em textarea

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

答：

• display:block 可以使行内元素拥有块级元素的属性，比如宽、高等
• display:inline可以使块状元素拥有行内元素的特性，比如行内显示、div包裹下设置样式水平垂直居中等。
• display:inline-block可以使元素同时拥有行内元素的特性与块状元素的属性。

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

答：

• 主要是一个网页的基本大致结构，id="header"对应了页头，页头里有nav和logo，id="content"对应了内容区，内容区里有aside和main，id="footer"对应了页脚。
• .wrap{width:900px;margin:0 auto}是为了让页面内容自适应居中。

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

答：

• html与css的语义化是为了便于开发者更好地阅读，同时让浏览器的爬虫和机器很好地进行渲染解析。
• 注意的细节有：1. 合理的分层 2. 合理的标签 3. 合理的命名

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

答：

• form表单用于把用户输入的数据提交到后台。
• type="text": 用于输入文本
• type="password": 用于输入密码
• type="radio": 单选框，用于单选
• type="checkbox": 复选框，用于多选
• type="textarea": 文本域，用于输入多行文本
• type="hidden": 隐藏域，用于暂存数据或者安全性校验

9. post 和 get 方式的区别？

答：

• get方法可以在URL上看到数据，不安全。post方法不会。
• get方法依据浏览器的限制只能提交少量数据，post方法依据服务器负载来限制数据的大小。

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

答：

• 主要是让后台查到提交数据的相关类型。比如name="用户名" value="小明"，后台就能收到用户名：小明这样简明的数据格式，方便查找与管理。

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

答：

• button标签是个单独的按钮控件，不提交任何信息。
• a标签是个超链接标记
• type="submit"是个提交按钮控件，可以提交信息到后台。

12. radio 如何分组?

答：

• 需要给同一组的radio添加值相同的name属性。

13. placeholder 属性有什么作用?

答：

• 作为展示相关的提示信息。

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

答：

• 隐藏域是个表单内部的隐藏控件，用户看不到，表单提交后，后台能获得属性值，用于存储数据，或者安全性校验，可以防止用户伪造表单造成的不安全影响。