阅读 1229

(Ⅱ)不要整天只会用“div” | ② HTML 元素、属性详解

原创:itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有专栏「前端一万小时 | 从零基础到轻松就业」
复制代码


🔗紧接上篇文章

2.5 超链接标签

🔗效果及源码链接
(❗️请先打开查看效果~)

2.5.1 简单链接

<a href="这里写链接地址" title="前端一万小时">知乎:itsOli</a>

<!-- 注释:这里的 title 属性,作用是:当我们把鼠标停在 itsOli 上时,会弹出一个文本框:
前端一万小时。 -->
复制代码

2.5.2 外部链接

将 target 设置成 _blank 时,点击这个链接,浏览器会新开一个窗口打开该网页:

<a href="这里写链接地址" title="前端一万小时" target="_blank">知乎:itsOli</a>

<!-- 注释:当然这里的 target 属性还可以设置成其他值。-->
复制代码

2.5.3 返回页面顶部链接

<a href="#">返回页面顶部</a>

<!-- 注释:这里的 # 后边是可以加东西的,可以是文档中某个元素的 ID,也可以是某个标题等等(但前
提是这些东西要唯一,不然没办法定位到具体位置)。 -->
复制代码

2.5.4 图片链接

用图片来作为链接可点击的对象。

2.5.5 下载链接

<a href="https://……这里放下载的链接" download>下载</a>

<!-- 注释:当我们点击“下载”二字时,就会自动下载这个链接的东西。 -->
复制代码

2.5.6 电话链接

<a href="tel:+86177******">打电话给 Oli</a>

<!-- 注释:当用户是手机浏览页面时,点击“打电话给 Oli”,手机就会自动拨号到这个号码。 -->
复制代码

2.5.7 Email 链接

<a href="mailto:olizhao@qq.com">发邮件给 Oli</a>

<!-- 注释:当点击“发邮件给 Oli ”时,则自动打开邮箱跳转到写信页面; -->


<a href="mailto:olizhao@qq.com" cc="seema.qdywxs@gmail.com">发邮件给 Oli 并抄送给 Seema</a>

<!-- 注释:当点击“发邮件给 Oli 并抄送给 Seema”,则自动打开邮箱跳转到写信页面并填好抄送人。 -->
复制代码

2.6 表格

  • ✅任务:将上文中“实体”示例的表格用 HTML 写出来。

🔗效果及源码链接

<!DOCTYPE html>
<html >                                           
<head>                                           
  <meta charset="utf-8">                         
  <title>Oli-Zhao的前端一万小时</title> 
  <style type="text/css">               /* 注释 1 */
    table {
      border-collapse: collapse;        /* 注释 2 */
    }
    th, td {
      border: 1px solid green;          /* 注释 3 */
    } 
  </style>          
</head>                                          
<body>                                                              
  <table>                              <!-- 注释 4 -->
    <thead>                            <!-- 注释 5 -->
      <tr>                             <!-- 注释 6 -->
        <th>显示结果</th>                          
        <th>描述</th>
        <th>实体名称</th>
        <th>实体编号</th>
      </tr>
    </thead>
    <tbody>
      <tr> 
        <td></td>                                 
        <td>空格</td>
        <td>&amp;nbsp;</td>
        <td>&amp;#160;</td>
      </tr>
      <tr>
        <td><</td>
        <td>小于号</td>
        <td>&amp;lt;</td>
        <td>&amp;#60;</td>
      </tr>
      <tr>
        <td>></td>
        <td>大于号</td>
        <td>&amp;gt;</td>
        <td>&amp;#62;</td>
      </tr>
      <tr>
        <td colspan="4">……</td>        <!-- 注释 7 -->
      </tr>
    </tbody>
  </table>   
</body>                                           
</html>
复制代码

  • 注释 1:
<style type="text/css">               /* 注释 1 */
  table {
    border-collapse: collapse;        /* 注释 2 */
  }
  th, td {
    border: 1px solid green;          /* 注释 3 */</style>      
复制代码

我们 CSS 的引用可以采用在表头里边加 <style> 样式元素来实现,注意格式。

这里边的 type=text/css 是我们 <style> 元素的属性——实际工作中对于本元素这个属性可以不用写,所有浏览器都可以知道你用这个元素就是指的是 CSS。属性的作用是用来提供元素的一些额外信息。

  • 注释 2:
<style type="text/css">               /* 注释 1 */
  table {
    border-collapse: collapse;        /* 注释 2 */
  }
  th, td {
    border: 1px solid green;          /* 注释 3 */</style>    
复制代码

border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它有以下几个值:

  • separate 默认值:边框会被分开,不会忽略 border-spacing 和 empty-cells 属性;
  • collapse :如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性;
  • inherit :规定应该从父元素继承 border-collapse 属性的值。

  • 注释 3:
<style type="text/css">               /* 注释 1 */
  table {
    border-collapse: collapse;        /* 注释 2 */
  }
  th, td {
    border: 1px solid green;          /* 注释 3 */</style>      
复制代码


这里是设置 <th><td> 元素的“边界、边框—— border”的样式。

  • solid:线;
  • dashed:破折号;
  • dotted:点

  • 注释 4:
    <table>                              <!-- 注释 4 -->
      <thead>                            <!-- 注释 5 -->
        <tr>                             <!-- 注释 6 -->
          <th>显示结果</th>                          
          <th>描述</th>
          <th>实体名称</th>
          <th>实体编号</th>
        </tr>
      </thead>
复制代码

表格开始。

  • 注释 5:table head 表头开始(在页面展示时会以加粗的方式显示)。

  • 注释 6:

    • tr = table row 表格的一行,下边只能嵌入 <td><th> 元素;
    • td = table data cell 表示行中的一个列;
    • th = 是表头里边用于和 td 同样作用的元素。
  • 注释 7:

<tr>
  <td colspan="4">……</td>        <!-- 注释 7 -->
</tr>
复制代码

colspan 属性规定单元格可横跨的列数。这里我们让他横跨了 4 列(注意看页面效果);而对应的横跨多个行数是 rowspan 属性。——这两个属性是用在 <td><th> 元素里的。



后记: 这篇的学完,我们也算是渐入佳境。稍后把下一篇的“表单”学完,那基本上我们可以把一个页面的大体框架写出来了。对于其他非常用剩余标签、属性,我们将在后边的学习、工作中各个击破。

祝好,qdywxs ♥ you!

关注下面的标签,发现更多相似文章
评论