• 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=100px height=100px src="1.jpg"; alt="游戏手柄" title="游戏手柄" />游戏手柄超便宜!!

    <br />

    <br />

      <img src="2.jpg" style=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">

     

     

     

     

  • 相关阅读:
    全天防晒大充电,让你夏日无烦恼 生活至上,美容至尚!
    让皮肤美白细致的七大DIY 生活至上,美容至尚!
    夏日防晒护肤经验心得与大家分享 生活至上,美容至尚!
    如何排毒,运动才是关键 生活至上,美容至尚!
    在厨房也能瘦身的几个动作 生活至上,美容至尚!
    人体排毒全攻略,想长寿就看这里 生活至上,美容至尚!
    让你瘦不停的23个小细节 生活至上,美容至尚!
    各类型男士皮肤的护肤秘籍 生活至上,美容至尚!
    Android学习笔记08:相对布局RelativeLayout
    Android学习笔记06:线性布局LinearLayout
  • 原文地址:https://www.cnblogs.com/pangbing/p/7163412.html
Copyright © 2020-2023  润新知