HTML（二）

1.HTML的语法是松散的（也不是绝对的松散）：

<!DOCTYPE html>
<html>
<head>
    <title>测试HTML的语法是否松散</title>
</head>
<body>
    测试HTML的语法是否松散
</body>

　　效果图：

　　　　　　　　　　　　

2.HTML的标签：

　　p标签：段落

<p></p>

　　h1-h6标签：标题

<h1></h1>
<h2></h2>

　　br标签：换行（独目标记）

<br>

　　hr标签：水平线（独目标记）

<html>
<head>
    <title>测试水平线</title>
</head>
<body>
    测试水平线
    <hr color="black" width="50%">
    <hr color="green" width="50%">
</body>
</html>

　效果图：

 

 

 　　pre预留格式：保留标签中的原格式

<pre>申疯 疯</pre>

　　b粗体字：

<b>申疯疯</b>

　　i斜体字：

<i>申疯疯</i>

　　fond字体标签：

<font size="6" color="green">申疯疯</font>

　　table表格：

<html>
    <head>
        <title>单元格</title>
    </head>
    <body>
        <!--tr是行，td是列-->
        <!--可以在里面添加单元格的样式，宽度，位置，-->
        <!--border是边框宽度，width是表格宽度，align对齐方式-->   
       <table align="center" border="2px" width="100%" >
        <tr>
            <td>申疯疯</td>
            <td>申疯疯</td>
            <td>申疯疯</td>
        </tr>
        <tr>
            <td>申疯疯</td>
            <td>申疯疯</td>
            <td>申疯疯</td>
        </tr>
        <tr>
            <td>申疯疯</td>
            <td>申疯疯</td>
            <td>申疯疯</td>
        </tr>
       </table>
    </body>
</html>

　　效果图：

 　　rowspan、colspan合并单元格：合并列、合并行

<html>
    <head>
        <title>单元格</title>
    </head>
    <body>
        <!--tr是行，td是列-->
        <!--可以在里面添加单元格的样式，宽度，位置，-->
        <!--border是边框宽度，width是表格宽度，align对齐方式-->   
       <table align="center" border="2px" width="100%" >
        <tr>
            <td colspan="2" align="center">申疯疯1</td>
            <!--
                <td>申疯疯1</td>
            -->
            <td rowspan="2" align="center">申疯疯</td>
        </tr>
        <tr>
            <td>申疯疯</td>
            <td>申疯疯</td>
            <!--
            <td>申疯疯</td>
            -->
        </tr>
        <tr>
            <td>申疯疯</td>
            <td>申疯疯</td>
            <td>申疯疯</td>
        </tr>
       </table>
    </body>
</html>

　　效果图：

 

 　　th居中加粗：可以替换td

<th>申疯疯</th>

　　thead,tbody,tfoot表头表体表脚：为了后续操作方便

    <table>
        <!--tbody和tfoot参照thead-->
        <thead>
            <tr>
                <td>申疯疯</td>
            </tr>
        </thead>
    </table>

　　

 

 

 

 

　　

 

posted @ 2021-09-29 18:07  申疯疯  阅读(40)  评论(0)    收藏  举报