1.列表标签 ul,ol, dl(掌握)

html5中表格的标签是(HTML5常见的基础标签)(1)

1.1ul无序列表标签

基本结构:

<ul>

<li>国际新闻</li>

<li>国内新闻</li>

<li>军事热点</li>

<li>数码、科技</li>

<li>时装</li>

</ul>

注意:

1.ul标签和li标签是组合使用。

2.li标签里面可以添加任何内容,或者嵌套标签也可以

3.无序列表会自动生成一个小圆点,一般在实际应用中会去掉。

1.2有序列表ol

语法:定义子项顺序的。一般有编号(数字或字母或希腊字母)

<ol>

<li>小西瓜</li>

</ol>

注意:

有序列表type属性的几个值:

A表示显示的编号是大写字母

a表示编号是小写字母

I表示编号是罗马数字

i表示编号是小写罗马数字

默认情况下显示的是数字

实例:

<ol type="1" start="5">

<li><a href="">小苹果</a></li>

<li><a href="">小西瓜</a></li>

<li><a href="">草莓</a></li>

<li><a href="">西红柿</a></li>

<li><a href="">猕猴桃</a></li>

<li><a href="">蓝莓</a></li>

</ol>

<ol type="a" >

<li><a href="">小苹果</a></li>

<li><a href="">小西瓜</a></li>

<li><a href="">草莓</a></li>

<li><a href="">西红柿</a></li>

<li><a href="">猕猴桃</a></li>

<li><a href="">蓝莓</a></li>

</ol>

<ol type="A">

<li><a href="">小苹果</a></li>

<li><a href="">小西瓜</a></li>

<li><a href="">草莓</a></li>

<li><a href="">西红柿</a></li>

<li><a href="">猕猴桃</a></li>

<li><a href="">蓝莓</a></li>

</ol>

<ol type="i">

<li><a href="">小苹果</a></li>

<li><a href="">小西瓜</a></li>

<li><a href="">草莓</a></li>

<li><a href="">西红柿</a></li>

<li><a href="">猕猴桃</a></li>

<li><a href="">蓝莓</a></li>

</ol>

<ol type="I">

<li><a href="">小苹果</a></li>

<li><a href="">小西瓜</a></li>

<li><a href="">草莓</a></li>

<li><a href="">西红柿</a></li>

<li><a href="">猕猴桃</a></li>

<li><a href="">蓝莓</a></li>

</ol>

2.3定义列表dl

什么是定义列表

dl标签定义了定义列表,通常用于名称的解释或者概念的定义。每个子项分为2个部分,一部分负责定义,另一部分负责解释

<dl>

<dt>计算机资料</dt>

<dd>H5前端开发</dd>

<dd>JavaScript</dd>

<dd>NodeJS入门到精通</dd>

<dd>PhP语法入门到精通</dd>

<dt>文学书籍</dt>

<dd>诗歌</dd>

<dd>小说</dd>

<dd>散文</dd>

</dl>

<!--

dl:定义了一个定义列表

dt:术语部分

dd:对术语或项目进行解释的部分

-->

html5中表格的标签是(HTML5常见的基础标签)(2)

2. 表格table

html5中表格的标签是(HTML5常见的基础标签)(3)

2.1表格的使用

(1)table标签

(2)表格行、列的合并

<table>:定义表格

<tr>:定义表格的行

<td>:定义表格的列

<th> :定义表格表头单元格

<thead>:定义表格中表头的内容

<tbody>:定义表格中的主体内容

<tfoot>:定义表格中的脚注

<caption>:定义表格标题

<!--

cellspacing:单元格与单元格之间的距离

cellpadding:内容与单元格之间的距离

border:单元格边框宽度

bgcolor:设置背景色

-->

<table width="360" border="1" cellspacing="0" cellpadding="0" align="center" >

<tr bgcolor="aqua"><th>学号</th><th>姓名</th></tr>

<tr align="center"><td>001</td><td>张三</td></tr>

<tr align="center"><td>002</td><td>李四</td></tr>

<tr align="center"><td>003</td><td>王五</td></tr>

<tr align="center"><td>004</td><td>赵六</td></tr>

</table>

html5中表格的标签是(HTML5常见的基础标签)(4)

2.2表格的合并(行合并、列合并)

<p>

表格列的合并

</p>

<table width="360" border="1" cellspacing="0" cellpadding="0" align="center" >

<tr align="center"><td colspan="2" >高一三班学员表</td></tr>

<tr bgcolor="aqua"><th>学号</th><th>姓名</th></tr>

<tr align="center"><td>001</td><td>张三</td></tr>

<tr align="center"><td>002</td><td>李四</td></tr>

<tr align="center"><td>003</td><td>王五</td></tr>

<tr align="center"><td>004</td><td>赵六</td></tr>

</table>

html5中表格的标签是(HTML5常见的基础标签)(5)

<hr />

<p>表格行的合并</p>

<table width="360" border="1" cellspacing="0" cellpadding="0" align="center">

<tr bgcolor="aqua"><th>产品颜色</th><th>型号</th></tr>

<tr><td rowspan="3">黑色</td><td>L</td></tr>

<tr><td>S</td></tr>

<tr><td>M</td></tr>

<tr><td rowspan="3">白色</td><td>L</td></tr>

<tr><td>XL</td></tr>

<tr><td>XXL</td></tr>

</table>

html5中表格的标签是(HTML5常见的基础标签)(6)

,