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

最为简单的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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值