美文网首页程序员iOS开发Web前端之路
HTML开发前准备(1)-- 浅析web基本结构

HTML开发前准备(1)-- 浅析web基本结构

作者: 茶哥儿 | 来源:发表于2016-03-15 15:21 被阅读210次

    网络三剑客:HTML + CSS + JavaScript

    HTML:用于描述网页内容与结构
    CSS:用于网页的布局与美化
    JavaScript:用于控制网页的行为


    大部分web开发者都是按着HTML->CSS->JS(JavaScript简写,后面都是简写)的顺序来的,曾经的小茶哥儿也是这么来的,但是真的当我开始写些东西的时候发现这么做是不合理的,这里写的均是茶哥儿的一家之言,如果你还喜欢,就请继续关注茶哥儿吧。

    ok,正式开始我们对于HTML5的学习,HTML5是HTML的第五次重大修改后的版本,但是如今还算实在过渡期,所以我们不能抛弃HTML4.01的内容直接开始HTML5,这样是不合理的。我们先来看一段代码:

    <!DOCTYPE html>
    <html lang="en">
        <head>
        </head>
        <body>
        </body>
    </html>
    

    标签的概念不用茶哥儿多解释了吧,我们看到的这一段代码就是所有的web都有的基本结构。别不相信哈,茶哥儿用实践来证明:

    简书.png

    在这里就以我们的简书网为例了,操作很简单,大家可以使用google chrome(这也是web开发者最喜欢用的浏览器与调试工具),在菜单栏中“视图--开发者--开发者工具”,在新弹出来的窗口就可以查看网页标签元素了。

    我们可以大致的将上述代码分为4段:

    • <!DOCTYPE html>
      这个写法是最新的HTML5版本的写法,兼容之前所有的版本,之前的版本写法过于复杂,不建议去记,只需要记住这个就可以了,他的意义是指示web浏览器使用HTML5版本来编写指令。

    • <html></html>
      <html>是我们文档的开始点,</html>是我们文档的结束点。

    • <head></head>
      这里使我们文档的头部内容,用于引入脚本、样式表提供元素信息等。

    • <body></body>
      这里是文档的主体内容,包含文本、图片、链接、视频和音频等。

    以上便是一个Web所具备的的最简单元素,接下来我们会了解一些web开发的工具,所谓工欲善其事必先利其器,好的工具会让我们事半功倍,不要走开……

    创造即永恒,喝茶去 ……

    相关文章

      网友评论

        本文标题:HTML开发前准备(1)-- 浅析web基本结构

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