1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
答：有序列表：
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>梨</li>
</ol>````
无序列表：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>梨</li>
</ul>````
自定义列表：
<dl>
<dt>水果</dt>
<dd>香蕉</dd>
<dt>蔬菜</dt>
<dd>萝卜</dd>
</dl>````
区别：
- 有序列表列表项目`<li>`之前都使用数字进行标记。
- 无序列表项目`<li>`都使用圆点或者其他符号图片进行标记。
- 自定义列表由表头`<dt>`和注释`<dd>`组成，没有标记。
使用场景：
- 有序列表适合在内容有先后步骤或顺序的地方使用。
- 无序列表适合在内容处于并列关系的地方使用。
- 自定义列表适合内容有标题有注释的地方使用。
如何嵌套：
在项目`<li>`中再加入一个列表即可 例：
<ul>
<li>
<ul>主食
<li>拉面</li>
<li>馍馍</li>
<li>米饭</li>
</ul>
</li>
<li>
<ul>月份
<li>一月</li>
<li>二月</li>
<li>三月</li>
</ul>
</li>
<li>
<dl>前端<dd>
包含HTML、CSS、JS</dd>
</dl>
</li>
</ul>````
效果图
搜狗截图16年07月21日1301_2.png
2.如何去除列表前面的点或者数字？
答：在<li>样式中定义list-style:none即可。
3.class 和 id 有什么区别？什么时候用 class 什么时候用 id？
答：class与id的区别：
- class在样式可以使用多次，而id只能使用一次。
- class书写前缀使用“.”，而id的前缀使用“#”。
- id是一个标签用于区分不同的结构和内容，就像一个人只能有一个名字，class是可以各种套用的，并没有规定次数和使用条件。
什么时候用？ - id在页面中是独一无二的，在划分页面的大区块的时候使用，这样大的区块不会受其他的样式的影响。class在写内部样式的时候使用，一些重复的样式。
4.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
答：
- 块级元素：占据一整行空间，可以设置宽度和高度。内部可以有块级元素和行内元素，margin和padding对其起作用占据空间。
- 行内元素：只占据自己的空间可以跟其他元素并排出现，占据的空间跟他自身内容有关，margin跟padding对其垂直占据空间无效，水平占据空间有效。
line-height可以占据其垂直空间。 - 块级标签：
<div>、<p>、<h1>、<table>、<tr>、<ul>、<form>等。 - 行内标签：
<a>、<span>、<img>、<input>、<em>、<textarea>等
5,。display: block、display: inline、display: inline-block分别有什么作用?
答：
-
display:block作用：把元素显示为块级元素。 -
display:inline作用：把元素显示为行内元素。 -
display:inline-block作用：把元素显示为行内块级元素，使其既能像块级元素可以设置宽高的特性，又能像行内元素可以不换行的特性。
6.下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式。
答：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.wrap{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="header">
<div class="wrap">
<a id="logo" href="#"><img src=""></a>
<ul class="nav">
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="wrap">
<div class="aside">侧边栏</div>
<div class="main">中心区块</div>
</div>
</div>
<div id="footer">
<div class="wrap">这里是 footer</div>
</div>
</body>
</html>````
- 用三个id选择器将页面大体分为三部分header、content、footer这样让这三个部分具有唯一性。
- 将命名为wrap的元素设为宽度900px 并室友`margin:0 auto`使其水平居中。
- 将一个div再次分为多个div，使div的功能不同。
####7.如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
答：
>- **why?为什么要进行语义化？**
** **1，现在的开发基本上都是一个团队合作进行开发。这种情况下，我们写的代码不仅要让我们自己能看懂，而且也应该让别人也容易理解和阅读，要保证代码的可维护性，这一点很重要。但是在实际开发中，由于HTML的灵活性，以及CSS的强大，以至于实现同一种界面样式，不同的人写出来的代码可能实现方式都不太一样。实现糟糕的，可能全是div套div，这样的代码到时候维护的话可能就是一场灾难。这一点，个人觉得是最主要的因素。
2，和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息
3，考虑到代码的可复用性，可移植性，方便其他设备的解析执行。移动设备、盲人阅读器等。
- **什么是HTML语义化？**
> HTML标签可以分为有语义的标签，和无语义的标签。比如table表示表格，form表示表单，a标签表示超链接，strong标签表强调。无语义标签典型的有<div>,<span>等。HTML语义化我的理解就是在页面中尽量多滴结合场景多使用含有语义的标签，少使用div,span等无语义的标签。
- 语义化是将代码写的更容易让人读懂，不光要让机器懂，要让人读起来也不是那么费劲。
- 写的时候要有一套整齐规范的风格，尽量使用英文去编写不要出现拼音，单词连接处使用统一符号，推荐使用“-”简单明了，输入也方便。
- 要理解每个标签的含义，在命名的时候也使用更容易让人懂的词语，利于跟人一起开发维护。
- 语义化是个过程，可以参考一些优秀的作品跟他们去吸取他们好的语义化经验，让自己的代码更出色！
####8.form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
答：
- `<form>`是HTML表单作用是将用户提交的数据发给后台。
- `<name>`是表单的名称。
- `<action>`是提交到的地址。
- `<method>`是提交的方式，有get和post两种方式。
- `<target_blank>`在新窗口打开。
- `<enctype>`对表单发送到服务器之前进行编码。
input标签
- `<input type="text">`用于输入文本,可以加入`placeholder`属性来写框内的提示内容，还有`maxlength`用来限制文本框里的字数，`value`用来填写里面的默认内容。
- `<input type="password">`里面输入密码显示文字为星号。
- `<imput type=“raido”>`是单选框但是只在里面`name`相同的情况下是单选，不相同的话是多选。
- `<input type="checkbox">`复选框，加入`checked`使之成为默认选项。
- `<input type="textrea">文本域，用于输入大量文本。
- `<input type="select">下拉选择列表，加入`selected`使之成为默认选择。
- `<input type="submit" >`定义提交按钮,向服务器发送表单数据，里面的内容根据`value`决定。
- `<input type="reset" >` 定义重置按钮。重置按钮会清除表单中的所有数据。
- `<input type="image" >` 定义图像形式的提交按钮。
必须把标签的 src 属性和Alt属性与其结合使用。
- `<input type="hidden">`定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。
- `<input type="file" >`用于文件上传。
- `<input type="button" > `定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。
[参考w3school](http://www.w3school.com.cn/tags/att_input_type.asp)
####9.post 和 get 方式的区别？
答：
- get用于提交少量数据最多1kb大小，post可用来提交大量数据，取决于服务器的接受程度。
- get提交的数据会显示在URL中，可在历史记录中查到，安全性不高，用户名密码都使用post传输。
- 数据提交方式不同，get用来获取信息，查询数据库，不会影响数据库的数据和资源的状态。post则会响数据库的数据和资源的状态。
####10.在input里，name 有什么作用？
答：作为可与服务器交互数据的HTML元素的服务器端的标示。有了name服务器才能认识它，所以必须有name值。
####11.`<button>`提交`</button>
、<a class="btn" href="#">提交</a>
、<input type="submit" value="提交">`
三者有什么区别？
答：
- `<button>`提交`</button>`只是一个按钮点了没反应，但是可以触发JS事件。
- `<a class="btn" href="#">`可以通过这个按钮链接到任意地址，包括要提交的地址。
- <input type="submit" value="提交">`提交到后台的按钮。
####12.`radio` 如何 分组?
答：`name`相同的为一组。
####13.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时就自己关掉。
简单来说就是暂存数据，和安全性校验。
**本文版权归本人和饥人谷所有，转载请注明出处**
