任务7——HTMl表单、列表等使用

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

列表,顾名思义,是HTML中表示一组项目的列表,包括:有序列表、无序列表、定义列表等。
eg





    
    task-7



    
前端基础知识:
  1. html
  2. css
  3. Javascript
我的爱好:
  • 编程:
    • 前端
    • 后端
    • 运维
  • 绘画
  • 篮球
我爱吃的食物:
各种鱼类,除了刺多的鲤鱼
基围虾,龙虾之类的海虾
当然是阳澄湖大闸蟹好吃啦

效果图:

任务7——HTMl表单、列表等使用_第1张图片
列表效果图

简单来说语义区别

  • 有序列表定义一组有顺序要求的列表项目;
  • 无序列表定义一组对顺序没要求的一系列列表项目;
  • 定义列表定义一系列项目,同时定义项目的描述
  • 正是定义列表有了项目描述,所以和无序列表区别就在此。

使用情况

  • 有序列表在列表项目对顺序有要求的时候使用。
  • 无序列表在列表项目对顺序没要求时使用,可以是任何一系列项目。
  • 定义列表在对项目有描述要求时使用。
    列表嵌套
    在需要嵌套列表的列表项目里,即
  • 中,再写一个列表即可。
    eg
    
  • 编程:
    • 前端
    • 后端
    • 运维
  • 绘画
  • 篮球

效果图

任务7——HTMl表单、列表等使用_第2张图片
嵌套效果图

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

在样式里,写上list-style: none或者list-style-type: none即可。
eg

    

效果图

任务7——HTMl表单、列表等使用_第3张图片
有序列表和无序列表默认样式全无

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

选择器名称 描述
class 类选择器,在html中可以多次使用
id ID选择器,一个id只能在html中使用一次
区别 使用区别:每个id仅能使用一次,class可以多次使用;
语义区别:id唯一标识元素,多用于重要元素,权重更大,而class主要是应用常见样式用的比较多
使用 id多使用于主要块级元素,有些独一无二元素也可用id;
class用于要重复使用样式的除id其他块级或行内元素

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

名称 描述
块级元素 html中,以新行来开始和结束,即独占一行
行内元素 html中,不占用一行,不以新行开始
区别 1. 块级元素占用一行,行内元素不占用一行;
2. 块级元素margin,padding,width,height都可以设置,而行内元素无法设置width,height,margin只能水平改变,padding都可以改变,但上下方向只对背景起作用,不占用空间

块级元素:

任务7——HTMl表单、列表等使用_第4张图片
块级元素.png

行内元素:

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, label, select, input, textarea

eg





    
    task-7
    



    

h是块级元素

P是块级元素

  • 无序列表
  1. 有序列表
表头1 表头2
cell1 cell2
行内元素
这里是div.
项目
描述
性别:
引用。
行内元素
行内元素 行内元素 ![女神惠利](http://upload-images.jianshu.io/upload_images/2404178-76f456081933ddf6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 引用

效果图

任务7——HTMl表单、列表等使用_第5张图片
效果图

发现的问题

1. 有两个标签有问题

  1. input
  2. img
    当我给行内元素设置width,height时,两者发生了改变;也就是说,input和img不是纯行内元素,经网上资料查询,发现这两者是inline-block元素,有着block和inline共同的特点,如下所示:
            q,a,span,input,img {
            border: 1px solid green;
            width: 70px;
            height: 70px;

任务7——HTMl表单、列表等使用_第6张图片
inline-block效果图

同理,又进行了相应的margin和padding的设置,发现两者有着block的特性。


2. table表格占用问题
效果图中显示table表格边框未扩及整行,故我在其后方填写了一个行内元素a标签,而行内元素从下行开始,所以可以确定table元素是块级元素。


3. 行内元素padding设置校验



  
    
    a
    
  
  

2222

a b

选择:

效果图

任务7——HTMl表单、列表等使用_第7张图片
padding效果图

可以发现:只对背景起作用,而不占用空间。


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

三者都是CSS样式,块级元素和行内元素嵌套关系没有限制。display 属性规定元素应该生成的框的类型。

属性 描述
display: block 使元素显示为块级元素
display: inline 使元素显示为行内元素
display: inline-block 使元素显示为行内块级元素

eg



  
    
    a
    
  
  

2222

a b
选择:

效果图

任务7——HTMl表单、列表等使用_第8张图片
display效果图

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




  
  


  
  
侧边栏
中心区块

这段html用div将页面分成了若干块区,为了区分主次,在主要块区(头部,内容区,脚部)用id唯一标示,使人一目了然。同时,用class=wrap对内部结构进行统一的样式设置,margin外边距根据浏览器窗口自动调整,上下外边距为0,内部区块宽度统一为900px。


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

  1. 语义化指对代码结构要严谨规范,标签命名要有有意义;
    eg
    内容——content
    导航——nav
    侧边栏——sidebar
    这些命名就会使人很容易读懂代码。
  2. 命名尽量统一风格,命名中包含2个以上单词用“-”链接,并且大小写要统一风格。
    eg
    order-list不要写成:orderlist、order_list123、OrderList等。

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

标签用于为用户输入创建 HTML 表单,并向服务器传输数据。

属性 描述
action URL 规定当提交表单时向何处发送表单数据
method get
post
规定用于发送 form-data 的 HTTP 方法
name form_name 规定表单的名称
target _blank
_parent
_top
_self
framename
规定在何处打开 action URL

常见input标签:

  • 文本域:
    
      名:
姓:
任务7——HTMl表单、列表等使用_第9张图片
文本域
  • 密码域:
    
账号:
密码:
任务7——HTMl表单、列表等使用_第10张图片
type: password
  • 单选按钮:
    
男: 女:

name一样,方便分组,单选。


任务7——HTMl表单、列表等使用_第11张图片
type: radio
  • 复选框:
    
爱好:编程 女:绘画 女:篮球

name一样,方便分组,语义化。


任务7——HTMl表单、列表等使用_第12张图片
type: checkbox
  • 多行文本域:
    

不用在form元素里,比较特殊。


任务7——HTMl表单、列表等使用_第13张图片
textarea
  • 提交按钮:
    
任务7——HTMl表单、列表等使用_第14张图片
type="submit"

无论提交按钮放在哪里,都可以把form所有数据打包发送给后端服务器。

  • 隐藏域:
  
任务7——HTMl表单、列表等使用_第15张图片
type="hidden"

隐藏域,用户无法看到效果,但是表单存在,能够向后台发送hidden的数据,可用于安全校验,防止伪造表单数据。

  • 下拉列表:
      
      
任务7——HTMl表单、列表等使用_第16张图片
select下拉列表
  • 上传文件按钮:
type="file"
  • 重置按钮:
    
任务7——HTMl表单、列表等使用_第17张图片
type="reset"
  • 创建自定义按钮:
    
任务7——HTMl表单、列表等使用_第18张图片
type="button"
  • 图片按钮:
    

type="image"

可见 type="image"的标签对图片大小格式有一定要求,在提交的时候,浏览器将以像素为单位,将鼠标相对于图像边界的偏移量发送到服务器,其中包括从图像左边界开始的水平偏移量,以及从图像上边界开始的垂直偏移量。

总结:大体上就是这些表单功能,需要注意的就是name和value的使用情况。

参考HTML 标签的 type 属性


9. post 和 get 方式的区别?

get和post是两种不同的http方法,向后端发送form-data。
** 区别**:

  1. 使用:由于URL长度限制,get用于简短数据的获取,而当数据传输量较大时,用post方法。
  2. 安全性:get方法的URL和后台数据会显示所有信息,而其中涉及隐私安全部分也可见;post所有操作用户都是不可见的。
  3. 编码方式不同:Get限制Form表单的数据集的值必须为ASCII字符;而Post支持整个ISO10646字符集。
  4. get不会更改数据,只是获取数据;而经post处理的数据到后端会发生改变。

参考:
GET和POST区别详解
GET vs POST


10. 在input里,name 有什么作用?

name定义 input 元素的名称。作为可与服务器交互数据的HTML元素的服务器端的标示,或者在客户端通过 JavaScript 引用表单数据。由于后台传输数据值时要借用name,所以name是必需属性。


11. 提交三者有什么区别?

  • 是一个html标签,有众多属性,其中type属性可以设置属性值buttonsubmit,设置不同属性值其功能也不相同;可以包含丰富的内容,而input type="button"则不含有内容。
  • `提交是一个链接,点击会显示本页,不提交数据,只是指定链接位置。
  • 是一个form表单按钮,用于提交表单数据,而提交其内容

参考:HTML


12. radio 如何 分组?

只要radio中的name属性设置相同,即可分组。


13. placeholder 属性有什么作用?

用于在表单文本框中显示预设提示信息;该提示信息在文本框没聚焦且文本内容为空时显示,而输入文本内容后不显示。


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


    
账号:
密码:
任务7——HTMl表单、列表等使用_第19张图片
hidden

任务7——HTMl表单、列表等使用_第20张图片
hidden后台提交

如图,用户无法看见hidden的信息,当我点击“提交”时,浏览器会想后台传送hidden的数据,这一原理用在暂存数据和安全校验。只有当服务器接收到的hidden和预存的信息一致时,才能成功提交表单数据,与生俱来的安全性。


本教程版权归饥人谷_阿群和饥人谷所有,转载须说明来源

你可能感兴趣的:(任务7——HTMl表单、列表等使用)