HTML4
有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
-
有序列表(ordered list)
<ol>
<li>有序</li>
<li>有序</li>
<li>有序</li>
</ol>
<OL type="编号样式" start="编号起始值">，HTML5中加入了start 与reversed。start的值只能是整数。 -
无序列表(unorded list)
<ul>
<li>无序</li>
<li>无序</li>
<li>无序</li>
</ul> -
自定义列表（defined list）
<dl>
<dt>表头</dt>
<dd>内容</dd>
<dt>表头</dt>
<dd>内容</dd>
</dl> -
无序排列更加适合所排列的元素关系是并列的，而有序列表更适合有一定顺序关系的元素。自定义列表通常用来概述多个及其描述，通常是专业集。定义术语用dt元素，定义属于的描述用dd元素。
-
嵌套
决定在哪里嵌套后，先不要闭合这个列表标签，插入需要嵌套的列表之后在闭合列表元素，然后继续原来的列表。
<ul>
<li>苹果</li>
<li>梨子</li>
<li>西瓜
<ol>
<li>成熟西瓜</li>
<li>未熟西瓜</li>
</ol>
</li>
</ul>
http://learn.hicc.me/html-css/ordered-unordered-definition-lists.html
http://blog.csdn.net/chun_1959/article/details/39159415
如何去除列表前面的点或者数字？
<style>
ul,ol,dl{list-style:none; }
</style>
class 和 id 有什么区别？什么时候用 class 什么时候用 id？
- id是唯一的，不可重复。（像身份证一样）而class则可以重复。
- id的样式优先级别高于class
- id还一个老特性是锚点功能，当浏览器地址栏有一个#xxx，页面会自动滚动到id=xxx的元素上面。
- id一般用于JS， class一般用于CSS。
- 在CSS中
- 以“#”来开头命名id名称如：#css5{属性:属性值;}
- class是以小写句号“.”开头命名，而ID是以“#”好开头定义。
- class一般用于批量的CSS样式处理（因为多个元素可以重复命名给class）
块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
-
一个行内元素只占据它对应标签的边框所包含的空间。
-
块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。
代码
范例
-
区别
块级元素占用空间一整行，行内元素占用空间是它自身的内容宽度。行内元素可以一并排显示，块级元素不可。 -
行内元素宽高由其自身决定。行内的左右margin与padding有效，上下的margin与padding无效，但是加border可以显示，可以用line-height将其撑开
-
块级元素：div、p、h1..h6、table、ul、li、dl、dt、form
-
行内元素：a、span、img、input、button、em、textarea
display: block、display: inline、display: inline-block分别有什么作用?
- display:block 将元素变为块级元素
- display: inline 将元素变为行内元素
- display: inline-block 将行内元素拥有块级元素属性,但可以在同一行排列，但IE8一下不支持
下面代码是做什么的？抄写一遍下面的代码，注意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>
该代码使得页面分为3部分，头部，内容，底部。使用的是ID命名。头部内有导航的无序列表。内容为侧边栏与中心区块。底部为"这里是footer"。三大块由不同的id命名，即id用来划分大的区块，内部使用class区分。样式中的.wrap使得页面整体处于居中位置，与浏览器上下外距离为0。
如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
- 选择合适的标签
- 合理的代码结构
- 便于开发者阅读
- 同时让浏览器的爬虫和机器很好地解析
- 细节
- html写法是先把页面分大区快，每一大块再分成小块，再细分
- div 中语义化，
- 大小写不要混用
- 多个单词用-来连接
- 命名风格统一
form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
-
作用：把用户输入的数据提交到后台
<form name="myForm" action="地址" method="post"> -
name：表单提交时的名称
-
action：提交到的地址
-
method：提交方式，get与post,不填写默认为get
-
常用标签
-
type="text"，用于输入文本。placeholder属性（可选）展示的是输入框里的提示，maxlength（可选）限制最大输入长度。
<input name="username" type="text" placeholder="用户名" maxlength=10 /> -
type="password" 用于密码输入,输入的内容显示为星号。
<input name="username" type="password" placeholder="密码" /> -
type="radio"， 单选圆圈按钮。注意：name要相同，这样表示它们是一组，才能实现单选，value要有值，否则后台无法显示对应的输入值。
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女 -
type="checkbox"，复选框。加checked属性会默认选上。提交时，如果选中（如bike），那么bike=on。
<input type="checkbox" name="bike" checked /> 自行车
<input type="checkbox" name="car" /> 汽车 -
type="textarea"，文本域，用于输入多行文本。
<textarea name="manywords" maxlength="" paceholder="ddd"> </textarea> -
type="hidden"，隐藏域，用户看不到，用于暂存数据或者安全性校验。
<input name="url_delete" type="hidden" value="/delete.php" />
<input name="csrf_token" type="hidden" value="123" /> -
下拉列表框
我的car:
<select name="mycar">
<option value="volvo">Volvo</option>
<option value="audi">audi</option>
<option value="opel" selected>opel</option>
</select>
post 和 get 方式的区别？
| GET | POST | |
|---|---|---|
| 提交数据可见性 | 提交的数据URL可以看到 | 不可 |
| 数据长度限制 | 受浏览器限制 ，IE为2083个字符（2K+35字节） | post理论上无上限，受服务器限制 |
| 数据类型限制 | 制 只允许 ASCII 字符 | 没有限制。也允许二进制数据 |
| 后退按钮/刷新 | 无害 | 数据会被重新提交（浏览器应该告知用户数据会被重新提交） |
| 书签 | 可收藏为书签 | 不可收藏为书签 |
| 编码类型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码 |
| 历史 | 参数保留在浏览器历史中 | 参数不会保留在浏览器历史中 |
| 安全性 | GET 的安全性较差，因为所发送的数据是 URL 的一部分 | POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。 |
| 提交方式 | 提交的数据URL可以看到 | 不可 |
在input里，name 有什么作用？
- name是表单提交时的名称，如果它的值相同，则表示它们是一组，可以实现单选。
-
复选框当中，可以把name值设置成一个数组，比如：
爱好：
<input type="checkbox" name="love[]" value="dota" checked />dota
<input type="checkbox" name="love[]" value="travel" checked />旅游
这样可以使后台对对应的变量选择对应的输入数据。
<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？
- <button>提交</button>是一个html标签，有众多属性，其中type属性可以设置属性值button或submit，设置不同属性值其功能也不相同；可以包含丰富的内容，而
input type="button"则不含有内容。 - <a class="btn" href="#">提交</a>
把一个链接放在提交按钮里面，点击提交会跳转到另一个页面，但是不会向后台提交数据。 - <input type="submit" value="提交">
有默认的按钮样式，是表单的一个提交按钮，当点击时会把表单数据发送到服务器
radio 如何 分组?
- 拥有相同的name值的radio为一组
placeholder 属性有什么作用?
- placeholder帮助用户填写输入字段的提示，该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
type=hidden隐藏域有什么作用? 举例说明
<form name="data" action="index.html" method="get">
账号：<input type="text" name="count" /></br>
密码:
<input type="password" name="passwords" />
<input type="hidden" name="name" value="123" />
<input type="submit" name="XX" value="提交" />
</form>
这个不可见的表单元素的 value 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据的话，就是用这种类型的元素。用于暂存数据或者后台进行安全性校验。
本文版权归本人和饥人谷所有，转载请注明来源，谢谢！
