第1章 认识HTML5

CodeGuru
53 阅读4分钟

html.png 万丈高楼平地起，打好根基不费力，本节是学习前端的第1课，也是掌握html+css+js的入门课。

本章学习目标

  • 了解什么是前端开发
  • 了解html5的基本结构
  • 准备前端开发环境
  • 开发第一个html5l界面

1.1 什么是前端开发

前端开发主要负责创建网站或小程序等应用的用户体验（UX）和用户界面（UI）。前端开发的责任是创建视觉上吸引人的，交互式的和有吸引力的网页设计，用户可以轻松地进行交互。

1.1.1 前端开发能做什么

商城或网站

网站.jpg 支付宝、微信、抖音等app

小程序.jpg

1.1.2前端开发的学习路线（基础篇）

  1. HTML：学习HTML标签、语义化、表单、表格等基础知识，掌握如何搭建网页的基本结构。
  2. CSS：学习选择器、盒模型、浮动、定位、Flex布局、Grid布局等，掌握如何美化网页。
  3. JavaScript：基础语法：变量、数据类型、函数、循环、条件判断等。

1.2 html5的基本结构

1.2.1 html简介

HTML是超文本标记语言。HTML5是超文本标记语言(HTML)的第五版。

超文本： 文本、图片、声音、视频、表格、链接等等。

标记： 由许许多多的标签组成。

1.2.2 html的发展

HTML，作为网页结构的基础，其发展历史可追溯至上世纪90年代初。随着互联网的迅猛发展，HTML经历了多次革新与演进，从早期的HTML 1.0到如今的HTML5，每一次升级都带来了新的特性和功能，使得网页开发变得更加高效和便捷。HTML的优势在于其简单直观的标签语法和强大的扩展性，它能够轻松定义和呈现网页中的各种超文本元素，从而实现信息的有效传递和用户的流畅体验。无论是文字、图片还是音频、视频，HTML都能通过一系列精心设计的标签来完美呈现，为开发者提供了无尽的创作空间。

html5.png

1.2.3 html网页的基本标签

在HTML文档中，除了和等基础标签外，还有许多其他重要的标签。这些标签共同构成了网页的基本框架和内容。在下节我们将深入探讨HTML网页的基本标签及其作用。

1.3 准备前端开发环境

目前各主流厂商的最新版浏览器都对html5提供了很好的支持，要顺利执行一个html5页面，需要完成以下两方面的工作。

  • 搭建浏览器环境
  • 选择合适的开发工具

1.3.1 搭建浏览器环境

目前，各厂商的浏览器，如Mozilla的Firefox与Google的Chrome浏览器等都可以很好地支持html5的各种新特征。 本系列课程所有的应用实例，所执行的浏览器为Chrome

下载Chrome浏览器，打开chrome官网www.google.cn/intl/zh-CN_…

chrome.png

1.3.2 选择合适的开发工具

在企业中我们习惯于使用VsCode软件来进行Web开发。VSCode，全称为Visual Studio Code，是一款由微软开发的免费、开源的轻量级代码编辑器，它支持多种编程语言和平台，并提供丰富的扩展功能，让开发者能够更高效地编写代码。

1.3.3 vscode的下载与安装

首先去VScode官网 code.visualstudio.com/下载vscode

vscode.png

1.4 开发第一个html界面

1.4.1 功能介绍

使用html5,编写一个html页面，在浏览器页面中输出"Helle,World"

1.4.2 实现代码

在vscode中新建html页面1-1-hello.html 代码清单1-1 1-1-hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <h1>
        Hello, World
    </h1>
</body>
</html>

1.4.3 页面效果

该页面在Chrome浏览器中执行的效果如下图

hello.png

1.4.4 源码分析

通过短短几行代码，就实现了一个页面的开发，这说明了html5语法简洁，第一行代码如下：

<!DOCTYPE html>

DOCTYPE告诉浏览器需要一个doctype来触发标准模式，接下来定义 HTML 文档的根，并选择语言为"en"。

head标签包含文档的元数据/信息

<meta charset="UTF-8">文档的字符编码
<meta name="viewport" content="width=device-width, initial-scale=1.0">

meta 标签是 HTML 中用于提供有关 HTML 文档的元数据（metadata）的元素。name="viewport" 指定了元数据的名称，这里是 "viewport"。content 属性包含了视口的配置信息，这里设置为 width=device-width, initial-scale=1.0，这里主要是便于移动端适配。 在主体内容中编写要显示的内容，如下

<body>    
    <h1>
        Hello World
    </h1>
</body>
avatar
文章
阅读
粉丝