列表和按钮

3 列表标签

先看看word中的列表

n  江西

n  河南

n  浙江

n  江苏

 

有序列表

1.        牛奶

2.        面包

3.        咖啡

4.        包子

3.1无序列表

<ul>:unordered  list  定义一个无序列表

<li>:list  item  定义一个列表项

Ctrl+D:复制当前（duplicate）

Type属性指定无序列表的符号，取值有：

disc:实心的圆点

circle:空心的圆圈

square:实心方形

<ultype="disc">

   <<li>浙江</li>

    <li>江苏</li>

    <li>江西</li>

    <li>河南</li>

</ul>

3.2有序列表

<ol>ordered  list，有序列表，即列表项带有序号

Type:属性指定序号类型，取值范围：1，A,a,i,I。

1.      序号为1.2.3.4....默认值

A：序号为A、B、C、D......

a 序号为 a,b,c,d.....

I 序号为 I.II.III,Iv;

I 序号为 i,ii,iii,iv

Start 属性从第几个开始，当取值为0或负数时，依次排序，等到0之后按指定类型进行排序。

 

3.3列表的嵌套

自学

<dl> defined list 定义一个自定义列表

<dt>defined title 列表项的标题

<dd>defined description 列表项的描述

3.4自定义列表

<dl>defined list自定义列表

<dt>defined title自定义标题

<dd>defined description列表项的描述

<dl>

    <h3 align="center">各国介绍</h3>

    <dt>中国</dt>

    <dd>河南 </dd>

    <dt>俄罗斯</dt>

    <dd>圣彼得堡</dd>

</dl>

4表单

4.1 什么是表单？

收集用户填写的信息将其提交到后台服务器。

<form  action=“#” method=“get”>

action,指定提交的地址。

method，指定提交的方式

①get有长度的限制为2k，且参数会在地址栏中显示，相对post来说不安全。

②post没有长度限制，参数不会在地址栏中显示，会在报文里显示信息。

4.2 文本框

<input type="text">

maxLength，指定最多几个字符

size，指定文本框的长度

value,初始值

<inputtype="text" maxLength="10" size="40"value="qwer">

 

4.4lable

<lable>的作用

（1）      可以对文字进行设置

（2）      For属性可以使和<input>进行关联，单机文字会激活相对应的文本框

<input>

<labelfor="userId">用户名:</label>

<input id="userId" type="text"maxlength="10" value="abs"><br><br>

<label for="password">密&nbsp;码:</label>

<input id="password" type="password"maxlength="6" size="20"><br>

4.5单选按钮

<inputtype="radio" name="role"checked>学生

<input type="radio"name="role">教师

<input type="radio"name="role">管理员

如果需要将若干个单选按钮编为一组（一组最多只有一个被选中），需要设置相同的name属性。

如果需要默认值，需要加上checked属性

标签属性的表示形式：

①  键值对：属性名=属性值

type=“text”、maxlength=“6”

②  一些取值为布尔类型的属性直接使用属性名

Checked 、readonly

4.6多选框

type属性取值为checkbox

你的兴趣爱好是：

篮球<inputtype="checkbox"checked> 默认值

音乐<inputtype="checkbox" checked> 默认值

读书<inputtype="checkbox"          >

跑步<inputtype="checkbox">

电影<inputtype="checkbox">

睡觉<inputtype="checkbox">

4.7提交按钮

<inputtype="submit"/>

①  点击按钮跳转到from表单指定的action路径

②  Value属性：value对应的值就是显示在按钮中。

③  点击按钮：将from表单中的input的name属性值和用户名输入的值组成键值对。并显示在地址栏中

http://localhost:63342/test1/chapter4/result.html?name=huadian&password=123456

4.8重置按钮

              <inputtype="reset">

①点击按钮，重置（单选按钮）

②value属性：value对应的值就是按键上显示的文字

③在form表单中按钮可以实现功能，不包含在from表单则无用。

4.9普通按钮

<inputtype="button" value="登录"/>

①点击按钮，没有任何反应。

②value属性

4.10按钮

<inputtype="image" src="../logi.jpg"alt="登录">

①作用和subimt按钮是一样的。

②需要设置src属性的值，如果没有找到src得路径并且没有设置alt属性，按钮显示默认值“提交”，如果设置了alt属性就显示alt的值。（类似img标签）

4.11<button>

内容可以是任意资源（图片，段落，视频...）

当button标签放置在form内部，作用和subimt一样

<button>

    <imgsrc="../login.jpg"width="25%" alt=""/>

    <p>登录</p>

</button>