[列表] [form表单]

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

• 有序列表 使用编号来记录项目顺序 【适用于有先后顺序的项目】
  <ol>
  <li>第一行</li>
  <li>第二行</li>
  <li>第三行</li>
  </ol>
  tip有序列表在margin：0和padding：0的情况下，和无序列表效果相同
• 无序列表 使用符号来记录无序项目【适用于并列项目】
  <ul>
  <li>行行行</li>
  <li>行行行</li>
  <li>行行行</li>
  </ul>
• 自定义列表 由定义条件和定义描述组成【适用于需要解释的项目】
  <dl>
  <dt>列表项</dt>
  <dd>内容</dd>
  <dt>列表项</dt>
  <dd>内容</dd>
  </ul>
• 嵌套
  <ul>
  <li>font
  <ul>
  <li>font-family</li>
  <li>font-size</li>
  <li>font-style</li>
  </ul>
  </li>
  <li>border
  <ul>
  <li>border-color</li>
  <li>border-width</li>
  <li>border-style</li>
  </ul>
  </li>
  <li>margin
  <ul>
  <li>margin-left</li>
  <li>margin-right</li>
  <li>margin-top</li>
  <li>margin-bottom</li>
  </ul>
  </li>
  </ul>
  tip：先把外层列表写好，再往里面嵌套下一层

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

• 使用list-style属性
  ol , ul{
  list-style: none;
  }

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

| 选择器 | id|class |
| ---------- :|---------|----|
| 区别 | 标有特定id的某个元素(唯一性) |定义页面中某类元素(普遍性)|
| 语义 | 先定义元素再描述样式 |先描述样式再套给元素|
| 场景 | 外围结构用于页面布局（for JS） |结构内部用于定义样式（for CSS）|
| 复用 |只出现一次 |可多次使用|
| 权重 |高 |低|
| 前缀 | # |.|

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

元素容器	块级元素（block element）	行内元素（inline element）
特点	每次都从新行开始（上下排列）	一直排在同一行（左右排列）
width	默认自适应父级，可以设置	随元素内容变化，设置无效
height	均可设置	无效，仅可通过line-height设置
margin	均可设置	仅top/bottom无效(垂直方向)
padding	均可设置	仅left/right有效(水平方向)
常用标签	<div><menu><table><p><ol><ul>…	<span><a><br><img><strong><ol>…

W3C盒模型

盒模型	box	line-box
对应CSS	height+padding+margin	line-height
高度	显性height值即设置值/隐形height值即图片高度	行内元素最高值

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

• display: block 以块级元素方式渲染（上下排列）
• display: inline 以行内元素方式渲染（左右排列）
• display: inline-block 以行内元素方式渲染（左右排列），但是又有块级元素的特点（height+padding+margin）

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

代码

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

根据内容的结构（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

HTML语义化注意事项
HTML语义化标签使用总结

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

• 格式
  <form name="myForm" action="/test/6.php" method="get">
  <input name="user" type="test"/>
  <input type="submit" value="提交“>
  </form>
• 作用
  用于把用户输入的数据提交到后台
  name表单提交时的名称
  action提交到的地址
  method提交方式（get/post）
• 常用标签
  text文本框（输入文字）
  <input name="myname" type="text" placeholder="ffff" maxlenght="20" disabled/>
  password密码框（密码被掩盖）
  <input name="pwd" type="password" placeholder="密码"/>
  radio单选按钮
  <input type="radio" name="sex" value="male"/>男
  <input type="radio" name="sex" value="female"/>女
  checkbox复选按钮
  <input type="checkbox" name="bike" checked/>自行车
  <input type="checkbox" name="car"/>汽车
  submit提交按钮
  <input name="submit" type="submit" value="提交"/>
  textarea文本域，用于输入多行文本
  <textarea name="comment"maxlength="200"placeholder="ddd</textarea>
  hidden隐藏域（不可见，提高安全性）
  <input type="hidden" name="url_delete" value="/delete.php" />
  <input type="hidden" name="csrf_token" value="123" />*
  select下拉选择框
  <select name="color">
  <option value="red"/>红</option>
  <option value="blue"/>蓝</option>
  <option value="green"/>绿</option>
  </select>

9 post 和 get 方式的区别？

区别	post	get
提交方式	可视（直接和服务器交互）	不可视（作为URL）
数据量	大（提交）	小（查询）
限制	服务器（理论上无限制）	浏览器（URL长度有限）
安全性		不安全（在历史记录中）

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

name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

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

<button>提交</button>提交按钮，需绑定时间才能生效
<a class="btn" href="#">提交</a>链接按钮
<input type="submit" value="提交">提交按钮，用于表单内

12radio 如何 分组?

name相同的为一组

13 placeholder 属性有什么作用?

输入框里默认显示的文本

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

• 暂存数据
• 确定用户身份，提高安全性
  <input type="hidden" name="a" value="2016"/>