2.2 HTML5基础入门

时间:2022-06-05
本文章向大家介绍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网页

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浏览器打开显示:

CSS可以改变字体颜色
  • 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标题,则字体变成红色:

通过js改变字体颜色
  • 结语 学习HTML需要了解HTML、javascript、CSS,但本课程主要重点在于js编程。我们学习基本的js语法、html用到的标签就可以了,CSS在本教程不作为重点涉及。学习过程中我们要知道一个公式: 普通程序员+百度/谷歌=优秀程序员