HTML整理2

3.列表标签

先看看word之中的列表

l 江西

l 河南

l 浙江

l 江苏

序列列表

1) 牛奶

2) 面包

3) 包子

4) 咖啡

有序列表

3.1无序列表

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

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

Ctrl+d:复制当前行（duplicate）

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

disc：实心的原点，默认值；

Circle：空心的圆圈；

square：实心的正方形。

<ul type="disc">
    <li>浙江</li>
    <li>江苏</li>
    <li>江西</li>
    <li>河南</li>
</ul>

 

 

 

3.2 有序列表

<ol>ordered list,有序列表，即列表项都有序号。

type属性指定序号的类型，其取值：

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，再接指定类型序号，如：-2，-1,0，a，b........

 

<ol type="a" start="-2">
    <li>牛奶</li>
    <li>面包</li>
    <li>包子</li>
    <li>咖啡</li>
</ol>

3.3列举的嵌套

自学

 

 

 

3.4自定义列表

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

<dt>defined title 列表项的标题

<dd>defined description 列表项的描述

 

 

<dl>
    <h3>中国各省份介绍</h3>
    <dt>河南</dt>
    <dd>河南............</dd>
    <dt>江苏</dt>
    <dd>江苏............</dd>
</dl>

 

 

4.表单

4.1 表单

什么是表单？收集用户填写的信息并将其提交到后台服务器。

<form>

action属性：指定提交的地址；

method属性：指定提交的方式，get/post。

get和post方式的区别

（1）长度的限制，get方式限制为2k以内

（2）安全性，get方式提交的数据会直接呈现在地址栏，敏感数据容易被截获。

4.2文本框

<input type="text">

<input type="text" maxlength="10">

<input type="text" maxlength="10" size="50">

<input type="text" maxlength="10" size="50" value="abc">

 

maxLength:指定文本框能接收的最大字符个数；

size:指定文本框的大小（宽度）

value:指定初始值

4.3密码框

<input type="password"

密码框和文本框是一样的，文本框的属性同样适用于密码框，唯一不同的是密码框是以掩码的形式显示内容，保证安全性。

4.4label

<label>的作用

1.可以单独对其应用相应的样式

2.for属性可以使之和某个<input>关联，即当单机文本会激活对应的<input>

<label for="userld">账号：</label>
<input id="userld" type="text" maxlength="10" size="30" value="abc">
<br>
<label for="pssword">密码：</label>
<input id="pssword" type="password"size="30" maxlength="6">

4.5单选按钮

<input type="radio" name="role">学生
<input type="radio" name="role" checked>教师

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

如果需要默认选中某个选项，需要加上checked属性

标签的属性表示形式：

1.键值对：属性名=属性值

type=“text”、maxLength=“6”

2.一些取值为布尔类型的属性直接使用属性名 checked等

4.6多选按钮

<form>
    你的兴趣爱好是：
    <input type="checkbox" checked>音乐
    <input type="checkbox" checked>阅读
    <input type="checkbox">游戏
    <input type="checkbox">电影
    <input type="checkbox">睡觉
</form>

4.7提交按钮

<input type="submit">

（1）点击按钮之后跳转到form表单指定的action

（2）Value属性：value对应的值就是按键上显示的文字。

<input type="submit" value="登录">

（3）点击按钮：将form表单中的input中name属性值（键）和用户名输入的值组成键值对（或input标签value属性对应的值）。并凭借到form表单action属性值的后面。

http://localhost:63342/HTML/chapter1/result.html?name=huadian&password=123456

4.8重置按钮

<input type="reset" value="刷新">

（1）点击按钮，重置表单内部的输入框（单选按钮）

（2）value属性：value对应的值就是按钮上显示的文字。

4.9普通按钮

<input type="button" value="校验" >

（1）点击按钮，没有任何反应

（3）value属性：value对应的值就是按钮上显示的文字。

4.10图片按钮

<input type="image" src="logo.jpg" alt="登录">

（1）作用和submit按钮是一样的

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

4.11<button>标签

（1）内容可以是任意资源（eg：图片，段落，视频)

（2）当button标签放置在form内部，作用和submit一样。