初识HTML5（二）

列表

• 无序列表

  <ul> <li>河南</li> <li>河北</li> <li>江西</li> <li>江苏</li> </ul>

• 有序列表

<ol type="1" start="2">
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ol>

ol有两个常用的属性
1.type属性

2.start属性
决定列表初始值，他的取值为自然数。

• 自定义列表

<dl>
        <dt>列表的标题</dt>
        <dd>列表项的描述</dd>
        <dt>河北</dt>
        <dd>河北又称燕赵大地</dd>
</dl>

表单

表单：收集用户填写的信息并将其提交给服务器

<form Action="#" method="post/get">
</form>

form有两个属性

• Action 表单提交的地址。
• 提交的方式有两种，get和post。两者的区别
  （1）提交的内容的长度，get不能超过2KB。post无限制
  （2）安全性，get将内容拼接到字符串后面，不够安全。

输入框

<input type="text" maxlength="10" size="10"  value="华点"/>

文本框属性

列表

• 无序列表

  <ul> <li>河南</li> <li>河北</li> <li>江西</li> <li>江苏</li> </ul>

• 有序列表

<ol type="1" start="2">
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ol>

ol有两个常用的属性
1.type属性

2.start属性
决定列表初始值，他的取值为自然数。

• 自定义列表

<dl>
        <dt>列表的标题</dt>
        <dd>列表项的描述</dd>
        <dt>河北</dt>
        <dd>河北又称燕赵大地</dd>
</dl>

表单

表单：收集用户填写的信息并将其提交给服务器

<form Action="#" method="post/get">
</form>

form有两个属性

• Action 表单提交的地址。
• 提交的方式有两种，get和post。两者的区别
  （1）提交的内容的长度，get不能超过2KB。post无限制
  （2）安全性，get将内容拼接到字符串后面，不够安全。

输入框

文本框

<input type="text" maxlength="10" size="10"  value="华点"/>

属性为maxlength 表示输入的最大长度。 size为输入框的长度; value为默认的值
密码框

<input type="password" maxlength="10" size="10" value="123456"/>

属性为maxlength 表示输入的最大长度。 size为输入框的长度; value为默认的值
单选按钮

<input type="radio" name="sex" checked value="0"/>
<input type="radio" name="sex" checked value="1"/>

属性为name将单选按钮分组这样就可以选择只能选择一个;checked默认选中; value表示他的值

复选框

<input type="checkbox" checked/>

checked 表示默认选中 name表示checkbox的名字，也是将复选框进行分组

提交按钮

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

submit为提交按钮，value为按钮上显示的文字。点击时会将参数添加在form Action的路径后面

重置按钮

<input type="reset" value="取消"/>

普通按钮

<input type="button" value="单击" onclick=""/>

普通按钮，value值为按钮上显示的文字，onclick是单击按钮触发的事件，可用js去处理

图片按钮

<input type="image" src="#"/>

图片按钮 src为图片的路径其属性可以和 <img>类似

文件按钮

<input type="file" accept="*.*">

上传文件在点击按钮后可以打开本地的文件，后面的accept是可以选中的文件的类型一般 .xls为excel表格 .docx为word文档。.jpg 为图片等等

下拉框

<select>
    <option>选择</option>
</select>