html5基础标签属性大全(HTML5常见的基础标签)
html5基础标签属性大全(HTML5常见的基础标签)</ul> <li>时装</li> <li>国内新闻</li> <li>军事热点</li> <li>数码、科技</li>
1.列表标签 ul,ol dl(掌握)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:对术语或项目进行解释的部分
-->
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>
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>
<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>