列表块级元素7

本教程版权归凯旋和饥人谷所有，转载须说明来源

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

有序列表元素ol
以及其中的列表项和无序列表相似。主要的不同在于有
序列表中每项的顺序很重要。与无序列表显示一个实心的小圆点不同，
默认有序列表显示数字的序号。使用CSS可以将其更改为字母、罗马数字或者其他。
 
    
列表项1
 
    
列表项2
    
列表项n

无序列表只是纯粹的表示一些相关项的列表，这些项或者顺序不重要或者没有编号
或者不以字母顺序为序。
在HTML中创建无序列表使用块级元素ul，列表中的项用块级元素li表示。
默认情况下大多数的浏览器会在每个无序列表项的
前面加上一个实心的圆点。这些实心的圆点代表了列表的项并且可以用CSS来更改

     
列表项1
     
列表项2
 
     
列表项n

定义列表通常用来概述多个及其描述，通常是专业集。
在HTML中使用dl元素来表示定义列表，
定义列表中不使用li定义列表项，而需要使用两个元素：定义术语用dt元素，
定义属于的描述用dd元素。
一个定义列表可能会有多个定义和描述，一个接一个。
另外一个定义列表，可能每个描述对应多个术语，也可能每个术语有多个描述。
单个的属于可能有多个意思，根据多个定义。相比之前，一个描述更可能适合多个术语。
在添加定义术语和描述时，属于必须在描述之前。随后的术语和描述依此排列即可。
定义列表中没有任何的列表项元素，
然而定义列表中默认会将描述缩进。你可以通过CSS的margin和padding属性来调整缩进。

    
主题1
    
内容1
    
主题2
    
内容2

以上三种列表方式可以相互嵌套，也可以自身嵌套同种列表方式
从而实现所要达到的效果

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

可以用标签选择器li{list-style:none;}

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

class代表的是类，具有普遍性，可以被多次引用，可以应用到任何结构和内容上。
class在页面布局上先定义好一类样式比如一些常规的button，然后根据页面需要把类样式应用到
不用的元素和内容上。id具有唯一标识性.唯一性，一般只在一个页面上使用一次，也可以重复定义，
但是会被W3C认为不符合标准无法解析。
使用区别
当有几个元素有共同属性时，用class，
独一无二的属性时，用id.一般情况下，大的层一般用id,里面的内容有重复用时，一般用class.

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

block（块）元素的特点：
①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素
一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
inline元素的特点：
①相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容 而变化
②设置宽高是无效的，（加border展示有），上下margin.padding不占空间，左右margin,padding 有效
③宽度就是它的文字或图片的宽度，不可改变
④内联元素只能容纳文本或者其他内联元素
块元素：：div , p ,h, form, ul, li , ol, dl , table等
行内元素：a , span, strong, em, br, img , input, label等

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

.display:block
此元素将显示为块级元素
display: inline
此元素会被显示为行内元素
display: inline-block
元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性

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

 
   


 
   

     

        
          
         
    
 
        
导航1
 
        
导航2
        
导航3
   
 
  
 
 
      
 
          
侧边栏
 
          
中心区块
     
 

 
      
这里是 footer



将页面分为header、content、footer三大区块，
每个区块分别具有唯一标示id。
在内部结构中，又因为样式相同并且要注意语义化，命名风格保持统一，用class设置了wrap类，设置了统一的宽度和边距。
其中content区块包含了main和aside两部分。

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

语义化的主要目的就是让大家直观的认识标签和属性的用途和作用，便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

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

标签用于为用户输入创建 HTML 表单，用于向服务器传输数据。
input标签常用属性：
type-规定 input 元素的类型
value-规定 input 元素的值
src-定义以提交按钮形式显示的图像的 URL
name-定义 input 元素的名称
width/height-定义字段的宽/高

1、type=“text”: 用于输入文本。placeholder属性（可选）展示的是输入框里的提示，
maxlength（可选）限制最大输入长度；

2、type=“password”: 用于输入密码，输入的内容显示为星号。

3、type=“radio”: 单选圆圈按钮。** 注意：name要相同才能实现单选，value要有值 **
 男
 女
4、type=“checkbox”: 复选框。
** 加checked属性会默认选上。 **提交时，如果选中（如bike），则bike=on
自行车
汽车
5、type=“textarea”: 文本域，用于输入多行文本

6、type=“hidden”: 隐藏域，用户看不到，用于暂存数据。或者安全性校验


7、type=“button”: 定义可点击的按钮，
但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。

8、input type=“image”: 定义图像形式的提交按钮。
必须把 src 属性 和 alt 属性 与type=“image” 结合使用。

9、type=“reset”: 定义重置按钮。重置按钮会清除表单中的所有数据。

九 、post 和 get 方式的区别？

get方式以显式提交表单，可以在URL（地址栏）看见我们传的参数,post方式是隐式传值，不可见
get一般用于提交少量数据，最多提交1k数据，post用于提交大量数据，受服务器限制
get提交的数据在浏览器历史记录中，安全性不好

包含机密信息的话用post；
在做数据查询时，用get方式；而在做数据添加、修改或删除时，用post方式；

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

用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
在单选框中需要设定像同的name以保证是同一个单选框：
男女
在复选框中也可以把name设置成一个数组：
运动吃

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

元素内部，可以放置任何内容，如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处（当然，前两个用图片背景也可以做到）。缺点是不同的浏览器得到的value值不同；可能还有其他的浏览器兼容问题，需要绑定事件配合JS用。
提交
是定义名为『提交』的超链接，而不是一个具体的按钮（button）。

这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。

默认用来提交表单数据，也可以绑定事件，绑定的同时也会触发提交表单数据。

十一 、radio 如何 分组?

radio控件是通过name属性进行分组的，当其name属性相同的时候。这些radio为一组。

男
女

十二 、placeholder 属性有什么作用?

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

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

隐藏域，页面上看不到，但源代码里可以看到。主要暂存数据和安全校验。比如，向服务器提交数据的表单经常使用hidden对象来保存用户填写的数据，在页面中不会呈现但是会随着提交按钮把数据一起提交到后台。