前端开发基础-HTML篇

日子很长
163 阅读11分钟

一、整个前端阶段可能会用到的工具

  1. 文本编辑器，用来写代码。可以是一个文本编辑器（如 Visual Studio Code、Sublime Text 或 WebStorm)
  2. 网络浏览器，用以测试代码。目前，最常用的浏览器是 Firefox 、Chrome、Opera、Safari、Internet Explorer 和 Microsoft Edge。
  3. 图形编辑器，如 GIMP 、Figma 、Paint.NET 、Photoshop 、Sketch 或 XD ，为你的网页制作图像或图形。
  4. 版本控制系统，用来管理服务器上的文件，与团队合作开展项目，共享代码和资产，避免编辑冲突。现在，Git 是最流行的版本控制系统，还有 GitHub 或 GitLab 托管服务。
  5. FTP 工具，老式 Web 托管账户，以管理服务器上的文件（Git 正越来越多地取代 FTP 用于此目的）。有大量的 (S)FTP 程序可用，包括 Cyberduck、Fetch 和 FileZilla。
  6. 自动化构建工具，如 Webpack 、Grunt 或 Gulp ，以自动执行重复性任务，如简化代码和运行测试。
  7. 库、框架等，以加快编写常用功能。一个库往往是一个现有的 JavaScript 或 CSS 文件，它提供了现成的功能，供你在代码中使用。框架则更进一步，为你提供一个完整的系统和一些自定义的语法，让你在上面写一个 Web 应用。
  8. 此外还有更多的工具

注：当前阶段只需要安装 文本编辑器（Visual Studio Code）、网络浏览器（Chrome）、图形编辑器（Photoshop）即可

二、实际项目中前端开发的大概流程

  1. 计划

在做任何事情之前都需要一些想法。比如：

    • 网站的主题是什么？ 
    • 基于所选主题要展示哪些信息？ 文本内容、图片、音频或视频等
    • 网站采用怎样的外观？ 用高阶术语来说，背景颜色是什么？使用哪种字体比较合适：正式的、卡通的、粗体、瘦体？

复杂项目需要更详细的指引，深入到颜色、字体、页面上项目之间的间距、适当的书写风格等所有细节。正规一点的公司会提供设计指南、设计系统或品牌手册等

  1. 绘制草图

拿起笔和纸，或者通过专业的图形设计软件（如：PS、Figma等）大致勾勒出你所希望的网站样子。

同样的，正规的公司会有专门的产品经理或者专业的美工人员提供设计图，但是作为前端开发人员你应该养成绘制草图的习惯，画草图很有用——并且不需要梵高的手法！

通常情况下，Web 团队通常包括一个平面设计师和一个用户体验 (UX) 设计师。平面设计师把网站的视觉效果放在一起。用户体验设计师则以一种更抽象的模式来解决用户如何体验及与网站交互方面的问题。

image.png 3. 选定内容

接下来就可以开始通过代码来组织网页上的内容及排版了。如下一个简单的页面效果：

image.png

三、什么是 HTML?

HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的**元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

注： HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。

四、HTML元素组成

image.png 这个元素的主要部分有：

  1. 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
  2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
  3. 内容（Content）：元素的内容，本例中就是所输入的文本本身。
  4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

空元素：不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。

五、元素的属性

image.png 属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个 class 属性给元素赋了一个识别的名字，这个名字此后可以被用来识别此元素的样式信息和其他信息。

一个属性必须包含如下内容：

    1. 一个空格，在属性和元素名称之间（如果已经有一个或多个属性，就与前一个属性之间有一个空格）。
    2. 属性名称，后面跟着一个等于号。
    3. 一个属性值，由一对引号("")引起来。

六、元素的分类

  • 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间，例如超链接元素或者强调元素

七、剖析 HTML 文档

学习了一些 HTML 元素的基础知识，这些元素单独一个是没有意义的。现在我们来学习这些特定元素是怎么被结合起来，从而形成一个完整的 HTML 页面的：

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

分析如下：

    1. : 声明文档类型。文档类型声明类似于链接，规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西。
    2. : 元素。这个元素包裹了整个完整的页面，是一个根元素。
    3. : 元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS 样式，字符集声明等等。以后的章节能学到更多关于元素的内容。
    4. : 这个元素设置文档使用 utf-8 字符集编码，utf-8 字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
    5. : 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
    6. : 元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

八、HTML 注释

如同大部分的编程语言一样，在 HTML 中有一种可用的机制来在代码中书写注释 —— 注释是被浏览器忽略的，而且是对用户不可见的，它们的目的是允许你描述你的代码是如何工作的和不同部分的代码做了什么等等。如果你在半年后重新返回你的代码库，而且不能记起你所做的事情 —— 或者当你处理别人的代码的时候，那么注释是很有用的。

为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号包括起来，比如：

<p>我在注释外！</p> 
<!-- <p>我在注释内！</p> -->

注释的内容不会显示到页面上，只作为辅助开发和后期维护用！

九、HTML中的空白

无论你在 HTML 元素的内容中使用多少空格 (包括空白字符，包括换行)，当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。

那么为什么我们会在 HTML 元素的嵌套中使用那么多的空白呢？答案就是为了可读性 —— 如果你的代码被很好地进行格式化，那么就很容易理解你的代码是怎么回事，反之就只有聚做一团的混乱。在我们的 HTML 代码中，我们让每一个嵌套的元素以两个空格缩进。你使用什么风格来格式化你的代码取决于你 (比如所对于每层缩进使用多少个空格)，但是你应该坚持使用某种风格。

十、HTML 基本标签

image.png

1. 标题和段落

大部分的文本结构由标题和段落组成。不管是小说、报刊、教科书还是杂志等。内容结构化会使读者的阅读体验更轻松，更愉快。

  • 六个标题元素标签 h1 h2 h3 h4 h5 h6
  • 一个段落标签 p

在编写页面时要注意合理的安排页面文档的层次结构，下面给出一些最佳实践：

  • 您应该最好只对每个页面使用一次h1 — 这是顶级标题，所有其他标题位于层次结构中的下方。
  • 请确保在层次结构中以正确的顺序使用标题。不要使用h3来表示副标题，后面跟h2来表示副副标题 - 这是没有意义的，会导致奇怪的结果。
  • 在可用的六个标题级别中，您应该只在每页使用不超过三个，除非您认为有必要使用更多。具有许多级别的文档（即，较深的标题层次结构）变得难以操作并且难以导航。在这种情况下，如果可能，建议将内容分散在多个页面上。

2. 重点强调标签

  • 强调 em 标签

在口语表达中，我们有时会强调某些字，用来改变这句话的意思。同样地，在书面用语中，我们可以使用斜体字来达到同样的效果

  • 非常重要 strong 标签

为了强调重要的词，在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的效果。

注：在 HTML 中我们用strong(strong importance) 元素来标记这样的情况。这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出。浏览器默认风格为粗体，但你不应该纯粹使用这个标签来获得粗体风格，为了获得粗体风格，你应该使用span元素和一些 CSS，或者是 b元素 (见下文)。

3. 表象元素

b, i, 和 u仅仅影响表象而且没有语义，被称为**表象元素（presentational elements）**并且不应该再被使用。

如果没有更合适的元素，那么使用 b、i 或 u来表达传统上的粗体、斜体或下划线表达的意思是合适的。

  • i被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
  • b被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
  • u被用来传达传统上用下划线表达的意义：专有名词，拼写错误…

十一、HTML 实体引用（特殊字符）

在 HTML 中，字符 <、>、"、' 和 & 是特殊字符。它们是 HTML 语法自身的一部分，那么你如何将这些字符包含进你的文本中呢，比如说如果你真的想要在文本中使用符号&或者小于号，而不想让它们被浏览器视为代码并被解释？

我们必须使用字符引用 —— 表示字符的特殊编码，它们可以在那些情况下使用。每个字符引用以符号&开始，以分号 (;) 结束。

十二、页面结构化

回答这个问题前，让我们先来看一段文档示例“text-start.html” — 并从运行这段文档示例（美味的豆沙食谱）开始。首先，您可以复制一份并保存到本地机器上，在之后的练习中您将用到它。在这个文档的主体（body）中包含了多个内容 — 这些内容没有做任何标记，但是编辑时使用了换行 (输入回车/换行跳转到下一行) 处理。

然而，当您在浏览器中打开文档时，您会看到文本显示为一整块！

image.png

avatar
文章
阅读
粉丝