html标签的简单介绍和使用1

来源：互联网发布：如何扩大交际圈知乎编辑：程序博客网时间：2024/05/16 04:57

最为简单的html页面所需要的一些标签

<html>                  <!--开始html文档-->    <head>              <!--开始文档头部-->        <title>         <!--开始文档标题-->            hello world         </title>        <!--结束文档标题-->    </head>             <!--结束文档头部-->    <body>              <!--开始文档体-->        hello world!    </body>             <!--结束文档体--></html>                 <!--结束html文档-->

title之间用来填写在浏览器打开窗口上的标题栏信息
body之间用来填写网页将要显示的内容

1.首先先来一个简单的网页示例

<html>    <head>        <title>hello</title>    </head>    <body>        <p align="center">            hello<br>            world        <hr color="red">        <p align="center">            hello java<br>            hello web<br>            hello jsp<br>            hello python<br>            hello objective-c<br>    </body></html>

<p align="a">

表示paragraph，作用是创建一个段。align属性表示段的对齐方式，a可以是left，center,right
和justify(两端对齐)（引号可以省略）

<br>

表示line break,作用是换行

<hr color="cr">

表示horizontal rule，作用是插入一条水平线。属性color用来指定线的颜色，cr可以是预定的颜色名字，如：red,blue,green,black,white,yellow,olive和aqua等等
。或者用十六进制数表示，例如#ff0000表示红色…

2.文本显示的控制

在前面代码的基础上，对文字显示做更加细致的控制

<html>    <head>        <title>hello</title>    </head>    <body>        <center>            <h2><font color="blue">hello</font></h2>            <b>world</b><br>            <hr color="red">            <b><i><font size=4 color="green">                hello java<br>                hello web<br>                hello jsp<br>                hello python<br>                hello objective-c<br>            </b></i></font>        </center>    </body></html>

<center>...</center>

使文本居中显示

<hn align="a">...</hn>

用于指出文档标题，n为1-6的整数，1最大，6最小。属性align用于设置标题的对齐方式，#可以是left,right,center

<font size=n color="cr">...</font>

用于设置字体属性，size属性表示字体大小，n为1-7的整数，1最小，7最大。color属性控制字体的颜色，和前面介绍的color属性类似

<b>...</b>

使得文字加粗

<i>...</i>

使得文字呈斜体

3.
输入特殊字体

字符数字字符引用（十进制）数字字符引用（十六进制）字符实体引用描述 “ &#34； &#x22； &quot；双引号 & &#38； &#x26； &amp；和号 < &#60； &#x3c； &lt；小于号 > &#62； &#x3e； &gt；大于号 &#160； &#xa0； &nbsp；不间断空格 © &#169； &#xa9； &copy；版权符号 ® &#174； &#xae； &reg；注册商标号

这里由于博客编辑器的原因分号用的都是中文分号，如果要使用，请改成英文的分号（这里直接使用英文的分号的话将会直接转换成字符ORZ）

3.注释

其实这个在一开始就已经使用过了
html里的注释格式是这样的：

<!--在这里输入注释-->

和android里的xml布局文件的注释的写法是一样的

4.表格

首先还是一个示例

<html>    <head>        <title>表格示例</title>    </head>    <body>        <table border=1 align="center" bgcolor="#ffdddd">            <caption>xxxx年成绩单</caption>            <tr align="center" valign="middle">                <th>姓名                <th>语文                <th>数学                <th>英语            </tr>            <tr align="left" valign="middle">                <td>Za                <td>90                <td>95                <td>92            </tr>            <tr align="left" valign="middle">                <td>Zb                <td>93                <td>91                <td>95            </tr>            <tr align="left" valign="middle">                <td>Zc                <td>92                <td>98                <td>94            </tr>                                   </table>    </body></html>

实际效果如下所示（才发现可以在编辑器里直接敲html的代码…这么看来估计其他的网页编程语言也可以了ORZ）

表格示例

xxxx年成绩单姓名
语文
数学
英语
Za
90
95
92
Zb
93
91
95
Zc
92
98
94

<caption>...</caption>      <!-- 用来定义表格的标题-->

<tr align="a1" valign="a2">...</tr>     <!-- 用来定义一个新行，align属性代表水平方向上的对齐方式(left,center,right),valign属性代表垂直方向上的对齐方式(top,middle,bottom)-->

<th>...</th>        <!-- 用来定义表头，即表格的第一行中的每一格-->

<td>...</td>        <!-- 用来定义单元格，即表格第二行开始的每一格-->

<table border=n align="a" bgcolor="cr">...</table>     <!-- 用来定义表格，border属性表示表格的边框宽度，如果不加该属性，默认是n=0，即边框无厚度（无边框）；align提到过很多次了，a的取值为left,center,right;bgcolor为背景颜色-->

还有一些可选属性，比如width(表格宽度)，hight(表格高度)，bordercolor(表格边框颜色)，cellspacing(单元格间距离)

一些方法
跨行rowspan
跨列colspan

0 0