迈进前端(01) 前端三巨头之HTML(HTML简介及使用)

迈进前端(01) 前端三巨头之HTML(HTML简介及使用)

古之立大事者,不惟有超世之才,亦必有坚忍不拔之志。——苏轼

写在前面

此篇博客介绍HTML的基本信息(包括概念和发展历史),还有HTML的基础语法、基本结构、<!DOCTYPE> 声明、元素和注释等内容。

通过本篇博客可以对 HTML 有个初步的了解,对基础语法有个全面的掌握,为后续学习 HTML 其他内容打下基础。

博客大纲如下

image-20201024215040450

HTML概述

什么是HTML

HTML 是个缩写形式,其全称为 Hyper Text Markup Language,翻译成中文的含义为超文本标记语言。HTML 不是一门编程语言,而是一门标记语言,因为 HTML 是由一系列的元素组成,这些元素可以包含文本、超链接等不同内容。

名词解释

超文本

超文本是一种可以显示在电脑显示器或电子设备上的文本,现时超文本普遍以电子文档的方式存在,其中的文字包含有可以链接到其他字段或者文档的超链接,允许从当前阅读位置直接切换到超链接所指向的文字。
随着 HTML 的发展,到目前为止已经不仅仅是文本内容这么简单,还可以显示图片、链接、音乐,甚至视频等更复杂的内容。

什么是标记语言

标记语言中的标记指的就是 HTML 中的元素(Element),而 HTML 就是由这样的一系列元素组成的,所以被称为标记语言

接下来我们就来展示一下一个元素的结构,如下图所示:

image-20201024204345150

HTML 的元素是给定的。无论是 HTML 元素的数量,还是 HTML 元素的作用都是固定不变的

注意<html> 元素是比较特殊的元素,称为根元素。在一个 HTML 页面中只能存在一个 <html> 元素,即使编写了多个 <html> 元素,运行 HTML 页面时浏览器也会自动忽略。

HTML发展

  • 1980年,蒂姆·博纳斯-李创建了最初仅有少量标记(TAG)
  • 1993年,马克·安德在浏览器中加入<img>标记,从此可以浏览图片

HTML的版本发展

自 1993 年之后 HTML 出现真正意义上的第一版,发展到至今,经历了 5 个大版本的更新和迭代。具体每个版本发布的时间如下:

  • 超文本标记语言(第一版)——1993年6月作为互联网工程工作小组(IETF)工作草案发布(非标准)
  • HTML2.0——1995年11月作为RFC1866发布,在RFC2843于2000年6月发布之后宣布已经过时
  • HTML3.2——1997年1月4日,W3C推荐标准
  • HTML4.0——1997年12月18日,W3C推荐标准
  • HTML4.01(微小改进)——1999年12月24日,W3C推荐标准
  • HTML5第一份正式草案,2008年1月22日,2014年10月29日正式发布

话说 HTML 今年已经27了,也快奔三了啊. 已经不再是一个清秀的小伙了.

第一个HMTL页面

HTML的结构

<!DOCTYPE html>     <!--HTML的声明-->
<html lang="en">              <!--根标签/元素-->
    <head>          <!--HTML的头部-->
    </head>         <!--HTML的头部结束-->
    <body>          <!--HTML的主体-->
    </body>         <!--HTML的主体结束-->
</html>             <!--根标签结束-->

HTML基本结构

  • HTML的文档文件的后缀名为.html.htm,两者没有区别
  • HTML文档也被称为网页
  • HTML文档包含HTML标签和纯文本

<!DOCTYPE> 声明

HTML 页面的第一行一般都是编写 HTML 声明。HTML 声明的作用就是当浏览器运行该 HTML 页面时来告知浏览器当前 HTML 页面的版本,这样浏览器会准确地进行解析并展示其内容。

HTML 声明必须要编写在 HTML 页面的第一行,一般都是在 <html> 元素之前。并且 HTML 声明之前不能存在空行或者空格,不然会导致 HTML 声明失效。

浏览器发展至今,其功能也非常的强大。所以,如果 HTML 页面没有定义 <!DOCTYPE> 声明的话,浏览器也可以正确地解析该 HTML 页面并进行显示。但是,还是建议在编写 HTML 页面时定义 <!DOCTYPE> 声明

HTML 元素

除了 HTML 声明之外,其他内容都是 HTML 元素。首先,需要搞清楚元素(Element)和标签(Tag)之间的区别

名词解释

  • 元素(Element):是用来包含文字、图片或者音视频的内容,一般是由标签和内容组成。
  • 标签(Tag):是元素的组成部分,一般分为开始标签和结束标签。

HTML元素

HTML 元素是 HTML 的重要组成部分之一,如下图所示展示了 HTML 元素的语法结构:

image-20201024210414554

HTML 元素可以分为闭合元素和空元素两种类型:

  • 闭合元素:具有开始标签和结束标签,而且开始标签和结束标签是成对出现的。如下示例代码展示了闭合元素:

    <div>文本内容</div>
    
  • 空元素:只有开始标签,而没有结束标签。如下示例代码展示了空元素:

    <input type="text">
    

注意:在编写 HTML 元素时,如果是闭合元素不要忘记结束标签,如果是空元素不要编写结束标签。

由于 HTML 是大小写不敏感的,所以 HTML 元素的元素名写成大写或小写都是允许的,例如 <div><Div><DIV> 是一样的含义。但是 W3C 组织早在 HTML4 版本时,建议元素名使用小写形式。后来出现的 XHTML 是强制元素名必须使用小写形式。所以,元素名的编写还是尽量使用小写形式,而且现在的开发编辑器的提供功能也都是小写形式的。

HTML 标签

HTML 标签实际上是 HTML 元素的组成部分之一,分为开始标签结束标签

  • 开始标签(Opening Tag):表示某个元素是从这里开始的。
  • 结束标签(Closing Tag):表示某个元素是到这里结束的。

如下图所示展示了标签的结构:

image-20201024212322842

HTML 元素的属性

属性是 HTML 元素的重要组成部分,用来定义某个元素的信息。例如为 <div> 元素定义 ID 属性,就是定义了唯一标识。

属性定义在元素的开始标签中,这样无论是闭合元素还是空元素都可以正常使用属性。属性的语法结构是键值对形式的。如下图所示展示了属性的语法结构:

image-20201024212839637

  • 属性名(attribute name):其数量和作用都是 HTML 给定的。
  • 属性值(attribute value):属性对应的值,建议使用一对双引号进行包裹。

值得注意的是不同的属性具有不同类型的值

同一个元素是允许编写多个不同的属性的,但在同一个元素中不能同时定义多个相同的属性。再有,HTML 元素的属性可以划分为以下 4 种:

  1. 标准(通用)属性:HTML 元素几乎都具有的属性,例如 id、name、style 和 class 属性等。
  2. 专有(私有)属性:HTML 中某些元素特有的属性,例如 <form> 元素的 action 属性等。
  3. 事件属性:用来为 HTML 元素注册 DOM 事件的属性,例如 onclick 属性等。
  4. 自定义属性:第三方框架中为了完成某个特定功能而定义的属性,例如 Vue 框架的 v-if 属性等。

HTML 头部

HTML 头部具体是指 <head> 元素以及该元素所包含的所有元素,其作用是用来定义当前 HTML 页面的基本信息,例如 HTML 页面的标题、编写格式、作者、关键字以及描述等内容。

<head> 元素

<head> 元素是 HTML 页面基本结构中的组成部分,其作用是定义 HTML 页面的基本信息。可定义在 <head> 元素内的元素有如下:

  • <title> 元素:定义 HTML 页面的标题,显示在浏览器的标题或标签页上。如下示例代码所示展示了 <title> 元素的用法:

    <title>is_sweet 的页面</title>
    
  • <base> 元素:定义 HTML 页面中所有相对 URL 的根 URL。如下示例代码所示展示了 <base> 元素的用法:

    <base target="_blank" href="http://www.example.com/">  
    

    **注意:**一个 HTML 页面只能定义一个 <base> 元素。如果一个 HTML 页面定义了多个 <base> 元素的话,则只有第一个 <base> 元素有效。

  • <link> 元素:定义 HTML 页面引入的外部资源,比较常见的是引入外部 CSS 文件或图标文件等。

    如下示例代码所示展示了通过 <link> 元素引入外部 CSS 文件:

    <link href="link-element-example.css" rel="stylesheet">
    

    如下示例代码所示展示了通过 <link> 元素引入外部图标文件:

    <link rel="icon" href="favicon.ico">
    
  • <style> 元素:定义 HTML 页面的 CSS 样式,一般称为内嵌样式表。如下示例代码所示展示了通过 <style> 元素定义内嵌样式表

  • <meta> 元素:定义 HTML 页面的元数据信息,例如编码格式、作者、关键字等。

  • <script> 元素:定义 HTML 页面的可执行的脚本,一般多为 JavaScript 脚本。如下示例代码所示展示了通过 <script> 元素定义 JavaScript 脚本代码:

  • <noscript> 元素:定义当 HTML 页面的脚本代码不被支持或者浏览器关闭了脚本执行时的替代内容。如下示例代码所示展示了 <noscript> 元素的用法:

    <noscript>
    	<a href="http://www.example.com/">这是一个链接</a>
    </noscript>
    
  • <command> 元素:定义 HTML 页面允许用户可以调用的命令。该元素已被废弃!

<meta> 元素

<meta> 元素是用来定义不能由 <base><link><script><style><title> 元素定义的元数据信息。并且 <meta> 元素是个空元素。

<meta> 元素常用的用法如下所示:

  • 为搜索引擎定义关键词:

    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    
  • 为网页定义描述内容:

    <meta name="description" content="Free Web tutorials on HTML and CSS">
    
  • 定义网页作者:

    <meta name="author" content="is_sweet">
    
  • 每30秒中刷新当前页:

    <meta http-equiv="refresh" content="30">
    
  • HTML5 版本定义编码格式:

    <meta charset="UTF-8">
    
  • 定义 HTML 页面的视口:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

以上就是 <meta> 元素的常见用法

HTML 注释

与很多开发语言类似,HTML 语言提供了编写注释的语法内容。在浏览器运行 HTML 页面时,浏览器会自动忽略注释里面的内容,用户是看不到 HTML 页面中有关注释的内容的。

当一段内容被 <!----> 包裹起来时,那么这段内容就是一个注释内容了。如下图所示展示了 HTML 注释的语法结构:

image-20201024214433666

注释可以用来更好地描述某一段 HTML 代码的含义或作用。无论是自己一段时间之后回顾(review)代码,还是别人处理这段代码,注释都是起到了很大作用的。

写在最后

此篇博客介绍了HTML和HTML的基本语法,为以后的学习打下基础,下面创建一个 HTML 页面进行演示。

打开 Visual Studio Code 编辑器新建一个文件,并且保存为 .html.htm 扩展名的文件。然后,在新建的 HTML 文件中输入 html:5,这时 Visual Studio Code 编辑器会弹出提示框,如下图所示。

image-20201024220056554

按下回车以后将会出现一个完整的 HTML 结构,如下图所示

image-20201024220925283

这下不用自己编写 HTML 结构,剩下了一大把时间。

  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:点我我会动 设计师:我叫白小胖 返回首页
评论 1

打赏作者

一碗周.

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值