列表 表格 特殊符号 样式 内联框架 table布局
1.列表
- 无序列表
- 有序列表
- 列表的属性
- 自定义列表
无序列表的基本格式
无序列表的type属性
无序列表的type属性有三个值：1.disc（默认值）；2.circle(空心圆)；3.square(方块)
有序列表的基本格式
有序列表的type属性
-
整数（默认值）；
-
大（小）写字母A\B\C...
-
大小写的罗马字母：i ii .../I II III
-
有序列表的start属性
定义列表的开始序号，比如第一项不是数字1，而是从10开始.......
-
有序列表的value属性
定义某个单个列表项的序号.......
自定义列表项组成：由 dl定义列表；dt定义列表项目；dd定义列表内容；
<ul type="circle">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<ol type="a" start="10">
<li>列表1</li>
<li>列表2</li>
<li value="1">列表3</li>
<li>列表4</li>
</ol>
<dl>
<dt>列表1</dt>
<dd>说明＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋</dd>
</dl>
2.表格
学习要点：
表格的基本构成
表格的属性
表格的合并
1.表格构成三个基本要素
- table：表格的范围，外框；用来定义表格，表格的其他元素包含在table标签里面；
- tr: 表格的行；
- td:表格的单元格
- border表格宽度
2.一点说明：关于表格的属性
HTML5中删除了HTML4中table的大部分属性，HTML5中推荐使用CSS设定原来table属性实现的效果。对于HTNL5中已经废弃的大部分属性不在对其讲解
3.th元素:为表格添加标题行
th元素用来定义表格的标题单元格，他是tr元素的子元素，必须放在tr标签里边；tr元素的内容会自动居中对齐并加粗文字
4.colspan元素:横向合并单元格
属性值为正整数，表示该单元格合横向合并的列数，语法为 <td colspan="2">xx</td>
5.rowspan元素:纵向向合并单元格
属性值为正整数，表示该单元格合纵向向合并的行数数，语法为 <td rowspan="2">XX</td>
6.caption元素:给表格添加标题
用来制定表格的标题或者说明；是table的子元素，必须放在table中使用
caption的align属性可以设置标题的位置，但是，在HTML5中已经被废弃，不推荐使用，建议使用CSS样式设置，后边课程会讲到。
7.thead\tfoot\tbaody元素
thead元素：表格的表头；tfoot元素:表格的页脚；tbaody元素：表格的主体；表格规范的写法应该包含这三部分内容
注：这三个主要结合CSS、javaScript来使用
加了thead\tfoot\tbaody元素位置调整，表格不变
8.colgroup元素
colgroup元素用来组合列，他的span属性可以设置组合列的数目；它可以包含一个子元素 col;
colgroup元素为table元素的子元素，必须放在caption元素之后，thead元素之前。
9.col元素
col元素用来设定列的属性，他也可以使用span属性；span 几列
col元素一般作为colgroup元素的子元素配合使用。
<table border="1">
<caption>ss</caption>
<colgroup span="1" style="width: 100px">
<col style="background: red">
</colgroup>
<colgroup span="2" style="width: 200px">
<col style="background: yellow">
<col style="background: blue">
</colgroup>
<thead style="background: green">
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>
</tfoot>
表格效果图.png
3.特殊符号
可用实体名次或者实体数值表示
4.样式
引入样式的三种方式
-
外部样式表：通过 link元素引入外部样式表；< link rel="stylesheet" type="text/css" href="" >
-
内部样式表：
<style type="text/css">p{color:xx}</style> -
内联样式表：
<p style="color:red"> </p><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p{color: red} </style> </head> <body> <p style="color: green">1</p> <p>2</p> <p>3</p> <p>4</p> </body>
样式表.png
5.内联框架
iframe内联框架
-
iframe元素用来在文档中添加一个内联框架。
-
iframe为body元素的子元素，必须放置在boay中使用
-
主要属性:src;name/id;width;height(百分比设置宽，高不能设置是因为会跟着内容改变，除非body设置过高度)
-
对HTML5中已经删除的属性不再进行讲解
<a href="http://www.taobao.com" target="myframe" >淘宝</a><br> <a href="https://www.jd.com" target="myframe" >京东</a><br> <iframe src="http://www.baidu.com" frameborder="10" width="100%" height="100%" name="myframe"></iframe>
6.table布局
关于table布局
-
table布局是传统的网页布局方式：早期网页由于内容较少，布局简单，都是使用table布局
-
优点:比较简单，容易理解
-
缺点：对于复杂的布局，表格嵌套太多，比较繁琐；后期维护和修改很不方便.......
-
table布局思路：用表格把屏幕分成几块--不同的单元格存放不同的内容
<body style="margin: 0"> <table style="background: DarkGray; width: 100%;height: 708px"> <tr style="background: green"> <td colspan="3" style="height: 10%"></td> </tr> <tr> <td style="background: Cornsilk;width: 10%"> <ul style="list-style-type: none;"> <li><a href="http://www.taobao.com" target="myframe">淘宝</a></li> <li><a href="http://www.jd.com" target="myframe">京东</a></li> </ul> </td> <td style="background: Coral;" colspan="2"> <iframe src="http://www.baidu.com" width="100%" height="100%" name="myframe"></iframe> </td> </tr> <tr style="background: blue"> <td colspan="3" style="height: 10%"></td> </tr> </table> </body>
样式.gif
