HTML入门笔记（四）

最新推荐文章于 2024-06-01 12:08:46 发布

酒千觞

最新推荐文章于 2024-06-01 12:08:46 发布

阅读量198

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/songAX/article/details/88043877

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

表格

HTML 表格的基本结构：
1.< table >…< /table >：定义表格
2. < th >…< /th >：定义表格的标题栏（文字加粗）
3. < tr >…< /tr >：定义表格的行
4.< td >…< /td >：定义表格的列
5.cell padding单元格边距
6.cell spacing单元格间距
例:

<table border="1"  cellpadding="10" cellspacing="0">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

列表

1.无序列表（此列项目使用粗体圆点（典型的小黑圆圈）进行标记，适合成员之间无级别顺序关系的情况，使用 < ul > 标签，每个列表项始于

标签）

 <ul>
 <li>Coffee</li>
 <li>Milk</li>
 </ul>

2.有序列表（使用 < ol > 标签，每个列表项始于 < li > 标签）
例:

 <ol>
 <li>Coffee</li>
 <li>Milk</li>
 </ol>

3.自定义列表(项目及其注释的组合,自定义列表以

标签开始。每个自定义列表项以 < dt > 开始。每个自定义列表项的定义以 < dd > 开始)例：

 <dl>
 <dt>Coffee</dt>
 <dd>- black hot drink</dd>
 <dt>Milk</dt>
 <dd>- white cold drink</dd>
 </dl>

HTML布局 < div >和< span >

< div > 元素是块级元素(在浏览器显示时，通常会以新行来开始（和结束）)，它是可用于组合其他 HTML 元素的容器，可嵌套
< span > 元素是内联元素（用来组合文档中的行内元素），可用作文本的容器，可嵌套
例:

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Cschools.com</div>

</div>

</body>
</html>

使用表格 table标签的colspan属性进行布局

例:

<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Cschools.com</td>
</tr>
</table>

</body>
</html>