美文网首页我爱编程让前端飞
Html+Css基础概要(01)——Html介绍

Html+Css基础概要(01)——Html介绍

作者: 年少有van | 来源:发表于2017-06-06 01:48 被阅读0次

    如果要单讲Html的话,篇幅其实会很短,因为这是个很简单的东西(当然,只是看起来),那么这篇文章我们也可以说一些跟Html相关的东西。所以这篇文章主要讲以下几个部分:

    • Html简介
    • Html的左膀右臂——Css和JavaScript
    • 强大的Html编辑器——Sublime Text
    • Html的标签

    Html简介

    Html(Hyper Text Markup Language)最直接的定义就是超文本标记语言,我们可以看一下W3school上对Html的权威解释

    W3school对Html的解释

    为什么要叫做超文本标记语言呢?超文本即不止是文本的意思,但其实Html文档本身是只包含Html标签和纯文本的,那么是如何不止于文本的呢?

    这归功于Html文档中的标签,不同含义不同功能的标签使由纯文本书写的Html文档具有包含图片、链接、音乐和程序等非文字元素的功能。

    既然说到了标签,我们就来解释一下超文本标记语言这个名词的另一半——标记语言,何谓标记语言呢?这里我就不说它的官方解释了,就说说自己的理解:标记语言是和编程语言相区别的一个概念,我们知道像C语言这样的编程语言,有着逻辑、数据结构、算法这样的概念,需要运行来完成特定的功能;

    而Html这样的标记语言不同,他们更像纯文本,但是有着比纯文本更多的特性,我们不需要运行它们,它们也没有执行的逻辑和算法可言,它们只是以特殊的方式书写,我们只需要以相应的方式解读,便能得到由其绘制的特别画卷。

    这样一来,我也就可以更好地解释网页的制作了,网页其实就是由超文本标记语言绘制的一幅特殊的画卷,不同的标签定义了不同功能的各个部分,再结合Css和JavaScript等更多的Web前端技术,为用户提供一个实用性和艺术感并存的客户端应用。

    那么总结一下:

    Html的书写形式就是标签+纯文本,Html的使命就是要书写出一个网页,要实现网页中不同功能的部件则需要不同功能的Html标签

    另外值得一提的是,Html的解析工具就是我们的浏览器,也就是说我们用浏览器打开Html文件就可以看到我们写的网页了。

    萌新们可能不知道的是,我们平时上网访问一些网页的原理就是我们的浏览器向指定的服务器发送请求,服务器就把相应的Html文件及附属的一些静态文件返回给我们,浏览器再解析返回的Html等文件,就把网页展现给我们了。

    Css和JavaScript

    学习Web前端入门,首要的就是认识前端三大件:Html、Css和JavaScript。

    在前一个部分中已经提到了Css和JavaScript,它们不是本文的重点,我只介绍一下它们在网页中的作用:

    • Css:为网页中Html标签所定义的部件规定样式。
    • JavaScript:实现网页中的动画、特效、交互和用户操作逻辑等。

    前面的标题中我为什么要说Css和JavaScript是Html的左膀右臂呢,因为照我的理解,Html绘制出了网页的主体,还需要Css对网页中的布局和细节精雕细琢,也需要JavaScript来让网页更加生动以及具备和用户交互的强大功能。

    所以它俩对Html来说是缺一不可的。

    那么我们如何在网页中使用Css和JavaScript呢?对于这两者的使用,大体来说都有两种方法:

    一种是直接在Html文档中书写,Css的代码写在<style>标签之中,JavaScript写在<script>标签之中;

    第二种方法就是通过引用的方法引入.css文件和.js文件中的代码来分别使用Css和JavaScript。具体的标签书写方法和引用方法这里就不讨论了。

    Sublime Text

    前文已经提到了Html是一种标记语言,这就意味着它不需要编译,用浏览器打开它的时候才会解析它。这样子,我们就可以选择几乎任何一款文本编辑器来编写它,甚至用Windows自带的记事本都可以。

    但是,毕竟是写代码,代码高亮使我们清晰明了地查看我们写出的代码,自动补全可以帮助我们更快地书写代码。

    所以我在这里推荐一下一款很适合前端开发的文本编辑器——Sublime Text,目前它的版本号是3.X,所以也可以叫做Sublime Text3。

    之所以说它强大,一方面是它支持数十种语言的代码高亮,这为需要同时进行多种语言代码编写的前端开发提供了方面,不时也可以使用它来查看一下其他语言的代码;

    另一方面它的插件功能极其强大,安装不同的插件可以为编辑器提供更加丰富的功能,比如提供自动补全功能的SublimeCodeIntel插件、梳理Css代码格式的CSScomb插件、智能缩进功能的Alignment插件......插件的安装和管理也十分方便。

    最后说一下,在比较基础的前端开发中,我们可以用sublime同时编辑.html、.css和.js文件,十分方便。

    话不多说,下载地址:

    Sublime Text3

    (关于它的激活码,有经济能力的同学可以自行购买;选择不掏钱的同学也可以自行搜索一个,它的激活码可以重复使用。)

    Html的标签

    之所以把Html的标签放在最后说,是因为我会在接下来的文章中详细讲Html的标签,这里算是一个承上启下的段落。

    Html的核心就是标签,它就是用标签来描述网页的,先提出W3school的解释:

    W3school对HTML标签的解释

    这个解释给出了标签的形式,大家也可以看下面一段代码来了解一下具体形式:

    <pre>
    <!DOCTYPE html>
    <html>
    <head>
    <title>这是一段示例代码</title>
    </head>
    <body>
    </body>
    </html>
    </pre>

    以上这段代码是由Sublime自动补全的Html文件初始代码,其中第一行是HTML5标准的文档声明,后面的部分则是网页的实质内容。我们所写的整个网页的内容,都在<html>和</html>两个开始标签和结束标签之间。

    标签的作用是提供不同功能的网页部件,如前文所说的<style>标签就是为网页提供Css样式,<script>标签就是为网页提供脚本代码,还有更多的,比如<a>标签是提供超链接,<img>是在网页中插入图片,<video>是提供了视频......

    在接下来的文章中,我就会仔细地讲一下Html标签。

    最后

    最近才开始写博客,也不知道自己写的到底有没有人看喔。不过自己在写的过程中倒是学习了很多以前没有仔细注意的地方。

    如果你对我的文章有什么建议的话,欢迎提出来喔,我会积极改进的~

    另外,成都这两天月色挺美的XD

    相关文章

      网友评论

        本文标题:Html+Css基础概要(01)——Html介绍

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