前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2.2 HTML5基础入门

2.2 HTML5基础入门

作者头像
周星星9527
发布2018-08-08 15:45:11
5050
发布2018-08-08 15:45:11
举报
文章被收录于专栏:javascript趣味编程
  • HTML回顾

网页就是HTML?这么理解大致准确。通常网页中包含了文字,图片、视频、小游戏,动画效果等等内容。我们以本章开头的html为例说明:

代码语言:javascript
复制
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号字体,灰色,带阴影:

代码语言:javascript
复制
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来实现:

代码语言:javascript
复制
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在本教程不作为重点涉及。学习过程中我们要知道一个公式: 普通程序员+百度/谷歌=优秀程序员
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-07-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 传输过程数值模拟学习笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档