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

如果要单讲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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • 引言 在日常开发Android中,很多时候会遇到和WebView打交道,对CSS HTML JS不是很清楚的话是完...
    张文靖同学阅读 2,828评论 0 11
  • 1、HTML介绍 1 2、Html和CSS的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户...
    夏沫xx阅读 1,356评论 0 8
  • 这是很久以前看过的一部影片“Les Choristes”,译名为放牛班的春天。名字译得很巧妙,读着就有浓浓的...
    一一木木1阅读 190评论 0 0