HTML表格、列表和区块

最新推荐文章于 2023-07-22 21:47:03 发布

王阿文要努力啊

最新推荐文章于 2023-07-22 21:47:03 发布

阅读量225

点赞数

本文链接：https://blog.csdn.net/WangaWen1229/article/details/107406028

版权

1.HTML表格
表格由

标签来定义。每个表格均有若干行(标签定义),每行被分隔为若干单元格(由

标签定义)。字母td指表格数据(table data)，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

<body>
    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1,cell 1</td>
            <td>row 1,cell 2</td>
        </tr>
        <tr>
            <td>row 2,cell 1</td>
            <td>row 2,cell 2</td>
        </tr>
    </table>
</body>

<th>表示表头
在这里插入图片描述

2.HTML列表
支持有序、无序和自定义列表
①有序列表

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

在这里插入图片描述
②无序列表

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

在这里插入图片描述
③自定义列表

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

在这里插入图片描述

3.HTML区块
HTML可通过<div>和<span>将元素组合起来。
大多数HTML元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。实例：<h1>、<p>、<ul>、<table>。
内联元素在显示时通常不会以新行开始。如：<b>、<td>、<a>、<img>
①<div>元素是块级元素，它用于组合其他HTML元素的容器。
它没有特定的含义。由于它属于块级元素，浏览器会在其后显示折行。
与CSS一同使用时，<div>元素可用于对大的内容块设置样式属性。
另一个用途是文档布局。它取代了使用表格定义布局的老式方法。<table>元素的作用是显示表格化的数据。

 <div id="container" style="width:500px">
        <div id="header" style="background-color: #FFA500;">
            <h1 style="margin-bottom: 0;">主要的网页标题</h1>
        </div>
        <div id="menu"
            style="background-color: #FFD700;height:200px;width:100px;float:left;">
            <b>菜单</b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </div>
        <div id="footer"
            style="background-color: #FFA500;clear: both;text-align: center;">
            版权 © wangawen.com
        </div>
    </div>

在这里插入图片描述
div元素用于分组HTML元素的块级元素。

②<span>是内联元素，可用作文本的容器。没有特定的含义。
与CSS一同使用时，<span>元素可用于为部分文本设置样式属性。

<table width="500" border="0">
        <tr>
            <td colspan="2" style="background-color:#FFA500;">
                <h1>主要的网页标题</h1>
            </td>
        </tr>
        <tr>
            <td style="background-color: #FFD700;width:100px;vertical-align:top;">
            <b>菜单</b><br>
            HTML<br>
            CSS<br>
            JavaScript
            </td>
            <td style="background-color: #eeeeee;height: 200px;width: 400px;vertical-align: top;">内容在这里</td>
        </tr>
        <tr>
            <td colspan="2" style="background-color:#FFA500;text-align: center;">
            版权 © wangawen.com</td>
        </tr>
    </table>

在这里插入图片描述

王阿文要努力啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表格、列表和区块

1.HTML表格表格由标签来定义。每个表格均有若干行(标签定义),每行被分隔为若干单元格(由标签定义)。字母td指表格数据(table data)，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。<body> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</
复制链接

扫一扫