美文网首页
【Python入门】46.Web开发之 HTML简介

【Python入门】46.Web开发之 HTML简介

作者: 三贝_ | 来源:发表于2018-09-21 18:34 被阅读9次

    摘要:HTML、CSS、JavaScript的简单介绍。


    *写在前面:为了更好的学习python,博主记录下自己的学习路程。本学习笔记基于廖雪峰的Python教程,如有侵权,请告知删除。欢迎与博主一起学习Pythonヽ( ̄▽ ̄)ノ *


    目录

    Web开发
    HTML简介
    CSS简介
    JavaScript简介
    小结

    Web开发

    HTML简介

    HTML(HyperText Markup Language),即超文本标记语言,是一种用于创建网页的标准标记语言。

    HTML定义了一套语法规则,使得网页能够呈现出图片、视频、动画效果等丰富的界面。

    下面我们编写一个最简单的HTML:

    <html>
    <head>
      <title>第一个HTML</title>
    </head>
    <body>
      <h1>Hello, world!</h1>
    </body>
    </html>
    

    <>括起来的关键字我们称之为HTML标签(HTML tag),比如<html>

    tag通常是成对出现的,比如<html></html>>

    在tag对中,第一个tag为开始标签,第二个tag为结束标签。在两个标签之间输入内容。

    下面解释一下上例中几个标签的含义:

    <html>是HTML页面的根元素;
    <head>表示页面所含有的头部信息;
    <title>表示页面的标题;
    <body>表示页面的正文;
    <h1>定义一个大标题

    我们可以直接在文本文档中编写HTML,然后保存为第一个HTML.html,就可以直接用浏览器打开了。

    第一个HTML.png

    可以看到,网页的标题就是标签<title>包含的内容,而正文就是标签<body>包含的内容。

    CSS简介

    CSS(Cascading Style Sheets)是层叠样式表的意思。CSS的作用是控制HTML元素的展现形式,比如我们给标题<h1>加一个样式,变成50号字体,蓝色,带阴影:

    <html>
    <head>
      <title>第一个HTML</title>
      <style>
        h1 {
          color: #0000FF;
          font-size: 50px;
          text-shadow: 3px 3px 3px #666666;
        }
      </style>
    </head>
    <body>
      <h1>Hello, world!</h1>
    </body>
    </html>
    

    效果显示:


    CSS_HTML.png

    JavaScript简介

    JavaScript 是一种轻量级的编程语言,可以内嵌或外部链接到HTML中,使得HTML具有交互性。比如我们希望用户点击标题后,标题的颜色变为红色,就必须通过JavaScript来实现:

    <html>
    <head>
      <title>第一个HTML</title>
      <style>
        h1 {
          color: #0000FF;
          font-size: 50px;
          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>
    

    点击标题后效果如下:


    JavaScript_HTML.png

    小结

    这里对HTML、CSS、JavaScript做了简单的介绍。

    要你学Python是为了走Web开发方向的话,精通HTML、CSS和JavaScript是必须的。

    这里推荐一个关于Web开发的在线学习网站:W3school


    以上就是本节的全部内容,感谢你的阅读。

    下一节内容:Web开发之 WSGI接口

    有任何问题与想法,欢迎评论与吐槽。

    和博主一起学习Python吧( ̄▽ ̄)~*

    相关文章

      网友评论

          本文标题:【Python入门】46.Web开发之 HTML简介

          本文链接:https://www.haomeiwen.com/subject/gjmanftx.html