1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
列表，顾名思义，是HTML中表示一组项目的列表，包括：有序列表、无序列表、定义列表等。
eg：
task-7
前端基础知识：
- html
- css
- Javascript
我的爱好：
-
编程：
- 前端
- 后端
- 运维
- 绘画
- 篮球
我爱吃的食物：
- 鱼
- 各种鱼类，除了刺多的鲤鱼
- 虾
- 基围虾，龙虾之类的海虾
- 蟹
- 当然是阳澄湖大闸蟹好吃啦
效果图：
简单来说语义区别：
- 有序列表定义一组有顺序要求的列表项目；
- 无序列表定义一组对顺序没要求的一系列列表项目；
- 定义列表定义一系列项目，同时定义项目的描述。
- 正是定义列表有了项目描述，所以和无序列表区别就在此。
使用情况：
- 有序列表在列表项目对顺序有要求的时候使用。
- 无序列表在列表项目对顺序没要求时使用，可以是任何一系列项目。
- 定义列表在对项目有描述要求时使用。
列表嵌套：
在需要嵌套列表的列表项目里，即 - 中，再写一个列表即可。
eg：
-
编程：
- 前端
- 后端
- 运维
- 绘画
- 篮球
效果图：
2.如何去除列表前面的点或者数字？
在样式里，写上list-style: none或者list-style-type: none即可。
eg：
效果图：
3.class 和 id 有什么区别？什么时候用 class 什么时候用 id？
| 选择器名称 | 描述 |
|---|---|
| class | 类选择器，在html中可以多次使用 |
| id | ID选择器，一个id只能在html中使用一次 |
| 区别 | 使用区别：每个id仅能使用一次，class可以多次使用； 语义区别：id唯一标识元素，多用于重要元素，权重更大，而class主要是应用常见样式用的比较多 |
| 使用 | id多使用于主要块级元素，有些独一无二元素也可用id; class用于要重复使用样式的除id其他块级或行内元素 |
4.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
| 名称 | 描述 |
|---|---|
| 块级元素 | html中，以新行来开始和结束，即独占一行 |
| 行内元素 | html中，不占用一行，不以新行开始 |
| 区别 | 1. 块级元素占用一行，行内元素不占用一行； 2. 块级元素margin,padding,width,height都可以设置，而行内元素无法设置width,height，margin只能水平改变，padding都可以改变，但上下方向只对背景起作用，不占用空间 |
块级元素：
行内元素：
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, label, select, input, textarea
eg：
task-7
h是块级元素
P是块级元素
- 无序列表
- 有序列表
表头1
表头2
cell1
cell2
行内元素
这里是div.
- 项目
- 描述
引用。
行内元素
行内元素
行内元素
引用
效果图：
发现的问题：
1. 有两个标签有问题：
- input
- img
当我给行内元素设置width,height时，两者发生了改变；也就是说，input和img不是纯行内元素，经网上资料查询，发现这两者是inline-block元素，有着block和inline共同的特点，如下所示：
q,a,span,input,img {
border: 1px solid green;
width: 70px;
height: 70px;
同理，又进行了相应的margin和padding的设置，发现两者有着block的特性。
2. table表格占用问题：
效果图中显示table表格边框未扩及整行，故我在其后方填写了一个行内元素a标签，而行内元素从下行开始，所以可以确定table元素是块级元素。
3. 行内元素padding设置校验：
a
2222
a
b
效果图：
可以发现：只对背景起作用，而不占用空间。
5. display: block、display: inline、display: inline-block分别有什么作用?
三者都是CSS样式，块级元素和行内元素嵌套关系没有限制。display 属性规定元素应该生成的框的类型。
| 属性 | 描述 |
|---|---|
| display: block | 使元素显示为块级元素 |
| display: inline | 使元素显示为行内元素 |
| display: inline-block | 使元素显示为行内块级元素 |
eg：
a
2222
a
b
效果图：
6. 下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式
![]()
侧边栏
中心区块
这段html用div将页面分成了若干块区，为了区分主次，在主要块区（头部，内容区，脚部）用id唯一标示，使人一目了然。同时，用class=wrap对内部结构进行统一的样式设置，margin外边距根据浏览器窗口自动调整，上下外边距为0，内部区块宽度统一为900px。
7. 如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
- 语义化指对代码结构要严谨规范，标签命名要有有意义；
eg：
内容——content
导航——nav
侧边栏——sidebar
这些命名就会使人很容易读懂代码。 - 命名尽量统一风格，命名中包含2个以上单词用“-”链接，并且大小写要统一风格。
eg：
order-list不要写成：orderlist、order_list123、OrderList等。
8. form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
- 密码域：
- 单选按钮：
name一样，方便分组，单选。
- 复选框：
name一样，方便分组，语义化。
- 多行文本域：
不用在form元素里，比较特殊。
- 提交按钮：
无论提交按钮放在哪里，都可以把form所有数据打包发送给后端服务器。
- 隐藏域：
隐藏域，用户无法看到效果，但是表单存在，能够向后台发送hidden的数据，可用于安全校验，防止伪造表单数据。
- 下拉列表：
- 上传文件按钮：
- 重置按钮：
- 创建自定义按钮：
- 图片按钮：
可见
type="image"的标签对图片大小格式有一定要求，在提交的时候，浏览器将以像素为单位，将鼠标相对于图像边界的偏移量发送到服务器，其中包括从图像左边界开始的水平偏移量，以及从图像上边界开始的垂直偏移量。
总结：大体上就是这些表单功能，需要注意的就是name和value的使用情况。
参考HTML 标签的 type 属性
9. post 和 get 方式的区别？
get和post是两种不同的http方法，向后端发送form-data。
** 区别**：
- 使用：由于URL长度限制，get用于简短数据的获取，而当数据传输量较大时，用post方法。
- 安全性：get方法的URL和后台数据会显示所有信息，而其中涉及隐私安全部分也可见；post所有操作用户都是不可见的。
- 编码方式不同：Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
- get不会更改数据，只是获取数据；而经post处理的数据到后端会发生改变。
参考：
GET和POST区别详解
GET vs POST
10. 在input里，name 有什么作用？
name定义 input 元素的名称。作为可与服务器交互数据的HTML元素的服务器端的标示，或者在客户端通过 JavaScript 引用表单数据。由于后台传输数据值时要借用name，所以name是必需属性。
11. 、提交、三者有什么区别？
-
是一个html标签，有众多属性，其中type属性可以设置属性值button或submit，设置不同属性值其功能也不相同；可以包含丰富的内容，而input type="button"则不含有内容。 - `提交是一个链接，点击会显示本页，不提交数据，只是指定链接位置。
- 是一个form表单按钮，用于提交表单数据，而
则提交其内容。
参考：HTML
12. radio 如何 分组?
只要radio中的name属性设置相同，即可分组。
13. placeholder 属性有什么作用?
用于在表单文本框中显示预设提示信息；该提示信息在文本框没聚焦且文本内容为空时显示，而输入文本内容后不显示。
14. type=hidden隐藏域有什么作用? 举例说明
如图，用户无法看见hidden的信息，当我点击“提交”时，浏览器会想后台传送hidden的数据，这一原理用在暂存数据和安全校验。只有当服务器接收到的hidden和预存的信息一致时，才能成功提交表单数据，与生俱来的安全性。
本教程版权归饥人谷_阿群和饥人谷所有，转载须说明来源