初识HTML（误

ZhZhXuan
137 阅读13分钟

先从回顾MDN来学起吧～

先声明一下，本文内容跟MDN重合率很高，因为主要就是参照MDN来写的（回顾回顾～！！）。本意呢，也不是为了传播知识，而是让我自己的知识变得系统一点，传播知识反而是次要的（想要学习看MDN比看我这篇文章要快啊兄弟们！！！冲起来！！）

另：文中的「TODO」字样，意在提醒我自己这里还有知识点，以后可以用作写博客的主题（或者续写、扩展）

首先先说什么是HTML，它并不是一门编程语言，而是一门标记语言，

元素

HTML由一个个元素组成，每个元素由开始标签、结束标签、内容组成，如下图：

image.png

元素也可以嵌套，但是要正确的嵌套，我认为这个嵌套方式可以参考左括号（和右括号）的配对方式，具体的就不多说了 ，因为我感觉这个我会。

元素一般都有开始标签结束标签，但是也有一些空元素，只有一个标签，比如说<img src="..."/>这样。

元素也有分类，块级元素和内联元素，多说一点，H5中定义了一些非规范性的新的元素类别，但是呢，没什么必要，还是块级元素和内联元素的说法比较直观。TODO

属性

一个元素可以拥有属性也可以没有，属性一般就是下面这种形式：属性名 = "属性值"，对照一下下图：

image.png

我们一定要记得添加引号，方便浏览器解析，防止解析出错。不过我们可以自己选择使用单引号还是双引号哈，我喜欢双引号。

有些属性呢，只有一个属性名，没有属性值，这种的我们称之为布尔属性，比如说disabled，拿一下MDN里面的例子：

image.png

HTML文档

这是一段比较比较完整的代码片段哈，我们看一下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

<!DOCTYPE html>用来声明文档类型，我们应该都看见过以前的声明文档类型都是很长一段，很不方便，不过H5之后就很简便了哈，就这么短短一行。我们只要记住这一点点就OK，不用在学习之前的版本是怎么声明的了，都是历史。
声明文档类型的作用呢，是用来检测这个HTML文档是哪个版本的，比如说是HTML4的还是HTML5的呢是吧，方便告诉浏览器用什么样的标准、什么样的规范解析。

<html>是文档的根元素，包裹了整个完整的页面。

<head>，是一个容器，有一些我们希望用到，但是跟页面的结构无关的一些东西。比如<title>描述页面标题、<link>引入CSS，还有<meta>标签，诚然我们把这种标签放在<html>标签里面，他们也不会显示在页面里，但他终究跟页面内容、页面结构无关，所以我们把他们都放在<head>里面，我认为就是类似统一管理看着更整洁更规范吧。

<meta charset="utf-8">这段话是说明文档使用的字符集，防止浏览器使用其他字符集解析，解析成乱码。

<mate>也是一个元数据标签哈，元数据(描述HTML的数据，比如，作者，和描述文档的重要关键词)。 关于<mate>标签其实还有一些知识点啊，但是我目前不知道。TODO

<title></title>，页面标题，不多说了。

<body></body>，页面每个块儿，每个节点，每个想要展示出来的内容，就放在这个里面。

HTML文档里面的空白、空格

不管是换行、还是好多好多空格，都会解析成一个空格。

特殊字符

字符 <, >,",' 和 & 是特殊字符。每个字符引用以符号&开始, 以分号(;)结束.

都需要转义哈，就是用表示这几个字符的特殊编码来表示。 比如说<p>要转换成&lt;p&gt;来显示，其中 &lt;表示<、&gt;表示>

注释

也不多说了，看MDN就可以

<head>标签里面有什么

有<title>标签，还有什么，有<mate>元数据标签

<mate>元数据标签

元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据——  <meta>元素 。

字符集

那什么是描述数据的数据呢？比方说上面提到过的字符集<meta charset="utf-8">，他就是描述这个文档数据需要被什么样的编码解析的数据，除了UTF-8，还有一些GBK之类的。

作者和编码

许多<meta> 元素包含了name 和 content 特性：

  • name 指定了meta 元素的类型； 说明该元素包含了什么类型的信息。
  • content 指定了实际的元数据内容。

这些信息在一定程度上也是利于SEO（搜索引擎优化）的。

其他一些类型的元数据

可以通过定义<meta>标签内的一些内容，让网页被链接到其他网站的时候可以出现类似 「图片+标题+描述」 的组合样式。

image.png

也可以指定当网页被保存在本地的时候，会默认显示什么样的图标

image.png

也可以指定网页被保存在电脑、保存在iPad会各自显示什么样子的图标。

HTML中引入CSS、JavaScript

link引入CSS、script引入JS。TODO

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

HTML文字处理

H5的一大特征就是语义化啊，什么是语义化呢？我的理解啊：这个主要是给浏览器看的，其次才是给程序员看的，最后才是给用户看的（或者我认为也可以说，H5的语义化跟用户没什么关系）。

首先就是浏览器要确认，这部分内容要怎么去解析，比如说<strong>和<b>两个标签，表现出来的效果都是文字加粗，但是在浏览器看来，<b>跟普通的文本没什么差别，只是样式上多了一个加粗，但是<strong>代表的意思就是，这个标签包裹的内容有一定的重要程度，如果是视障用户使用屏幕阅读器读出来的话，就是需要重读的。很好理解啊也是。

语义，就是这段语言的含义嘛。

普通文本也能通过样式做出来跟<h1>一样的效果，但是浏览器会把<h1>里面的内容理解为文档的一个大标题，其他的就算样式一样，狸猫也当不成太子呢。

关于这部分嗯，可以直接看文档，都是一些比较普遍的标签以及他们使用方式的一个展示。

关于结构化

我所理解的结构化啊，就是说把网页的内容，通过正确的标签包裹起来，内容分区分块。
该用<div>就用<div>，该用<p>就用<p>，该用<span>就用<span>。

不然如果<body>里面没有任何标签只有一大段内容，那他就不会自己分行分段，糊成一团是吧，很不美观啊。

超链接

超链接很重要啊，就是<a>标签，这也是为什么互联网是互联网的原因。
我们从这个网站点击链接跳转到另一个网站，网站和网站之间创建了联系，连接成一个网络。

<a>标签里面可以嵌套块级元素，比如说套一个<img>，变成块级链接，点击图片跳转路径。

<a href="https://www.mozilla.org/zh-CN/">
  <img src="mozilla-image.png" alt="链接至 Mozilla 主页的 Mozilla 标志">
</a>

href属性里面可以放相对URL，也可以放绝对URL，这个也不多说了，懂得都懂（这话说出来很有某乎的感觉啊。

建议使用相对URL，因为每一次绝对URL，浏览器都会重新查找一次服务器的地址，然后服务器定位文档存放的路径，最后返回给浏览器，每次都查找会很浪费资源。

如果想要下载同源URL的文件，我啃可以使用download属性来定义文件下载之后的默认名。 比如说：

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
   download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows（64位）
</a>

效果如下： 下载最新的 Firefox 中文版 - Windows（64位）

但是这个download属性：「此属性仅适用于同源URL」TODO

电子邮件链接

用<a>标签创建一个发送电子邮件的链接。

它的基本形式是：<a href="mailto:对方的邮件地址">，比如：

<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>

也可以像get发送请求报文携带参数一样，他也可以携带一些信息，比如：\

主题(subject)、抄送(cc)和主体(body) (这不是一个真正的头字段，但允许您为新邮件指定一个短内容消息)。 

每个字段及其值被指定为查询项。

每个字段的值必须是URL编码的。

具体的也不多说了，接着看看其他的吧。

高级文字格式

在上面文字处理中提到的都是常用的，其实放在现实开发过程中，用得最多的也就是<div>、<p>、<span>这些了，但是一个优秀的前端工程师应该对自己有更高的标准， 我们应该有意识的让自己的开发变得更加规范、语义化。

描述列表 (description list)

<dl>、<dt>、<dd>
其中，<dl>指一个 描述列表，一个描述列表中有很多 描述项
一个 描述项 是【一个<dt>和 一个或者多个<dd>】的组合。 比如说：

<dl>
  <dt>内心独白</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，</dd>
    <dd>这些台词只面向观众，而其他角色不会听到。</dd>
</dl>
内心独白
戏剧中，某个角色对自己的内心活动或感受进行念白表演，
这些台词只面向观众，而其他角色不会听到。

块引用

使用<blockquote>标签，来表示一段内容是从其他地方、其他网站引用过来的，可以用cite属性记录文字的来源网站URL，

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  这里是被块引用的一段文字
</blockquote>
引用之后的文字

上面这段文字样式如下，每个网站应该都有对这个标签的一个默认样式的覆盖。这里看到的样式就是掘金常见到的引用了。

这里是被块引用的一段文字
引用之后的文字

行内引用

我的理解是，相对块元素、内联元素，有块引用和行内引用。

行内引用用的就不是<blockquote>标签了，而是<q>

放个例子，比如：

<q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
这里是一段行内引用
</q>
行内引用之后的文字

样式如下：

这里是一段行内引用 行内引用之后的文字

相比于 「"abbc"」里面的双引号，上面这段文字里的引号是没办法选中的对不对。

引文

上面的cite是引用文字标签的属性名，

与此同时，有一个名为<cite>的标签。

说是「引文」啊，但其实我也没有分太清楚，引文和上面引用的区别，从样式上来说的话，引文是斜体的。别的目前还没看出来也是。

我猜了一下哈，引文和行内引用很像，但是除了样式上些许的不同啊，可能还有一些语义上的区别。
我斗胆来猜一下，引文<cite>更多的是文章中出现的人名、要链接到的一个网站，引文通常会被<a>标签包裹，然后点击引文，能够跳转到解释这个引文内容的网页。
行内引用<q>更多的是一段具体的话，比如说：孔子曰：<q>孔子说的话</q>这样。

行吧，也是胡言乱语，放一个TODO留着让我以后再看吧。

<cite>MDN blockquote page</cite>

样式如下：\ MDN blockquote page

缩略语

另一个你在web上看到的相当常见的元素是<abbr>——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。

我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。

我们使用 HTML 来组织网页文档。

标记联系方式

HTML有个用于标记联系方式的元素——<address>。它仅仅包含你的联系方式

上标和下标

当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。 <sup> 和<sub>元素可以解决这样的问题。

展示计算机代码

  • <code>: 用于标记计算机通用代码。
  • <pre>: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在<pre></pre>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。（我认为类似于ES6模版字符串这样的）
  • <var>: 用于标记具体变量名。
  • <kbd>: 用于标记输入电脑的键盘（或其他类型）输入。
  • <samp>: 用于标记计算机程序的输出。

标记时间和日期

HTML 还支持将时间和日期标记为可供机器识别的格式的 <time> 元素。

（上面这几种，我写出来用法什么的也没意思，都是些简单的用法，我也没必要复制粘贴过来，我自己敲一遍感觉也没什么必要，可以跳过去自己看哈。）

文档与网站架构

一个比较经典的页面的基本组成（布局方式）：页眉<header>、导航栏<nav>、主体<main>、侧边栏<aside>、页脚<footer>

<main>主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。

image.png

尽量语义化吧。

HTML调试

在我这么一neinei简短的前端生涯中，属实还没怎么遇见过HTML的调试，一般有什么错误，编译器就会报错了。

所以这里我把MDN的链接放在这儿，想看的自己去看，另外我讲讲我自己的一些想法。

太依赖编译器确实不太好哈，更主要的我认为还是一开始就养成一个良好的编码习惯，写出来开始标签的时候就把闭合标签写出来，标签嵌套的时候也注意正确的打开闭合。
一般来说这样就够了，当然，现在编译器很厉害啊，有些插件儿啥的直接在编码过程中告诉你「诶你这儿写的不对」，确实省事儿，但自己也确实应该养成良好的编码习惯是。两手抓吧。

今天就到这里吧～～～

avatar
文章
阅读
粉丝