1. 有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？使用场景是什么？ 能否嵌套？
   • < ul>无序列表是一个列表，一般用在不需要区分内容前后顺序的信息列表中，默认用圆点，可以用list-style: none;去除。< ul>可以在< li>中添加嵌套。
   • < ol>有序列表是带有数字顺序的列表或列表项，常用在内容有明确的先后顺序的列表中，比如排行榜，默认样式用1.2.3.…标记
   • < dl>自定义列表类似于table，拥有表头，可以对列表项进行描述， 常用于需要分类描述的产品、信息等，列表项前没有标记。< dl>下的表头用< dt>，列表项用< dd>。
     均可以嵌套，下面为饥人谷bin示例
     

1. 如何去除列表前面的点或者数字？
   • 使用样式list-style: none;去除
2. class 和 id 有什么区别？什么时候用 class 什么时候用 id？
   • 在同一页面内：

     id只能出现一次，class可以重复使用
     id的权值(优先级)比class高，浏览器会优先渲染ID的样式
     id是先找到内容，再定义样式，class是先定义好样式，再套用给多个内容。
     id是一个元素的唯一属性，只能定义一次，而一个元素可以定于多个class，套用多个样式
     class可以用于使用重复样式，比如页面内部几个结构需要使用同样的字体、颜色等

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

• 块级元素：每个块级元素都从新的一行开始，并且占用一行的空间
  块级元素的高度、宽度、行高以及margin和padding都可以设置
• 行内元素：占用空间为包含内容的大小，可以与其他元素在同一行显示。
  元素的宽高、上下填充、上下边距设置无效，加上边框可以看出上线填充的效果影响，左右margin和padding有效。
• 典型的块级元素【div、p、h1-h6、table、tr、ul、li、dl、dt、form】
  典型的行内元素【a、span、img、input、button、em、textarea】

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

• display:block:使元素具有块级元素的特性，比如占一行，填充、边距、宽高等
  display:inline;使元素具有行内元素的特性，使元素在一行显示并进行其他设置
  display:inline-block;既有行内元素的特性又有块级元素的特性。

6、 下面代码的作用?

1
2
3
4
5
6
7
8

<div id="header">
</div>
<div id="content">
    <div class="main"></div>
    <div class="aside"></div>
</div>
<div id="footer">
</div>

• 将网页分为头部、内容、脚部三个主体结构，内容中又分为main、aside两个结构

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

• 语义化是指合理使用HTML标记以及其特有的属性去格式化文档内容，也就是将标签所特有的含义和样式体现出里面包含的内容。

  语义化的好处：
  省去不必要的标签，让页面的结构简洁清晰
  更容易被搜索引擎的爬虫收录
  在设备无法渲染CSS时可以确保这些设备能用一种有意义的方式来渲染页面
  便于屏幕阅读器的阅读
  有利于团队的开发和维护

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

• form表单，用来将用户输入的数据和内容传输到后台服务器，服务器处理完成后将结果传送到客户端

  常用的input标签
  type=”text”用来输入文本，默认宽度为20个字符
  type=”password”用来输入密码，字段中的字符会显示为星号或者点
  type=”radio”定义单选按钮（name相同并且定义value值才能实现单选）
  type=”checkbox”定义复选框，加checked属性默认被选上
  type=”textarea”文本域，用来输入多行文本
  type=”hidden”隐藏域，用户看不到，用于暂存数据或者安全性校验，以便之后被JS提取，比如一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。
  type=”submit”定义提交按钮，提交按按钮会把表单数据发送到服务器
  type=”reset”定义重置按钮，重置按钮会清除表单中的所有数据

9、post 和 get 方式的区别？

• 用get提交数据，数据会显示在url里；用post就不会在url中显示。
  get受浏览器的限制，最多只能提交1k数据，用于提交少量数据；post理论上没有传输上限，提交的数据大小受服务器的限制，用于提交大量数据。
  get的请求会被缓存，会被保留在历史记录中，可以被保存成书签，不适合处理敏感数据如密码等；而post以上都不会被保留，安全性较高。
  浏览器默认是用get提交

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

• name属性是用来区分表单元素的，浏览器将数据以[name]=[用户输入内容]形式传送给服务器，也就是name用来记录和传送用户数据。

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

• 提交:是一个按钮控件，一般执行js代码实现一定的功能或效果。元素内可以放置图像、文本或者多媒体内容。

  W3C：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 与 之间的文本，而其他浏览器将提交 value 属性的内容。（但一般提交数据还是用from表单）

• 提交:是一个带有跳转功能的a连接，一般用于链接到另一个网页，“#”表示跳转至本页。
• ：是一个具有提交功能的表单元素，实现将用户输入的数据或信息传递给服务器。

12、 radio 如何分组?

• 通过具有相同值的name属性进行分组，name的值一定要一致，才能有单选效果

13、 placeholder 属性有什么作用?

• 占位符，placeholder一般用在文本框或文本域，最为用户输入信息的提示，并不是实际占有文本内容，获取焦点后消失。

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

• 基本语法：
• 作用：
  1、隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
  2、有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等．当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼。
  3、有些时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上onclick=”document.form.command.value=”xx””，然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
  4、有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。
  5、javascript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。
  6、还有个例子，比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。

代码

1、写如导航栏，文字默认颜色 #444, 可点，鼠标放置文字变为 red。（使用无序列表，a，用display: inline-block）

• github代码
  
  2、 写出如下form表单，性别和取向是单选，爱好是多选
• github代码