2.2 HTML5基础入门
- HTML回顾
网页就是HTML？这么理解大致准确。通常网页中包含了文字，图片、视频、小游戏，动画效果等等内容。我们以本章开头的html为例说明：
1. <html>
2. <head>
3. <meta charset="utf-8">
4. <title>这是标题</title>
5. </head>
6. <body>
7. <h1>我的第一个标题</h1>
8. <p>我的第一个段落Hello World。</p>
9. </body>
10. </html>
用文本编辑器编写HTML，然后保存为hello.html，用EDGE浏览器打开显示：
HTML文档就是一系列的tag组成，最外层的tag是<html>。规范的HTML也包含<head>...</head>和<body>...</body>，由于HTML是富文档模型，所以，还有一系列的Tag用来表示链接、图片、表格、表单等等。
- CSS简介
CSS是Cascading Style Sheets的简称，CSS用来控制HTML里的所有元素如何展现。例如，给标题元素<h1>加一个样式，变成36号字体，灰色，带阴影：
1. <html>
2. <head>
3. <meta charset="utf-8">
4. <title>这是标题</title>
5. <style>
6. h1{
7. color:#00FF00;
8. font-size:36px;
9. text-shadow:3px 3px 3px #CCCCCC;
10. }
11. </style>
12. </head>
13. <body>
14. <h1>我的第一个标题</h1>
15. <p>我的第一个段落Hello World。</p>
16. </body>
17. </html>
用EDGE浏览器打开显示：
- JavaScript（js）简介
js是为了让HTML具有交互性而作为脚本语言添加的，js既可以内嵌到HTML网页中，也可以从外部服务器链接到HTML中。如果我们希望当用户点击标题时把标题变成红色，就可以通过js来实现：
1. <html>
2. <head>
3. <meta charset="utf-8">
4. <title>这是标题</title>
5. <script>
6. functionchangeColor() {
7. document.getElementsByTagName('h1')[0].style.color= '#ff0000';
8. }
9. </script>
10. </head>
11. <body>
12. <h1 onclick="changeColor()">我的第一个标题</h1>
13. <p>我的第一个段落Hello World。</p>
14. </body>
15. </html>
用EDGE浏览器该HTML文档，并点击h1标题，则字体变成红色：
- 结语 学习HTML需要了解HTML、javascript、CSS，但本课程主要重点在于js编程。我们学习基本的js语法、html用到的标签就可以了，CSS在本教程不作为重点涉及。学习过程中我们要知道一个公式： 普通程序员+百度/谷歌=优秀程序员
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
