1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
有序列表使用编号来记录项目的顺序，在当列表项目的每个列表项目前面需要一个递增值的时候使用，默认用1.、2.、3.。
无序列表使用项目符号来记录无序的项目，默认用圆点。
自定义列表由两个部分组成：定义条件和定义描述。<dt>描述项目名称，<dd>描述项目名，一个项目可以有多个项目名，多个描述。
它们都按照由上到下顺序执行。
无序列表和有序列表都可以通过设置list-style-type，表现为对方的样式。但这样是不推荐的，这违反了html标签的语义化。语义化是标签被创造时具有的作用，像<h1>用于一级标题，<p>用于段落，它们都有默认的样式，是为了某种用途存在的，可以直接应用时，没必要设置多余的CSS样式，增加编码负担。
无序列表主要应用于导航条、下拉菜单、照片显示等不需要数字编号的，有序列表主要用于博客评论等，需要楼层的编号。自定义列表主要用于商品列表等，有名称，有描述。
在html5中<ol>标签多了两个属性start和reseved。start属性支持从一个数字开始计算列表数。'reseved'支持倒序。
<ul>,<ol>,<li>,<dl>,<dt>,<dd>都是块级元素标签。这三个列表可以相互嵌套。嵌套列表很容易。决定在哪里嵌套后，先不要闭合这个列表标签，插入需要嵌套的列表之后再闭合列表元素，然后继续原来的列表。
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表嵌套</title>
<style>
body {
background-color: #ddd;
}
</style>
</head>
<body>
<ul>
<li>
无序列表
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
</li>
<li>有序列表
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
</li>
<li>无序
</li>
<li>
自定义列表
<dl>
<dt>自定义</dt>
<dt>列表</dt>
<dd>列表1</dd>
<dd>列表2</dd>
</dl>
</li>
</ul>
</body>
</html>
效果图：
2.如何去除列表前面的点或者数字？
设置list-style-type: none;
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>去除标号</title>
<style>
body {
background-color: #ddd;
}
ol,ul {
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
</body>
</html>
效果：
3.class 和 id 有什么区别？什么时候用 class 什么时候用 id？
class和id的区别：
1.定义不同。class 属性规定元素的类名（classname）。id 属性规定 HTML 元素的唯一的 id，一般用于重要的独一无二的标签。
2.同一class名在一篇HTML文档中可以出现多次，id名只能出现一次，是唯一的。
3.class可以写成class="intro other"，可以有多个class名，id名不能这样写。
4.同一个标签可以同时有class和id属性，但在写CSS样式时，两者权重不同。
一般在页面布局时，id用于主区块，class用于主区块里的详细内容，对于有些重要的独一无二的元素也可以用id。
4.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
“块级元素”译为 block level element，块级元素在浏览器显示时，通常会以新行来开始（和结束）。“行内元素”译为 inline element。行内元素在显示时通常不会以新行开始。
块级元素占用一整行，行内元素的宽高是它自身内容的宽高。行内元素设置左右margin、padding时有效，上下时加边框可以看到效果，但是对其上下元素的位置没有影响。
块级元素一般可以包含行内元素和其它块级元素。而行内元素一般只能包含数据和其它行内元素。
块级元素主要对应的常用标签有：
<p>,<div>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<h1>~<h6>,<hr>,<form>,<table>,<tfoot>,<blockquote>,<address>,<fieldest>,<noscript>,<pre>
html5中新加的常用的有：
<article>,<figcaption>,<figure>,<output>,<aside>,<footer>,<audio>,<section>,<hgoup>,<video>
行内元素有：
1.b, big, i, small, tt
2.abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
3.a, bdo, br, img, map, object, q, script, span, sub, sup
4.button, input, label, select, textarea
5.display: block、display: inline、display: inline-block分别有什么作用?
dispaly:block将元素设置为块级元素。display: inline将元素设置为行内元素。display: inline-block将元素设置为行内块元素。可以在必要时改变元素特性。
块级元素的特点是：
1.总是在新行上开始；
2.高度，行高以及顶和底边距都可控制；
3.宽度缺省是它的容器的100%，除非设定一个宽度。
行内元素的特点是：
1.和其他元素都在一行上；
2.宽，高，行高及顶和底边距不可改变。
行内块元素的特点是：
1.和其他元素都在一行上；
2.宽，高，行高及顶和底边距可以改变。
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>
这段代码设置class名为wrap的元素宽度为900px，并且在页面上水平居中。
7.如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
html标签的语义化是用合理html标记以及其特有的属性去格式化文档内容。
在编写html文档时，如果选用的标签几乎全是不带语义的，那么在去样式后网页中几乎看不到任何结构信息，可读性非常差；如果选用的都是语义适合的标签，去样式后网页依然具有非常好的可读性；各个浏览器有自己的默认样式，默认的样式给予了各个标签不同的显示，标签使用的正确与否能体现网站的可用性，这也是检验一个网站可用性的最简单的方法之一。
CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名。语义化的命名这里就涉及到了团队的命名规范，只有在团队的规范的基础之上进行更好的语义化命名才是王道。一个语义化的CSS命名至少应遵守如下约定：
- 1.尽量规避拼音命名，用英文单词去命名
- 2.单词之间连接用三种方式：下划线_ 、间隔符-、驼峰命名。具体使用哪种方式请根据团队的规范，但个人建议不要同时使用2种以上的连接方法同时命名
- 3.单词后不要跟无意义的数字，如logo1234 (团队约定好的除外)
对于过长单词的连接命名可采取缩写形式，但应确保成员都能看懂。
在平时写代码时，遇到诸如表格、标题、段落、列表等，我们要尽量使用语义化标签，避免大段使用<div>这样的非语义化标签。在给class、id属性命名时，我们使用英文小写的形式，单词之间连接加间隔符-。
一些约定好的单词命名：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
登录条：loginbar
标志：logo
广告：banner
轮转：promo
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
版权copyright
参考再谈语义化
8.form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
<form>标签用于为用户输入创建 HTML 表单，向服务器传输数据。主要有以下属性：
name:表单提交时的名称。
action： 表单提交到的地址。
method：提交表单的方式。有post和get两种。默认是get方式。
target：在何处打开action。
enctype :规定在发送到服务器之前应该如何对表单数据进行编码。
常用的input标签：
<input>标签按type的不同显示出不同的样式，有不同的作用。<input>标签必须有name属性才能把输入的数据传到后台。
1.<input type="text" name="xx">输入文本，还可以加入placeholder属性。placeholder展示提示信息。
举例：
姓名：<input type="text" name= "fullname" placeholder="用户名" maxlength=10 />
效果：
maxlength=10最大宽度表示输入文本的最大宽度是10。2.
<input type="password" name="xx">输入密码，输入时页面上看不到输入的数据。举例：
密码：<input type="password" name="key">效果：
3.
<input type="radio" name="xx" value="xx">单选框，一次只能选择一个选项，且再点没有反应。一个单选框后有一个选项，它们的name属性相同，便于浏览器识别这是同一个单选框。但value属性不同，便于传送选中的是哪个选项。举例：
性别：<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女<br/>
取向：<input type="radio" name="love" value="male" >男
<input type="radio" name="love" value="female" checked>女
效果：
checked表示默认选中这个选项。4.
<input type="checkbox" name="xx" value="xx">多选框，name的属性可以写成一样，方便后台把选中的选项排成数组。代码：
爱好：<input type="checkbox" name="hobby" value="dota">dota
<input type="checkbox" name="hobby" value="旅游" checked>旅游
<input type="checkbox" name="hobby" value="宠物" checked>宠物
效果：
5.
<input type="submit" name="xxx" value="xxx">提交按钮，提交按钮放在form表单的任意位置，都是把表单中所有元素都提交。举例：
6.
<textarea name="xxx" value="xxx" placeholder="xxx" >输入大段文字举例：
评论：<textarea name="commit" rows="5" cols="40" maxlength="1000"></textarea>
效果：
rows是行数，rols是列数。
7.
<input type="hidden" name="xxx" value="xxx">是隐藏域，用户看不到，用于暂存数据或者安全校验。8.
<select>标签用于下拉选择。举例：
我的car：
<select name="car">
<option value="volvo">沃尔沃</option>
<option value="saab" selected>萨博</option>
<option value="audi">奥迪</option>
</select>
效果：
selected表示预先选定。
<select>标签还有multiple属性，表示多选，size属性表示下拉列表中可见的选项。9.
<input type="file" name="xxx" > 用于文件上传。举例：
<input type="file" name="file" >
效果：
点击选择文件按钮可以选择要上传的文件。
10.
<input type="image" src="xxx" alt="xxx">定义图像形式的提交按钮，必须有src属性和alt属性。举例：
<input type="image" src="eg_submit.jpg" alt="submit" >
效果：
如果 type 属性设置为 image，当用户单击图像时，浏览器将以像素为单位，将鼠标相对于图像边界的偏移量发送到服务器，其中包括从图像左边界开始的水平偏移量，以及从图像上边界开始的垂直偏移。
11.
<input type="reset" name="xxx" value="xxx">定义重置按钮。重置按钮会清除表单中的所有数据数据。举例：
value值不同，按钮上显示的值也不同。
12.
<input type="button" name="xxx" value="xxx">定义可点击的按钮，但没有任何行为。常用于在用户点击按钮时启动JavaScript 程序。举例：
<input type="button" value="Click me" onclick="msg()">
效果：
value值不同，按钮上显示的值也不同。加上onclick属性，用于调用JavaScript。
9.post 和 get 方式的区别？
1.数据提交方式不同，get用来获取信息，查询数据库，不会影响数据库的数据和资源的状态。post则会响数据库的数据和资源的状态。
2.post一般用于提交少量数据，得到大量数据。post用于提交大量数据。
3.pos理论上可以提交的数据无限制，但受服务器限制，get最多提交1k数据，主要用于查询，受到浏览器和服务器的限制。
4.get提交的数据显示在URL中，会记录在浏览器的历史记录中，安全性不高。
10.在input里，name 有什么作用？
name 属性规定 input 元素的名称。name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。所以input必须设置name属性。
11.<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？
在页面上：
都是行内元素。
<a class="btn" href="#">提交</a>是一个链接，可以链接到任意网址，包括要提交到的页面。<button>提交</button>和<input type="submit" value="提交">放在<form>表单中，都是一个按钮，点击后，都可以向后台提交数据。在 button 元素内部，可以放置更丰富的多媒体内容，比如图像。而
<input type="submit" value="提交">是通过改变value属性的值，改变按钮上显示的文字。
12.radio 如何分组?
name属性相同的是一组。
13.placeholder 属性有什么作用?
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
14.type=hidden隐藏域有什么作用? 举例说明
Hidden 对象代表一个 HTML 表单中的某个隐藏输入域。这种类型的输入元素实际上是隐藏的。这个不可见的表单元素的 value 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据的话，就是用这种类型的元素。在 HTML 表单中 <input type="hidden"> 标签每出现一次，一个 Hidden 对象就会被创建。可通过遍历表单的 elements[] 数组来访问某个隐藏输入域，或者通过使用document.getElementById()。
隐藏域用户看不到，用于暂存数据或者安全校验。
例如<input type="hidden" name="hidden" value="12345" />在页面上不显示这个信息，但是后台可以接收到value的值。如果页面一样，但接收到的信息不一致，则不接受这个信息。用于页面被伪造时，验证页面的正确性，保证页面安全。
本文版权归本人和饥人谷所有，转载请注明出处
