html基础

Html基础知识

认识Html

1.html是一种超文本标记语言,有自己的一套语法规则

2.html文档由元素组成,而元素定义了文本和图形在html文档中的结构

3.html元素使用html标记定义,标记在一对尖括号(<>)中,如举例1

4.html文档拓展名:.html .htm(这一种拓展名为了支持比较老的服务器,他们支持程序拓展名为3位)或者.xhtml(严格的html格式,有开头必有结尾,否则会报错)

html文档结构

1.所有的html文档都有三格个文档级元素:html、head、body

举例1:

<!doctype html>       <!--定义文档格式为html-->
<html>      <!--根标签-->
<head>      <!--head元素,标记起点又称开始标记或打开标记-->
      <title>这是一个标题</title>
      <meta http-equiv="content-type" content="text/thml;charset=utf-8">      <!--定义编码格式-->
</head>      <!--head元素,标记结尾又称结束标记或关闭标记-->
<body>      <!--body元素,标记起点-->
      helo word!....这是网页上显示的内容......
</body>      <!--body元素,标记结束-->
</html>

2.定义正文标题:<h>标签

举例2:

<!doctype html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/thml;charset=utf-8"> 
    </head>
    <body>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>
    </body>
    </html>

结果:

 

标题1

标题2

标题3

标题4

标题5
标题6

 

3.段落标签:<p>标签

举例2:

<!doctype html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/thml;charset=utf-8"> 
    </head>
    <body>
        <p>这是一个段落1</P>  <!--段与段之间有缩进-->
        <p>这是一个段落2</p>
    </body>
    </html>

结果:

这是一个段落1

这是一个段落2

 

4.定义列表: 1. 有序列表:ol定义
2. 无序列表:ul定义
3. 定义列表:dl定义

举例3:

 <!doctype html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/thml;charset=utf-8"> 
    </head>
    <body>
        <p>这是一个无序列表</P>  
        <ul>
        <li>我是第一</li>
        <li>我是第二</li>
        <li>我是第三</li>
        </ul>
        <p>这是一个有序列表</p>
        <ol>
        <li>我是第一</li>
        <li>我是第二</li>
        <li>我是第三</li>
        </ol>
        <p>这是一个定义列表</p>
        <dt>cat</dt>
        <dd>i can say miaomiaomiao</dd>
        <dt>dog</dt>
        <dd>i can say wangwang</dd>         
    </body>
    </html>

结果:

这是一个无序列表

  • 我是第一
  • 我是第二
  • 我是第三

这是一个有序列表

  1. 我是第一
  2. 我是第二
  3. 我是第三

这是一个定义列表

cati can say miaomiaomiaodogi can say wangwang

 

4.按钮(button定义),超链接(a定义),锚链接(a定义)

举例4:

 <!doctype html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/thml;charset=utf-8"> 
    </head>
    <body>
        <button>这是一个按钮</button> 
        <a href="https//:www.baidu.com">    点我链接百度</a>
        <a href="#t1">点我跳转到本页的连我</a>  <!--锚链接和id属性配合使用,会跳到相同id值的地方-->
        <p id="#t1">连我</p>
    </body>
    </html>

结果:  点我链接百度 点我跳转到本页的连我

连我

 

5.表格:table 行--tr;列--td;合并列单元格--colspan="n";合并行单元格--rowspan="n"(n表示合并的单元格数)

举例4:

<!doctype html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/thml;charset=utf-8"> 
    </head>
    <body>
        <table border="1" cellspacing="0">    <!--border设置边框,cellspacing设置单元格边框填充-->
        <th colspan="6">成绩统计表</th>      <!--第一行:标签th设置标题,合并6列-->
        <tr>                                <!--第二行:-->
            <td rowspan="4">class:j121</td>     <!--第1列:合并4行-->
            <td>name</td>                        <!--第2列:name-->
            <td>java score</td>                   <!--第3列:java score-->
            <td>c++ score</td>                      <!--第4列:c++ score-->    
            <td>java average scor</td>      <!--第5列:java average scor-->
            <td>c++ average scor</td>           <!--第6列:c++ average scor-->
        </tr>
        <tr>                                <!--第三行:-->
            <td>zhangsan</td>                        <!--第2列:zhangsan-->
            <td>60 score</td>                     <!--第3列:java score 60-->
            <td>59 score</td>                       <!--第4列:c++ score 59--> 
            <td rowspan="2">java average scor</td>      <!--第5列:合并3行-->
            <td rowspan="2">c++ average scor</td>           <!--第6列:合并3行-->
        </tr>   
        <tr>                                <!--第四行:-->
            <td>lisi</td>                        <!--第2列:lisi-->
            <td>80 score</td>                     <!--第3列:java score 80-->
            <td>88 score</td>                       <!--第4列:c++ score 88--> 
        </tr>   

        </table>
    </body>
    </html>

结果:

 

成绩统计表
class:j121 name java score c++ score java average scor c++ average scor
zhangsan 60 59    
lisi 80 88

posted on 2016-05-31 00:20  熠良  阅读(156)  评论(0编辑  收藏  举报

导航