zoukankan      html  css  js  c++  java
  • h5

    锚点

      从一段文字跳转到另一段文字    

    1 <p><a name=1></a>这是第一段.......</p>
    2 <p>这是第二段</p>
    3 <p>这是第三段</p>
    4 <p>这是第四段</p>
    5 <p>这是第五段</p>
    6 <a href="#1">跳到第一段</a>

    图片  单标记

      <img src="路径" alt=" "/>  alt  替换文字  当图片加载失败后显示alt中的字

      例:

    1 <img src="./dolai.jpg" />
    2 等价于
    3 <img src="dolai.jpg" />
    一个.当前目录,两个..表示上一级目录

    如果在同级文件夹内

    <img src="images/dolai.jpg" title="***" />
    images为文件夹名字,图片也有悬停文本title

    相对路径  从自身出发

            1.当资源文件和自身处于同一级目录下 路径直接写文件名(后缀名需要写完整)  2.当资源文件的文件夹与自身处于同一级目录下 路径需要加上文件夹

    绝对路径  一般是带盘符的或者具体url地址(谷歌浏览器选中图片右击复制图片地址为绝对路径)

    列表

    给列表赋予列表的含义

    无序列表

    ul的儿子只能是li,li的父亲是ul。li可以放任何东西,li也是容器级标签

    1    <h1>中国直辖市</h1>
    2     <ul>
    3         <li>北京</li>
    4         <li>上海</li>
    5         <li>深圳</li>
    6         <li>重庆</li>//无序

     有序列表

    1     <ol>
    2         <li>lily</li>
    3         <li>jack</li>
    4         <li>lucy</li>
    5         <li>mike</li>
    6     </ol>

     自定义列表

     1 <dl>
     2         <dt><!-- 标题 -->
     3             刘德华
     4         </dt>
     5         <dd>
     6             <!-- 描述 -->
     7             歌曲:《忘情水》、《冰雨》
     8         </dd>
     9         <dd>
    10             电影:《少年寺》、《天下无贼》
    11         </dd>
    12         <dt>
    13             <!-- 标题 -->
    14             张学友
    15         </dt>
    16         <dd>
    17             <!-- 描述 -->
    18             歌曲:《祝福》、《吻别》
    19         </dd>
    20     </dl>

     表格  展示数据或制作表格

     1     <table border="1"><!--边框宽度为1-->
     2         <tr>
     3             <th>学号</th><!--定义标题行居中并加粗-->
     4             <th>姓名</th>
     5             <th>专业</th>
     6         </tr>
     7         <tr>
     8             <!---->
     9             <td>1-1</td><!-- 单元格 -->
    10             <td>1-2</td>
    11             <td>1-3</td>
    12         </tr>
    13         <tr>
    14             <td>2-1</td>
    15             <td>2-2</td>
    16             <td>2-3</td>
    17         </tr>
    18         <tr>
    19             <td>3-1</td>
    20             <td>3-2</td>
    21             <td>3-3</td>
    22         </tr>
    23     </table>

     合并单元格

      横: colspan

      竖: rowspan

     1     <table border="1">
     2         <tr>
     3             <td>1-1</td>
     4             <td>1-2</td>
     5             <td>1-3</td>
     6         </tr>
     7         <tr>
     8             <td colspan="2">2-1</td>
     9             <td rowspan="2">2-3</td>
    10         </tr>
    11         <tr>
    12             <td>3-1</td>
    13             <td>3-2</td>
    14         </tr>
    15     </table>

    完整表格

     1     <table border="1">
     2         <caption>学生成绩表</caption><!--表格标题-->
     3         <thead>
     4             <tr>
     5                 <th>学号</th>
     6                 <th>姓名</th>
     7                 <th>班级</th>
     8                 <th>成绩</th>
     9             </tr>
    10         </thead><!--表格头-->
    11         <tbody>
    12             <tr>
    13                 <td>1001</td>
    14                 <td>张三</td>
    15                 <td>计科1</td>
    16                 <td>90</td>
    17             </tr>
    18             <tr>
    19                 <td>1002</td>
    20                 <td>王五</td>
    21                 <td>计科2</td>
    22                 <td>80</td>
    23             </tr>
    24         </tbody>
    25         <tfoot><!--用来统计-->
    26 
    27         </tfoot>
    28     </table>

    通过css改变边框

    1     <style>
    2         table,tr,td{
    3             border-collapse: collapse;
    4             /* 细线边框 */
    5         }
    6     </style>

  • 相关阅读:
    navigator 对象
    面向对象 ( OO ) 的程序设计——继承
    面向对象 ( OO ) 的程序设计——创建对象
    面向对象 ( OO ) 的程序设计——理解对象
    芯片知识扫盲
    8位、16位、32位单片机中的“XX位”指什么?
    stm32库函数建工程和使用Keil自带库建工程有没有区别?发现了同样的程序在两种情况下keil自带库可以运行的情况,不知是什么原因
    关于输出的看法
    4-鸡肉为何如此受欢迎
    7-发音规则(弱读,缩写,其他)
  • 原文地址:https://www.cnblogs.com/qianfur/p/12237420.html
Copyright © 2011-2022 走看看