列表
列表的作用
列表指的是有相似特征或者有先后顺序的几行文字进行对奇的排列
由列表类型和列表项组成
前者:<ol>或者<ul>
后者:<li>用于表示具体的内容
使用列表
- 有序列表<ol>
ol : Order List
li : List Item
<ol type="列表类型" start="起始编号">
<li>....</li>
<li>....</li>
<li>....</li>
</ol>
type属性值:
1 数字(默认值)
a 小写字母
A 大些字母
i 小写罗马数字
I 大些罗马数字
start表示列表项前的标识,从第几个字符开始显示
- 无序列表<ul>
ul : Unorder List
<ul type="列表类型">
<li>...<li>
<li>...<li>
</ul>
type属性:
disc 实心圆(默认)
circle 空心圆
square 实心矩形
none 不显示列表项
- 列表嵌套
列表嵌套使用可以创建多层列表
(常用于创建文档的大纲、导航菜单)
<ul>
<li>
第一章 html入门
<ul>
<li>第一节
</li>
</ul>
</li>
</ul>
- 定义列表
定义列表往往用于要给出一类事物的定义(如名词解释,字典)
显示效果就是术语写在左上角,解释在下一行缩进
<dl>标记定义了一个定义列表Definition List
<dt>标记了一个术语Definition Term
<dd>标记了对术语中描述Definition Desscription
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的设备</dd>
</dl>
表单
表单概述
表单作用
1.用于显示、收集信息、并提交信息到服务器
2.界面元素
2.1 使用<form>元素创建表单
2.2在<form>元素中添加其他表单可以包含的其他控件元素表单元素<form>
定义表单:用成对的<form></form>
标记
主要属性:
action 定义表单被提交时发生的动作,通常包含服务方法的脚本的URL(如PHP JSP),默认值为提交给本页
method 指出表单数据提交的方式。取值为get或者post,默认值为get
enctype 表单数据的编码方式
取值:
application/x-www-form-urlencoded 允许将普通字符和特殊字符提交给服务器,文件不行。为默认值
multipart/form-data 允许提交文件,会影响普通上传数据
text/plain 只允许进行普通字符的提交,特殊字符无法提交,如? = &
name 表单名称
- 表单控件
表单控件元素是具有可视化外观的html元素,用于访问者输入信息
表单控件元素:
input 文本输入控件、按钮、单选和复选按钮、选项框、文件选择框、隐藏控件等等
textarea
select和option
其他
表单控件
作用:
接受用户数据,与用户交互
提供可视化外观
- <input>元素,用于收集用户信息(单标记)
语法:<input>
主要属性:
type: 可以创建出各种类型的输入字段比如文本框,复选框等(如果不写type值或是写错则默认为文本框)
value:控件的数据,提交给服务器的值
name:控件的名称,给服务器使用
disabled:禁用控件
- 文本框与密码框
文本框 <input type="text"/>
密码框 <input type="password"/>
主要属性:
name 名称由控件缩写+控件作用组成
value 控件的值,以及默认显示的默认值
maxlength 限制输入的字符数
readonly 设置文本控件只读
姓名:<input type="text" name="username" value="张三" maxlength="10"/>
<br/><br/>
密码:<input type="password" name="psw"/>
- 单选框和复选框
单选框<input type="radio"/>
(一组中,只能有一个被选中,name值相同则为一组)
复选框<input type="checkbox"/>
主要属性:
name 设置名称,并用来分组,一组单选框或复选框的名称必须相同
value 文本,当提交form时,如果选中了此单选按钮,那么value就被发送到服务器中
checked 设置默认被选中
您的性别:<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="women">女
<br/><br/>
喜欢的城市:
<input type="checkbox" name="cities" value="beijing"/>北京
<input type="checkbox" name="cities" value="xiameng"/>厦门
<input type="checkbox" name="cities" value="nanjing"/>南京
<input type="checkbox" name="cities" value="hangzhou " checked="checked"/>杭州
- 按钮
提交按钮:<input type="submit"/>
(传送表单数据给服务器或者其他程序处理)
重置按钮:<input type="reset"/>
清空表单的内容并把所有的表单控件设置为最初的默认值
普通按钮:<input type="button"/>
用于执行客户端脚本
主要属性:
name 名称
value 按钮的上显示的文字
- 隐藏域和文本选择框
隐藏域:<input type="hidden"/>
1.表单中包含不希望用户看见的信息
2.name 名称
3.value 值
文件选择框 <input type="file"/>
name 名称 不可少
注:
method必须为post
enctype必须为multipart/form-data
- 其他控件
5.1<textarea>元素多行文本域
多行文本输入框<textarea></taxtarea>
主要属性:
name 名称
cols 指定文本区域的列数
rows 指定文本区域的行数
readonly 只读
输入你的留言:<br/>
<textarea name="txtinfo" rows="4" cols="20">
</textarea>
5.2<select>和<option>选项框
<select>创建选项框
主要属性:
name 选项框名称
size 大于1,则为滚动列表,否则为下拉下拉选项框
multiple:设置多选
<option>选项
主要属性:
value 选项的值
selected 预选中
<select>
<option value="C++">C++</option>
<option value="PHP">PHP</option>
<option value="JAVA">JAVA</option>
</select>
- 为控件分组
<fieldset>元素:为控件分组
<legend>元素:为分组指定一个标题
<fieldset>
<legend>请填写地址信息</legend>
地址:<input type="text"/><br/>
邮编:<input type="text"/>
</fieldset>
- <label>元素
用于想把文本和控件联系在一起,单击文本效果等同于单击控件一样
注:双标记<label>文本</label>
(用for表示与该元素相联系的控件的ID值)
<input type="checked" name="secret" id="secret"/>
<label for="secret">不用公开我的信息</label>
其他常用标记
浮动框架
作用:可以在一个浏览器窗口同时显示多个页面文档
1.使用<iframe>元素
2.设置<iframe>元素的src属性,执行其他页面的URL
语法:双标记 ,当浏览器不支持的时候会显示标记中间描述的信息
主要属性:
src 浮动框架中的网页url
height 高度
width 宽度
frameborder浮动框架边框
<iframe src="frame1.html"></iframe>
摘要与细节
目前只有谷歌支持,网页上需要将信息进行展开和收缩
<detail>用于定义细节
1,可以在此元素中添加文本和图像等
2.需要与<summary>元素配合使用
<summary>元素用来包含<detail>元素的标题
1.必须包含在<detail>元素中
2.作为<detail>元素中的第一个子元素
<detail>
<summary>发票信息</summary>
<div>
发票抬头:<input/><br/>
发票内容:<input/>
</div>
</detail>
度量元素<meter>
用于定义的度量衡,(比如表示投票人数比例,磁盘的使用量或者统计比例等),(常用于静态比例的显示,已知最大值和最小值)
语法:双标记<meter></meter>
主要属性:
min: 范围的最小值,默认为0
max:范围的最大值,默认为1
value:度量值,默认为0
剩余电量
设备1:
<meter value="50" min="0" max="100" title="50%"></meter>%
设备2:
<meter value="10" min="0" max="100" title="10%"></meter>%
设备3:
<meter value="90" min="0" max="100" title="90%"></meter>%
时间元素<time>
用来定义时间和日期、(并不能为页面带来页面显示效果上的变化,常用于对网页添加与时间相关的附加信息)
语法:双标记<time>文本</time>
主要属性:
datatime 规定时间/日期,时间和日期之间用T分割
<time datatime="2011-7-12T0:35">凌晨0点35分</time>
高亮文本显示<mark>元素
用于定义页面中带有记号的文本(常用于需要突出显示的文本被<mark>元素包围的文本会显示额外的背景色)
<mark>杭州电子科技大学</mark>