网页设计与制作全能一本通

HTML5 + CSS3 + JavaScript 微课版

配套课件

2024 年 8 月

第一章 HTML5 入门

1.1 HTML概述

HTML入门

HTML是应用最广泛的互联网技术之一

HTML是HyperText Markup Language的缩写，也就是超文本标记语言

超文本(HyperText)，指HTML本身是文本，但能表现图片，音视频等多媒体内容

标记(Markup)则描述了HTML的特点，即由标记或者说标签组成


HTML5是HTML的最新版本


							
							新春快乐！！！

图片中显示的是这段代码在浏览器中的显示效果  点击查看代码

img标签用于显示图片

font标签用于设定文字的字体颜色、大小等属性

HTML的历史

HTML由英国计算机和物理学家蒂莫西·约翰·伯纳斯-李发明

万维网指World Wide Web，也简称为Web，是通过互联网发布和获取信息的系统，这个系统所使用的文档格式就是HTML。我们日常使用的网页，如百度、淘宝、京东的网页还有微信中的公众号文章都是万维网的网页。

1990年第一个万维网服务器和客户端诞生

1995年HTML2标准发布，是后续HTML标准的基础。

HTML5是HTML的最新版本，5.0版本于2014年发布为推荐版本。但在这之前关于HTML新版本的讨论已经进行了很久。

HTML5与CSS3

CSS是Cascading Style Sheets的缩写，即层叠样式表。

CSS专门用于定义文档的样式。常与HTML一起使用。现在最广泛使用的CSS标准是CSS3。

HTML5文档中即可以直接使用CSS3，也可以在单独的文件中定义CSS3样式规则。

CSS3用于对文档格式的精细控制。也可以实现一些动画效果。

本书第五章将详细介绍CSS3。


								
一些文字

上面的代码可以把文字旋转45度

HTML5与JavaScript

JavaScript是被广泛使用在网页中的计算机程序设计语言。

与标记语言不同，程序设计语言通常用于描述和规定操作或流程。

JavaScript用于编写运行在浏览器中的程序，可以实现各种动态效果，使HTML5网页成为了真正的“应用程序”。

HTML5标准和文档

万维网联盟（World Wide Web Consortium，也简称为W3C）是致力于发展WEB技术潜力的国际组织。

W3C组织制定标准草案，最终通过一系列评审过程后，标准将发表为W3C推荐标准（W3C Recommendation）。

在W3C的官方网站https://www.w3.org/可以找到包括HTML5标准在内的多种WEB标准文档。

除了W3C官方文档外，Mozilla提供的HTML5技术相关文档也值得参考。

Mozilla的MDN Web Docs不仅提供了中文等多种语言的文档，还有很多扩展内容并支持站内搜索等功能。

1.2 搭建HTML5开发环境

WEB 浏览器

WEB浏览器是HTML5的运行环境，即浏览器可以打开和展示HTML5文档

常用的浏览器有：

  • Chrome
  • Edge
  • FireFox
  • Safari

操作系统一般默认安装了某种浏览器。较新版本的Windows操作系统默认安装Edge浏览器

Android系统常常默认安装Chrome浏览器

苹果公司的设备上常默认安装Safari浏览器

开发环境

推荐使用 Visual Studio Code

完全免费的，开放源代码的，跨平台的代码编辑器

https://code.visualstudio.com/

1.3 第一个HTML5页面

创建一个HTML5文件

HTML文件是纯文本文件，常用的文件扩展名是html或者htm

可以创建一个空的文本文件，并把文件扩展名修改为html

HTML文件通常以文档类型声明开始。HTML5文件的类型声明如下：


							<!DOCTYPE html>

创建一个HTML5文件

<html>标签通常是最外层的标签，用于包含HTML文档的所有内容


							<!DOCTYPE html>
							<html> 
							</html>

创建一个HTML5文件

继续完成页面内容，点击查看代码


							<!DOCTYPE html>
							<html>
								<head>
									
									文档标题 
								</head>
								<body>
									
									
1号标题

									
文本段落

									
二号标题

									
文本段落

								</body>
							</html>

1.4 通过网络访问HTLM5页面

浏览器如何处理请求

在万维网上，分为服务器和和客户端。我们自己的手机或者电脑是客户端。

当我们使用手机或电脑里的浏览器访问网站时，会通过网络，连接到网站所在服务器，下载HTML文档

我们可以在自己的电脑上安装并启动HTTP服务器

这样我们可以在自己电脑上模拟这整个过程。

1.5 小结

本章介绍了HTML5以及HTML的历史。介绍了HTTP协议以及浏览器的基本概念。介绍了万维网的工作方法。 HTML5是目前流行的前端技术，也是使用最广泛的构建用户界面的技术之一。除了网站外，很多客户端应用程序、小程序，都是在HTML5的技术的基础上构建的。 学习本章后要了解HTML和HTML5的关系。HTML与CSS及JavaScript的关系。浏览器和万维网的工作方法。 要掌握查阅在线HTML5文档的方法。要掌握安装和使用至少一种HTML集成开发环境或者编辑器的安装和基本使用的方法。要掌握至少一种启动HTTP服务器的方法。

1.6 课堂练习—使用HTML5创建自己的简历

1.6.1 创建文档

新建空的HTML文档，并写入下面内容：


							<html>
							<head>
								<meta charset="utf8" />
								<title>我的简历</title>
							</head>
							<body>
							</body>
							</html>

保存后，打开可得到一个标题为“我的简历”的空白页面

1.6.2 章节标题

继续编辑文档加入章节标题


							<html>
							<head>
								<meta charset="utf8" />
								<title>我的简历</title>
							</head>
							<body>    
								<h1>姓名</h1>
								<h2>教育经历</h2>
								<h2>兴趣爱好</h2>
								<h2>联系方式</h2>
							</body>
							</html>

<h1>和<h2>是1级标题和2级标题

1.6.3 段落

继续编辑文档加入段落，<p>代表文字段落


							<html>
							<head>
								<meta charset="utf8" />
								<title>我的简历</title>
							</head>
							<body>    
								<h1>姓名</h1>
								<h2>教育经历</h2>
								<p>2018年9月 - 2021年6月 北京邮电大学</p>
								<p>2013年9月 - 2017年6月 青岛大学</p>
								<h2>兴趣爱好</h2>
								<p>编程，看书，听音乐</p>
								<h2>联系方式</h2>
								<p>网站地址：es2q.com</p>
								<p>邮箱地址：sxw@es2q.com</p>
							</body>
							</html>

1.6.4 排版

可通过“center”标签使姓名居中显示。可使用“hr”元素在每两个标题之间显示水平分隔线。完成后的代码如下所示。


							<html>
							<head>
								<meta charset="utf8" />
								<title>我的简历</title>
							</head>
							<body>    
								<center><h1>姓名</h1></center>
								<h2>教育经历</h2>
								<p>2018年9月 - 2021年6月 北京邮电大学</p>
								<p>2013年9月 - 2017年6月 青岛大学</p>
								<hr>
								<h2>兴趣爱好</h2>
								<p>编程，看书，听音乐</p>
								<hr>
								<h2>联系方式</h2>
								<p>网站地址：es2q.com</p>
								<p>邮箱地址：sxw@es2q.com</p>
							</body>
							</html>

最终效果展示

谢谢！