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. 表格table
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>