HTML4

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

列表例子

• 有序列表
  有序列表使用编号来记录项目的顺序，编号可以是数字或者英文字母。适用于明显有次序、不容乱的内容列表。
  列表标签采用< ol>< /ol>，列表项由< li>< /li>组成。

• 无序列表
  无序列表使用项目符号来记录无序的项目。应用场景为并列的、地位相同、需要均匀排列的内容列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。大部分网页应用中的列表均采用无序列表。
  列表标签采用< ul>< /ul>，列表项由< li>< /li>组成。

• 自定义列表
  自定义列表不仅仅是一列项目，而是项目及其注释的组合。
  自定义列表以 < dl> 标签开始。每个自定义列表项以 < dt> 开始。每个自定义列表项的定义以 < dd> 开始。

如何嵌套？

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

list-style:none;

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

1 class 和 id的区别

• 在CSS文件里书写时，ID加前缀"#"；CLASS用"."
• id一个页面只可以使用一次；class可以多次引用。
• ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
• 从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

2 什么时候用 class 什么时候用 id？
W3C标准这样规定的，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。这样，一般网站分为头，体，脚部分，因为考虑到它们在同一个页面只会出现一次，所以用id，其他的，比如说你定义了一个颜色为red的class，在同一个页面也许要多次用到，就用class定义。另外，当页面中用到js或者要动态调用对象的时候，要用到id，所以要根据自己的情况运用。

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

1 块级元素、行内元素是什么？

• 块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素。块级元素一般作为容器出现，用来组织结构。
• 行内元素也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素。

2 有什么区别？

• 块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
  行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
• 块级：块级元素可以设置宽高
  行内：行内元素不可以设置宽高
• 块级：块级元素可以设置margin，padding
  行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
• 块级：display:block;
  行内：display:inline;
  可以通过修改display属性来切换块级元素和行内元素

3 分别对应哪些常用标签？

• 块级元素常用标签：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
• 行内元素常用标签：span, strong, em, br, img , input, label, select, textarea, cite

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

• display:block是将元素显示为块级元素。（块级元素的概念见上一个问题）
• display:inline是将元素显示为行内元素。（行内元素的概念见上一个问题）
• display:inline-block是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
  display:inline、block、inline-block的区别

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

手抄代码

定义了一个上中下结构的网页结构。header、content、footer三个div使用id命名方式将页面分成三部分，三个部分的内部都使用了wrap统一定义内容区宽度为900px，并且内容区域始终居中显示。header内部定义了logo图片和导航列表，content内部定义了侧边栏和中心区块。

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

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

2 在平时写代码的过程中要注意哪些细节？

• 尽可能少的使用无语义的标签div和span；
• 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
• 不要使用纯样式标签，如：b、font、u等，改用css设置；
• 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
• 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
• 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

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

1 form表单有什么作用？
form标签是用来进行表单提交用的。
常见属性：
name：表单提交时的名称
action: 表单提交的地址, 肯定是要提交给某个服务器的,action的地址就是要提交的服务器的地址
method:以何种方式提交,常见的为get和post. 区别在于一个是明文(在url中显示),一个是暗文

2 有哪些常用的input 标签，分别有什么作用？

• type="text"
  输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，住址等等。当然这也是Input的默认类型。
  参数name：同样是表示的该文本输入框名称。
  参数size：输入框的长度大小。
  参数maxlength：输入框中允许输入字符的最大数。
  参数value：输入框中的默认值。
  特殊参数readonly：表示该框中只能显示，不能添加修改。

• type="password"
  输入类型是password，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。参数和“type=text”相类似。

• type="file"
  当你在BBS上传图片，在Email中上传附件时一定少不了的东西，提供了一个文件目录输入的平台，选择上传文件。参数有name，size。

• type=hidden
  非常值得注意的一个，通常称为隐藏域。如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。一句话，你在页面中是看不到hidden在哪里。

• type="button"
  标准的windows风格的按钮，当然要让按钮跳转到某个页面上还需要加入写JavaScript代码。

• type="checkbox"
  多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择） 其实最重要的还是value值，提交到处理页的也就是value。

• type="radio"
  单选框，出现在多选一的页面设定中。参数同样有name,value及特别参数checked。不同于checkbox的是，name值一定要相同，否则就不能多选一。当然提交到处理页的也还是value值。

• type="image"
  比较另类的一个，可以作为提交式图片按钮，通常采用这种按钮效果更美观。

• type="submit" and type="reset"
  分别是“提交”和“重置”两按钮，submit主要功能是将Form中所有内容进行提交action页处理，reset是快速清空所有填写内容的功能。

post 和 get 方式的区别？

1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

在input里，name 有什么作用？

作为可与服务器交互数据的HTML元素的服务器端的标示。

提交、提交、三者有什么区别？

具有相同的作用但是在可操控性方面更加强大。在 button 元素内部，可以放置文本或图像。Button 标签更像是“触发一个功能”，而A标签打开另一个网页则是一个跳转链接，Input标签提交表单则是“输入”。

button较input来讲，提供了更为强大的功能和更丰富的内容。 与 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。要注意的是，被包含的图片，不能使用热点地图，即不能

，这是不合法的。

如果是链接到外部资源或内部页面的链接应当使用 a 标签。如果是应用程序中的功能按钮，例如：添加到购物车，应当使用 button 标签。如果实在表单中使用，应当使用 input 标签（例如提交按钮）

radio 如何 分组?

name的值设成一样的为一组

上面的两个选项的name值都是user，所以两个它们两个为一组，并且为单选项。

placeholder 属性有什么作用?

提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
placeholder 属性是 HTML5 中的新属性。

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时就自己关掉。

本教程版权归作者和饥人谷所有，转载须说明来源！