任务7-html4

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

1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。

• 有序列表

把大象塞进冰箱

1.打开冰箱
2.把大象塞进冰箱
3.关上冰箱

• 无序列表

维修工具

螺丝刀
镊子
钳子

• 自定义列表

电子产品

手机
一种通讯工具
vr眼镜
虚拟现实头戴显示器设备

2.三者在语义上有什么区别？在哪些情况下使用哪种（重要）？

• 首先根据字面意思理解它语义上的区别，语义区别来确定哪种情况下用对应的列表标签。
• 用有序列表来表示一件事情的顺序步骤。比如手机贴膜，无论怎么把手机膜贴到屏幕上，不管个人习惯，总有一个顺序来操作。又比如把大象塞进冰箱里。
• 用无序列表来表示同级别的人事物。比如准备一道菜需要用到的食材，修飞机需要用到的工具。
• 用自定义列表来阐述一件事物。比如什么是手机，它用来干什么。又比如什么是前端工程师。

3. 如何嵌套？

    

        维修工具
    
    

        
螺丝刀
        

            
一字螺丝刀
            
十字螺丝刀
        
        
镊子
        

            
尖头镊子
            
平头镊子
        
        
钳子
    

代码显示效果如下图：

Paste_Image.png

---

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

代码显示效果图如下：

Paste_Image.png

---

3.class 和 id 有什么区别？什么时候用 class 什么时候用 id？

• ID具有唯一性，Class具有普遍性。

• ID是唯一的，所以尽量在结构外围使用，通常用于页面布局。
• Class是可重复的，所以尽量在结构内部使用，通常用于样式定义。
• ID的样式优先级高于Class。
  搬运知乎用户Milo的答案。

---

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

块元素特立独行；内联元素随波逐流。 －Head First HTML与css

块级元素：

• 总是在新行上开始；

• 高度，行高以及外边距和内边距都可控制；
• 宽度缺省是它的容器的100%，除非设定一个宽度。
• 它可以容纳内联元素和其他块元素

内联元素：

• 和其他元素都在一行上；

• 高，行高及外边距和内边距不可改变；
• 宽度就是它的文字或图片的宽度，不可改变
• 内联元素只能容纳文本或者其他内联元素

分别对应哪些常用标签？

块元素：、< p >、

、< blockquote >、

---

...
内联元素：< a >、< img >、< q > 、< strong >、< em >...
详见更多

---

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

display属性规定元素生成的显示框类型。

值	作用
display: inline	默认值。显示为内联元素，元素前后没有换行符。
display: inline-block	对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。注:IE6不支持，需要使用*display:inline;zoom:1;
display: block	显示为块级元素，前后会带有换行符。

---

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

  
    
    
    
  
  

  

    
    

      
导航1
      
导航2
      
导航3
    
  


  

    
侧边栏
    
中心区块
  
  
  

    
这里是 footer

  
  

上面这段代码使用div来布局网页，网页主要三大块，分别用id来表示header、content、footer。而三大块内的样式则用class="wrap"来包裹起来，块宽为900px;上下外边距为0，左右为auto。

---

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

HTML CSS语义化，我个人的理解是，一个标签，或者一个id，class,它的本质是什么，就应该用在那个地方。比如div和p标签，通过样式设定两者都能在浏览器中显示一些相同的效果，不用审查元素可能根本分不出来，那么当它需要呈现文字内容的时候，就应该用p标签，当它作为一个布局的块元素时，就应该用div。这就是标签的语义化。id是唯一的，而且优先级较高，class不是唯一的。把id比喻成身份证号，而class比喻成人类，人类有很多民族，每个民族都有一群人有他们固有的共同特性。在对id和class命名的时，根据内容或者功能来命名，比如中国的省份，北京、上海、广州，每个省份的命名有它独一无二的历史，而不可能把中国的省份命名成，北京，北京1，北京2。这样让人无法理解。在css语义化中更应该注重大小写的统一。

---

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

• form用于申明表单，定义采集数据的范围，
  和
  里面包含的数据将被提交到指定的地址。

Paste_Image.png

• 常见的input标签：

Paste_Image.png

• 文本域：

        姓名：
        
    
 ```
  - 密码域：

账号:

密码：

  - 复选框：

  
 学习前端需要掌握以下哪些知识：
 
    html
    css
    js

  - 单选按钮：

男性：



女性：

注：因为是单选，所以name=""必须一致，否者导致可以勾选多个选项且无法取消之前的勾选。

 - 下拉列表：

  
选择一个最喜欢的游戏？
    
        dota
        lol
        cs
        冒险岛
    

 - 多文本输入框：

行数</em>/ cols="30"/*字符宽度 */><br> 评论内容不少于30字。<br>

 - 创建按钮：

  - 带有输入框和提交功能的表单：

账号:

密码:

***

# 9.post 和 get 方式的区别？
1.Get请求把表单的数据显式地放在URI中,并且对长度和数据值编码有所限制（1k）。GET一般用于获取/查询资源信息。

2.Post请求把表单数据放在体中,并且没有长度限制（由各服务器做限制）。POST一般用于更新资源信息。
***
# 10.在input里，name 有什么作用？
name 属性的表单元素在提交表单时传递它们的值,*value*＝''时，上传时name:on，*value*＝"xx"时，上传name:xx。
***
# 11. 提交、提交、 三者有什么区别？
- 提交:只是一个创建按钮的标签，需要绑定事件来实现功能， 与  标签之间的所有内容都是按钮的内容。

- 提交:正如a标签的本意，只是一个链接，在这里是一个*锚*链接，点击提交后跳转到相应位置。
-  ：网页上需要提交信息到服务器。
***
# 12.radio 如何 分组?
需要将radio中的name设置为相同，即可分组，实现单选效果，如果name不相同，则无法实现单选效果，也无法需要之前选中项。
***
# 13.placeholder 属性有什么作用?
placeholder:""在输入框显示提示效果,并在输入框点击后消失。
***
# 14.type=hidden隐藏域有什么作用? 举例说明

    
登入
    

        账号:
        
        
 密码:
        
        
        
    

显示如下：
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2400583-2649fb7439d27576.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 ###### 同样被提交但不显示在页面，用此作为安全校验。
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2400583-3a3395469d3dff4d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
***
***本教程版权归饥人谷本人和饥人谷所有，转载须说明来源！！！***