在html中列表是块元素还是,HTML基础知识4-列表及表单的写法、块级元素和内联（行内）元素的区别...

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

1、简单例子如下：

Document

div.div1

{

background-color:#bbb;

color: red;

}

div.div2{

background-color:#ccc;

color: green;

}

div.div3{

background-color:#ddd;

color: blue;

}

1. 打开冰箱门
2. 把大象放入冰箱
3. 关闭冰箱门

• 苹果
• 香蕉
• 梨子

国内杀毒软件

360杀毒

金山毒霸

国外杀毒软件

卡巴斯基

比特梵德

2、语义区别及使用情况如下：有序列表表示列表项间有先后顺序；无效列表则表示各项间无先后顺序，其可随意调换位置(以后使用最多)；自定义列表则表示 dt(列头)对dd(列表内容)概括或具有父子属性关系等；

3、嵌套时应从大类写起，大类写完后再逐步补充子项目；自己写了个嵌套示范代码如下：

Document

• 新上线

  百度商桥

  在线沟通助力精准营销

  百度H5

  可视化 H5 页面制作工具

  度秘

  每个人贴心的秘书

• 搜索服务

  百度软件中心

  PC软件资源下载

  网页

  搜索海量网络资料、资源

  视频

  搜索海量网络视频

• 导航服务

  hao123

  网址导航

  网站导航

  百度网址大全

  百度口碑

  传播最真实的评论

二、如何去除列表前面的点或者数字？

在style中加入list-style: none即可；

代码实例

Document

ol.no

{

list-style: none;

}

1. 有数字
2. 有数字
3. 有数字
4. 有数字

1. 无数字
2. 无数字
3. 无数字
4. 无数字

三、class 和 id 有什么区别？什么时候用 class 什么时候用 id？

区别：

1、一个id选择器在一个HTML中只能出现一次，不能重复使用，class 可被多次使用；

2、id选择器可被javascript中的GetElementByID函数所调用，而 class不支持javascript ；

3、ID样式优先级高于class；

一般情况下优先使用class(因其可被使用多次)，但遇到javascript时一般采用id；

四、块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？

块级元素(block element)又名块元素，和其对应的是行内元素(inline element又称内联元素)，都是html规范中的概念。大多数HTML 元素被定义为块级元素或行内元素。块级元素在浏览器显示时，通常会以新行来开始(和结束)。而行内元素只占据它对应标签的边框所包含的空间，且可一并排显示；块级元素需占用一行，其为垂直显示；

五、display: block、display: inline、display: inline-block分别有什么作用?

display:block： 此元素将显示为块级元素，此元素前后会带有换行符；

display:inline ：此元素将显示为行内(内联)元素，此元素前后不带换行符；

display:inline-block ： 此元素对象将显示为行内元素特性，其对象内容具有块级元素特性；(其为CSS2.1 新增的值，IE(低版本IE)本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象)

以下自己编写的代码可作为佐证：

Document

a.abiaoqian

{

display: block;

}

a.inlineblock

{

display: inline-block;

margin-top: 30px;

}

p

{

display: inline;

}

a标签产生换行现象

/啊a标签产生换行现象了

p标签不产生换行行为

/啊p标签不产生换行行为了

将该元素对象视作行内元素看待，但元素对象内容具有块级元素的特性

试试是否在一行

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

.wrap

{

width: 900px;

margin: 0 auto;

}

• 导航1
• 导航2
• 导航3

侧边栏

中心区块

这里是footer

以上代码将页面总体分为三个部分：头部、内容部、底部。这三个部分采用不同的id独立命名，而其内部则采用class的方式命名，以便统一管理样式。

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

个人理解为编写代码时应规范严谨，使用合适的标签及恰当的命名从而使得搜索引擎、浏览器及维护代码等相关人员均能够很好的理解代码中的相应的含义，有时即使样式丢失或去掉样式，也能够以一种文档格式显示网页内容；

平时写代码时，比如图片记得使用alt标签，命名class或id时采用相关且恰当的字母或单词以便于识别等等；跟语义化不相关的网页设计应注意的细节可见https://www.zhihu.com/question/25535246/answer/31037613

** 八、form表单有什么作用？有哪些常用的input 标签，分别有什么作用？**

其作用为将用户输入表单的信息提交至后台；

常见的input标签有如下示例：

文本输入用

密码输入用

复选用

单选用

暂存数据或做安全校验用

上传文件用

提交表单数据用

提交表单数据用

重置之前所填的表单数据

自定义图片形式的提交按钮

注：使用时，一定要和src属性及alt属性结合使用。

** 九、post 和 get 方式的区别？**

1、post传递数据时不会在url体现出来，而get则会体现，因此使用get时不应该使传递敏感的数据比如密码等；

2、post传递的数据大小根据服务器而定，但get最多只能够传输1k数据；

3、post对数据类型无限制，包括二进制；get只允许 ASCII 字符；

4、post不能够被缓存，get能够被缓存；

5、post在网页后退或刷新时会重新提交数据而get无影响；

6、post编码类型可为application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。而get编码类型只有application/x-www-form-urlencoded；

其他可见：http://www.w3school.com.cn/tags/html_ref_httpmethods.asp

** 十、在input里，name 有什么作用？**

作用是对提交到后台的数据进行标识，或在客户端通过javascript引用表单数值。

十一、提交、提交、 三者有什么区别？

提交 其只提交“提交”(就IE浏览器而言，其他浏览器则提交value值)；【button间除了可放置文本以外还可放置多媒体内容，但其唯一禁止使用的元素是图像映射】

提交 只是一个链接，点击后其只是刷新而已，其不会传递数据；

其会将表单内容传递至后台

其实还有 其虽然也可生成“提交”按钮，但点击后无反应(不提交数据)，需绑定js；

** 十二、radio 如何 分组？**

当其属性相同时应分为一组(使用同一个name即可)，比如 苹果、梨子、香蕉可分为一组；

** 十三、placeholder 属性有什么作用?**

可提示用户输入相应数据，但当其获得焦点时则会消失；

十四、type=hidden隐藏域有什么作用? 举例说明。

其作用为暂存数据或用于安全校验使用；比如：

Document

hidden有什么作用？

以上代码运行使用chrome开发者工具可以看到向后台传递了“安全校验/hidden.php”这组信息。

安全校验.png

十五、代码题

写出如下form表单，性别和取向是单选，爱好是多选

0_1462783789100_upload-4d6e7226-5bc4-4337-bbc7-d3a17f2af7d9

代码详见如下：

Document

form{

line-height: 40px;

}

textarea

{

width: 300px;

height:300px;

}

姓名：

密码：

性别: 男

女

取向: 男

女

爱好： dota

旅游

宠物

评论：

我的car：

萨博

奥迪

宝马

奔驰

**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *