HTML4

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

1.有序列表ol>li；列表有顺序编号（默认列表前加1.，2.，3.，...编号），适用于有逻辑顺序的排列项目，而且次序不能乱。
2.无序列表ul>li；列表无顺序（默认列表前加"."），适用于并列显示的项目，项目无先后顺序
3.自定义列表dl>dt表头>dd表内容,dt为项目名称，dd项目名称的描述，一个项目名称可以有多个项目描述。自定义列表更简单，精准
如何嵌套：把一个元素放在另外一个元素中称为"嵌套"，在列表中，可以把一个ol或者ul作为某个li的内容，这样就在列表中嵌套了另一个列表。
例子：

Paste_Image.png

  
  

  
    

      
有序列表0001
      
有序列表002
        

          
嵌套无序列表001
          
嵌套无序列表002
        
      
      
有序列表0003
      
有序列表004
        

          

            自定义列表001
自定义列表项目描述
          
        
      
    
  

---

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

ul{list-style:none;}

---

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

id在页面上是唯一标识，class在页面上标识某一类型的样式，具有普遍性，可以重复使用。某元素的class名可以写成class="intro other"，即可以有多个class名，代表叠加两个类名称对应的样式。id名不能这样写。ID名常用在页面布局（标记大框架），class一般在局部页面布局中使用，用于样式定义，因为class可以重复，所以为多个元素赋予同一class简化代码量。

---

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

1.块级元素：独占一行可设置宽,高,margin,padding。块级元素是其他元素的容器元素，可以容纳其他块元素或者行内元素;行内元素只能够容纳文本内容或者其他的行内元素。常见块级元素：div,p,h1..h6,table,tr,ul,li,dl,dt,form
2.行内元素：占用空间是他自身的宽度。对于行内元素，手动设置宽高是无效的，它本身的高度是由自身决定的。行内元素可以通过line-height来设置高度。常见行内元素：a,span,img,input,button,em,textarea
3.块级元素中宽高和内外边距都可以设置的；行内元素设置宽高是无效的，它本身内容的宽度就决定了它的宽高，不能手动设置，行内元素的左右margin和padding是有效的，上下的margin和padding是不占据空间的，但是加边框后能看见其范围。注意上下方向设置margin，padding元素范围是增大了，但是对元素周围的内容是没影响的。a元素为行内元素，改变上下padding时元素范围增大（边框可看出），但对周围元素无影响。

Paste_Image.png

---

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

display:none;将元素设置成不显示，脱离文档流，但在dom树中还存在
display:table-cell;将元素设置成表格单元格，可通过vertical-align=middle设置垂直居中（vertical-align仅对行内元素和表格单元格元素生效）
display:block; 将元素设置成块级元素
display:in-line;将元素设置成成行内元素
display:inline-block;将元素设置成行内块元素，既像行内元素水平排列，又能像块级元素设置宽高，设置上下左右padding，margin。inline-block:IE8以下浏览器不支持

---

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

  

    

        
        

         
导航1
          
导航2
          
导航3
        
    
  
  

    

    
侧边栏
    
中心区块
    
  
  

    

  

以上代码的作用是先用id命名的方式将页面划分为header，content，footer三部分，header区域有网站logo（图片链接），有导航列表，content区域分侧边栏和中心区块。局部页面布局用class命名方式（这里class都为warp），便于对局部页面有共性的部分设置统一的样式。

---

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

选择正确合适的标签，合理的标签命名，使用合理的代码结构，语义化使页面结构更清晰，代码更加便于阅读和维护，同时便于爬虫和浏览器更好的解析。标签语义化明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。书写代码时注意的细节：命名要有含义，单词组用中横线连接，大小写规则统一。在网页上要展示出来的页面内容一定要放在body标签中。

---

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

form表单的作用是把用户输入的数据提交到后台。其name属性为表单提交的名称，action属性为提交到的网址（如不写默认提交到当前页面），method属性为提交方式get/post。
常见input标签

       单行文本区 

      密码区  

       男 

       女 

       汽车 

       游戏 

       旅游 

      请输入文本 

      
      苹果
      香蕉
      苹果
      香蕉
       

       提交 

       重置 

      

    
```
***
#####9.post 和 get 方式的区别？
get（GET用于信息获取）:把要提交的数据拼装成url，提交的数据信息可见。get一般用于提交少量数据，浏览器限制最多提交1K（浏览器地址栏装不下超过1K的信息啊）。get提交的数据会保存在浏览器历史记录中，不安全。
post（向服务器传送数据，是可能修改服务器上的资源的请求）:提交的数据不是url，所以数据内容不可见，可提交大量数据，浏览器无限制，文件大小受服务器限制.

如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 GET 方法，因为该方法允许把表单这样的参数包括进来作为URL的一部分。而另一方面，使用POST样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统 `` 标签的内容.
***
#####10.在input里，name 有什么作用？
input标签设置了name属性，才能在提交表单时传递属性和value值。另外，input在checkbox,radio类型中，name一致时代表选项为一组。
```html
自行车
小车```
love[ ]为数组形式，当可选项太多时，用这种数组方式便于js获取数组对应的值
***
#####11.三者有什么区别？
`提交`普通按钮，需要绑定js事件后点击后才有效
`提交`应用了自定义按钮样式的a链接，点击后跳转到某个页面，让a链接应用按钮的样式是因为鼠标悬停a链接时有手势，让用户觉得是可点的。
``是form表单的提交按钮，将form表单中的数据发送给后台服务器
 ***
#####12.radio 如何 分组?
单选按钮radio元素，当radio元素的name值一样时，这些input标签归为一组。即同一组的单选按钮，name 取值一定要一致，比如下面例子输入性别的时候，name属性为同一个名称“sex”，这样同一组的单选按钮才可以起到单选的作用。如果name不一致，那么两个选项就都能选，这样就失去了单选按钮的意义。

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2453530-0f834b38276b513c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
```html
男；
女；

---

13.placeholder 属性有什么作用?

在输入框的提示信息
单行文本区

---

14.type=hidden隐藏域有什么作用? 举例说明

隐藏域（暂存数据用户不可见，可用作后台预埋密钥信息以验证用户提交数据是否为伪造，只有当服务器接收到的hidden和服务器预埋在页面的信息一致时，才能成功提交表单数据）
如下例子：type=hidden的元素用户不可见，但提交表单时，hid的值test已提交后台。



Paste_Image.png

---

15.表单代码
demo

---

版权声明：本教程版权归覃宴峰和饥人谷所有，转载须说明来源！！！！