HTML简介

308次阅读

共计 1426 个字符，预计需要花费 4 分钟才能阅读完成。

网页就是 HTML？这么理解大概没错。因为网页中不但包含文字，还有图片、视频、HTML5 小游戏，有复杂的排版、动画效果，所以，HTML 定义了一套语法规则，来告诉浏览器如何把一个丰富多彩的页面显示出来。

HTML 长什么样？上次我们看了新浪首页的 HTML 源码，如果仔细数数，竟然有 6000 多行！

所以，学 HTML，就不要指望从新浪入手了。我们来看看最简单的 HTML 长什么样：

<html>
<head>
  <title>Hello</title>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

可以用文本编辑器编写 HTML，然后保存为hello.html，双击或者把文件拖到浏览器中，就可以看到效果：

HTML 简介

HTML 文档就是一系列的 Tag 组成，最外层的 Tag 是 <html>。规范的 HTML 也包含<head>...</head> 和<body>...</body>（注意不要和 HTTP 的 Header、Body 搞混了），由于 HTML 是富文档模型，所以，还有一系列的 Tag 用来表示链接、图片、表格、表单等等。

CSS 是 Cascading Style Sheets（层叠样式表）的简称，CSS 用来控制 HTML 里的所有元素如何展现，比如，给标题元素 <h1> 加一个样式，变成 48 号字体，灰色，带阴影：

<html>
<head>
  <title>Hello</title>
  <style>
    h1 {color: #333333;
      font-size: 48px;
      text-shadow: 3px 3px 3px #666666;
    }
  </style>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

效果如下：

HTML 简介

JavaScript 虽然名称有个 Java，但它和 Java 真的一点关系没有。JavaScript 是为了让 HTML 具有交互性而作为脚本语言添加的，JavaScript 既可以内嵌到 HTML 中，也可以从外部链接到 HTML 中。如果我们希望当用户点击标题时把标题变成红色，就必须通过 JavaScript 来实现：

<html>
<head>
  <title>Hello</title>
  <style>
    h1 {color: #333333;
      font-size: 48px;
      text-shadow: 3px 3px 3px #666666;
    }
  </style>
  <script>
    function change() {document.getElementsByTagName('h1')[0].style.color = '#ff0000';
    }
  </script>
</head>
<body>
  <h1 onclick="change()">Hello, world!</h1>
</body>
</html>