这是笔者学习html的过程中的小小心得和体会,由于笔者也是前端初学者,能力有限难免出错,恳请各位读者看到有错误的地方多多包涵,也欢迎各位在评论区积极讨论。
严格来讲html并不算一种“语言”。html的文档可以以txt的形式保存,当使用浏览器打开时便自动转化为一个网页。html以各种tag组成,在我看来,就如在一个花盆(文件)内插花。
html的语法总的来说是由标签组成,格式是<element name="value">
,其中element规定了这个标签的类型,name是这个标签的属性名,value是属性值。如果一个标签有内容,会使用<> </>
的格式
插花的基础是一个花篮,花瓶,抑或是花盆等载体。这就是头部的声明<!DOCTYPE html>
和把整个html文件框起来的<html></html>
。
然后我们在插花前要对载体预处理,包含在<head></head>
里。其中最关键的是编码声明和标题,举例如下:
<head><meta charset="utf-8"><!-- 注释:这是编码说明 --><title>标题</title><!-- 这是文章标题 --><link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
当然也可以像例子中一样使用link标签链接外部样式表。样式表可以理解为为插花拍照的滤镜。后面会再提到。
然后我们要开始将各种花插到花瓶中,花瓶就是html文件的<body>
tag。
<body><p>醛基的测试网页!</p>
</body>
<p></p>
代表的是一个段落,而其他的tag可以去这个链接里面看看。
当然我们并不止步于普通的黑白文字,我们可以对一个对象元素做处理,比如:
<p style="color:red">我是红色!
</p>
如果要对一类元素进行处理,可以使用class属性和样式表
<body><h1 class="redcolor">我是红色!</h1><p class="redcolor">我也是红色!</p>
</body>
<style>.redcolor{"color:red"}
</style>
如果对单个元素进行处理,也可以用id属性,在书写样式表的时候也要加以处理,如:
<body><h1 id="redcolor">我是红色!</h1>
</body>
<style>#redcolor{"color:red"}
</style>
这一部分要是进行深入的学习,就要涉及到css的知识。但是如果不对css也进行学习,单纯用html写出来的东西非常简陋。就像插花也不是一把大剪刀把花掰扯下来堆一起就好了的,优秀的插花工人会对花进行修饰润色。
css能做的不仅仅是静态的展示,也可以做到一很多动态的展现。但是如果说要在网页上进行较强的交互,就需要javascript脚本等其他工具的帮助。此时不单单是简单的插花了,花瓶中有蝴蝶蜜蜂飞舞。当然笔者自己也还没对此深入了解过,也希望在下一篇文章中能与大家分享有关的知识~