HTML5教程 - 1 前端简介

更好的阅读体验：https://www.foooor.com

HTML5教程 - 1 前端简介

现在我们来学习HTML5的课程，HTML是做什么的呢，我还是哔哔两句吧。

1.1 软件架构分类

我们平时开发的软件主要有两种： C/S架构 和 B/S架构

1 什么是C/S架构

C/S架构全称为Client/Server，也就是客户端/服务器架构。

用户需要下载客户端的软件，例如QQ，微信，还有手机里的各种App 等软件，都需要下载软件进行安装，我们下载安装的就是客户端。通过使用客户端和服务器进行连接交互。

2 什么是B/S架构

B/S架构全称为Browser/Server，也就是浏览器/服务器架构。

Browser指的就是浏览器，用户打开浏览器就能访问网页，不需要下载客户端，例如访问京东、淘宝等网站。

通过浏览器请求服务器，服务器返回网页的内容。

其实B/S架构也是基于C/S架构的，因为浏览器也是一个客户端嘛。

3 B/S 架构的优点

相较于C/S架构系统，B/S 架构的网页有如下一些优点：

不需要安装客户端，打开浏览器就能访问；
无需更新，网页如果有更新，我们重新访问网页就是最新的版本；
跨平台，在任何操作系统，使用浏览器都可以访问。

HTML 就是用来开发网页的，那么 HTML 起到什么作用呢？且听我继续哔哔。

1.2 浏览器和网页

1 浏览器的作用

通过浏览器我们只需要一个网址便可以访问任何的网站，但是我们从服务器获取到的内容并不是我们看到的网页的样子。

例如，我们通过 www.jd.com 访问京东网站，看到的如下的内容：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

但其实服务器给我们返回的内容并不是看到的样子，我们在网页上，通过 右键 --> 查看网页源代码，可以看到网页原本的样子（内容太多了，这里简单粘贴了一点）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8" version='1'/>
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
    <meta name="description"
          content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
    <script type="text/javascript">
        window.point = {}
        window.point.start = new Date().getTime()
    </script>
    <link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
</head>

<body class="index">
<div class="mod_container">
    <!--无障碍占位-->
    <div id="J_accessibility"></div>
    <!--顶通占位 -->
    <div id="J_promotional-top">
    </div>
    <div id="shortcut">
        <div class="w">
            <ul class="fl" clstag="h|keycount|head|topbar_01">
                <li class="dropdown" id="ttbar-mycity"></li>
            </ul>

            <ul class="fr">
                <li class="fore1 dropdown" id="ttbar-login" clstag="h|keycount|head|topbar_02">
					<a href="//passport.jd.com/uc/login?ReturnUrl=https://www.jd.com/" class="link-login">你好，请登录</a>&nbsp;&nbsp;<a
					href="//reg.jd.com/reg/person?ReturnUrl=https://www.jd.com/" class="link-regist style-red">免费注册</a>
                </li>
                <li class="spacer"></li>
                <li class="fore2" clstag="h|keycount|head|topbar_03">
                    <div class="dt"><a target="_blank" href="//order.jd.com/center/list.action">我的订单</a></div>
                </li>
                <li class="spacer"></li>
                <li class="fore3 dropdown" id="ttbar-myjd" clstag="h|keycount|head|topbar_04">
                    <div class="dt cw-icon"><a target="_blank" href="//home.jd.com/">我的京东</a><i class="iconfont">&#xe610;</i><i
                            class="ci-right"><s>◇</s></i></div>
                    <div class="dd dropdown-layer"></div>
                </li>
            </ul>
        </div>
    </div>

    ...内容太多了，意思意思

</body>

</html>

服务器返回的上面的内容，是怎么变成看到的网页的样子呢？

这就是浏览器的作用，浏览器将服务器返回的源代码渲染成看到的网页。

2 浏览器的问题

目前市面上存在有很多不同的浏览器，例如IE、Chrome、Firefox、Safari、Opera一大堆。

在万维网的初期，网页编写并没有标准。于是同一个网页被不同的浏览器渲可能染成不同的效果，就像下面这样：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

那怎么办呢？

那就制定标准呗。

3 W3C 的建立

伯纳斯·李（万维网和第一个网页的发明人） 1994 年建立 万维网联盟（W3C）

W3C 的出现为了 制订网页开发的标准 ，以使同一个网页在不同的浏览器中有相同的效果。

所以，我们需要制订我们编写的网页都需要遵循 W3C 的规范！

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4 网页的结构思想

根据 W3C 标准，一个网页主要由三部分组成：结构、表现还有行为。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

结构

结构（骨架）：HTML 用于描述页面的结构

表现

表现（皮肤）：CSS 用于控制页面中元素的样式

行为

行为（交互）：JavaScript 用于响应用户操作

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

所以网页中主要使用的语言是下面三个：

HTML ：负责网页中的结构，
CSS ：主要负责网页中的元素的样式，
JavaScript ：用于响应用户操作。