写给营销人的 HTML 入门基础教学,学习 SEO 时的必备概念!

作者:码迷 阅读:259 点赞:52

写给营销人的 HTML 入门基础教学,学习 SEO 时的必备概念!/

HTML 其实相当简单又好学。

我们想透过这样的文章来为没有接触过 HTML 的大家介绍:

HTML 语言到底是什么?

HTML (英语:HyperText Markup Language,简称:HTML),是一种用来创建网页的基础语言,人跟人之间对话需要透过语言,而我们与浏览器之间沟通的方式,就是HTML 语言。浏览器 ( Chrome 或者是苹果手机的 Safari … 等等 ) 透过读取与翻译 HTML 语言将网页内容呈现 *( 见注解 ) 出来后,就成了我们在浏览器上看到的网页外观。

* Render – 彩现,又称为绘制,当浏览器理解了 HTML 的内容后,透过 HTML 提供给浏览器的信息转换成图像与文本呈现出来,变成我们所看到的网页内容,这样的过程我们称为彩现。

网页由原代码转换到图像的过程,称为彩现 ( Render )

上方从原代码到网页外观的过程,就被称为彩现

那 HTML 又是怎么组成的呢 ? HTML 是由许多的标签组成的。HTML 语言的标签,必须在「<」与「>」之间,起始标签只需要以「<」与「>」包括,但结束的标签必须要加上左斜线做区分。

例如:<element> 网页元素内容 </element>

范例:<title> 全台最大的 SEO Blog 上线哦! </title>

HTML 的结构

HTML 的结构分为三大部分,声明、Head、Body,而这三个区块分别有不同的功能。接下来我们会简单介绍这三个区块到底是负责什么功能,让你不再看见原代码就发抖!

第一部分 – 声明

<!DOCTYPE html> ,透过这一个标签,指出我们接下来会使用的的语言是 HTML 。这是要通知浏览器,接下来我们要使用 HTML 哦,因为浏览器在我们对他声明要使用 HTML 之后,才能理解我们接着要用哪一种语言跟他对话。虽然声明只有一个标签,却是一定要有的。

第二部分 – 网页表头 ( 头:Head )

网页表头,网页表头中会有网页名称、网页的 STYLE 样式、与网页相关的信息。

网页表头的是由 <head> 标签起始~到 </head> 标签结束,上面说的各种数据会放在这两个标签里面。

第三部分 – 网页主体 ( 身体:Body )

网页主体,网页的身体,包含着各种在网页上看到的内容,不论是文章、图片或者充满特色的接口,这些内容都是包含在网页主体中的。由 <body> 标签起始,到 </body> 标签结束,文章、链接、图片、表格等,各种信息类的内容,都会放在 <body> 与 </body> 之间。

网页内容这个区块会包含相当多的信息,且这些信息中有许多的内容会呈现在用户的面前。需要注意的是,HTML 并不只是一个个标签分别排列,像 <div> 这样的标签是由更多的小标签组合而成,变成一个有着许多综合内容的区块。下图的 div 中就有着 APPLE特别活动、于美国芝加哥…等等以及链接,组合成一个 div。

复习一下

我们刚刚说到的内容整理有三个重点:

  • 第一部份 <!DOCTYPE html> 负责向浏览器声明网页用的编码是 HTML*注解 语法使浏览器了解接下来该怎么翻译。( HTML 5 版本,方便记忆我们简称为 HTML )
  • 第二部分提供网页的信息,包含网页的信息、名称以及网页的样式等网页相关的消息。( Head 之中包含了各类网页的信息,名称、样式等等 )
  • 第三部分则包含了网页上的主体内容,包括了文章、图片、链接等等许多需要被呈现在用户面前的内容。( Body 之中几乎都是呈现在网页上的内容 )范例:img标签变成图片,h4与h2标签变成标题内容等等

HTML 中的各种标记,提供了浏览器需要知道的格式、信息与内容,而浏览器在接受到信息之后将得到的信息化为我们可以看到的图像内容,也就是平常大家看到的网页外观。所以学习 HTML 的时候大部分的时间都再学习标签怎么使用,只有比较少的时间段学习架构与基础,希望读完文章之后的大家可以更完整更清楚的理解 HTML 到底是什么!

写给程序麻瓜的Javascript介绍,跟工程师沟通零障碍

本文网址: https://www.mamioo.com/seo-beginner/19ov84vm83wn

本站内容均为「码迷SEO」原创整理,未经授权严禁采集转载,违者必究。