HTML-03

列表

列表的作用

列表指的是有相似特征或者有先后顺序的几行文字进行对奇的排列

由列表类型和列表项组成
前者:<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:禁用控件
  1. 文本框与密码框

文本框 <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"/>
  1. 单选框和复选框

单选框<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"/>杭州
  1. 按钮

提交按钮:<input type="submit"/>(传送表单数据给服务器或者其他程序处理)
重置按钮:<input type="reset"/> 清空表单的内容并把所有的表单控件设置为最初的默认值
普通按钮:<input type="button"/>用于执行客户端脚本

主要属性:
name 名称
value 按钮的上显示的文字

  1. 隐藏域和文本选择框

隐藏域:<input type="hidden"/>

1.表单中包含不希望用户看见的信息
2.name 名称
3.value 值

文件选择框 <input type="file"/>

name 名称 不可少

注:
method必须为post
enctype必须为multipart/form-data

  1. 其他控件

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>
  1. 为控件分组

<fieldset>元素:为控件分组
<legend>元素:为分组指定一个标题

<fieldset>
   <legend>请填写地址信息</legend>
   地址:<input type="text"/><br/>
   邮编:<input type="text"/>
</fieldset>
  1. <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>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,362评论 0 0
  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 4,323评论 0 11
  • 第一章 1、使用浏览器去访问的程序,叫网页 2、web代码存放在服务器 代码分为两种:① 运行在浏览器端:前端代...
    fastwe阅读 3,313评论 0 2
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,204评论 0 17
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,172评论 1 41