3.17 表格

1. 路径问题

  1. 相对路径:从html文件夹开始查找
  • 同级:src="xx.jpg"
  • 下级:src="img/xx.jpg"
  • 上级:scr="../xx.jpg"
  1. 绝对路径:从指定的盘符开始查找的
  • src="c:\user\desktop\xx.jpg"
注意:
  1. 路径中不能有中文
  2. 不能跨盘符
  3. 统一使用反斜杠 “/”
  4. 不使用绝对路径

2. a标签

控制页面之间的跳转
<a href="#" target="_blank" title="xx">xx</a>

  1. href属性:为跳转的链接地址。
  • href="#",这个假连接会跳转到顶部
  • href="javascript:",这个假连接不会跳回顶部。
  • href="#id名",为页面某处设置锚点(id="xx"),跳转到这个页面的指定处,没有过渡动画。
  • href="xxx.html#id名",设置锚点,跳转到指定页面的某处。
  1. target属性:控制页面跳转方式
  • targe="_self" 是在本页面打开
  • targe="_blank" 是在新的空白页面打开
  1. title属性:控制鼠标悬停时出现的文字,同image
注意:
  1. href属性为跳转的地址(本地或者网络),必须加上http://或https://
  2. a标签中间为展现的内容,可以添加image标签

3. base标签

<base target="_self">
base标签是一个单标签,用来统一指定当前网页所有超链接的打开类型,写在head标签里。

4. 列表标签

列表标签是赋予一堆数据列表的语义,让浏览器知道这堆数据是列表

  1. 无序列表(ul)
    无序列表是赋予一堆数据列表语义且这堆数据没有先后之分
<ul>
    <li>    </li>
     ...
    <li>    </li>
</ul>
注意:

1.只是赋予数据列表的语义,不管样式。
2.ul和li成对出现,不单独出现
3.ul和li标签绑定,ul标签里不能写别的标签,li可以。
4.ul和li标签的嵌套。

  1. Emmet语法
  • ! + tab 快速生成H5模版,包含viewport
  • 任何标签缩写+tab ,快速生成标签
  • “ # ”+id名 :快速生成<div id="id名">
  • “ . ”+类名 :快速生成<div class="类名">
  • “ > ” :子级标签,
  • “ + ” :同级标签,
  • “ * ” x :生成标签数量为x个
  • “ $ ”*x :名称中的变量名从1开始递增到x
  • “ $@n ” *x :名称中的变量名从n开始递增,递增x次
  • “ $@- ” *x :名称中的变量名从x开始递减到1
  • “ $@-n ” *x :名称中的变量名递减到n

例如: table>(thead>tr>th{第$}*3)+(tfoot>tr>td{第$@-10}*3)+(tbody>tr>td{第$@7}*3),按下tab键生成:

<table>
    <thead>
    <tr>
        <th>第1</th>
        <th>第2</th>
        <th>第3</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td>第12</td>
        <td>第11</td>
        <td>第10</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>第7</td>
        <td>第8</td>
        <td>第9</td>
    </tr>
    </tbody>
</table>
  1. 有序列表(ol)
    给一堆数据添加列表语义,并且这堆数据又先后顺序
<ol>
    <li>    </li>
    ......
    <li>    </li>
</ol>
  1. 定义列表(dl)
    dt:定义标题
    dd:定义描述
<dl>
    <dt></dt>
    <dd></dd>
</dl>
注意:
  • dl,dt,dd是整体,不单独出现
  • 推荐一个dt对应一个dd,dd中再添加别的标签。
  • 可以在dt和dd中添加其他标签
  • 无序列表仅仅用于表示内容之间存在有并列关系,也是分为多个子项,但是子项之前没有相应的编号,只有一个原点用于标识。
    有序列表通常用来表示内容之间的顺序或者是重要性关系,每一个列表都分为多个子项,每一个子项都有相应的编号。
    定义列表常用于表示名词或者是概念的定义,每一个子项有两个部分组成,第一部分是名词或者是概念,第二部分是相应的解释和描述。
  1. 表格标签
    赋予数据表格语义,tr个数代表行数,一个td代表一格
<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
         <tr>
            <td></td>
         </tr>
    </tbody>
    <tfoot>
          <tr>
            <td></td>
         </tr>    
    </tfoot>
</table>
  • 表格的标题:caption,一定要放在table中,指定标题,自动相对于表格居中。有align属性
  • table:width/border/bgcolor/cellpadding/cellspacing
  • thead(表头信息):高度固定,不会随table高度变化而变化
  • tfoot(页尾信息):高度固定,不会随table高度变化而变化,放在thead和tbody中间
  • /tbody(主体信息):没写tbody标签时,浏览器会自动补充。
  • tr:bgcolor/align/valign
  • th(每列的标题单元格:自动居中粗体)/td:width/height/bgcolor/align/valign
  • 细线表格:不用设置border,使cellspacing=“1”(默认值为2),利用table的bgcolor与tr的bgcolor的色差配合cellspacing形成细线。
  • 单元格合并:
    • 水平方向:合并列:td colspan="2" ,当前单元格变成两格,要删除后面的一个单元格,永远是在向后合并。
    • 垂直方向:合并行:td rowspan="2",当前单元格变成两行,要删除下行的单元格,永远是在向下合并。
注意:
  1. 默认border属性为0,不可见
  2. table tr td 绑定出现
  3. 宽度和高度默认随内容大小变,可以赋值给table和td。但赋值给td不改变整个table大小。
  4. 水平位置 align
  5. 垂直位置 valign
  6. thead与tbody tfoot一起出现
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容