当前位置: 首页 > news >正文

白骑士的HTML教学基础篇 1.1 HTML简介

        在现代互联网的世界里,HTML(HyperText Markup Language)是所有网页的基础语言。无论是简约的个人博客还是复杂的商业网站,HTML都扮演着不可或缺的角色。掌握HTML是学习前端开发的第一步,这不仅能够帮助你构建静态网页,还能为后续学习CSS和JavaScript等前端技术打下坚实的基础。

什么是HTML?

        HTML,全称HyperText Markup Language,即超文本标记语言。它是一种用于创建网页和Web应用的标准标记语言。HTML使用一系列标签(tags)来描述网页的结构和内容,这些标签告诉浏览器如何显示网页元素。每个标签通常成对出现,包含一个开始标签和一个结束标签。例如:

<p>这是一个段落。</p>

        在上述例子中,‘<p>‘是段落标签,它包围的内容将被浏览器显示为一个段落。

HTML的历史与发展

        HTML最早由Tim Berners-Lee于1989年提出,他当时在欧洲核子研究中心(CERN)工作。最初的HTML版本相对简单,仅包含少量的标签,主要用于描述文本、链接和图像。随着互联网的快速发展,HTML不断演进,增加了许多新功能和新标签,以适应日益复杂的网页需求。

  • HTML 1.0(1991年):首个公开版本,功能非常基础。
  • HTML 2.0(1995年):引入了一些新的标签和属性,标准化了之前的非正式扩展。
  • HTML 3.2(1997年):加入了对表格、脚本和样式表的支持。
  • HTML 4.01(1999年):引入了更多的结构性元素和属性,强调了网页的语义化。
  • XHTML(2000年):作为HTML的严格版本,要求更为严格的标签使用规则。
  • HTML5(2014年):当前的主要版本,增加了许多新元素和API,增强了多媒体支持和复杂应用开发能力。

设置HTML开发环境

        在开始编写HTML代码之前,需要设置一个合适的开发环境。虽然可以使用任何文本编辑器来编写HTML代码,但使用专业的代码编辑器能大大提升编码效率和舒适度。

选择代码编辑器

        一些常见的代码编辑器包括:

  • Visual Studio Code:微软开发的一款免费开源的代码编辑器,具有丰富的插件支持。
  • Sublime Text:轻量级、高性能的代码编辑器,支持多种编程语言。
  • Atom:由GitHub开发的一款开源编辑器,具有强大的自定义功能。

安装代码编辑器

        以Visual Studio Code(VS Code)为例:

  1. 访问VS Code官网。
  2. 下载适用于你操作系统的安装包(Windows、macOS或Linux)。
  3. 安装并启动VS Code。

创建HTML文件

        在VS Code中,创建一个新的HTML文件非常简单:

  1. 打开VS Code,点击左侧的文件图标,选择“新建文件”。
  2. 在文件中输入以下基本HTML代码:
    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个网页</title>
    </head>
    <body><h1>欢迎来到我的第一个网页</h1><p>这是一个段落。</p>
    </body>
    </html>

  3. 保存文件,文件名为‘index.html‘。

预览HTML文件

        保存文件后,可以在浏览器中打开‘index.html‘文件来预览效果。大多数代码编辑器都支持直接在编辑器中预览HTML文件,在VS Code中,可以安装Live Server扩展,实现实时预览。

总结

        通过本篇博客,你了解了HTML的基本概念、发展历史以及如何设置HTML开发环境。HTML是网页开发的基础,掌握HTML能够为你后续学习前端技术打下坚实的基础。在下一篇文章中,我们将深入探讨HTML的基本语法和常用标签,帮助你更好地理解和应用HTML。欢迎继续关注我们的HTML系列教程,开启你的网页开发之旅!

http://www.lryc.cn/news/425736.html

相关文章:

  • c语言基础知识学习
  • Qt/QML学习-Dial
  • 达梦数据库系列—48.DMHS实现Mysql到DM8的同步
  • PostgreSQL的启动过程
  • ActiveMQ、RabbitMQ、Kafka、RocketMQ的区别简介
  • 7.1 多态案例
  • 革新测试管理:集远程、协同、自动化于一身的统一测试管理平台
  • HAProxy的详解
  • 网络安全实训第一天(dami靶场搭建,XSS、CSRF、模板、任意文件删除添加、框架、密码爆破漏洞)
  • 4.1 SQL的起源与发展
  • android中实现禁掉有线网络
  • docker-compose安装MongoDB 7.0.12
  • Ubuntu下NFS和SSH服务
  • 游戏管理系统
  • 坐牢第二十七天(聊天室)
  • C++自学笔记33(数据类型总结与变量)
  • 游戏引擎phaser.js3的使用之玩家和静态物理组碰撞
  • springboot整合mybatis以及mybatis-plus 开发
  • 大语言模型微调框架Unsloth:简化模型微调流程,提升模型性能
  • IPD-华为研发之道分析与理解
  • 时空序列顶会文章
  • C语言-使用指针数组作为函数参数,实现对10个字符串进行排序
  • ???ABC366:F - Maximum Composition(dp,无序:贪心排序)
  • unity项目打包为webgl后应用于vue项目中(iframe模式)的数据交互
  • 【数据结构与算法 | 图篇】Bellman-Ford算法(单源最短路径算法)
  • Python | Leetcode Python题解之第336题回文对
  • C语言家教记录(六)
  • C++竞赛初阶L1-11-第五单元-for循环(25~26课)519: T454430 人口增长问题
  • demo测试
  • TinTinLand Web3 + DePIN 共学月|深入探索 DePIN 项目,全景分析去中心化网络未来