有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
- 有序列表（ordered list） 跟做事情的操作步骤一样，有逻辑上的先后顺序，一般用数字来表示。
<ol>
<li>打开冰箱门
</li>
<li>把大象放进去
</li>
<li>关上冰箱门
</li>
</ol>
- 无序列表（unordered list）内容的罗列，无需考虑先后顺序。默认格式：每项前有个小黑点。
<ul>
<li>看书
</li>
<li>看电影
</li>
<li>听歌
</li>
</ul>
- 自定义列表（definationg list）表示项目和其注释的列表。以<dl>标签开始，列表项</dt>,列表项注释</dd>。* 注： *列表项和注释无需一一对应。
<dl>
<dt>html常见表单标签
</dt>
<dd>有序列表
</dd>
<dd>无序列表
</dd>
<dd>自定义列表
</dd>
</dl>
dl标签
三者语义区别:ol有逻辑上的先后顺序，改变顺序就改变了整个列表的意义。ul可随意改变li的前后顺序。dl标签中， dd "在语义上", 应该是对 dt的注释说明, 而不应该是跟它无关的东西。
-
有序列表嵌套
有序列表嵌套
-
无序列表嵌套
无序列表嵌套
-
自定义列表嵌套
自定义列表嵌套
-
混合嵌套
混合嵌套
如何去除列表前面的点或者数字？
<style>
ul,ol {
list-style:none
}
</style>
class 和 id 有什么区别？什么时候用 class 什么时候用 id？
class是表示一类元素使用同一style的选择器。
id是全文档中唯一元素的选择器，用于布局。
也就是说，id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
块级元素一般都从新行开始，它可以容纳内联元素和其他块元素。“form"这个块元素比较特殊，它只能用来容纳其他块元素。
常见标签：p/div/ol/ul/dl/form/table/h1/h2/h3/h4/h5/h6。
行内元素/内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素。
常见标签：a/b/em/i/strong/font/img/input/select/span/textarea。
区别：
- 块级元素垂直方向排列，行内元素水平方向排列。
-
块级元素默认会撑满整个宽度，行内元素只占本身大小的空间，background-color会因为padding颜色的改变而占据空间，但是不影响布局。
行内padding设置影响background-color
- 盒模型不同。
行内元素width，height设置无效，margin,padding上下无效。可以设置line-height属性。 - 块级元素内可以包含块级元素和行内元素，行内元素内只能包含行内元素。
display: block、display: inline、display: inline-block分别有什么作用?
事实上，网页上所有元素都有display属性。一些元素display属性为block，比如div/li/p等，一些元素display属性默认为inline,比如a/img等。display属性可以被强制更改。
- display: block 元素会具有块级元素的属性，独立占据一行，可以设置宽高。
- display: inline 元素具有行内元素属性。
-
display: inline-block 行内块元素。含有这个属性的元素内部具有块级元素的一些属性，可以设置宽高等，同时这个元素外部可以与其他元素同行，表现为行内元素的一些属性。
display
下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式。
id用于布局和页面独一无二的元素。class用于样式相似的元素。
<!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="" alt=""></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>
如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节。
htm css语义化有三个好处：一是方便搜索引擎或类似机器爬虫抓取网页信息；二方便开发者审查代码，降低维护成本；三为网页浏览者提供一个好的浏览体验，比如alt标签等。
html css语义化主要考虑从网页结构和内容考虑，选择语义化的标签及定义有意义的id、class的名称等。
一些细节问题：
- 把css独立出来写，让html很好地展示页面结构和内容。
- 少用div、span、br等无意义标签，用div的时候多考虑列表。
- 在考虑浏览器兼容的情况下，多使用html 5这类语义化的标签。
html 5 新增语义化标签可以点击前辈博客HTML 5的革新——语义化标签
form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
form表单主要用于用户与web服务器提交信息。
常用Input标签有：text输入文本、password输入密码、radio单选、checkbox多选、 select下拉列表、 button按钮、 submit提交。
post 和 get 方式的区别？
get主要用于获取信息，获取的数据数量少但是速度快，相关信息会在地址栏有所显示，浏览器历史记录也可以查询到密码，安全系数低。
post主要用于向服务器传输数据，数据的传输主要取决于服务器，安全系数比较高。
在input里，name 有什么作用？
name规定了Input元素的属性名称，没有name属性页面就无法向后台相关传输数据。
比如：html元素Input type='radio'分组，radio button控件在同一个分组类，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。
name相同时
name不同时
<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？
submit默认为form提交，自动提交表单数据。
button则响应用户自定义的事件,如果不指定onclick等事件处理函数，它是不做任何事情。当然，button也可以完成表单提交的工作。
submit是一种特殊的button，一个表单只能有一个submit，却可以有多个button。
<a class="btn" href="#">提交</a>可以通过css做成button的样式，也不会提交数据。
radio 如何分组?
通过name，详见上上题目。
placeholder 属性有什么作用?
在未输入任何信息时，提示用户。
Paste_Image.png
type=hidden隐藏域有什么作用? 举例说明。
type=hidden 隐藏域是用于收集和发送信息用的。客户端不显示，但提交后，服务器能够接收，可以做表单验证值，拒绝来源不明的表单提交。
＜input type="hidden" name="..." value="..."＞
本教程版权归本人和饥人谷所有，转载须说明来源
网友评论