首先,在正式介绍HTML前,我需要对能够在本站发现这篇文章的读者表示赞赞赞!因为,实际上你可能已经在某方面掌握了“HTML”,当然,这并不绝对,我们且往下看。
总起
我在这里将提起一个语法——Wikitext。也许很多人对这个词很陌生,或者说近乎不知道,但是我们可以换一个说法,翻译过来就是“维基文本”,作为语法的它,更多被人们称作Wiki语法,也就是大家在wikidot和fandom这类网站中所使用的一种为页面提供显示效果的语言,不用废话,wiki语法就是一种简化的HTML,甚至于说简化得不多,所以如果你掌握了HTML本身或者Wiki语法的任意一个,都将帮助你学习它们中的另一者。
唉,别过分激动,我没有足够的实力可以直接写出一份教学,本文旨在对“HTML”这个概念和它的结构进行基本扫盲,而不是直接地进行一个教学,在你确定了解这条以后,就可以往下看了。
什么是HTML?
“HTML”,江湖云“超文本标记语言”,即Hypertext markup language的翻译,它是一种在网页中普遍使用的语言类型,是一种标记语言,旨在将网络中的不同信息整合并表达。也就是一个链子,将不同类型的信息串联起来,用合适的方式呈现给观看者,它支持文本,图片,链接,动画,表格与表单等多种信息类型。
摘自百度百科
超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。
什么是超文本?不用乱想,人话:超链接,对对对就是现在这个东西,但和wiki表达的不一样,wiki中的超链接一般指我刚才给你的那个玩意,但HTML要宽泛很多了。
HTML实际上与CSS,JavaScript(即JS)一起列为三大前端必备小妙具,它们哥仨合起来给学习编程语言的人一顿暴击呜呜呜我都哭了。HTML,CSS,JS共同构成一个完整且酷炫的网页,它们的关系如下:
我这里提一嘴,但不用了解其他的,只用知道HTML在网页的功能就是了。
HTML可以干什么?
HTML能干的事情很多了,它可以和CSS(甚至JS都可能不必要)一起组成:网页,应用内小程序等,甚至最新的HTML5可以依靠一个程序来编写一个应用客户端!
为什么我说最新的HTML5才可以编写客户端呢?
因为HTML主要服务于B/S架构,说白了就是浏览器页面,它相对于C/S架构(也就是客户端,应用本身)的好处就是大多数情况下是热更新,维护成本小,最主要的就是它根本不挑你的设备——你有个浏览器有个网址就行,就能进!不像客户端一样,什么apk,exe这些后缀类型,它们都需要不同的编程语言进行编写,在跨平台时还需要转化和重新编程(最直接的例子就是Minecrft,它的Jvav版和badrook版之间,都知道Jvav版用Java语言来写,基岩版用C++,它们的转化非常麻烦)哎呦我我都眼花——但是,网页编程只需要你会一个语言就行,那就是HTML。
HTML的构成?
HTML东西不算多,它没有各种高深的语言,一个东西——标签,也称元素,就这一样东西就可以各种组合成为基本的网页,在用CSS进行美化,JS进行行为编译就可以构成网页,我这里举一个例子。
<marquee>
我是坏坏人
</marquee>
它的运作效果可以在wiki中呈现,在前后添加[[html]]与[[/html]]就可以实现,像这样:
效果是走马灯,就是个简单的动画,这就是它的默认效果,很简单很简单。
我们看上面的结构,我们将整个这一段代码称为“标签”,其中前后<>内包含的marquee和/marquee称作标签名,里面的文本叫标签体,最前面的标签名叫起始标签,带/的内个叫结束标签,你看到这里可能会感到很熟悉:
[[span]]我嘞个wiki语法啊[[/span]]
哎嘿你看这不就懂了,它的基本结构和wiki语法是相近的,甚至我可以给你这样一个例子。
<span>这是一个无意义包裹符号</span>
[[span]]你看我俩像不像?[[/span]]
这正印证了上面我的哪一段话呢?找找然后打在下面吧!(我用加粗进行了标记,不至于太难找)
现在我给出刚才输入框的html标签,它只有一个部分:
<input>我已经说了,一个标签有起始和结束两个,那它为什么只有一个部分呢?因为它是单标签,大部分的标签都是起始结束两个,叫双标签,但是有的只有一个,就是单标签。
和wiki相似,HTML也有属性一说,但是中分的wiki语法教程中忽略了这一部分,比如一个div块
<div>
我是div。
</div>在中分wiki教程中,它被省略了添加属性的部分,直接变成了类似这种
[[div class="dark-borderblock"]]
我是上面那个div的近亲,但上面那个无意义,我有意义,不是因为它是html我是wiki,而是因为它没有属性,我有class="dark-borderblock"这个属性。
[[/div]]
没错,在<div>中,我们也可以加一个属性,然后让它有意义,其中:class叫属性名,后面dark-borderblock叫属性值,当然不局限于div的class属性,上面的marquee也有一个举例的属性。
<marquee loop="1">
我只能跑一次,然后我就没了。
</marquee>
呈现这样的效果:
当然,一个标签可不止只有一个属性这么简单,不同的标签可能有同一种属性,一个标签也往往不止一个属性,有的标签甚至只有值,没有名,比如:
<input disabled>
<input>
像这样
这俩输入框中上面那个只能看,用不了,颜色也变成灰的了,就是被display这个沟槽的属性禁用了,有没有什么办法让它不变灰呢?
有!
CSS!
别担心,我说它只是为了说HTML的一个重要特性:默认效果不重要甚至无用,语义重要且最重要。
什么意思呢?我们用wiki的加粗来举例。
我看了一本书:《蜘蛛侠》
关键词就是蜘蛛侠这本书,那么加粗字体的语义就是表达这个是更重要的部分,是关键词!
但是在html语法中,一切默认效果都不重要(比如加粗字体粗细可以用CSS改成细狗字体粗细),使用加粗标签更多的是为了在代码中表现这段话很重要,所以才用加粗来表现。
一些HTML与Wiki语法对照:
<strong>我加粗了</strong>
**我也是!**
我也是!
<h1>我是大大的标题</h1>
+ 你猜我是什么标题?
你猜我是什么标题?
<div>块级元素包裹框,用了我,就代表这一行只能有我!</div>
[[div]]我也一样!但我在wiki里面一般都带了属性![[/div]]
[[div]]我也一样!但我在wiki里面一般都带了属性![[/div]]
<em>我斜了呜呜呜</em>
//你猜我为什么不笑//
你猜我为什么不笑
比较高级的:
<img src="http://backrooms-intapar-wiki-cn.wikidot.com/local--files/picturesave/WAYCard" alt="半周年奖品">
[[include component:image-block name=http://backrooms-intapar-wiki-cn.wikidot.com/local--files/picturesave/WAYCard|caption=半周年奖品]]
半周年奖品
特别注意:展示图片框在wiki内进行了优化,它默认显示了图片描述,并且用了更好的呈现效果,html呈现相对来说石了很多,它的描述一般只能在图片损坏时见到。
另外分享一个嵌入页面的标签:iframe,它是双标签,我们可以这么玩:
<iframe src="https://blog.hatsushigure.shop/OTTO" width=300 height=400 frameborder=0>
</iframe>
至于比较进阶的列表表格表单以及嵌套(其实就是允许共存的标签进行套娃在套娃),我就不列举了。所以你看——HTML就是那样!在某种方面,它和Wiki语法还差不多呢。
总结
如果你已经仔细地看完这篇扫盲文章——那么恭喜你,你不仅可以靠这篇文章进行扫盲,甚至可以在里面获取很多基本信息,当然,我要在这里提及一篇站内文章:HTML魔法宝典,它里面的那些代码,有的不仅用了CSS,甚至有的还使用的JS,所以如果你发现了它——包括上面那一道简答题,它们真的不是单纯的html,html真的没有看上去那么高深啊www。
那么,很高兴你可以看到这里并对HTML有了初步的了解,我们在这里先挂断。
对了我很想再说一下,marquee已经被弃用了因为跑马灯可以用CSS添加动画来代替所以你懂的。
它被绿了。

