zoukankan      html  css  js  c++  java
  • 寒假Day35:HTML表格+图像+超链接

    表格

    表格的基本标签:(必须要有)

    • table标签(表格)
    • tr标签(行)
    • td标签(单元格)

    另外:

    表格标题<caption>

    单元格内部的表头<th> ,默认样式:粗体和居中

    此外:

    写了和没写在浏览器中没有区别,但是对于逻辑性是有的是这三个标签,用以区别表头表身和表脚。

    <thead>  <tbody>  <tfoot>

    具体格式:

    <table>
      <caption>表格标题</caption>   <thead>     <tr>       <th>one</th>       <th>two</th>     </tr>   </thead>    <tbody>     <tr>       <td>1111</td>       <td>2222</td>     </tr>     <tr>       <td>3333</td>       <td>4444</td>     </tr>   </tbody>   <tfoot>     <!-- 这边往往用于统计数据-->   </tfoot>

    </table>

    浏览器显示如图:

    合并行:

    在tr之间和td并列的地方插入

    <td rowspan="需要合并的行数">内容</td>

    注意:需要合并的行数是指该行(包括该行)往下计算

    和并列同理:

    <td colspan="需要合并的列数">内容</td>

    图像

    使用标签<img/>(自闭合标签)

    该标签的三个属性

    src:图像源文件所在路径(不可少)

    <img src="路径"/>

    alt:图片无法显示时候的提示文字(不可少),设置图片描述信息,给搜索引擎看

    title:鼠标移动到图片上的提示文字(值一般=alt),给用户看

    <img src="路径" alt="描述(给搜索引擎看)" title="描述(给用户看)">

    绝对路径:完整路径

    相对路径:相当于当前网页定位到的图片位置;系统自动生成的都是相对路径;对于一个网站来说,外部文件或图片的引用都是使用相对路径,几乎不用绝对路径。

    ../ :表示上一级目录(但是mac里面好像使用\+空格形成转义符来用的,忘了???)

    网页图片分成:

    位图:放大缩小会失真,jpg、png、gif,组成单位像素

    矢量图:放大缩小不会失真,ai、cdf、fh、swf,组成单位数学向量。

    超链接

    超链接两种方式:外部链接、内部链接(内部页面链接、锚点链接)

    外部链接

    <a>标签

    <a href="链接地址" target="目标窗口的打开方式">超链接文字</a>

    打开方式:(即<a>标签的target属性)

    _self:当前窗口打开

    _blank:新窗口打开

    内部链接:

    与自身网站有关的链接,链接地址直接输出相对路径即可

    锚点链接:

    链接对象:当前页面的某一个部分。

    就类似于博客的右边有一个小方框导航栏,按到哪一个就会滑动到当前页面的哪一块中

    需要设置:目标锚点的id名称和超链接部分。

    超连接部分放在开头即可:

    <div>
            <a href="#book">文档</a><br />
            <a href="#pic">图片</a><br />
            <a href="#article">文章</a><br />
    </div>

    目标锚点:

    <div id="目标锚点id名称">

    例如:

    <div id="book">
  • 相关阅读:
    CKeditor3.6.2 配置与精简
    CKEditor与CKFinder整合并实现文件上传功能
    实体关联关系映射:
    status pending状态
    wx:for
    小程序
    获取指定控件的值
    报表
    dataGridView 设置
    SQLite 的使用
  • 原文地址:https://www.cnblogs.com/OFSHK/p/12341405.html
Copyright © 2011-2022 走看看