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和预存的信息一致时,才能成功提交表单数据,与生俱来的安全性。
本教程版权归饥人谷_阿群和饥人谷所有,转载须说明来源