a标签download属性无效_（02）② HTML 元素、属性详解 | HTML

最新推荐文章于 2024-08-15 15:48:21 发布

weixin_39647180

最新推荐文章于 2024-08-15 15:48:21 发布

阅读量357

点赞数

文章标签： a标签download属性无效 html li去掉黑点 html 怎么让tr的css覆盖td的 html 注释 html实体编码 html小图标代码

原创：itsOli  @前端一万小时

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

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

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

❗️❗️❗️以下链接为本文最新勘误篇章——《② HTML 元素、属性详解》

1. meta 有哪些常见的值？
2. meta viewport 是做什么用的，怎么写？
3. 列出常见的标签，并简单介绍这些标签用在什么场景？
4. 如何在 HTML 页面上展示 <div></div> 这几个字符？
5. 你是如何理解 HTML 语义化的？
6. 前端需要注意哪些 SEO?
7. 你对网页标准和 W3C 重要性的理解?

8. 关于语义化，以下说法错误的是？（不定项）
  ✅ 在做页面做整体布局的时候，table 标签用起来很方便可以作为布局的一种推荐方案。
  ❌ 语义化的本质是可读性，让代码适合自己阅读、适合队友阅读、适合机器阅读。
  ✅ 对于 h1-h6、p、span 这些标签，用 div 替换也没关系，修改它的 display 属性即可。
  ❌ 使用语义化标签能让代码更简洁，所以能用尽量用。

上方面试题“参考答案详解”，请点击此处查看获取方式！

前言： 上一篇《① HTML 基础》中，我们对 HTML 有了初步的认识，在完全掌握的基础上，这一篇我们将会接触大量常用的“标签元素”及其“属性”等。

知识点会很多，但是，请细细地看下去，收获一定很大。

1 学完这篇要达到的目标

随便打开一个页面，鼠标指到任意位置都知道该用什么标签就算 OK。

提前给出总结

我们在选用标签时，就去跟他的本质功能去做对应，尽量选用语义化的标签来构建整个页面框架：

如果是标题，就用 <h> ；
如果是一段话，就用 <p> ；
如果不知道他是什么，如果这个东西能占一行，就用 <div> ；如果没有一行，就一个小小的位置，就用 <span> ；
如果是可点击的就用一个 <a> 链接；
如果像那种并列一排排的，甚至还有一点一点，就用“列表”；
如果看到一个表格，就用 <table> ；
如果看到了一个输入框，就用 <input> 。

2 细说各元素，各属性

2.1 元数据 `<meta>`

2.1.1 指定文档编码

<meta charset="UTF-8">

2.1.2 适配移动端页面（理解并牢记）

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

注释：

width=device-width 宽度 = 设备宽度
user-scalable=no 用户缩放 = 不允许
initial-scale=1.0 初始比例 = 1
maximum-scale=1.0 最大比例 = 1
minimum-scale=1.0 最小比例 = 1

2.1.3 设置 referer（图片所在的当前这个页面的地址）

<meta name="referer" content="never">

2.1.4 添加页面描述（即我们在搜索时看到的网站介绍）

<meta name="description" content="优雅高效的在线文档编辑与协同工具，让每个企业轻松拥有文档中心，阿里巴巴集团内部">

2.2 `<head>` 头部元素里边还可以放：CSS 和 JS

<link rel="stylesheet" href="--.css">
<script src="--.js"></script>

注释：正如上篇中所说，头部元素 <head> 里边所有的标签元素都不会显示给用户，但它会承载一些与页面描述相关的东西——CSS 样式、meta、title 等。
注释：我们这里的 <link> 标签，来引入的 CSS 样式属于我们最常用的外部样式表。

有一点我们必须清楚：HTML 建立内容的“结构”，CSS 提供“样式”和“表现”。

2.3 列表

✅任务：写出以下图片（本文摘取）的 HTML。

效果及源码链接

<!DOCTYPE html>
<html >
<head>
 <meta charset="utf-8">
 <title>前端一万小时</title>
</head>
<body>
 <h1>1 学完这篇要达到的目标</h1>
  <p>随便打开一个页面，鼠标指到任意位置都知道该用什么标签就 OK。<br>
    提前给出总结（我们在选用标签时……
  </p>
 <ul> <!-- ❗️注释 1 -->
  <li>如果是标题，就用 &lt;h&gt;;</li> <!-- ❗️注释 2 -->
  <li>如果是一段话，就用 &lt;p&gt;;</li> <!-- ❗️注释 3 -->
  <li>如果是可点击的就用一个 &lt;a&gt; 链接；</li>
  <li>如果像那种并列一排排的，甚至还有一点一点，就用“列表”；</li>
  <li>……</li>
 </ul>
</body>
</html>

注释 1：<ul> 是 Unordered List——无序列表的简称；而 <ol> 是 Ordered List——有序列表的简称。二者唯一的区别就是，有序列表是123……开头，而无序列表是小黑点开头。其他格式一样，不再赘述；
注释 2：<ul> 或 <ol> 直接嵌套的标签是 <li> 标签，他们之间不允许再嵌套任何标签。需要嵌套的话，要嵌套在 <li> 标签里；
注释 3：< > 这个乍看如乱码一样的字符就是我们 HTML 中的“实体”。

lt 是 less than “小于”的简称；gt 是 greater than “大于”的简称。然后前边加一个 & 字符——实体都是以 & 开头，以 ; 结尾。

我们想显示出 <h> 这样一个文本，我们在 HTML 中是不能直接打出 < 或 > 等这种符号的，否者会被浏览器直接识别成元素，因此我们要进行特殊处理。

更多实体请参考：实体符号参考手册

2.4 自定义列表

即一个文档里一个标题一个介绍，一个标题一个介绍……：

✅任务：写出以下图片的 HTML。

效果及源码链接

<!DOCTYPE html>
<html >                                           
<head>                                           
  <meta charset="utf-8">                         
  <title>前端一万小时</title>             
</head>                                          
<body>
  <h1>1 细说各元素，各属性</h1>
  <p>1. 元数据 &lt;meta&gt;：</p>
  <dl>
    <dt>-- 指定文档编码：</dt>
      <dd>&lt;meta charset="UTF-8"&gt; </dd>
    <dt>-- 适配移动端页面：</dt>
      <dd>&lt;meta name="viewport" content="widt……&gt;</dd>
    <dt>-- 定制页面图标（即页面标签前边的小图标）：</dt>
      <dd>&lt;link rel="shortcut icon" href="favicon.ico……&gt;<br>
        注释：href="favicon.ico" 这里边放这个图标的图形文件地址。
    </dd> 
  </dl>     
</body>                                           
</html>

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> 元素里的。

2.7 定制页面图标（即页面标签前边的小图标）

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
<!-- 注释：href="favicon.ico" 这里边放这个图标的图形文件地址。 -->

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

祝好，qdywxs ♥ you！

weixin_39647180

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

a标签download属性无效_（02）② HTML 元素、属性详解 | HTML

1 学完这篇要达到的目标

提前给出总结

2 细说各元素，各属性

2.1 元数据 <meta>

2.1.1 指定文档编码

2.1.2 适配移动端页面（理解并牢记）

2.1.3 设置 referer（图片所在的当前这个页面的地址）

2.1.4 添加页面描述（即我们在搜索时看到的网站介绍）

2.2 <head> 头部元素里边还可以放：CSS 和 JS

2.3 列表

2.4 自定义列表

2.5 超链接标签

2.5.1 简单链接

2.5.2 外部链接

2.5.3 返回页面顶部链接

2.5.4 图片链接

2.5.5 下载链接

2.5.6 电话链接

2.5.7 Email 链接

2.6 表格

2.7 定制页面图标（即页面标签前边的小图标）

2.1 元数据 `<meta>`

2.2 `<head>` 头部元素里边还可以放：CSS 和 JS