阅读 1180

(Ⅰ)常用的“标签元素”和“属性” | ② HTML 元素、属性详解

原创:itsOli  @前端一万小时

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

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

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

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 基础》中,我们对 HTML 有了初步的认识,在完全掌握的基础上,这一篇我们将会接触大量常用的“标签元素”及其“属性”等。

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


1 学完这篇要达到的目标

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

1.1 提前给出总结

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

  • 如果是标题,就用 <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 定制页面图标(即页面标签前边的小图标)

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

2.1.4 设置 referer(图片所在的当前这个页面的地址)

<meta name="referer" content="never">
复制代码

2.1.5 添加页面描述(即我们在搜索时看到的网站介绍)

<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>
复制代码


下一篇我们继续讲解更多的元素及属性。

祝好,qdywxs ♥ you!

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