阅读 2914

(02)② HTML 元素、属性详解 | HTML

原创:itsOli  @前端一万小时

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

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

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

2020.08.20 更新:
以下链接为本文最新勘误篇章——《② 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 属性即可。
  ❌ 使用语义化标签能让代码更简洁,所以能用尽量用。
复制代码

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



前言: 上一篇《(01)① HTML 基础 | 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:&lt; &gt; 这个乍看如乱码一样的字符就是我们 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!