vlambda博客
学习文章列表

继续接上回,HTML快速入门

时代变了,拖更王也回来了,

3.列表的属性

①有序列表的属性

type 指定标识项的类型

  取值   1  默认值  数字

         a/A

         i/I  罗马数字

start 指定启示编号的位置

②无序列表的属性

type 指定列表标识类型

  disc 默认 实心圆

  circle 空心圆

  square 实心方块

  none  

4.列表的嵌套

①列表中嵌套其他元素

ex:  ul>li>a

②列表嵌套列表

被嵌套列表,必须在li中

ex:ul>li>ul>li

5.定义列表

需要一个名词+对这个名词的解释

<dl>

  <dt>名词<dt>

  <dd>对这个名词的解释说明</dd>

</dl>  

.结构标记

1.用于描述整个网页结构,取代div做布局一套标记

为什么要使用结构标记,而不用div

结构标记跟div的作用是一模一样

但是结构标记有语义方便阅读

使用有语义的标签可以让页面在被搜索的时候更靠前

2.常用的结构标记

 

1.<header></header>

定义网页的头部或者某个区域的顶部

2.<footer></footer>

定义网页脚部或者某个区域的底部

3.<nav></nav>

定义网页导航部分

4.<section></section>

定义网页主体内容

5.<aside></aside>

定义网页侧边栏

6.<article></article>

定义与文字相关的内容比如论坛回帖用户评论

.表单(重点+难点*****)

1.作用

1.提供了可视化的输入控件

2.收集用户输入的信息,并提交请求给服务器

   form自带收集数据,提交请求的功能

   使用ajax,就不需要form

2.表单的组成

1.前端部分

  提供表单控件,与用户交互的可视化控件

2.后端部分

  后台接口对提交的数据进行处理

3.表单

<form></form>

①action属性

定义表单提交时发生的动作(接口url)  action="url"

如果action没有定义接口默认提交给当前页面本身

②.method属性

定义了表单提交请求的方式(请求的方法)

method不写默认get方法

restful API规范中

1.get 默认值

        提交的数据有大小限制最大为2KB

        向服务器要数据的时候使用get(查)

2.post

        提交的数据没有大小限制

        要传递给服务器数据的时候使用post,restful要求,只有增加操作的时候,使用post

3.delete 同get是明文提交

         restful要求,删除使用delete方法

4.put 同post隐式提交提交的数据在请求主体

         restful要求,修改使用put方法

③enctype属性

指定表单数据的编码方式

设置允许将什么样的数据提交给服务器(文本,文件)

enctype=""  

取值:1.text/plain 允许提交普通字符给服务器

      2.multipart/form-data允许提交文件给服务器

      3.application/x-www-form-urlencoded 允许提交任意字符给服务器 对于form表单这个值是默认值

4.表单控件

form标签中能够与用户进行交互的可视化元素

①分类

input  9种,H5新出10种

textarea 多行文本域

select和option 下拉选

其它元素

②input元素

属性:

type,指定input的类型如果不写type,默认是文本框

name 为控件定义名称在form中input控件不写name

      无法提交.name属性的值必须对应后台获取数据的值

 

value 真正提交给服务器的值

      例外对于按钮,value是按钮上文本

disabled 禁用 不能修改,并且不能提交

         无值属性

③input元素详解

1.文本框和密码框

文本框 type="text"

密码框 type="password"

属性

maxlength 指定输入的最大长度

readonly 只读无值属性只能看不能改但是可以提交

placeholder 占位提示符默认显示在控件上的提示文本

2.按钮

提交按钮 type="submit" 将表单中的数据收集整理发送给服务器

普通按钮 type="button" 没有功能配合事件调用js代码

重置按钮 type="reset" 将当前表单的内容恢复到初始状态

3.单选和复选按钮

单选按钮 type="radio" 必须有name属性有了name属性才能

            提交name属性为单选按钮分组,有了name属性,

            取值还要相同,才会出现单选效果

            必须有value值不然提交的是on

复选按钮 type="checkbox" 必须有name属性分组

            name属性,必须用数组,必须有value值

属性 checked 默认选中无值属性

4.隐藏域

把数据提交给服务器但是又不想展示给用户看

这种数据使用隐藏域

type="hidden"  用户看不到但是可以提交给服务器

5.文件选择框(上传文件)

type="file"

注意 form的method要使用post方法

     form的enctype要使用multipart/form-data 传输文件

属性 multiple 无值属性同时传输多个文件

     但是name值此时要是数组 

textarea 多行文本域

理解成一个大文本框

<textarea></textarea>

允许录入多行文本

属性  cols="" rows="" 根据计算机硬件的不同设置数字不准确

⑤下拉选

<select>

 <option></option>

</select>

注意

1.如果option没写value属性,select的value等于选中option的内容

2.如果option写了value,select的value等于选中option的value

属性

select的属性  name  value

      size  默认为1,1的时候是下拉选

            >1,变成滚动选择框

      multiple 无值属性设置多选需要name使用数组

option 默认选中 selected

⑥其它元素

1.label 关联文本与表单控件

<label for="关联控件的ID">文本</label>

效果点击文本 ,被关联的控件也会被点中

2.为控件分组

<fieldset></fieldset> 分组

<legend></legend>  分组的标题 写在fieldset中