1 . 有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
有序列表：通常用来表示内容之间的顺序或者是重要性关系，每一个列表都分为多个子项，每一个子项都有相应的编号。
无序列表：仅仅用于表示内容之间存在有并列关系，也是分为多个子项，但是子项之前没有相应的编号，只有一个圆黑点用于标识。
自定义列表：通常用于表示名词或者是概念的定义，每一个子项有两个部分组成，第一部分是名词或者是概念，第二部分是相应的解释和描述。
①有序列表、无序列表、自定义列表的使用
②三者区别：
无序列表只是纯粹的表示一些相关项的列表，这些项或者顺序不重要或者没有编号或者不以字母顺序为序。在HTML中创建无序列表使用块级元素ul，列表中的项用块级元素li表示。
有序列表元素ol，以及其中的列表项和无序列表相似。主要的不同在于有序列表中每项的顺序很重要。与无序列表显示一个实心的小圆点不同，默认有序列表显示数字的序号。使用CSS可以将其更改为字母、罗马数字或者其他。
定义列表有别于无序列表和有序列表。定义列表通常用来概述多个及其描述，通常是专业集。在HTML中使用dl元素来表示定义列表，定义列表中不使用li定义列表项，而需要使用两个元素：定义术语用dt元素，定义属于的描述用dd元素。
③使用场景
如果项目之间有顺序之分可以使用有序列表；
如果是无序的项目则可以使用无序列表；
如果需要概述多个项目及其描述可以使用自定义列表。
④列表嵌套：
嵌套：ol>li ; ul>li ; dl>dt+dd
2 . 如何去除列表前面的点或者数字？
使用list-style: none或者在CSS中将元素ol/ul的padding与margin设为0
3 . class 和 id 的区别？什么时候用 class 什么时候用 id？
class：在程序中称“类”,CSS中.是类选择器的标识，且同一个html网页页面可以无数次的调用相同的class类。当需要给多个选择器统一样式时，可以使用class。
id：表示着标签的身份，CSS中#是id选择器的标识,但是同样ID在页面里只能出现一次，有唯一性。一般用于特殊的样式或者用于js进行DOM操作。
4 . 块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
块级元素：一般作为容器出现，用来组织结构。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。例如：a,i,span,em,img
行内元素：也叫内联元素、内嵌元素等；行内元素一般都是基于语义级的基本元素，只能容纳文本或其他内联元素。例如：div,ul,ol,h1-h6,p
区别：
| | 独占一行 | 能设置宽高 | margin,padding值 |
| ------ | :------: | ------ : |------ : |
| 块级元素 | 是 | 是 | 四个方向都可以设置 |
| 行内元素|否|否|上下方向不可设置|
5 . display: block、display: inline、display: inline-block分别有什么作用?
display: block将元素转化为块级元素，可以设置宽高，可包含块元素和内联元素，不设宽度时自动撑满一行
display: inline将元素转化为行内元素，可以不独占一行，可包含块元素和内联元素
display: inline-block 将元素转化为行内块级元素，可以不独占一行，同时可以设置宽高，不设宽度时宽度由内容宽决定，ie6,7下不支持inline-block
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>`
- 有三个div元素设置了
class="wrap"，这样可以方便给多个选择器统一样式；还有三个划分结构的div元素设置了id属性，体现了id属性的唯一性。
7 . 如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
- 语义化 :就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
- 平时写代码时应该注意的细节：
①根据文档上下文结构合理的选用最适合表达当前语义的标签；
②尽可能少的使用无语义的标签div和span；
③不要使用纯样式标签，如：b、font、u等，一切表现改用css设置；
④h标签的使用应该根据重要性逐级递减，没有断层。并且一个页面只能有一个h1；
⑤提高关键词密度，如图片替换alt，链接说明title；
⑥正确使用内容容器，如段落p，列表ul, ol, li, dl, dt, dd
⑦需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
⑧使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
⑨每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
8 . form表单有什么作用？有哪些常用的input 标签，分别有什么作用
form表单:
- 表单用于搜集不同类型的用户输入（搜集用户信息）
- 用户提交表单时向服务器传输数据，从而实现用户与 Web 服务器的交互
input标签：
- 单行文本框<inputtype="text">默认值是 type="text"
- 密码框<inputtype="password"/>
- 单选按钮<inputtype="radio"/>
- 复选框<inputtype="checkbox"/>
-隐藏域<inputtype="hidden"/> - 文件上传<inputtype="file"/>
常用的input类型有：button:定义可点击按钮。checkbox:定义复选框。file:定义输入字段和“浏览”按钮，供文件上传。hidden:定义隐藏的输入字段。image:定义图像形式的提交按钮。password:定义密码字段。该字段中的字符被掩码。radio:定义单选按钮。reset:定义重置按钮。重置按钮会清除表单中的所有数据。submit:定义提交按钮。提交按钮会把表单数据发送到服务器。text:定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。
9 . post 和 get 方式的区别
| | GET | POST|
|------| :------ : |------: |
|后退按钮/刷新 |无害|数据会被重新提交（浏览器应该告知用户数据会被重新提交）。|
|书签|可收藏为书签 |不可收藏为书签|
|缓存|能被缓存|不能缓存|
|编码类型 |application/x-www-form-urlencoded |application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。|
|历史 |参数保留在浏览器历史中。 |参数不会保存在浏览器历史中。|
|对数据长度的限制 |是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。| 无限制。
|对数据类型的限制| 只允许 ASCII 字符。| 没有限制。也允许二进制数据。|
|安全性 |与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！| POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。|
|可见性| 数据在 URL 中对所有人都是可见的。| 数据不会显示在 URL 中。|
10 . 在input里，name 的作用
name 属性规定 input 元素的名称。name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
11 . <button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别
-
<button>提交</button>：只是单纯的能被点击的按钮，点击它什么也不会发生。 -
<a class="btn" href="#">提交</a>：实际上还是链接，点击后跳回页面顶部。 -
<input type="submit" value="提交">：语义化的提交按钮，点击后会提交所有input中的输入信息。
12 . radio 如何 分组?
设置name的值，name值相同的即为一组。
13 . placeholder 属性的作用
用以描述输入字段预期值的提示（样本值或有关格式的简短描述），该提示会在用户输入值之前显示在输入字段中。placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。
14 . type=hidden隐藏域有什么作用? 举例说明
隐藏域: 用户看不到，用于暂存数据，或者安全性校验
例: 比如<input tyoe="hidden" name="password" value="123wxf"/>,用户在向服务器提交数据时，会将value="123wxf"传给服务器，然后服务器会将这个值进行比较，如果一致，才会响应要求
网友评论