HTML4

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

问答

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

• 有序列表：通常用来表示内容之间的顺序或者是重要性关系，每一个列表都分为多个子项，每一个子项都有相应的编号。
• 无序列表：仅仅用于表示内容之间存在有并列关系，也是分为多个子项，但是子项之前没有相应的编号，只有一个圆黑点用于标识。
• 定义列表：通常用于表示名词或者是概念的定义，每一个子项有两个部分组成，第一部分是名词或者是概念，第二部分是相应的解释和描述。

示例：JS Bin
嵌套：ol>li ; ul>li ; dl>dt+dd

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

设置属性 list-style: none 可去除。

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：指定对象为行内块元素

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

Paste_Image.png

有三个div元素设置了class="wrap"，这样可以方便给多个选择器统一样式；还有三个划分结构的div元素设置了id属性，体现了id属性的唯一性。

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

语义化：用正确的标签做正确的事情。让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的；搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO；使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

细节：

• 尽可能少的使用没有语义的标签，如：div、span。

• 语义不明显，既可以使用p也可以使用div的条件下，尽可能使用p，因为p在默认情况下有上下间距，对兼容特殊终端有利。
• 不要使用纯样式标签，用css代替，如b，i，u，font。
• 需要强调的文本，可以用strong或者em标签，strong默认样式是加粗（不要用b），em默认样式是斜体（不要用i）。
• 使用表格时，标题要用caption，表头用thead，主题用tbody包围，尾部用tfoot包围。表头和一般的单元格要区分开，表头用th，单元格用td。
• 表单域要用fieldset 包围起来，并用legend标签说明用途。
• 每个input标签对应的说明文本都要用label标签，并且通过为input设置id属性，在label标签中设置for=someid来让说明文本和对应的input标签对应起来。

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

form表单:

• 表单用于搜集不同类型的用户输入（搜集用户信息）
• 用户提交表单时向服务器传输数据，从而实现用户与 Web 服务器的交互

input标签：

• 单行文本框默认值是 type="text"
• 密码框
• 单选按钮
• 复选框
• 隐藏域
• 文件上传

9. post 和 get 方式的区别？

• 安全性：get 方式不够安全，以 url 方式进行提交 post 以请求实体提交，不会显示地址栏，足够安全
• 提交大小限制：get 方式提交的内容大小有限，一个地址栏放不了多少东西，1k 左右；post 大小无限制，可以放大文件（音频、视频、图像。。。）

10. 在input里，name 有什么作用？

作用是给表单起名，为了便于我们操作

通常我们给表单起名都遵循这么个规则，前面的 reg 是这个表单是干什么的（reg 注册）后面以 Frm 结尾，就是 form 的一 个缩写。

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

提交：只是单纯的能被点击的按钮，点击它什么也不会发生。
提交：实际上还是链接，点击后跳回页面顶部。
：语义化的提交按钮，点击后会提交所有input中的输入信息。

12. radio 如何 分组?

通过设置相同的name值进行分组。

13. placeholder 属性有什么作用?

用于设置可描述输入字段预期值的提示信息，该提示会在输入字段为空时显示。

14. type=hidden隐藏域有什么作用? 举例说明

隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息（暂存数据），以利于被处理表单的程序所使用。
例如：在编写表单页面的时候加入一行隐藏的内容，尽管隐藏域的数据在页面不显示，但在表单提交后会一起提交到后台。当有人恶意伪造表单的时候，无法伪造隐藏域的内容，后台看不到隐藏域的数剧即可知道数据是伪造的。