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基本指令-格式框架、标题、横线、文字、有序表与无序表