今天学习了无序列表和有序列表和使用HTML5创建表格

ol建立有序列表，该列表可以用设置type=”A/a”

其语法架构为

<ol>

<li></li>

<li></li>

</ol>

Ul建立无序列表, 该列表可以用设置type=” disc/circle/square”

其语法架构为

<ul>

<li></li>

<li></li>

</ul>

创建表格其基本属性有

Cellspacing:定义边框与边框的间距大小

Cellpadding:定义边框与内容的间隙大小

Bgcolor：定义表格的背景颜色

Width：定义表格的宽度

Height：定义表哥的高度

Caption:创建表格的标题

Colspan：合并左右单元格

Rowspan：合并上下单元格

Th：定义标题内容

Dd/dl：自定义列表

Mark：重点提示

附:

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>20161018</title>

</head>

<body>

<ul>

<li>月落乌啼霜满天</li>

<li>江枫渔火对愁眠</li>

<li>姑苏城外寒山寺</li>

<li>夜半钟声到客船</li>

</ul>

<ul type="disc">

<li>月落乌啼霜满天</li>

<li>江枫渔火对愁眠</li>

</ul>

<ul type="circle">

<li>月落乌啼霜满天</li>

<li>江枫渔火对愁眠</li>

</ul>

<ul type="square">

<li>月落乌啼霜满天</li>

<li>江枫渔火对愁眠</li>

</ul>

<ol type="A">

<li>月落乌啼霜满天</li>

<li>江枫渔火对愁眠</li>

<li>姑苏城外寒山寺</li>

<li>夜半钟声到客船</li>

</ol>

<ol>

<li>月落乌啼霜满天</li>

<li>江枫渔火对愁眠</li>

<li>姑苏城外寒山寺</li>

<li>夜半钟声到客船</li>

</ol>

<!-- 建立嵌套的ul/ol列表 -->

<ol type="A">

<li>月落乌啼霜满天</li>

<li>江枫渔火对愁眠</li>

<ul>

<li>月落乌啼霜满天</li>

<li>江枫渔火对愁眠</li>

</ul>

<ol type="a">

<li>姑苏城外寒山寺</li>

<li>夜半钟声到客船</li>

</ol>

</ol>

<!-- 自定义列表 -->

<dl>

<dt>电脑</dt>

<dd>是一种能够按照程序运行的电子设备</dd>

<dt>显示器</dt>

<dd>以视觉方式显示信息的装置</dd>

</dl>

<!-- 使用HTML5创建表格

<table>...</table> - 定义表格

<tr> - 定义表行

<th> - 定义表头

<td> - 定义表元

其语法结构为

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

-->

<!-- 创建一个三行三列的表格 -->

<table border="2px"  cellpadding="2px" cellspacing="20px" bgcolor="DDSSAA">

<caption>创建一个三行三列的表格</caption>

<tr>

<th>姓名</th>

<th>学号</th>

<th>成绩</th>

</tr>

<tr>

<td align="left">1</td>

<td align="center">1</td>

<td align="rigth">1</td>

</tr>

<tr>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td align="left">1</td>

<td align="center">1</td>

<td align="rigth">1</td>

</tr>

</table>

<br/>

<table border="2px"  cellpadding="2px" cellspacing="20px" bgcolor="pppppp">

<caption>创建一个一行三列表格</caption>

<tr>

<td bgcolor="red">1</td>

<td bgcolor="green">1</td>

<td bgcolor="blue">1</td>

</tr>

</table>

<!-- 单元格的合并 -->

<br/><br/>

<table width="40" height="40" border="1" cellpadding="20px" cellspacing="3px">

<tr>

<td colspan="2" align="center">1</td>

<td rowspan="2" align="center">2</td>

</tr>

<tr>

<td rowspan="2" align="center">3</td>

<td align="center">5</td>

</tr>

<tr>

<td colspan="2" align="center">4</td>

</tr>

</table>

<br/><br/>

</body>

</html>

时间： 2024-10-14 15:38:22

今天学习了无序列表和有序列表和使用HTML5创建表格的相关文章

06 html无序列表 、有序列表、 框架和综合练习

Html是解释执行的语言,本身不需要编译,直接对源代码进行执行. 浏览器是以源代码根据标记执行相应的功能. W3c制定html规范的标准机构 Html常用标记 无序列表ul--li <ul>的属性设定(常用):例如<ul type=”square”> 设定符号的款式:其值有三种,默认为type = ‘disc’ type="disc" 列项符号为实心圆点 type="circle" 列项符号为空心圆点 type="square&qu

HTML无序列表和有序列表

html无序列表<ul><li></li></ul>   ul属性设定:<ul type="square"> 常用属性值 type="disc"实心圆点(默认) type="circle"空心圆 type="square"空心正方形 <html> <head></head> <body> <ul> <l

无序列表、有序列表、定义列表多样选择设置属性值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

前端学习 -- Css -- 有序列表和无序列表

列表就相当于去超市购物时的那个购物清单, 在HTML也可以创建列表,在网页中一共有三种列表: 1.无序列表 2.有序列表 3.定义列表 无序列表 - 使用ul标签来创建一个无序列表 - 使用li在ul中创建一个一个的列表项, 一个li就是一个列表项 通过type属性可以修改无序列表的项目符号 可选值: disc,默认值,实心的圆点 square,实心的方块 circle,空心的圆 注意:默认的项目符号我们一般都不使用!! 如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置 ul和li

HTML学习之有序列表、无序列表和自定义列表

列表分成三种类型:有序列表.无序列表和自定义列表. 有序列表使用编号来记录项目的顺序 无序列表使用项目符号来记录无序的项目 自定义列表它由两个部分组成:定义条件和定义描述. 有序列表: <OL  type="编号样式" start="编号起始值"> <LI>项目一</LI> <LI>项目二</LI> .... </OL> type 1 阿拉伯数字 a英文小写 A英文大写 i罗马小写数字 I罗马大

HTML&CSS基础学习笔记14—有序列表及列表嵌套

我们上篇讲到了无序列表,那么今天就来看看有序列表和他们的组合嵌套使用吧. 有序列表 现在我们要做那堆杂事了,但是发现这么多杂事,先做哪个好呢?于是我们给这堆杂事弄个优先级排序,让我们能够按照顺序做下去.HTML里用<ol>标签来表示有序列表,<ol>标签的列表项依然是用<li>标签表示. 它的代码模板是这样的: <span style="font-family:Microsoft YaHei;"><ol>       <

自学html-four(css初始化及html语义标签 -&gt; h标签 p标签 img标签 有序列表 无序列表 表格 超链接)

一.css初始化 现在我们来做一个简单的测试,测试步骤如下: 1.编写代码如下: 2.把改程序用不同的浏览器打开我们会发现同一份代码在不同的浏览器中的显示会有略微的差别: 360浏览器下显示效果图: 火狐浏览器下显示的效果图: 同一份代码在不同浏览器显示的效果存在差异的原因是:各浏览器对各元素的margin,border,font-size等的初始设置略有不同 解决方法:通过css强制让所有元素的属性值都一样 这里提供一段雅虎工程师css初始化代码,直接拷贝到css位置就可以了,body,div

有序列表与无序列表应用示例

<!--程序 ch02_3.html --> <html> <head> <title>有序列表与无序列表</title></head> <body> <b>班级新闻</b> <ul type="disc"> <li>最新课程表</li> <li>关于普通话考试的通知</li> <li>div+css 高级应

html有序列表与无序列表自定义列表

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"> <title>列表标签</title> </head> <!--有序列表与无序列表自定义列表--> <body