html

html格式

<!--
    1、这是HTML的注释
    2、加上以下代码的第一行就表示HTML5语法。去掉就表示HTML4.0
    3、HTML不区分大小写,语法松散不严格。
-->
<!doctype html>

<!--根-->
<html>

    <!--头-->
    <head>
        <!--网页标题,显示在网页左上角-->
        <title>网页的标题</title>
    </head>

    <!--体-->
    <body>
        网页的主体内容,欢迎学习HTML!
    </body>

<!--
</HTML>
-->
<!--
</Html>
-->

标签

段落标签 <p></p>

标题标签

<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>

<br>换行标签

<hr>横线标签

<hr color="red" width="50%">
<!--语法太松散了。-->
<hr color='green' width=30%>

<!--预留格式-->
<pre>
for(int i = 0; i < 10; i++){
System.out.println("i = " + i);
}
</pre>

<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>

10<sup>2</sup>

10<sub>m</sub>

<!--字体标签-->
<font color="red" size="50">字体标签</font>

 实体符号:以&开始,以;结束。&lt; 是小于号   &gt; 是大于号 &nbsp;是空格

 

表格table

        <table align="center" border="1px" width="60%" height="150px">
            <!--align对齐方式-->
            <tr align="center">
                <th>a</th>
                <th>b</th>
                <th>c</th>
            </tr>
            <tr>
                <td>d</td>
                <td>e</td>
                <td>f</td>
            </tr>
            <tr>
                <td>x</td>
                <td>y</td>
                <td align="center">z</td>
            </tr>
        </table>

表格单元格合并

注意事项:
1、row合并的时候,删除“下面的”单元格
2、col合并的时候,对删除哪个没有要求。

例如:<td rowspan="2">f</td>

表格thead tbody tfoot

<!doctype html>
<html>
    <head>
        <!--这行代码的作用是告诉浏览器采用哪一种字符集打开当前页面。
        注意:并不是设置当前页面的字符编码方式。-->
        <meta charset="gbk">
        <title>thead tbody tfoot 在table中不是必须的,只是这样做便于后期的JS代码的编写。</title>
    </head>
    <body>
        
        <table border="1px" width="50%">
            <!--头-->
            <thead>
                <tr>
                    <th>员工编号</th>
                    <th>员工薪资</th>
                    <th>部门名称</th>
                </tr>
            </thead>

            <!--体-->
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>a</td>
                    <td>b</td>
                    <td rowspan="2">f</td>
                </tr>
                <tr>
                    <td colspan="2">d</td>
                </tr>
            </tbody>

            <!--脚-->
            <tfoot>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
            </tfoot>

        </table>
    </body>
</html>

 

上一篇:2021-10-06


下一篇:案例:动态生成表格