列表是一个接一个显示条目的首选方式,而不是使用<br>标记。完整的列表定义包括开始和结束标记,以及表示列表中每个条目的标记。
有三种类型的列表:有序列表、无序列表和定义列表。
无序列表是一个带条目符号的列表,类似于菜单。
无序列表 - <ul> ... </ul>
ul标记定义无序列表的开始和结束,列表项包含在ul标记中。
无序列表项 - <li> ... </li>
li标记添加每个条目的文本,每个列表项必须有自己的li标记。
符号类型 <ul type="disc | circle | square">
默认情况下,浏览器将显示圆形条目符号。这可以通过使用ul标记的type属性来更改,这将更改整个列表的条目符号类型。
条目符号类型 <li type="?">
通过设置li标记的type属性,可以为列表中的某个条目设置不同的符号类型。
以下是无序列表的示例:
浏览器显示内容如下所示:
天为大家带来了HTML中的表格与列表、块及类与ID的基础知识,首先为大家介绍的是HTML中的表格与列表。
一、HTML中的表格与列表:
相信大家都知道在office、Excel等办公软件中如何制作表格,那大家知道如何在网页上制作表格呢?同时网页上面的注册和登陆表又是怎么制作出来的呢?今天将会为大家详细讲解。
1、表格:
① 了解<table>标签
在网页上的表格制作是用<table>标签来定义的。
② table中的<tr>和<td>标签
l 每个表格有若干行,即用<tr>标签来定义。
l 每行被分割为若干单元格,即用<td>标签来定义。
示例图
运行结果:
③ 在<table>元素中添加border属性就可以显示边框,示例:
运行结果:
④ 表单的表格用<th>标签表示,示例:
运行结果:
2、列表
列表分为无序列表、有序列表和定义列表
① 无序列表
l 无序列表是一个项目的列表,此列表项目使用粗体圆点进行标记。
l 无序列表始于<ul>标签,每个列表始于<li>,示例:
运行结果:
l 在<ul>标签中使用type属性可以改变列表前面的符号,示例:
运行结果:
② 有序列表
l 与无序列表不同的是,有序列表使用的是<ol>标签,示例:
运行结果:
在<ol>标签中添加type属性,可以改变列表前面的符号,示例:
运行结果:
③ 定义列表
l 定义列表就是自定义列表,是项目及其注释的组合。
l 自定义列表以<dl>标签开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以<dd>开始,示例:
运行结果:
二、HTML中的块:
1、大多数HTML元素被定义为块级元素或内联元素
① 块级元素在浏览器显示时,通常以新行来开始(和结束),例如:<h1>、<p>、<ul>、<table>等。
② 内联元素在显示时通常不会以新行开始,例如:<b>、<td>、<a>、<img>等。
2、HTML中的<div>元素
HTML<div>元素是块级元素,是可以组合其他HTML元素的容器,简单来说<div>元素一般被用在HTML布局上面,示例:
运行结果:
3、HTML中的<span>元素
HTML<span>元素是内联元素可用作文本的容器,当与css一同使用时,<span>元素可用于为部分文本设置样式属性,示例:
运行结果:
三、HTML中的CLASS和ID:
在上面的示例中我们有看到id标签,在学习过程中很多人搞不懂class类和id标签的区别,现在开始教大家如何区分class类和id标签。
CLASS:
1、Class就我们口中所说的类
2、在css中引用时以“.”开头,并且可以被多个元素调用,例如:
3、在使用中,可以先设置出一个样式,然后被多个元素引用。
ID:
1、id是一种标签
2、在css中引用时以“#”开头,只能定义一个元素,例如:
3、在使用时,只能先确定一个元素,然后才能设置其样式,无法被其它元素引用,是唯一的标签。
希望大家能够从这篇文章学习到HTML的部分知识~
例
两个菜单按钮系列选项实例("File" 和 "Edit"):
<menutype="toolbar"><li><menulabel="File"><buttontype="button"onclick="file_new()">New...</button><buttontype="button"onclick="file_open()">Open...</button><buttontype="button"onclick="file_save()">Save</button></menu></li><li><menulabel="Edit"><buttontype="button"onclick="edit_cut()">Cut</button><buttontype="button"onclick="edit_copy()">Copy</button><buttontype="button"onclick="edit_paste()">Paste</button></menu></li></menu>
浏览器支持
目前主流浏览器并不支持 <menu> 标签。
标签定义及使用说明
<menu> 标签定义了一个命令列表或菜单。
<menu> 标签通常用于文本菜单,工具条和命令列表选项。
提示和注释
提示: 使用 CSS 来定义菜单列表样式。
HTML 4.01 与 HTML5之间的差异
HTML 4.01的 <menu> 元素已废弃。
HTML5 中 <menu> 元素已被重新定义。
属性
New:HTML5 新属性。
属性 | 值 | 描述 |
---|---|---|
labelNew | text | 描述菜单项的标记。 |
typeNew | contexttoolbarlist | 描述显示菜单类型. 默认为 "list"。 |
全局属性
<menu> 标签支持全局属性,查看完整属性表 HTML全局属性。
事件属性
<menu> 标签支持所有 HTML事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
*请认真填写需求信息,我们会在24小时内与您取得联系。