Subilan's Blog

不敢去想象未来


Explore Me
Subilan
Subilan's Blog
不敢去想象未来
13
4
25
HTML 入门教程 [1]
技术 Subilan · 3月前
超文本标记语言Hyper Text Markup Language

HTML,是一种以 XML 文件结构为原型的标记语言。「标记语言」不能算是编程语言,因为它的一切都是提前预设好的,仅仅是需要人们来撰写与记录自己所需要的信息而已。

HTML 是纯文本文件,并且一般不可能被使用作二进制。它能够被浏览器打开并解析。它的主体由标签构成。这些标签可以构成内外分明的数据结构,遵从「三明治语法」。

HTML 是 Web 开发的基础,一般来讲,HTML 在真正的开发中没有任何实际用途,仅仅是当作底层来使用。也就是说,Web 开发的主体不是 HTML,而目标则是 HTML。

基本符号与结构

HTML 的基本符号是 <>,在这其中加上标签名字,代表不同的意思。比如我们可以写 <a>,那么这就代表一个 a 标签(不能叫作标签 a)。为了遵从三明治语法,我们有开端就必须有结尾,否则可能导致「标签域泄露」。那么,一个完整的 a 标签结构应该是这样的 <a></a>

但是这是一个空的标签,因为它没有任何内容。一般地,我们将一个标签分成如下几个部分:

<a attr(ibutes)="attrValue">value</a>

可能部分没有接触过的新手会很懵逼,attr(ibutes) 是什么?为什么要打括号?

Attributes 是英文中的「属性」,可以被缩写为「ATTR」,因此打括号。后面的 attrValue 则代表这个属性的值。比如一个属性叫作 id,那么把它的值规定为 1,那么我们就说

这个标签的 id1

value代表这个标签本身的值,可以缺省,代表无内容或者使用 CSS 进行替换(这需要等到后期再讲解)。以下我们看个例子:

<a id="1" class="2" data="3" href="http://www.google.com">GOOGLE</a>

在这个例子中,我们可以说

这是一个 id1class2data3hrefhttp://www.google.coma 标签,它的值为 GOOGLE

嵌套结构

XML 具有的特性就是可嵌套,这样也赋予了它可以表示多重数据结构的特性。例如

<a>
    <a>
        <a>
        </a>
    </a>
</a>

虽然这种写法按现实来看,没有任何的意义,但是实际上却能带我们来了解这种结构。

以上结构中嵌套了三个 a 标签,因为它们都是相同的,我们可以赋予它们不同的属性来区分它们:

<a id="1">
    <a id="2">
        <a id="3">
        </a>
    </a>
</a>

那么,我们就可以通过 id 的值来确定它们了。我们这个时候可以说

  1. id1 的是所有元素父元素
  2. id2 的是 id1 的子元素。
  3. id12 的都是 id3 的父元素,而 id2 的则也是它的直系父元素
  4. id1 的是所有子元素的根元素

在编程中,一般我们熟悉用家庭关系来表示数据之间的继承关系和相互之间的结构。上方出现的四个名词,在这里统一解释:

元素Element

元素是对标签的一种严肃的、消歧义的、专业的称呼。「标签」指的是诸如 <a><2142354kqwjiw><arrr><?><<>> 此类的内容,而元素的将标签严格限定在 HTML 的标准内。一般的标签是没有任何含义的,比如<2142354kqwjiw>,你指望它能表达些什么呢?

于是 HTML 就有了一个标准,特定的标签表达特定的东西,并且具有不同的数据结构和不同的用法。例如 <a> 专门表示「超链接」,<p> 专门表示文章段落等。这些含有实际意义的标签,就叫做元素。

在本文中,假定所有标签都有含义,因此都称为元素

子元素Child

子元素是一种相对的关系,代表相对于某一个元素来讲,这个元素如果属于与它是包含关系或者容纳关系,那么我们这个元素是它的子元素。

例如 <a id="1"><a id="2></a></a>id2a 元素就是 id1a 元素的子元素。

父元素Parent

父元素与子元素表达的意思完全相反。同样是上面的例子,<a id="1"><a id="2></a></a> 中,id1a 元素就是 id2a 元素的父元素。

需要注意的是,无论嵌套多少个,比如 <a><b><c><d><e></e></d></c></b></a>,我们仍然可以说 e 元素是 b 元素的子元素,c 元素是 e 元素的父元素。

直系Lineal

直系指的是为相邻的两个元素之间的关系。比如 <a><b><c></c></b></a>,那么其中 a 就是 b 的直系,b 也是 a 的直系,所以我们说ab 互为直系。而 ac 就不是直系。

直系可以用来修饰子元素、父元素等,来扩展它们原有的意思和范围。

根元素Root

根元素常常是指最外围的元素。上面的例子 <a><b><c><d><e></e></d></c></b></a> 中,我们可以说元素 a 是所有子元素的根元素。

本期总结

本期中大概是介绍了「什么叫作标签?」、「什么叫作元素?」和「元素之间的关系」。在下一期中,将会介绍各种常用的 HTML 标签,HTML 语言的学习之旅也就此正式开始。

许可协议

本教程系列所有文本均遵从 MIT 协议,即允许任何用途(包括商用),但是必须注明作者。

飞驰人生观后感
飞驰人生高清海报合集我不是想赢,我只是不想输。今天我又看了第二部电影:飞驰人生。其实才开始我不知道我
3月前 · Subilan
流浪地球观影后感
就在几个小时之前,我走进了电影院,开始观看我略有期待的流浪地球。自去年年底,我就看到了流浪地球的海报
3月前 · Subilan
基本都下班了
Subilan · 3月前

好了,又弃坑了这么长的时间。回来一看,换主题啦~这个主题是蚊子大佬的作品 Candy-Rebirth,看起来非常非常不错呀。

当然,我非常喜欢改主题,所以这个主题也当然被我改过(都是没技术的锅,不会写主题Orz)。改过的内容当然很微小,毕竟我也只会这样改改。首先是增加了 material-icon 的字体和相关的 CSS 类,然后把能换的字体给换成了 Roboto。

并且我刚刚才发现居然可以直接用 less 当 css 来用(?),less 简直方便到逆天了有没有!

目前的问题就是以前主题的友链、关于页面内的自定义样式全部一起被换走噜。以及如果不是 https 访问博客会导致样式丢失(话说我记得我加了强制 https 啊?!)所以我要想办法来还原。博客还是这个博客,换上了这么漂亮的主题,我一定会继续坚持下去的咕!

背景是47姐姐立华奏。这个背景还行吧...反正有时间再换。啊啊啊思琪姐姐!!

Eascripto 概述
日常 Subilan · 5月前

想了很久,还是写下来了呢...

往事

许久之前,我计划过一个项目。因为当时了解一点半吊子的脚本,于是想要用自己的现有的技术,来编写一个项目,让更多的人能够不仅限于网络上的那些晦涩难懂,跳跃性过大的教程(例如突然提出函数这个定义,然而很多人都会觉得莫名其妙,为何说数学又不是数学,他们根本不知道括号里面的叫做参数列表。)以及过于高估读者的书籍(例如 C++ Primer)来学习编程。

因此我打算编写一个属于自己的项目,用自己的知识和相关的资料搜集,整理成一个任何人都能懂得的教程合集。只可惜当时并没有什么条件,于是仅限于在 Microsoft Word 中发布,因为格式和排版问题,后来我放弃了,就搁置了这么长时间。

后来因为一次偶然的机会,我接触上了 Web 开发,我开始发现它比任何计算机语言都要简单易懂(虽然有的是挺复杂),后来接触到了 MDUI 前端框架,便爱不释手,于是想要搭建一个网站。同时我开始意识到所谓的格式、排版、样式问题等,在网页这种实现方式面前都一一化解,于是我果断开始了开发。

基础开发

基础开发是从今年的 9 月份开始的,8 月 31 日购买了域名eascripto.cc(这个名字来源于头脑风暴)。原先的页面,由于我对 MDUI 不是很熟悉,于是借助的 DW 模板开始了生搬硬套之旅。最后做出来的网页自我感觉良好,但是展示给别人看后... 果然被喷得很惨。

后来我开始学习 MD 规范,更多地去翻阅 Docs,于是我知道了如何去搭建一个看起来顺眼的 Material UI 网页。现在的 Eascripto 已经与往日相比,有了不小的改进。

今日的 Eascripto

网站基本框架

之前的文章中已经介绍过的 Markdown 实现方法,就是在 Eascripto 内得到引用的,因此 Eascripto 的编写在框架完成以后是非常的容易。

整个网页分为两个部分,一个是首页,一个是 Reader,然而它们之间的区别并没有想象中的那么大。

另外在游乐的推荐下,我找到了 js-cookie,比 PHP 的 Cookie 更好用的 Cookie,于是成功做成了夜间模式。

Github 开源

其实也就是个宣传的作用,并不觉得有多少用处。如果你有兴趣,可以去这里

点击图片可以前往 Eascripto 官网。
Eascripto