当前位置: 移动技术网 > IT编程>网页制作>CSS > HTML基本指令讲解:格式框架、标题、横线、文字、有序表与无序表

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

2018年04月09日  | 移动技术网IT编程  | 我要评论

初学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>

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网