html和css基础
- 有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?
有序列表是有顺序的,如:
<ol> <li>1</li> </ol
无序列表是无顺序的,并列的
<ul> <li>苹果</li> </ul>
自定义列表通常用于表示名词或者是概念的定义,每一个子项有两个部分组成,第一部分是名词或者是概念,第二部分是相应的解释和描述。
<dl> <dt>列表头</dt> <dd>列表内容</dd>
</dl>
三者区别:
- 无序列表只是纯粹的表示一些相关项的列表,这些项或者顺序不重要或者没有编号或者不以字母顺序为序。在HTML中创建无序列表使用块级元素ul,列表中的项用块级元素li表示。
- 有序列表元素ol,以及其中的列表项和无序列表相似。主要的不同在于有序列表中每项的顺序很重要。与无序列表显示一个实心的小圆点不同,默认有序列表显示数字的序号。使用CSS可以将其更改为字母、罗马数字或者其他。
- 定义列表有别于无序列表和有序列表。定义列表通常用来概述多个及其描述,通常是专业集。在HTML中使用dl元素来表示定义列表,定义列表中不使用li定义列表项,而需要使用两个元素:定义术语用dt元素,定义属于的描述用dd元素。
在哪些情况下使用哪种(重要)?
- 如果项目之间有顺序之分可以使用有序列表;
- 如果是无序的项目则可以使用无序列表;
- 如果需要概述多个项目及其描述可以使用自定义列表。
- 如何去除列表前面的点或者数字?
通过设置list-style:none。
- class 和 id 有什么区别?什么时候用 class 什么时候用 id?
- id加前缀#,class加前缀.
- id一个页面只能使用一次,class可以使用多次。
- id是一个标签,具有独一无二性,用于区分不同的结构和内容;class是一个样式,可以套在任何结构和内容上。
- 概念不同:id先找到结构/内容,再定义样式,class先定义好样式,再套给多个结构/内容。
大部分时候用class,比较灵活。当要用 Javascript 的 GetElementByID 函数时,要用 id。且id和class都区分大小写。
- 块级元素、行内元素是什么?有什么区别?分别对应哪些常用标签?
块级元素:
- 占用空间是一整行;
- height、line-height、padding、margin都可调控;
- 宽度缺省是它容器的100%;
- 可容纳行内(内联)元素和其他块元素。
常用的块级元素:div、p、h1...h6、table、tr、ul、li、dl、dt、form
行内元素:
- 占用空间是它自身的内容宽度;
- height、line-height、padding、margin不可改变;
- 宽度是它本身的文字或图片宽度,不可改变;
- 内联元素只能容纳文本或其他内联元素。
常用的内联元素:a、span、img、input、button、em、textarea等
区别:
- 块级元素不能并排显示,只能单独显示一行;行内元素可以并排显示;
-
display: block、display: inline、display: inline-block分别有什么作用?
- display: block 将元素转化为块级元素,可以设置宽高,可包含块元素和内联元素,不设宽度时自动撑满一行;
- display: inline 将元素转化为行内元素,可以不独占一行,可包含块元素和内联元素
- display: inline-block 将元素转化为行内块级元素,可以不独占一行,同时可以设置宽高,不设宽度时宽度由内容宽决定,ie6,7下不支持inline-block
- form表单有什么作用?有哪些常用的input 标签,分别有什么作用?
form表单用于把用户输入的数据提交到后台。
常用的input标签:
- text:定义单行输入字段,用户可在其中输入文本。
- radio:单选按钮
- checkbox:复选框
- passward:定义密码字段
- button:可点击按钮
- submit:提交按钮
- reset:重置按钮
- textarea:多行文本区域
- hidden:隐藏域
- file:输入字段和“浏览”按钮,供上传文件。
- image:定义图像形式的提交按钮
- post 和 get 方式的区别?
- get是默认的,数据提交方式不同,get提交的数据url可以看到,post看不到;
- get一般用于提交少量数据,post用于提交大量数据;
- get最多提交1K数据,受浏览器的限制,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 中。 |
- 在input里,name 有什么作用?
- name属性规定input元素的名称;
- 用于对提交到服务器后的表单数据进行标识,或在客户端通过javascript引用表单数据。
<button>提交</button>
、<a class="btn" href="#">提交</a>
、<input type="submit" value="提交">
三者有什么区别?
- 第一个是提交按钮,后续用于绑定JS事件使用;第二个是在当前页面有个提交按钮的链接,点击不会有提交的效果;第三个是用来提交表单数据,
- radio 如何 分组?
当name相同时,分成一组
- placeholder 属性有什么作用?
提供可描述输入字段预期值的提示信息
type=hidden
隐藏域有什么作用? 举例说明
- 隐藏域在页面中是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序使用。浏览者单击发送按钮发送表单时,隐藏域的信息也被一起发送到服务器。
- 当form中有多个提交按钮时,可以在每个按钮上写一个隐藏域,使程序能够分清楚到底用户是按哪个按钮提交的
- 当一个网页有多个form时,由于不能同时提交,但这些form又相互作用时,可在form中添加隐藏域使他们联系起来
- js不支持全局变量,当必须使用全局变量时可先把值存在隐藏域中,使之不丢失