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

1、有序列表就是列表结构中的列表项有先后顺序的列表形式，从上到下可以有各种不同的序列编号，如1、2、3或a、b、c等；列表使用ol标签标记，start值表示编号起始值。每个列表项始于li标签。

Paste_Image.png

无序列表就是列表结构中的列表项没有先后顺序的列表形式，大部分网页应用中的列表均采用无序列表，其列表标签采用ul，默认的使用粗体圆点进行标记。每个列表项始于li标签。

Paste_Image.png

Paste_Image.png

2、区别

• 有序列表列表项是序的，无序列表列表项无先后顺序。自定义列表不仅仅是一列项目，而且是项目及其注释的组合。
• 列表标签不同，有序列表使用ol标签、有start属性。无序列表使用ul标签，无start属性。自定义列表使用dl标签，其中自定义列表列表项以dt标签开始，自定义列表项描述使用dd标签，而有序和无序列表表示列表项均采用li标签。

• 无序列表有特殊图形（如小黑点、小方框等）显示，有序列表列表项的标记有数字或字母。
  有序列表使用编号来记录项目的顺序，无序列表使用项目符号来记录无序的项目，如并列项。自定义列表定义条件和定义描述，会默认前后层级关系；
  3、三种列表可以相互嵌套
  如：

  
  
  Paste_Image.png

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

1、在CSS中写入代码，找到相关性的CSS，在.li和.ul下写入list-style:none或list-style-type:none。
2、head头部style标签内加入list-style:none；
3、在li,ul内加入list-style:none。

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

区别：
1、id和class都是dom元素的属性值。不同的地方在于id属性的值是唯一的，在css中定义的样式也只能使用一次，而class属性值可以重复。id的样式优先级高于class。
2、id是识别符，有锚点功能，当浏览器地址栏有一个#xxx，页面会自动滚动到id=xxx的元素上面。而class是类，用来定义通用的样式然后给需要运用到这个样式的Dom节点赋予这个class。id一般先找到结构/内容，再定义样式；class是先定义好一种样式，再套给多个结构/内容。
3、css样式定义时，id采用#xx{属性；属性值}，class采用.xx{属性：属性值}。
4、id是表示着标签的身份，在js脚本中会用到id，当js要修改一个标签的属性时，js会将id名作为该标签的唯一标识进行操作。也就是说id只是页面元素的标识，供其他元素脚本等引用。
用法：
什么时候一定使用id什么时候一定使用class没有硬性规定，通常比较重要的部分、大的布局使用id;不重要的可以重复使用的使用class命名，有时js特效类需要唯一性，这个时候需要一定使用“id”。

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

1、块元素(block element)一般是其他元素的容器元素，能容纳其他块元素或行内元素。常见的有p和div等。行内元素(inline element)一般都是基于语义级(semantic)的基本元素。只能容纳文本或者其他内联元素，常见内联元素有a和span。

2、区别：
（1）块级元素会独占一行，其宽度自动填满其父元素宽度。行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化。
（2） 块级元素可以设置 width, height属性，行内元素设置width, height无效，块级元素即使设置了宽度，仍然是独占一行。
（3）块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
（4）块级元素一般是其他元素的容器，可以容纳行内元素和其他块元素，行内元素只能容纳文本或则其他行内元素。

3、对应常用标签。
块级元素：address-地址、blockquote- 块引用、center-居中对齐、dir-目录列表、div-常用块级元素，也是css layout主要标签、fieldset-form控制组、form-交互表单、h1~h6-一到6级标题、hr-水平分隔线、isindex-input prompt、menu-列表菜单、noframes-frames可选内容（对不支持frame的浏览器显示此块状内容）、nosript-可选脚本内容（对应不支持script的浏览器显示此内容）、ol-列表、p-段落、pre-格式化文本、table-表格、ul-非排序列表内联元素（inline element）、tbody-标签表格主体（正文）、td-表格中的标准单元格、tfoot- 定义表格的页脚（脚注或表注）、th-定义表头单元格、thead-标签定义表格的表头、tr-定义表格中的行 等等。

行内元素：a-锚点、abbr-缩写、acronym-首字、b-粗体、bdo- bidi override、big - 大字体、br-换行、cite-引用、code - 计算机代码（在引用源码的时候需要）、dfn - 定义字段、em-强调、font - 字体设定（不推荐）、i-斜体效果、img-向网页中嵌入一幅图像、input-输入框、kbd-定义键盘文本、label-标签为 input 元素定义标注（标记）、q-定义短的引用、samp-定义样本文本、select-创建单选或多选菜单、small-呈现小号字体效果、span-组合文档中的行内元素、strong-语气更强的强调的内容、sub-定义下标文本、sup-定义上标文本、textarea- 多行的文本输入控件、tt-打字机或者等宽的文本效果、var-定义变量 等等。

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

1.display：block将元素定义为块级元素。可设置width,height、margin和padding属性
2.display：inline将元素定义为行内元素，对width,height无效，margin和padding属性水平方向有效，垂直方向无效。一行排满才会换行，宽度随元素内容而变化。
3.display：inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。内容具有块元素属性可以设置宽度和高度。

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

Paste_Image.png

1、代码说明id和class的使用范围，id定义在页面仅出现一次的标记（如logo），尽量在结构外围使用。在对页面进行结构化布局时一般使用id。（通常页面都有一个页眉、一个报头、一个内容区域和一个页脚组成）。
class是可重复的，所以尽量在结构内部使用，通常用于样式定义。
2、块级元素和行内元素区别。
（1）块级元素的宽度总是等于其父元素内容区的宽度，div、ul、li是块级元素，所以继承了父元素的宽度。块级元素即使设置了宽度，仍然是独占一行。div下wrap是块级元素会独占一行。
（2）div下a链接是行内元素，会根据文字内容的宽高而变化，所以宽高都是auto，为其设置宽高之类的具体属性值失效。img也是行内元素，图片设置的高度会继承父元素a的高度。
（3）列表下的a链接是行内元素，不受宽高、magin和padding影响，宽高也是自动的。
3、wrap是块级元素三个区块设置margin：0 auto，宽度都是固定的，并且居中显示。对其设定width是不影响的。

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

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

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

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

<form> 标签用于为用户输入创建 HTML 表单、向服务器传输数据。
input标签属性及作用：

• alt 属性值text：定义图像输入的替代文本。
• height 属性值pixels、% ：定义 input 字段的高度。（适用于 type="image"）
• max 属性值number、date：规定输入字段的最大值。
• name 属性值field_name ：定义 input 元素的名称。
• size 属性值number_of_char：定义输入字段的宽度。
• src 属性值URL：定义以提交按钮形式显示的图像的 URL。
• type 属性值button、checkbox、file、hidden、image、password、radio、reset、submit、text：规定 input 元素的类型。
• value 属性值value：规定 input 元素的值。
• width 属性值pixels、%：定义 input 字段的宽度。（适用于 type="image"）

九、post 和 get 方式的区别？

1.get是从服务器上获取数据，post是向服务器传送数据。
2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
4.get安全性非常低，post安全性较高。
5.在form提交的时候，如果不指定method，则默认为get请求，form中提交的数据将会附加在url之后，以?分开与url分开。字母数字字符原样发送，但空格转换为“+“号，其它符号转换为%XX,其中XX为该符号以16进制表示的ASCII（或ISO Latin-1）值。get请求请提交的数据放置在HTTP请求协议头中，而post提交的数据则放在实体数据中；get方式提交的数据最多只能有1024字节，而post则没有此限制。

十、在input里name 有什么作用？

1.作为可与服务器交互数据的HTML元素的服务器端的标示。
2.建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用Name，< a name="PageBottom"></a>，我们就获得了一个页面锚点。
3.作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。
4.某些特定元素的属性，如attribute，meta和param。2

十一、<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？

1.<button>提交</button>：提交按钮，需要绑定事件才能生效。
2.<a class="btn" href="#">提交</a>：链接按钮。
3.<input type="submit" value="提交"> ：提交按钮，用于表单中。

十二、radio 如何分组?

radio：单选按钮,name的值相同，分为一组。

十三、placeholder 属性有什么作用?

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

十四、type=hidden隐藏域有什么作用? 举例说明。

隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
在页面中不显示，经过<form action=xx.asp>递交到新一页，通过request.form("隐藏域名的name")取出值。
本教程版权归作者和饥人谷所有，转载须说明来源！