2.HTML5基本标签

一、标题标签  h1-->h6

h1最大

h6最小

 

<body>

  <h1>一级标题</h1>

  <h2>二级标题</h2>

  <h3>三级标题</h3>

  <h4>四级标题</h4>

  <h5>五级标题</h5>

  <h6>六级标题</h6>

</body>                    

 

 

 

二、特殊符号

 

<body>

  Copyright &copy; 1999-2011 &quot;北大青鸟&quot; All rights.

</body>

 

空格的连续写法

 

 <body>

  让子弹           多飞一会!!<br />

  让子弹&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;多飞一会!!<br />

</body>

 

三、行控制标签 <p>

 

<body>

  <h1>静夜思</h1>

  <p>床前明月光</p>

  <p>疑是地上霜</p>

  <p>举头望明月</p>          #段落

  <p>我是郭德纲!</p>

</body>

<body>

  <h1>静夜思</h1>

  床前明月光<br />

  疑是地上霜<br />          #换行

  举头望明月<br />

  我是郭德纲!<br />

</body>

 

四、范围标签和下划线<span><hr />

 

<h1>静夜思</h1>

  <hr />

  床前明月光<br />

  疑是地上霜<br />

  举头望明月<br />

  <span style="color:red; font-size:40px;">低头思故乡

</span><br />

</body>

 

 

 

五、图像标签

<html>

<body>

  <img style=width:100px height=100px src="1.jpg"; alt="游戏手柄" title="游戏手柄" />游戏手柄超便宜!!

<br />

<br />

  <img src="2.jpg" style=width:100px height=100px  alt="音乐播放器" title="音乐播放器" />音乐播放器2折!!<br />

</body>

</html>

 

src:指定图片所在的路径

alt:指定的替代文本

    表示图像无法显示时(图片路径错误等)替代显示的文本

title:额外的提示或帮助信息

 

 

六、超链接的用法

<a href="链接地址" target="目标窗口位置">具体内容</a>

 

href:用于设定链接地址

target:指定链接在哪个窗口打开

    _blank:将链接的文档加载到一个未命名的新浏览器窗口中

    _self:将链接的文档加载到该链接所在的同一框架中,默认值

 

例子:

在从新编辑一个网页,名称为a.html。以便下边的语句调用

 

<a href="a.html" target="_blank">abc</a>

 

会在新的窗口中打开a.html页面

 (2)a标签还可以用图片作为超链接

  <a href="http://www.baidu.com"><img src="1.jpg" width="200px" height="200px"></a>

(3)锚链接

  在本页之间跳转位置

  <p>唐诗三百首</p>
  <a href="#abc">李白</p>  #点击"李白"的超链接就会跳转到本页的abc位置。

 

  <a name="abc">望庐山瀑布</a> #定义好位置,位置名称为abc

 

 

七、HTML支持有序、无序和定义列表

(1)有序列表   

例子:  <ol>                   效果: 1.c     

                <li>c</li>          2.b

                <li>b</li>          3.a 

                <li>a</li>

        </ol>

        <ol start="10" >      效果:  

                   <li>3</li>           10.3

                <li>2</li>           11.2

                <li>1</li>              12.1

        </ol>

start="10" 表示从10开始  有序列表默认是从1开始的。

 

 

(2)无序列表

例子:

   

        <ol>                     

                <li>c</li>         

                <li>b</li>         

                <li>a</li>

        </ol>

 效果如下

  • c
  • b
  • a

 

(3)自定义列表

     用这个标签<dl></dl>

         每个自定义列表项以 <dt> 开始。

         每个自定义列表项的定义以 <dd> 开始。

     例子:

       <dl>

                <dt>年龄</dt>

                     <dd>1、2、3</dd>

                <dt>姓名</dt>

                     <dd>pang、bing、bing</dd>

        </dl>

     效果:

     

      年龄

     1、2、3

     姓名

     pang、bing、bing

 

八、HTML表格

     表格:由 <table> 标签来定义。

     行:每个表格均有若干行(由 <tr> 标签定义),

     单元格:每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

例子:

       <table>                              

                <tr>
                        <td>123</td>
                        <td>456</td>
                </tr>
                <tr>
                        <td>abc</td>
                        <td>ghb</td>

                </tr>

        </table>

效果:

123

456

abc

ghb

   

2、边框

     <table border="1">

 

3.表格表头

     <th>表头</th>

 

4.跨多列的表格

      <td colspan="所跨的列数">单元格内容</td>    

 

5.跨多行的表格

     <td rowspan="所跨的列数">单元格内容</td>    

 

 

6.为了使表格的宽度充满整个浏览器 可以使用width="100%"

<table width="100%"></table>

 

7.表格的填充属性 和间距属性     

      1.文字与边框的距离 :cellpadding

      2.表格与表格的距离 : cellspacing

例子:

<table width="100%" cellpadding="10" cellspacing="200">

 

 

 

 

posted @ 2017-07-13 22:16  借风拥你  阅读(173)  评论(0编辑  收藏  举报