前端HTML 学习

用户127884822879
61 阅读5分钟

一、HTML 的概述

HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档 的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作. 协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档， 它能独立于各种操作系统平台，自 1990 年以来HTML就一直被用作ＷＷＷ（是World Wide Web的缩写， 也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器 HTTP显示出效果。

所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个 HTML 文档都是一种静 态的网页文件，这个文件里面包含了 HTML 指令代码，这些指令代码并不是一种程序语言，它只是一种排 版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML 的普遍应用就是带来了超文本的技 术----通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件 链接。直接获取相关的主题。如下所示：

通过 HTML 可以表现出丰富多彩的设计风格：

图片调用： < IMG SRC="文件名">

文字格式： < FONT SIZE="+5 " COLOR="#00FFFF">文字< /FONT>

通过 HTML 可以实现页面之间的跳转：

页面跳转：〈A HREF="文件路径/文件名">< /A>

通过 HTML 可以展现多媒体的效果：

声频：< EMBED SRC="音乐地址" AUTOSTART=true>

视频：< EMBED SRC="视频地址" AUTOSTART=true>

从上面我们可以看到HTML超文本文件时需要用到的一些标签。在HTML中每个用来作标签的符号都是 一条命令、它告诉浏览器如何显示文本。这些标签均由"<"和">"符号以及一个字符串组成。而浏览器的功 能是对这些标记进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“<标签名字 属性>”来 表示。 HTML 只是一个纯文本文件。创建一个 HTML 文档，只需要两个工具，一个是 HTML 编辑器，一个WEB 浏览器。HTML 编辑器是用于生成和保存 THML 文档的应用程序。WEB 浏览器是用来打开 WEB 网页文件，提供给我们查看 WEB 资源的客户端程序。

二、HTML 的基本结构：

一个 HTML 文档是由一系列的元素和标签组成.元素名不区分大小写.HTML 用标签来规定元素的属性 和它在文件中的位置， HTML 超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体 中才是要显示的各种文档信息。 下面是一个最基本的html文档的代码:.html

< HTML> ---------------------------------------- 开始标签

< HEAD> --------------------------------------| 头部标签< TITLE> 一个简单的 HTML 示例 < /TITLE>

< /HEAD> --------------------------------------

< BODY> ---------------------------------------- | 文件主体

< CENTER> |

< H1>hello< /H1> |

< BR> |

< HR>

< FONT SIZE= 7 COLOR= red> |

world |

< /FONT> |

< /CENTER> |

< /BODY> ---------------------------------------

< /HTML> --------------------------------------- 结尾标签

< HTML>< /HTML>

  • 在文档的最外层， 文档中的所有文本和 html 标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。事实上，现在常用的 Web 浏览器都可以自动识别 HTML 文档，不要求有 < html>标签，也不对该标签进行任何操作，但是为了使 HTML 文档能够适应不断变化的 Web 浏览器，还是应该养成不省略这对标签的良好习惯。

  • < HEAD>< /HEAD>是HTML文档的头部标签, 在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公共属性。若不需头部信息则可省略此标记，良好的习惯是不省略。

  • < title>和< /title>是嵌套在< HEAD>头部标签中的，标签之间的文本是文档标题，它被显示在浏览器 窗口的标题栏。

  • < BODY> < /BODY>标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。 上面的这几对标签在文档中都是唯一的，HEAD 标签和 BODY 标签是嵌套在 HTML 标签中的。

<!DOCTYPE html> <!-- 声明文档类型 -->
<html> <!-- HTML文档的根元素 -->

<head> <!-- 文档头部，包含了一些元数据 -->
  <meta charset="UTF-8"> <!-- 指定文档使用UTF-8字符集 -->
  <title>Example Webpage</title> <!-- 网页标题 -->
  <style> <!-- 内联样式表 -->
    body {
      background-color: lightblue; /* 设置网页背景颜色 */
    }
    h1 {
      color: navy; /* 设置标题颜色 */
    }
  </style>
</head>

<body> <!-- 网页主体部分 -->
  <h1>This is a heading</h1> <!-- 标题元素 -->
  <p>This is a paragraph.</p> <!-- 段落元素 -->
  <ul> <!-- 无序列表元素 -->
    <li>Item 1</li> <!-- 列表项 -->
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <a href="https://www.baidu.com">This is a link</a> <!-- 链接元素 -->
</body>
</html> <!-- HTML文档的结束标签 -->

  • HTML是前端技术的基础，前端技术主要是围绕着HTML、CSS和JavaScript展开的。HTML是超文本标记语言的缩写，用于定义Web页面的结构和内容。HTML是Web页面的骨架，包括页面的标题、段落、标题、链接、表格、表单等元素。

  • CSS是层叠样式表的缩写，用于定义Web页面的样式和布局。CSS可以定义页面元素的颜色、字体、大小、位置等样式属性，还可以实现布局、动画效果等功能。CSS与HTML紧密结合，可以控制HTML元素的外观和行为，为Web页面提供美观和交互性。

  • JavaScript是一种动态脚本语言，用于实现Web页面的动态效果和交互功能。JavaScript可以控制Web页面的行为，例如在页面上显示时间、弹出窗口、验证表单输入等功能。JavaScript与HTML和CSS一起，构成了Web页面的三大组成部分，是Web开发中必不可少的一部分。

  • 因此，前端技术离不开HTML，HTML是前端技术的基础，HTML、CSS和JavaScript三者紧密结合，共同构成了Web页面的三大组成部分。

avatar
文章
阅读
粉丝