手记

PHP之HTML 标签

PHP教程前两天发的比较少,大家可能觉得不过瘾!今天我们多介绍几个!

<div>可定义文档中的分区或节(division/section)。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

用法

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

<ul>标签定义无序列表。

<ul> 标签里面只嵌套<li>之类的不能直接嵌套<div>以及其他标签,例如:<ul>

    <div></div>

</ul>

这样是不对的,不符合标准,但是浏览器并不会报错,因为浏览器有纠错功能

<ul>

    <li>

        <div></div>

    </li>

</ul>

这样写就可以。

<li> 标签定义列表项目。

<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。


<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。


<tr> 标签定义 HTML 表格中的行。

tr 元素包含一个或多个 th 或 td 元素。

tr标签里也只能直接跟th 或者td

例如:

<table>

    <tr><td></td><td></td></tr>

</table>


<td>和<th>


th定义表格内的表头单元格。

HTML 表单中有两种类型的单元格:

表头单元格 - 包含表头信息(由 th 元素创建)

标准单元格 - 包含数据(由 td 元素创建)

th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。


下面就用前面介绍的标签给大家一个例子:

<!DOCTYPE html>

<html lang="zh-cn">

    <head>

        <meta charset="utf8" />


        <title>hello,world</title>

    </head>

    <body>

        <div>

            <table>

                <tr>

                    <th>姓名</th>

                    <th>课程</th>

                    <th>成绩</th>

                </tr>

                <tr>

                    <td>张三</td>

                    <td>语文</td>

                    <td>80</td>

                </tr>

                <tr>

                    <td>张三</td>

                    <td>数学</td>

                    <td>82</td>

                </tr>

                <tr>

                    <td>王五</td>

                    <td>语文</td>

                    <td>83</td>

                </tr>

                <tr>

                    <td>王五</td>

                    <td>数学</td>

                    <td>90</td>

                </tr>

            </table>

        </div>   

        <div>

            <table>

                <tr>

                    <th>姓名</th>

                    <th>课程</th>

                    <th>成绩</th>

                </tr>

                <tr>

                    <td>张三</td>

                    <td>语文</td>

                    <td>80</td>

                </tr>

                <tr>

                    <td>张三</td>

                    <td>数学</td>

                    <td>82</td>

                </tr>

                <tr>

                    <td>王五</td>

                    <td>语文</td>

                    <td>83</td>

                </tr>

                <tr>

                    <td>王五</td>

                    <td>数学</td>

                    <td>90</td>

                </tr>

            </table>

        </div>   

    </body>

</html>

保存成test.html

0人推荐
随时随地看视频
慕课网APP