欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML基本指令讲解:格式框架、标题、横线、文字、有序表与无序表

程序员文章站 2022-06-26 11:34:53
初学HTML编程,记录常用指令,方便自己,方便他人。 1.HTML文件基本格式 HTML文件,所有内容都以“<~~>”开头,以“...

初学HTML编程,记录常用指令,方便自己,方便他人。

1.HTML文件基本格式

HTML文件,所有内容都以“<~~>”开头,以“</~~>”结尾,二者构成一对

同时,HTML文件的固定格式如下:

<html>

    <head>

        <title>网页标签内容</title>

    </head>

    <body>

        这里写网页内容

    </body>

</html>

2.<h1>标题1</h1>    <h2>标题2</h2>    <h3>标题3</h3>    依次类推

3.<hr>    在屏幕上绘制一条横线

无参数指定时,绘制一条长直线,可以通过参数指定不同的直线形式

<hr style=margin-left:390px width=6% color=red height=2>

“style=margin-left:390px”        指定直线位置

“width=6%”                               指定长度

“color=red”                               指定直线颜色

“height=2”                                 指定直线粗细

4.文字显示

<font>文字内容</font>                显示“文字内容”

此处有参数:<font style=margin-left:350px size=10 color=black>参数说明</font>

“style=margin-left:350px”    指定文字的位置,这里是从最左边开始的350个像素点处

“size=10”                  指定文字大小

“color=black”           指定文字颜色

<center>中间的内容左右居中显示</center>

<b>中间的内容加粗显示</b>

<br>    换行

<p>中间放一个段落的内容</p>

&nbsp    空格

&#9    Tab,在<pre></pre>中使用

使用举例:

<font><center><b>内容</b></center></font>

5.有序表与无序表

有序表

<ol>

    <li>第一行内容</li>

    <li>第二行内容</li>

</ol>

无序表

<ul>

    <li>第一行内容</li>

    <li>第二行内容</li>

</ul>

6.注释

<!--

注释内容,不会显示

-->

集中示例如下:

代码:

<html>

    <head>

        <title>第一个网页</title>

    </head>

    <body>

    <center><font size=4 color=blue>这里因为有了center,因此会居中显示&nbsp&nbsp&nbsp&nbsp&nbsp字体为蓝色&nbsp&nbsp&nbsp&nbsp&nbsp大小为4号</font></center>

         <hr>

        <h1><center>一级标题居中显示</center></h1>

        <h2><center>二级标题居中显示</center></h2>

        <!--注释内容,不会显示-->

        <pre>

            <hr style=margin-left:350px width=6% color=red height=2>

            <font style=margin-left:350px size=10 color=red>红色的</font>

        </pre>

        <table style=margin-left:350px; border=1 width=800>

            <tr>

                <td>第一行第一列</td>

                <td>第一行第二列</td>

            </tr>

            <tr>

                <td>第二行第一列</td>

                <td>第二行第二列</td>

            </tr>

        </table>

        <font style=margin-left:300px>有序表</font>

        <ol style=margin-left:300px>

            <li>第一行内容</li>

            <li>第二行内容</li>

        </ol>

        <font style=margin-left:300px>无序表</font>

        <ul style=margin-left:300px>

            <li>第一行内容</li>

            <li>第二行内容</li>

        </ul>

    </body>

</html>

HTML基本指令讲解:格式框架、标题、横线、文字、有序表与无序表