2.0 [一步步跑完前端学习路线] 前端内容系统化梳理-超文本标记语言-HTML-概述(大纲)

一念一梦
70 阅读9分钟

HTML超文本标记语言HyperText Markup Language

HTML是Web前端开发的基础, 它定义了所有我们可以在浏览器上可展示的所有内容, 可以说用户在浏览器上看到的一切, 都来自于一篇HTML文档; 以下文章介绍了HTML的基础内容: 开始学习 HTML - 学习 Web 开发 | MDN (mozilla.org)

HTML的基础内容包含哪些:

  • HTML是XML的一个特例, 由一个个的元素(一般也称为标签/节点)构成.
  • 元素之间存在大量的包含关系.
  • 怎么定义一个元素、怎么定义元素的属性 (上面的文章可以讲清楚前三个问题)
  • 元素可分为页面元素(主要在<body>元素内)和非页面元素(主要在<head>元素内). 参考这篇文章:“头”里有什么——HTML 元信息 - 学习 Web 开发 | MDN (mozilla.org)
  • 都有哪些元素? 每个元素的意义和作用是什么? 他们都有什么属性? 每个属性的作用又是什么? 每个属性都有什么值? 每个值的意义又什么?

HTML标签

HTML有哪些元素呢? 正确理解HTML的每个标签的作用就是HTML基础的核心部分. 但是元素的种类很多. 作为前端4年老玩家, 其实里边的元素目前我也还认不全, 而且HTML的标准一直存在更新. 一般可以在遇到具体的问题或者应用场景时, 我们再去查相关文档. 当然在时间足够的情况下, 建议把所有的标签都看一遍, 即使当时并不能完全记住.

个人推荐英文文档, 可以用翻译看. 推荐的中文文档专业不错, 但有些描述有点晦涩难懂

HTML标签分类

上文提到HTML的标签一般分为页面元素和非页面元素.

  • 非页面元素: 主要涉及引用外部资源(非HTML资源)、网页标题、浏览器器适应性等辅助性内容
  • 页面元素: 用于页面内容展示, 比如页面布局, 美化样式, 还有各种文字、图片、视频等内容

页面元素是HTML的基础也是核心, 我们进一步可以基于不同的场景, 对页面元素进行分类.

语义标签Semantic Elements和非语义标签

HTML的页面标签中, 存在一类特殊的标签, 这些标签会有一些特定的默认样式(这些样式我们可以很简单就能用其他标签模拟出来,所以这并不是核心), 每一个元素都表达了一个特指的意义(而这个表意是我们使用别的标签所不能表达的, 虽然从用户视角看起来样式一样).

例如

<p>(1) This text is normal.(正常字体)</p>

<p style="font-weight: bold;">(2) This text is normal.(加粗字体)</p>

<p><strong>(3) This text is important!</strong>(加粗字体)</p>

<p><b>(4) This text is bold.(加粗字体)</b></p>

这四段文字中, 只有(1)是常规字体, (2)、(3)、(4)都是加粗字体; (2)、(4)一般都只是加粗样式, (3)则是表达说, 这段文本很重要.

这类标签个人认为主要用于与专业文章(书籍/论文)对齐, 在常规WEB开发中, 我们可能会忽略标签表意而只在乎页面展示效果. 但这类标签在专业文章中表意会很重要 ,对于书籍类文件的解析和导出等在线工具会很友好.

这类的标签在常规网页开发中一般不强制使用, 能用上最好, 因为对无障碍模式是有帮助的, 正确的应用也使得开发者能更快理解别人代码.

块级标签和行内标签

在 HTML 中有两种你需要知道的重要元素类别，块级元素和内联元素。

  • 块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。块级元素通常是页面上的结构元素。例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。
  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。它通常与文本一起使用，例如，<a> 元素创建一个超链接，<em> 和 <strong> 等元素创建强调。

本篇文章详细解释并列举出了具体哪些属性块级标签, 哪些属于行内标签: HTML Block and Inline Elements (w3schools.com)

拓展一下, 所谓块级标签和行内标签分类依据是展示的样式效果不同, 而样式我们知道是可以通过CSS进行控制的, 所以这个分类方式依据的本质其实是标签的某一个默认样式: "具体一点就是display这个样式的默认样式". 但是我们手动修改display的值不影响我们做的分类的

表单标签

表单标签指的是默认就承载用户操作行为的标签(除了超链接跳转<a>,一般不算, 非得算进去也是可以理解的). 表单标签是Web2.0的核心,让用户不再只能像看报纸一样在网站上看文章, 而是给Web提供了更多可能性.

具体文章请看这里:

如果新手到这里的话, 可以先跳过表单最后的submit把数据提交服务器的阶段,这里一般会涉及到后端同学的内容.

媒体标签

作为所谓的超文本标记语言, 除了可以给字体加点样式之外, 更多的超文本就体现在这些标签了. HTML支持展示

常见的支持有图片、音乐、视频、PDF等. 参考以下文章:

看完以上文章, 应该可以在HTML展示这些媒体内容, 并且了解针对各个媒体, 现代的浏览器都支持哪些格式的内容.

同时了解可以通过插件机制以及object等标签支持其他更多内容. 当然要想更进一步的了解, 需要后续结合JavaScript等其他编程语言一起配合讨论才可以.

图形标签

主要涉及两个标签<canvas>、<svg>,

在HTML中,  <canvas>和<svg> 元素通过 JavaScript 动态绘制图形, 也是新的领域, 每个标签的内容都对应一本书的体量.

  • svg常用于在网页中展示可缩放的矢量图标.
  • canvas则可以用于在Web上开发游戏.

后续学习完Javascript, 针对每一个标签新开文章讨论.

HTML和CSS的关系

在已经比较清楚的理解了HTML的基础之后, 我们应该已经可以使用它绘制一些页面了, 比如写一篇文章,、建一个表格、甚至给文章添加几张图片、一个视频等等.

接下来需要进一步的延展HTML的边界了. 第一个问题就是了解HTML和CSS之间的关系.

  • 怎么让网页更好看, 更具设计感?
  • 比如CSS有什么用?
  • 在HTML中怎么使用CSS?
  • 那个标题太大了,怎么给他缩小一点?

可以参考以下文章:

看完文章应该可以了解一下内容:

  • 怎么申明一个CSS样式.
  • 怎么将一个样式绑定到一个元素标签上. 都有哪几种方法

更进一步就需要要深度学习CSS的内容, 当然这属于新的话题了.

HTML和JavaScript

如果已经了解完上述的内容, 我们应该可以写一个比较好看的网页了, 甚至有的可以给网页加一个动效. 不知道有没有遇到一些新的问题. 比如以下这类的:

  • 想在用户浏览的过程中再修改标签里的文章
  • 给一个<a>标签可以让用户跳转到其他网页? 如果不是一个<a>标签呢? 就是一个普通的<div>、<img>行不行, 应该怎么做.
  • 怎么验证用户输入框里边的名字格式对不对? 错了怎么给用户弹出一个提醒?

这些就涉及到JavaScript的内容了.推荐以下文章:

说JavaScript语言现在属于Web前端的核心内容也不为过, 当然JavaScript的相关内容比HTML会更多也更难一些. 能做的事情也更多, 我们也会新开文章专门讨论相关内容.

DOM API

文档对象模型(Document Object Model): 为了让JavaScript可以更好的控制HTML元素的展示, 浏览器都会实现一套操作HTML元素或属性的API. 被分配在window.document空间下.

具体可看文章: JavaScript HTML DOM (w3schools.com),

这部分API在非浏览器环境是不可用的

BOM API

浏览器对象模型(The Browser Object Model) 同DOM API, 浏览器为了用户可以控制(有限控制)浏览器自身, 实现了一套API, 被分配在window下, 具体可看文章: JavaScript Window (w3schools.com)

这部分API在非浏览器环境也是不可用的.

HTML和XHTML

XHTML是更严格的HTML, 在错误处理上, HTML是忽略而XHTML会严格验证. 在语法上一个HTML允许的内容在XHTML上不被允许. 详细内容请看:

了解HTML最新发展的渠道

avatar
文章
阅读
粉丝